Web制作者は要チェック! Chrome 119で追加された、疑似クラス、相対カラー構文など4つの新しいCSSの機能
Post on:2023年11月2日
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
疑似クラスは正しい入力を持つ要素を表しますが、ユーザーがその要素を操作した後にのみマッチします。
1 2 3 4 5 6 |
input:user-valid { border: 1px solid green; } input:user-invalid { border: 1px solid red; } |
この2つの疑似要素は:valid
と:invalid
に似ていますが、ユーザーが要素を操作した後のみという制約が追加されています。
サポートブラウザはSafari, Firefoxではすでにサポートされており、Chorme 119, Edge 119でサポートされました。
CSSの相対カラー構文(RCS)
CSSの相対カラー(CSS Relative colors)構文を使用すると、デベロッパーは他の色のパラメータを変更してカラーを定義できます。
相対カラー構文は設定した色を相対色に変換します。変換には、from
という新しいキーワードを使用します。ブラウザは元の色を変換して分解し、新しい色の定義で使用する変数として提供します。
1 2 3 4 5 |
.syntax-introduction_same-colors { color: green; color: rgb(0 128 0); color: rgb(from green r g b); } |
詳しくは、CSS relative color syntaxをご覧ください。
サポートブラウザはSafariではすでにサポートされており、Chorme 119, Edge 119でサポートされました。
CSSのclip-pathで「geometry-box」値
CSSのclip-path
プロパティで、クリップの参照ボックスを制御するための<geometry-box>
値がサポートされました。これによりclip-path
は使いやすくなります。
<geometry-box>
値は基本的なシェイプと一緒に使用することもでき(たとえば、clip-path: circle(50%) margin-box
)、指定したボックスにクリップするために単独で使用することもできます(たとえば、clip-path: content-box
)。
1 2 3 4 5 6 7 |
clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; |
CSSのclip-pathで「xywh()」と「rect()」値
CSSのclip-path
プロパティで、xywh()
値とrect()
値がサポートされました。これにより、長方形や角丸長方形のクリップを簡単に設定できるようになります。
1 |
clip-path: xywh(20px 20px 100% 100% round 10%); |
clip-path
について詳しくは、下記をご覧ください。
sponsors