Web制作者は要チェック！ Chrome 119で追加された、疑似クラス、相対カラー構文など4つの新しいCSSの機能

11/1にリリースされたChrome 119で、新しい疑似クラス、相対カラー構文など、4つの新しいCSSの機能が追加されたので、紹介します。

New in Chrome 119
Chrome 119 beta

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

• Chrome 119で追加された4つの新しいCSSの機能
• CSSの疑似クラス「:user-valid」「:user-invalid」
• CSSの相対カラー構文(RCS)
• CSSのclip-pathで「geometry-box」値
• CSSのclip-pathで「xywh()」と「rect()」値

Chrome 119で追加された4つの新しいCSSの機能

11/1にリリースされたChrome 119で4つの新しいCSSの機能が追加されました。対象となるChrome 119は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。

以下、その4つの新しいCSSの機能を紹介します。

CSSの疑似クラス「:user-valid」「:user-invalid」

:user-valid疑似クラスは誤った入力を持つ要素、:user-invalid疑似クラスは正しい入力を持つ要素を表しますが、ユーザーがその要素を操作した後にのみマッチします。

この2つの疑似要素は:validと:invalidに似ていますが、ユーザーが要素を操作した後のみという制約が追加されています。

サポートブラウザはSafari, Firefoxではすでにサポートされており、Chorme 119, Edge 119でサポートされました。

:user-validのサポートブラウザ

:user-invalidのサポートブラウザ

CSSの相対カラー構文(RCS)

CSSの相対カラー（CSS Relative colors）構文を使用すると、デベロッパーは他の色のパラメータを変更してカラーを定義できます。

相対カラー構文は設定した色を相対色に変換します。変換には、fromという新しいキーワードを使用します。ブラウザは元の色を変換して分解し、新しい色の定義で使用する変数として提供します。

詳しくは、CSS relative color syntaxをご覧ください。

サポートブラウザはSafariではすでにサポートされており、Chorme 119, Edge 119でサポートされました。

CSSの相対カラーのサポートブラウザ

CSSのclip-pathで「geometry-box」値

CSSのclip-pathプロパティで、クリップの参照ボックスを制御するための<geometry-box>値がサポートされました。これによりclip-pathは使いやすくなります。

<geometry-box>値は基本的なシェイプと一緒に使用することもでき（たとえば、clip-path: circle(50%) margin-box）、指定したボックスにクリップするために単独で使用することもできます（たとえば、clip-path: content-box）。

CSSのclip-pathで「xywh()」と「rect()」値

CSSのclip-pathプロパティで、xywh()値とrect()値がサポートされました。これにより、長方形や角丸長方形のクリップを簡単に設定できるようになります。

clip-pathについて詳しくは、下記をご覧ください。

CSSのclip-pathプロパティでいろいろ簡単に実装できる、便利な使い方と実装のポイント