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

Chrome 122に追加された、CSSの新しい機能3つを紹介します。
今回のアップデートは新しいプロパティを使えるようになったではなく、既存のものの仕様が変更されたという感じです。ここで紹介する機能はデフォルトで、有効になっています。

Chrome 122 beta
New in Chrome 122

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

• はじめに
• サポートされていない機能を含む@containerクエリは一致しない
• CSSの::backdrop擬似要素は初期値を継承します
• CSSの@importのsupport()条件をサポートします

はじめに

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

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

サポートされていない機能を含む@containerクエリは一致しない

サポートされていないクエリを含む@containerセレクタは、コンテナを選択しません。つまり、コンテナは決して一致しません。

たとえば、下記のようにwidthクエリにマッチするサイズコンテナがあったとしても、unknownのように未知のクエリがあると、どのコンテナとも一致しません。

これは前方互換性の問題を避けるための仕様への最近の変更です。

@containerについて詳しくは、下記をご覧ください。

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

CSSの::backdrop擬似要素は初期値を継承します

これまで、::backdrop疑似要素は、初期値を継承していました。つまり、::backdropルーツで直接設定しない限り、::backdropはカスタムプロパティの値を使用できませんでした。

この仕様が変更され、::backdrop疑似要素は元の要素から継承されるようになりました。この変更により、Chromeは新しい仕様に一致するようになります。

CSSの@importのsupport()条件をサポートします

CSSの@importは、supports()条件を受け入れるようになります。supports()条件が一致しない場合は、インポートは取得されません。

supports()内に記述する機能クエリは、@supportsで使用されるクエリと同じです。

@supportsについて詳しくは、下記をご覧ください。

CSS @supportsの知っていると便利な使い方のまとめ