ウェブブラウザ「Google Chrome」の最新安定版であるバージョン118.0.5993.71がリリースされました。CSSにおいて特定範囲のみにルールを適用できる「@scope」がサポートされたほか、「scripting」と「prefers-reduced-transparency」という2つのメディア特性の追加や開発者ツールの機能向上などのアップデートが行われています。

New in Chrome 118 - Chrome for Developers

https://developer.chrome.com/blog/new-in-chrome-118/

New in Chrome 118: the @scope CSS rule is here, scripting and prefers-reduced-transparency, & more! - YouTube

◆CSSで「@scope」ルールがサポートされる

CSSのスタイルルールの適用範囲を特定のノードの子孫に限定できる「@scope」構文がサポートされました。例えば下記のような構造のページがある場合を考えてみます。



@scopeを使用しない場合、CSSのどのルールが適用されるのかについては詳細度によって決定されます。下記のCSSを上のページに適用してみます。



直感的には「Different pink!」の文字は「pink-theme」クラスの直下にあるのでhotpink色になりそうなものですが、上記の2行のCSSはどちらも詳細度が同じなのでより下に記載されているルールが優先されてしまい、「Different pink!」という文についてもlightpink色で表示されます。



@scopeを使用すると「近接性」を元にどのルールを適用するかを決めることができます。



「Different pink!」から見ると「lightpink-theme」クラスは「親の親」という関係で2ノード離れているのに対し、「pink-theme」クラスまでは1ノードのため、hotpink色のルールが優先されるようになりました。



@scopeのメリットは近接性という新たな優先順位の指標を導入するだけではありません。これまではクラス名の重複を避けるためにブロック名を入れるなどの工夫が必要で、クラス名が長くなってしまっていました。



@scopeを使えばスタイルルールの適用範囲が限定されるため、重複を気にせずクラスを命名できます。



「to」を使用して@scopeの終了位置を指定することも可能です。スコープ内にtoの後ろで指定されたノードがある場合、そのノードの子孫についてはスコープの範囲外となります。



上記のCSSを下記のページに適用してみます。



「.click-here」「.link-here」内のノードがスコープから外れている事が確認できます。



◆メディア特性で「scripting」および「prefers-reduced-transparency」をサポート

「scripting」を使用するとJavaScriptなどのスクリプトが利用可能かどうかに応じてページのスタイルを変更することが可能です。



「prefers-reduced-transparency」では透明度を低減する設定を有効にしているユーザー向けに別のスタイルを設定することができます。



その他のメディア特性同様、開発者ツールの「レンダリング」タブでエミュレートすることが可能です。



◆開発者ツールの「ソース」パネルを改善

ソースパネル内で編集した内容を直接ソースファイルに同期させることが可能になりました。



また、インラインJavaScriptを整形して表示したり、「ページ」「Workspace」などのタブの順序をドラッグ＆ドロップで入れ替えたりする機能が追加されています。



◆その他の変更点

・WebUSB APIの利用範囲拡大

拡張機能によって登録されたService WorkerからWebUSB APIが利用できるようになりました。

・決済フローの改善

「Payment Request」および「Secure Payment Confirmation」において、ユーザーが当該ページをアクティブに閲覧中であることを必要とする「ユーザーの有効化」要件が削除されました。

・Chromeのリリースサイクル短縮

Chrome 119からは3週間ごとに新規バージョンがリリースされるようになります。

また、Google Chrome 118には20件のセキュリティバグフィックスが含まれています。

なお、次期安定版の「Google Chrome 119」は現地時間の2023年10月31日にリリース予定です。