CSSの新機能として実装された「@scope」ルールについてまとめました。デザイナー、コーダー、フロントエンドエンジニアの方は要チェックです。※Google Chrome 118安定版リリース時の記事です
@scopeとは?
@scopeはCSSにおいて、スタイルが適用される範囲を明示的に指定するものです。適用ルールをCSSファイル内の一つのブロックにまとめることで可読性を高め、保守性を向上する意図で策定が進められています。
例えば以下の例では、特定のセレクタ(<header>
)の子孫要素の<span>
にのみスタイルが適用されます。
@scope (header) {
span { color: red;}
}
@scope(セレクタ){}
で大枠を囲い、中にはいつも通りCSSのプロパティを指定してあげればOKです。@media
や@supports
と同じ感覚で使用することが出来ますね。下記と同義になると思います。
header span {
color: red;
}
便利な点は「header
」の指定を毎回書く必要がなくなるということですね。下記のようにまとめてしまえば、各ブロックすべてにheader
という記述をしなくて良くなります。
@scope (header) {
span {
color: red;
}
a:hover {
text-decoration: green wavy underline;
}
.logo {
width: 20%;
height: auto;
}
}
また、以下のようにスタイルがバッティングするときは、@scopeで指定したセレクタからの階層の深さが浅い方が適用されます。
@scope (header) {
span.kore { color: red;}
}
/* ↑と↓でスタイルがバッティング */
@scope (body) {
span.kore { color: blue;}
}
上記の例ではheader span.kore{}
とbody span.kore{}
が干渉してしまっています。通常のCSSの記述であれば、body span.kore{}
の方が強いので文字色は青になります。
しかし、この@scope
では深度が浅い方が適用されるので文字色は赤となります。利用が一般的になったら結構混乱しそうですね。
@scopeの対応ブラウザ
2023年10月時点では、対応ブラウザは最新のGoogle Chromeしかありません。残念ながらクロスブラウザ対応が必要な場合にはこの@scopeルールは使うことが出来ません。
【参考】https://caniuse.com/css-cascade-scope
@scope
とよく似ている:scope
がありますが、:scope
は主要ブラウザすべて対応済みとなっています。混同しないように注意しましょう。@scope
は現状ではあまり使う機会がないかもしれません。ただし、Chromeでのみ利用するGoogle Chromeの拡張機能などを制作するのであれば、利用を視野に入れても良さそうです。
PC
ブラウザ | 対応 |
---|---|
Firefox | × |
Edge | × |
Safari | × |
Chrome(118~) | 〇 |
スマホ
ブラウザ | 対応 |
---|---|
Android Firefox | × |
Android 埋め込みブラウザ | × |
iOS Safari | × |
Android Chrome | × |
スマホも非対応なので、@scope
はまだ使わないようにしましょう。
まとめ
対応するブラウザがほぼ無いのでまだ使う機会がないですが、実装後に使えるように@scope
の存在だけ意識しておけばよいかなと思います。そこまで便利でもないのであってもなくても変わらないかなという印象を受けました。CSSの入力文字数、ファイルの容量はかなり少なくなるかなとは思います。