Web制作者必見の便利な機能が追加！ Chrome 134で新しく追加された5つのCSSの機能

Chrome 134で追加された、CSSの新しい機能5つを紹介します。
今回のアップデートで目玉となるのは、dialog要素にclosedby属性が追加されダイアログの閉じる動作が制御可能になり、select要素のスタイルができるようになり、ハイライト継承がより直感的になるなど、Web制作者必見の便利な機能が追加されています！

New in Chrome 134
Chrome 134 beta

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

• はじめに
• CSSのdynamic-range-limitプロパティ
• select要素がCSSでカスタマイズ可能に
• ダイアログのクローズ動作
• CSSのハイライト継承がより直感的に
• :has-slotted疑似クラス

はじめに

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

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

CSSのdynamic-range-limitプロパティ

CSSのdynamic-range-limitを使用すると、ページでHDRコンテンツの最大輝度を制限できるようになります。

dynamic-range-limitプロパティのサポートブラウザ

select要素がCSSでカスタマイズ可能に

HTMLのselect要素のカスタマイズ機能が追加されました。
appearanceプロパティの値をbase-selectにして新しい動作をオプトインできます。オプトイン後は、画像などを含むリッチコンテンツを追加し、オプションでスタイルを設定することもできます。

appearanceプロパティのサポートブラウザ

ダイアログのクローズ動作

Popover APIの素晴らしい機能の一つは、ライト・ディスミス ビヘイビアです。この機能はdialogにも同じ機能をもたらし、closeby属性が動作を制御します。

• <dialog closeby=none>: ユーザーがトリガーしたダイアログのクローズは一切行われません。
• <dialog closeby=closerequers>: ESCキーを押すと、ダイアログが閉じます。
• <dialog closeby=any>: ダイアログの外側をクリックするか、ESCキーを押すと、ダイアログが閉じます。popover=autoと同じ動作です。

CSSのハイライト継承がより直感的に

CSSのハイライト継承では、::selectionや::highlightなどのハイライト疑似クラスは要素チェーンではなく、疑似ハイライトチェーンを通じてプロパティを継承します。その結果、ハイライトのプロパティの継承がより直感的なモデルになります。

実際の動作は、デモページでご覧ください。
※Chrome 134でご覧ください。

See the Pen
CSS ::selection inheritance demo by coliss (@coliss)
on CodePen.

:has-slotted疑似クラス

CSSの:has-slotted疑似クラスは、テキストノードや要素などのスロット付きコンテンツを持つスロット要素を表します。:has-slotted疑似クラスを使用すると、スロットのフォールバックコンテンツを使用しているかどうかに基づいて要素のスタイルを設定できます。

:has-slotted疑似クラスのサポートブラウザ