要約

  • 2021年のW3C初公開草案は@scopeでスタイルの範囲を定め、根への近さを競合の判断に使う案を示した。当時は根セレクターの詳細度も内部ルールに加算した。
  • 2023年以降の草案は根の詳細度を内部へ渡さず、境界と優先順位の仕事を分けた。2024年版は下限となる要素の扱いや距離の測り方をさらに明確にした。

ページの中に二つの仕事場があると考えてみる。親カードのボタンは青、入れ子になった展示カードのボタンは珊瑚色。祖先の名前を長く並べたセレクターなら区別できるが、カードを別の場所へ移せば住所録を書き直す羽目になる。ツールが各要素へ固有の属性を配る方法もある。これでは小部屋のボタンを守るために、部屋のコップまで名札を着ける。CSS自身が境界を知れば、もっと素直に書けるはずだ。

2021年12月21日のW3C初公開草案は、要素ごとにdata-scopeを付ける例と、根に境界を置く@scopeの形を並べている。開始点を指定し、必要なら下限も指定する。中には通常のスタイルルールを書く。共通の仕組みが木構造の距離を測れば、入れ子のカードでどちらの根が近いかも判断できる。画面の見た目の距離ではなく、要素をたどる段数の話だ。

ただし最初の境界は、力まで配っていた。2021年案では@scope (#hero)という根のIDセレクターが、内部のimgルールの詳細度に上乗せされる。庭に柵を建てると、庭の椅子まで特別な階級をもらうようなものだ。近接性を詳細度より強く扱うか弱く扱うかも検討中だった。仕様書の同じ構文を見ても、版が違えば勝敗の計算が違い得る。

2023年3月21日の草案では重要な整理が行われた。範囲の開始点を示すセレクターは、内部ルールの詳細度を増やさない。仕様の例では@scope (#hero) { img { ... } }と:where(#hero) img { ... }がともに(0,0,1)だ。#heroは門の位置を決め、点数を取るのはimgだけ。どこで働くかを決めることと、競合するルールにどれだけ強く出るかは、別の判断になった。

to (...)を使えば、外側の範囲が内側の区域へ入る前に止まる線も引ける。親カードの塗装係は門の手前でローラーを置き、小さなカードの作者が自分のボタンを仕上げる。複数の範囲が重なり、同じ要素へ規則が届く場合には、カスケードの所定の段階で根への近さが働く。近くの作者が常に何にでも勝つという話ではなく、共通の順位付けの中で距離が役割を持つ。

2024年9月6日の草案は、下限に一致する要素を範囲から外し、近接性を一つの根から対象要素までの測定として説明した。変更履歴には強い近接性の案を外したこと、最初の案にあった根の詳細度加算を取り除いたことが記されている。もう一つ大事な線引きもある。@scope内の@keyframesや@font-face、@layerといった名前を定義するルールは全体で通用する。内部のスタイルルールが範囲に従うのであって、CSSの名前すべてに私有地の札が付くわけではない。

W3Cの公開履歴は2021年、2023年、2024年の改訂を示し、CSS Working Groupの2024年の案内も@scopeをこの段階の新しい仕事として紹介した。境界を作ること自体より、境界に余計な権威を与えない設計へ移った点が印象に残る。外のカードは青いボタンを保ち、内側のカードには珊瑚色の決定を残す。名札は入口にあれば足りる。