Google Chrome 118に追加されたCSSルール「@scope」の基礎知識と使い方

業界NEWS

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~)
@scope対応ブラウザ(PC)

スマホ

ブラウザ対応
Android Firefox×
Android 埋め込みブラウザ×
iOS Safari×
Android Chrome×
@scope対応ブラウザ(スマホ)

スマホも非対応なので、@scopeはまだ使わないようにしましょう。

まとめ

対応するブラウザがほぼ無いのでまだ使う機会がないですが、実装後に使えるように@scopeの存在だけ意識しておけばよいかなと思います。そこまで便利でもないのであってもなくても変わらないかなという印象を受けました。CSSの入力文字数、ファイルの容量はかなり少なくなるかなとは思います。

タイトルとURLをコピーしました