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

業界NEWS

2023.10.11

CSSの新機能として実装された「@scope」ルールについてまとめました。デザイナー、コーダー、フロントエンドエンジニアの方は要チェックです。※Google Chrome 118安定版リリース時の記事です

@scopeとは？
@scopeの対応ブラウザ
1. PC
2. スマホ
まとめ

@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の拡張機能などを制作するのであれば、利用を視野に入れても良さそうです。