CSSの進化が止まらない！ Chrome 120で追加された7つの新しいCSSの機能

年末になっても、CSSの進化が止まりません！

先日リリースされたChrome 120で追加された7つの新しいCSSの機能を紹介します。JavaScriptをサポートしているかチェックできる新しいメディアクエリ、新しい指数関数、CSSネストの記述方法がより簡単になったり、要チェックです。

New in Chrome 120
Chrome 120 beta

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

• Chrome 120で追加された7つの新しいCSSの機能
• カスタムプロパティに対する<image>構文
• カスタムプロパティ用の<transform-function>および<transform-list>構文
• JavaScriptをサポートしているかチェックできる新しいメディアクエリ
• :dir()疑似クラスセレクタ
• CSSの指数関数
• CSSによるマスク
• CSSネスト構文の緩和

Chrome 120で追加された7つの新しいCSSの機能

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

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

カスタムプロパティに対する<image>構文

@propertyまたは、registerProperty()で登録されたカスタムプロパティに対して、<image>構文の使用がサポートされます。

<image>構文を使用すると、カスタムプロパティの値をurl()値とグラデーションなどで生成されたイメージに制限できます。

カスタムプロパティ用の<transform-function>および<transform-list>構文

@propertyまたは、registerProperty()で登録されたカスタムプロパティに対して、<transform-function><transform-list>構文の使用がサポートされます。

この構文を使用すると、トランスフォームを表すカスタムプロパティの値を制限できます。これにより、これらの登録されたカスタムプロパティでトランジションやアニメーションを直接使用できるようになります。

JavaScriptをサポートしているかチェックできる新しいメディアクエリ

スクリプティングメディア（scripting media）機能は、JavaScriptのようなスクリプト言語が現在のドキュメントでサポートされているかどうかをクエリするために使用されます。

有効なオプションは、下記の通りです。

• enabled
• initial-only
  ※ブラウザ内部ではマッチされません。
• none

:dir()疑似クラスセレクタ

CSSの:dir()疑似クラスセレクタは、HTMLのdir属性に基づいて決定される方向に基づいて要素にマッチします。

たとえば、:dir(ltr)は左から右へのテキストの方向にマッチし、:dir(rtl)は右から左へのテキストの方向にマッチします。

:dir()は、[dir]属性セレクタと同等ではありません。:dir()はdir属性を持つ祖先から継承された方向とマッチし、dir=auto（テキストの最初の文字から方向を決定する）の使用から計算された方向とマッチするからです。

CSSの指数関数

CSS Values and Units Module Level 4で定義されている指数関数、pow(), sqrt(), hypot(), log(), exp()がサポートされました。

CSSによるマスク

CSSのmaskプロパティ、およびそれに関連したプロパティ（mask-image, mask-modeなど）は画像を特定の形にマスクまたはクリッピングすることで、要素を部分的または完全に非表示にするために使用されます。

この機能は今までは-webkit-mask*プロパティとしていましたが、現在の使用に合わせて接頭辞を削除して使用できます。これには、mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, mask-compositeも含まれます。また、mask-imageのローカル参照がサポートされ、受け入れられる値が仕様と同じになりました。

CSSネスト構文の緩和

CSSネストはこの変更により、ネストされたスタイルルールに&記号を必要としたり、:is()で内包するのではなく、HTMLの要素をネストできるようになりました。

詳しくは、先日の記事をご覧ください。

朗報！ これでCSSネストの記述方法がより簡単になります