Web制作者は要チェック！ Chrome 130で新しく追加された4つのCSSの機能

Chrome 130で追加された、CSSの新しい機能4つを紹介します。
今回のアップデートではCSSネストがより便利になり、box-decoration-breakのサポート、コンテナクエリのフラットツリー検索など、Web制作者は要チェックです！

New in Chrome 130
Chrome 130 beta

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

• はじめに
• CSSコンテナクエリのフラットツリー検索
• CSSネスト: 入れ子になった宣言ルール
• プレフィックスなしのbox-decoration-breakを完全サポート
• ::part()の後に疑似要素と疑似クラスを許可

はじめに

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

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

CSSコンテナクエリのフラットツリー検索

コンテナクエリの仕様が変更され、フラットツリーの祖先を検索できるようになりました。

この変更はシャドウDOMにのみ関係し、要素は::part()や::slotted()を使用していない場合でも要素またはその祖先の1つがスロット化されたシャドウツリー内の非名称コンテナを参照できるようになります。

コンテナクエリについて詳しくは下記をご覧ください。

CSS コンテナクエリ（@container）の便利な使い方を解説

CSSネスト: 入れ子になった宣言ルール

CSSネストの利点は、セレクタを短くし、読みやすくなり、入れ子にすることでモジュール性を高めることができることです。ほぼ1年前からすべてのブラウザでサポートされています。

しかし、期待通りに機能しない場合もありました。たとえば、下記のCSSでは背景色が最後のgreenになるはずですが、実際はredが適用されてしまいます。

このようなケースを修正するために、CSSワーキンググループは入れ子になった宣言ルールを導入し、Chrome 130で実装されました。上記のCSSはChrome 130では期待通りにgreenが適用されます。入れ子のルールと素の宣言が混在している場合は、コードを再確認してください。

CSSのネストについて詳しくは下記をご覧ください。

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

プレフィックスなしのbox-decoration-breakを完全サポート

box-decoration-break: clone;のサポートがインラインフラグメント（行のレイアウト）とブロックフラグメント（印刷および段組のページ区切り）の両方に追加されました。

これまでのChromeでは、ブロックフラグメントではbox-decoration-break: slice;（初期値）のみがサポートされていましたが、インラインフラグメントではプレフィック付きの-webkit-box-decoration-breakプロパティを使用した場合のみbox-decoration-break: clone;もサポートされていました。

ChromeとFirefoxでは利用可能ですが、Safariではベンダープレフィックスが必要です。

::part()の後に疑似要素と疑似クラスを許可

::part()疑似要素を使用するCSSセレクタは、CSSの他の疑似要素（::part()を除く）や疑似クラスをその後ろに持つことができるようになります。コンバイネーターはまだ::part()の後に置くことはできず、ツリー構造に依存する疑似クラスも許可されません。

これまでのChromeでは、::part()の後には限られた疑似要素と疑似クラスしか許可されていませんでした。この変更により、許可されるべきすべての疑似要素と疑似クラスが許可されます。たとえば、::part(part-name):enabledや::part(part-name)::markerなどのセレクタも使用できるようになります。