What's new in Browsers!は、サイボウズのフロントエンドエンジニアがブラウザの最新情報から気になるトピックを紹介するシリーズです。
今回はChrome 118の更新内容から気になるトピックとして、@scopeとprefers-reduced-transparencyを紹介します。
@scopeでscopedなCSSが書けるように
新たなat-ruleである@scopeに対応しました。@scopeを用いるとスタイルのscope（影響範囲）を特定の範囲に閉じることができます。
通常CSSでは同じ詳細度のセレクタにマッチした場合、スタイルシード上でうしろに書いた（または後で読み込まれた）スタイルが適用されます。
次のようなHTMLとスタイル指定がある場合、どちらも詳細度が同じため、.blueの中にあるp要素はcolor: redが適用されます。
<div class="red">
<p>red</p>
<div class="blue">
<p>blue</p>
</div>
</div>
<style>
.blue p {
color: blue;
}
.red p {
color: red;
}
</style>
@scopeを使うとスタイルの影響範囲を特定の範囲に限定できるため、うしろに書いたスタイルが優先されるといったルールとは異なるルールでスタイルが適用されます。
<style>
@scope (.blue) {
p {
color: blue;
}
}
@scope (.red) {
p {
color: red;
}
}
</style>
この例は単純なscopeですが、@scope (.component1) to (.component2) {}といった構文を使うことで.compoent1から.component2までといった範囲を指定できます。
@scopeによって、これまで命名規則やCSS in JSなどを用いていたスタイルの影響範囲のコントロール手段が大きく変わるかもしれません。
ブラウザの実装状況・標準化の状況
@scopeは現状（2023-10-19）ではChromeとEdgeのみが対応しています。Firefoxは検討中でSafariは実装にpositiveなスタンスです。
@scopeはCSS Cascading and Inheritance Level 6の一部で、Editor’s Draftの段階にあります。
prefers-reduced-transparencyでユーザーが透明効果を望んでいるか検出できるように
@mediaに指定するメディア特性（media future）にprefers-reduced-transparencyが追加されました。これはprefers-color-schemeやprefers-reduced-motionなどに似たメディア特性で、ユーザーのOSやUAの設定状況などを検出するものの一つです。
prefers-reduced-transparencyはユーザーが透明または半透明な効果を減らす設定をしているかを検出するために使います。この設定を有効にしているユーザーは、コントラストや読みやすさの向上を目的としてると考えられるため、それに合わせてopacityやbackgroundの透明度などを調整するスタイルを指定できます。
.translucent_box {
opacity: 0.5;
}
@media (prefers-reduced-transparency) {
.translucent_box {
opacity: 0.9;
}
}
ユーザーの要求に合わせてアクセシビリティの向上が図れるメディア特性なので、これから利用が増えていきそうです。
ブラウザの実装状況・標準化の状況
prefers-reduced-transparencyは現状（2023-10-19）ではChromeのみがサポートしています。
Media Queries Level 5の一部として標準化が進んでいますが、Editor’s Draftの段階であり、ほかブラウザはまだprefers-reduced-transparencyに対して明確なスタンスを示していない状況です。
Media Queries: prefers-reduced-transparency feature - Chrome Platform Status
Discussion