CSS @scope ruleとは？（シーエスエスアットスコープ）意味・特徴をわかりやすく解説

Q: CSS @scope ruleとは？

2024年Chrome 118+/Safari 17.4対応。@scope (.card) { ... } scoped CSS+Donut Selector+Style Containment+CSS Module代替+Component Scoped CSS Native対応搭載。

概要

CSS @scope ruleは2024年5月にSafari 17.4で対応し主要ブラウザBaselineに到達した新CSS仕様で、CSSのスコープ(影響範囲)を制限する@scope at-rule。Vue/Svelte/Astroのscoped style・CSS Modules・CSS-in-JS(Emotion/styled-components)が解決していた「スタイルの局所化」問題を、CSS Nativeで実現する。@scope (.card) { p { color: red; } } のように記述し、.card要素配下のpにのみスタイル適用する。さらにDonut Selector(@scope (.card) to (.inner))で「ある要素から別の要素まで」の範囲限定も可能で、コンポーネント階層が深くなる場合も柔軟にスコープ制御できる。Chrome 118+/Edge 118+/Firefox 132+/Safari 17.4+で対応し、2026年5月時点でProduction採用に十分。

主な特徴・仕組み

@scope at-rule: @scope (.card) { ... } で指定要素配下にスコープ限定
Donut Selector: @scope (.card) to (.inner) で「.card内、.inner以外」のスコープ
:scope pseudo-class: スコープルート要素を参照、:scope { background: ... }
CSS Cascade Layers併用: @layer components { @scope (.card) { ... } } で優先度制御
@scope内nesting対応: CSS Nestingと併用、@scope (.card) { & p { ... } }
Donut Hole設計: 子コンポーネント部分をスコープ外に除外、独立スタイル可能
CSS Module代替: [class*=Component_module__hash] のセレクタ汚染なし
CSS-in-JS代替: JavaScript Runtime Cost ゼロ、Pure CSS実装
Bundle Size削減: Vue/Svelteのscoped style前処理不要、CSSサイズも縮小
Browser Support: Chrome 118+ Edge 118+ Safari 17.4+ Firefox 132+ Baseline 2024
Cascade Specificity: スコープ内の要素は外部より高優先度、SwiftまたはScopedな上書き可能

スペック比較表

項目	CSS @scope	Vue Scoped Style	CSS Modules	CSS-in-JS
実装	CSS Native	Vue前処理	Build前処理	Runtime JavaScript
Selector汚染回避	スコープ制限	data-v-hash属性	クラス名hash	JavaScript Runtime
Donut Selector	○	×	×	×
Browser Support	Baseline 2024	全ブラウザ	全ブラウザ	全ブラウザ
Bundle Size	0KB増	Vue Compile	Build処理	5-50KB Library
Runtime Cost	0	0	0	あり
Cascade Layers連携	○	×	△	△
学習曲線	CSS知識	Vue知識	Build設定	Library知識

具体例・対応製品

/* 基本的な @scope */
@scope (.card) {
  p {
    color: var(--text-primary);
  }
  /* :scope = .card 自身 */
  :scope {
    padding: 1rem;
  }
}

/* Donut Selector: .card内、.card-actions以外 */
@scope (.card) to (.card-actions) {
  /* .card-actions の内部はスコープ外 */
  p { color: blue; }
}

/* CSS Nestingと併用 */
@scope (.modal) {
  &amp; .header {
    background: gray;
    &amp; h2 {
      color: white;
    }
  }
}

/* Cascade Layers併用 */
@layer components {
  @scope (.btn) {
    :scope {
      padding: 0.5rem 1rem;
    }
  }
}

Chrome 118+ stable: 2023年10月リリース、フル機能対応
Safari 17.4+: 2024年3月リリース、Baseline到達
Firefox 132+: 2024年10月リリース、Baseline到達
Tailwind CSS 4.0+: @scope Pluginサポート、ユーティリティクラスとの併用
競合機種: Vue Scoped Style(Vue前処理)、CSS Modules(Webpack/Vite Plugin)、Emotion/styled-components(JavaScript Runtime)、Web Components Shadow DOM

自作PCでの選び方・注意点

CSS @scope ruleはWeb開発者向けの新CSS仕様で、jisaku.comのComponent System(React 19+TypeScript+Tailwind CSS 4)では Tailwindベースのユーティリティクラス中心設計のため、@scope の出番は限定的。一方、サードパーティJavaScript(Disqus・Twitter Widgets等)を埋め込む場合や、CMS Embed Widget・既存サイトへのComponent注入時に、グローバルCSS汚染回避策として有効。@scope (.embed-widget) { ... } でコンテナ要素配下にCSS スコープを完全分離できる。CSS Modulesからの移行では、Build時のClass Name Hash 不要+Bundle Size削減+Source Map単純化のメリット。Web Components/Shadow DOMはより強力なEncapsulationを提供するが、Light DOM(通常DOM)で動作するスコープ制限なら@scopeで十分。Donut Selectorは複雑なネストUI(Card内にButton、Buttonは外部スタイル維持等)で威力発揮。Chrome/Firefox/Safari全Baseline対応で、Production採用にBlockerなし。jisaku.comでは将来的にCSS Modules→@scope移行の検討余地あり、Bundle Size削減+Build時間短縮の効果が期待できる。

よくある質問（FAQ）

Q1: @scope と CSS Modules どちらを使うべき？ A: 既存プロジェクトでCSS Modules採用済みなら継続。新規プロジェクト+Modern Stack(Vite/Next.js 15+)+Browser Baseline 2024要件なら @scope の方がBundle削減+Build短縮で優位。

Q2: Donut Selector の実用例は？ A: Card UI内部に独立コンポーネント(Button・Avatar)がある場合、Cardのテーマカラーを内部全体に適用しつつButton/Avatarは外部スタイル維持。@scope (.card) to (.btn, .avatar) { ... } で実現、子コンポーネントの再利用性確保。

Q3: TailwindCSS 4 と @scope の関係は？ A: 直接競合せず補完関係。Tailwindはユーティリティクラス、@scopeはComponent内のCSSスコープ制限。Tailwindベースの中で @apply 使用箇所や3rd-party CSS埋め込み時に @scope を併用するのが理想的な使い分け。

まとめ

CSS @scope rule = 2024年Safari 17.4+ Baseline到達新CSS仕様
@scope (.card) { ... } で指定要素配下のスコープ限定
Donut Selector で「ある要素〜別要素」範囲限定可能
Vue Scoped Style/CSS Modules/CSS-in-JSのCSS Native代替
Chrome 118+/Edge 118+/Firefox 132+/Safari 17.4+ Baseline

CSS @scope rule（シーエスエスアットスコープ）

概要