CSSカスケードと継承 レベル6

1. はじめにと未記載のセクション

これは CSSカスケードと継承レベル5に対する差分仕様です。 現在は試験的な作業草案です。 実装を行う場合は、レベル5を参考にしてください。 レベル5の本文は、CRに到達した時点でこの草案に統合されます。

2. カスケード

カスケードは、指定された要素の特定プロパティに対する宣言値の順不同リストを、下記で定義される宣言の優先順位で並べ替え、単一のカスケード値を出力します。

2.1. カスケードのソート順序

カスケードは宣言を、優先順位の高い順に次の基準で並べ替えます：

起源と重要度

宣言の起源は、その出所と重要度（!importantで宣言されているかどうか）に基づきます（詳細は下記）。 各起源の優先順位は、次の通り高い順です：

1. 遷移宣言 [css-transitions-1]
2. 重要なユーザーエージェント宣言
3. 重要なユーザー宣言
4. 重要な著者宣言
5. アニメーション宣言 [css-animations-1]
6. 通常の著者宣言
7. 通常のユーザー宣言
8. 通常のユーザーエージェント宣言

このリストの早い順の起源の宣言が、後の起源の宣言より優先されます。

コンテキスト

文書言語は、異なるカプセル化コンテキストからの宣言の混合を提供できます。 例として、ツリーコンテキスト（シャドウツリー内）が該当します [DOM]。

異なるカプセル化コンテキストからの2つの宣言を比較する場合、 通常の規則では外側コンテキストの宣言が優先し、 重要な規則では内側コンテキストの宣言が優先されます。 この目的のために、[DOM]のツリーコンテキストは シャドウ含むツリー順としてネストされているとみなされます。

注: これは、通常の宣言が カプセル化コンテキストでデフォルト値を設定し、 外側コンテキストで容易に上書きできる一方で、 重要な宣言は カプセル化コンテキストで外側コンテキストから上書きできない要求を強制できることを意味します。

style属性

通常および重要な宣言について、 要素に直接付与された宣言（例：style属性の内容） は、スタイル規則のセレクターで間接的にマッピングされた宣言よりも 同じ重要度で優先されます。

レイヤー

宣言は、各起源やコンテキスト内で、 明示的にカスケードレイヤーに割り当てられます。 この段階では、明示的なレイヤーに割り当てられていない宣言は暗黙の最終レイヤーに追加されます。

カスケードレイヤー（宣言と同様）は登場順で並べられます。 詳細は§ 2.4.1 レイヤー順序を参照。 異なるレイヤーに属する宣言を比較するとき、 通常の規則では、レイヤー順で最も後のカスケードレイヤーの宣言が優先され、 重要な規則では、最も前のカスケードレイヤーの宣言が優先されます。

注: これは通常および重要な起源の優先順位の論理と同じです。 !importantフラグは両方の設定で「上書き」目的を維持します。

詳細度

Selectorsモジュール [SELECT]は セレクターの詳細度の計算方法を説明しています。 各宣言は、そのスタイル規則の詳細度と同じ詳細度を持ちます。 詳細度が最も高い宣言が優先されます。

スコープ近接性

異なるスコープルートを持つスタイル規則に現れる宣言を比較するとき、 スコープルートからスコープ付きスタイル規則の主題までの世代または兄弟要素のホップ数が最も少ない宣言が優先されます。 この目的のため、スコープルートがないスタイル規則は無限の近接ホップとみなされます。

出現順

文書順で最後に現れる宣言が優先されます。 この目的のため：

• スタイルシートは最終CSSスタイルシートの順序で並べられます。
• importされたスタイルシートの宣言は、スタイルシートが@import規則の位置に置き換えられたかのように順序付けされます。
• 文書によって独立してリンクされたスタイルシートの宣言は、ホスト文書言語の決定によるリンク順で連結されたかのように扱われます。
• style属性による宣言は、style属性が現れる要素の文書順に並べられ、全てのスタイルシートの後に配置されます。 [CSSSTYLEATTR]

カスケードの出力は、各要素の各プロパティに対する宣言値の（空の場合もある）ソート済みリストです。

2.2. カスケードの起源

CSS Cascading 5 § 6.2 カスケードの起源

カスケード起源

2.3. 重要な宣言: !important注釈

CSS Cascading 5 § 6.3 重要な宣言: !important注釈

重要 通常

2.4. カスケードレイヤー

CSS Cascading 5 § 6.4 カスケードレイヤー

2.4.1. レイヤーの順序

CSS Cascading 5 § 6.4.3 レイヤーの順序

2.5. スコープされたスタイル: @scope規則

スコープは、文書のサブツリーやフラグメントであり、セレクターによるよりターゲットを絞ったマッチングに利用できます。 スコープは次の判定により形成されます：

• スコープルートとなるノード（スコープの上限）および任意で：

• スコープ制限要素（スコープの下限）

要素がスコープ内であるのは、次の場合です：

• それがスコープルートの包括的な子孫であり、

• かつスコープ制限要素の包括的な子孫でない場合。

注: シャドウカプセル化は、 DOM内のシャドウホストとネストしたシャドウツリーの1対1の関係を永続的に記述しますが、 スコープは同じ要素に対して複数・重複して定義可能です。

スコープスタイルはCSSで @scope ブロック型at-ルールで記述されます。 これは、スコープルートおよび任意のスコープ制限を、スタイル規則のセットと紐付けて宣言します。

@scope (.light-scheme) {
  /* light-scheme内のリンクのみマッチ */
  a { color: darkmagenta; }
}

@scope (.dark-scheme) {
  /* dark-scheme内のリンクのみマッチ */
  a { color: plum; }
}

@scope (.media-object) {
  /* media-object内の著者画像のみマッチ */
  .author-image { border-radius: 50%; }
}

@scope (.media-object) to (.content > *) {
  img { border-radius: 50%; }
  .content { padding: 1em; }
}

スコープセレクターの定義にスコープ制限を追加すべきか？

2.5.1. @scopeの効果

@scope at-ルールは、 内包するスタイル規則に対して主に3つの効果があります：

• スタイル規則は、@scope <rule-list>内でスコープ付きスタイル規則となる。

• :scopeセレクターは、 @scope規則のスコープルートにマッチするよう定義されており、 ホストがスコープルートの場合はfeaturelessなshadow hostも含む。 &セレクターは、 スコープルート（<scope-start>セレクター）を表すか、 セレクターが指定されていない場合は:scopeを表す。

• カスケードは、 より近接した スコープルートを持つ宣言を優先し、 詳細度や出現順に関係なく スコープ近接性を適用して、 スコープルートと各主題との間で スコープ付きスタイル規則の優先順位を決定する。

注: ネスティングとは異なり、 @scope規則内のセレクターは @scope前置の親セレクターの詳細度を継承しません。

@scope (#hero) {
  img { border-radius: 50%; }
}

:where(#hero) img { border-radius: 50%; }

<section data-scope="main-component">
  <p data-scope="main-component">...<p>

  <!-- sub-component root is in both scopes -->
  <section data-scope="main-component sub-component">
    <!-- children are only in the inner scope -->
    <p data-scope="sub-component">...<p>
  </section>
</section>

p[data-scope~='main-component'] { color: red; }
p[data-scope~='sub-component'] { color: blue; }

/* 両方のsectionは外側スコープに属する */
section[data-scope~='main-component'] { background: snow; }

/* 内側sectionは内側スコープにも属する */
section[data-scope~='sub-component'] { color: ghostwhite; }

<section data-scope="main-component">
  <p>...<p>
  <section data-scope="sub-component">
    <p>...<p>
  </section>
</section>

@scope ([data-scope='main-component']) to ([data-scope]) {
  p { color: red; }

  /* 外側sectionのみが外側スコープに属する */
  section { background: snow; }
}

@scope ([data-scope='sub-component']) to ([data-scope]) {
  p { color: blue; }

  /* 内側sectionのみが内側スコープに属する */
  section { color: ghostwhite; }
}

@scope ([data-scope='main-component']) to ([data-scope] > *) {
  p { color: red; }

  /* 両方のsectionが外側スコープに属する */
  section { background: snow; }
}

2.5.2. @scopeの構文

@scope規則の構文：

@scope [(<scope-start>)]? [to (<scope-end>)]? {
  <rule-list>
}

各項目の意味：

• <scope-start>は、<selector-list> セレクターで、 スコープルートを識別するために使われます。

• <scope-end>は、<selector-list> セレクターで、 スコープ制限を識別するために使われます。

• <rule-list>はスコープ付きスタイル規則を表します。

疑似要素はスコープルートや スコープ制限にはできません。 それらは<scope-start>や<scope-end>で無効です。

2.5.3. スコープ付きスタイル規則

スコープ付きスタイル規則は、 非スコープ規則と次の点で異なります：

• そのセレクターはスコープ内の要素のみマッチ可能です。 （これは主題にのみ適用されます。セレクターの残り部分は制限なしでマッチ可能。）

• 前置は<relative-selector-list>を受け入れます （単なる<selector-list>ではなく）。 こうした相対セレクターは:scopeに対して相対的です。

• <relative-selector-list>内のセレクターで、 結合子で始まらず、 かつネスティングセレクターや:scopeセレクターを含む場合は 非相対セレクターとして解釈されます（ただし主題は依然としてスコープ内でなければマッチしません）。

@scope (#my-component) {
  p { color: green; }
  :scope p { color: green; }
}

@scope (#my-component) {
  > p { color: green; }
  :scope > p { color: green; }
}

@scope (#my-component) {
  :scope { border: thin solid; }
  & { border: thin solid; }

  main :scope p { color: green; }
  main & p { color: green; }
}

2.5.4. スコープルートと制限の特定

@scope 規則は、以下の方法で1つ以上のスコープを生成します:

スコープルートの検索

<scope-start>でマッチした各要素について、 その要素をスコープのスコープルートとして使用してスコープを作成します。 <scope-start>が指定されていない場合、 スコープルートは、スタイルシートの所有ノードの親要素となります。 (owner nodeがどこで@scope規則が定義されているか) そのような要素が存在せず、包含するノードツリーがシャドウツリーの場合は、 スコープルートはシャドウホストとなります。 それ以外の場合は、スコープルートは包含するノードツリーのルートとなります。 <scope-start>内の :scopeや&は、 外側コンテキストの定義に従って解釈されます。

スコープ制限の検索

スコープルートによって作成された各スコープに対して、 そのスコープ制限は、 スコープ内で <scope-end>にマッチするすべての要素に設定されます。 :scopeや &は、スコープ付きスタイル規則と同様に解釈されます。

<div>
  <style>
    @scope {
      p { color: red; }
    }
  </style>
  <p>this is red</p>
</div>
<p>not red</p>

<div id="foo">
  <style>
    @scope (#foo) {
      p { color: red; }
    }
  </style>
  <p>this is red</p>
</div>
<p>not red</p>

/* .contentは:scopeの直接の子のときのみ制限になる */
@scope (.media-object) to (:scope > .content) { ... }

/* .contentは:scopeが.sidebar内にあるときのみ制限になる */
@scope (.media-object) to (.sidebar :scope .content) { ... }

2.5.5. スコープのネスト

@scope 規則はネスト可能です。 この場合、ネストしたスタイル規則と同様に、 内側の@scope（スコープを定義するもの）の前置セレクターは 外側のセレクターでスコープされます。

注: さらにネストしたスコープ付きスタイル規則のための スコープは、 実際には外側と内側両方の@scope規則によって制約されますが、 スコープルートは最も内側の@scopeによって定義されます。 スコープ近接性は スコープ付きスタイル規則の主題と スコープルートの間で測定されるため、 ネストした@scope規則のスコープ近接性の判定には最も内側の@scopeのみが関係します。

スコープ近接性の計算はネストしたスコープで影響を受けるべきか？ [Issue #10795]

@scope (.parent-scope) {
  @scope (:scope > .child-scope) to (:scope .limit) {
    :scope .content {
      color: red;
    }
  }
}

@scope (.parent-scope > .child-scope) to (.parent-scope > .child-scope .limit) {
  .parent-scope > .child-scope .content {
    color: red;
  }
}

グローバルな名前定義at-ルール（例：@keyframes、@font-face、@layerなど) が@scope内で定義されても有効ですが、 囲まれた@scope規則によってスコープされたり影響を受けたりすることはありません。 ただし、そうしたルール内に含まれるスタイル規則（例：@layer内）は スコープされます。

2.6. 非CSS提示ヒントの優先順位

CSS Cascading 5 § 6.4 カスケードレイヤー

3. CSSOM

3.1. CSSScopeRuleインターフェイス

CSSScopeRule インターフェイスは@scope規則を表します:

[Exposed=Window]
interface CSSScopeRule : CSSGroupingRule {
  readonly attribute CSSOMString? start;
  readonly attribute CSSOMString? end;
};

start 型 CSSOMString

start属性は、規則の<scope-start>（括弧を除く）をシリアライズした結果、または<scope-start>がない場合はnullを返します。

end 型 CSSOMString

end属性は、規則の<scope-end>（括弧を除く）をシリアライズした結果、または<scope-end>がない場合はnullを返します。

4. 変更点

この付録は参考です。

4.1. 2023年3月21日作業草案以降の変更点

2023年3月21日作業草案以降の主な変更点：

• :scopeセレクターは、ホストがfeatureless shadow hostである場合、 そのスコープルート要素にマッチできるようになりました。 (Issue 9025)

• <scope-start>と<scope-end>セレクターは厳密です。 (Issue 10042)

• @scope規則が<scope-start>なしの場合、shadow hostを shadow rootの代わりにスコープするようになりました。 (Issue 9178)

• スコープ近接性は、 単一のスコープルートとスコープ付きスタイル規則の主題間のステップの単一測定値であることを明確化しました（Issue 10795が議論のために開かれています）。

• 強いスコープ近接性を削除しました。 (Issue 6790)

• スコープ付き子孫結合子を削除（保留）しました。 (Issue 8628)

• CSSScopeRule インターフェイスを追加しました。 (Issue 8626)

4.2. 2021年12月21日最初の公開作業草案以降の変更点

2021年12月21日最初の公開作業草案以降の主な変更点：

• @scopeがネストされた:scopeおよび&セレクターに与える効果を明確化しました。 (Issue 8377)

• @scope前置を詳細度計算から除外しました。 (Issue 8500)

• 名前定義at-ルールが@scope内でどう振る舞うかを明確化しました。 (Issue 6895)

• <scope-start>をオプションにして暗黙のスコープを追加しました。 (Issue 6606)

• 疑似要素を@scope前置で禁止しました。 (Issue 7382)

• セレクタースコープ表記を削除しました。 (Issue 7709)

• スコープ制限要素は 結果のスコープから除外されます。 (Issue 6577)

4.3. レベル5以降の追加事項

レベル5以降に追加された機能：

• スコープの定義（<scope-start>と<scope-end>セレクターの組み合わせ）

• 下限選択のためのin-scope (:in())疑似クラス

• スコープ付きスタイルシートを作成する@scope規則

• カスケードにおけるスコープ近接性の定義

4.4. レベル4以降の追加事項

レベル4以降に追加された機能：

• カスケードレイヤーをカスケードソート基準に追加 （スタイル属性をカスケードソート基準の独立したステップとして定義し、適切に相互作用するようにした）

• カスケードレイヤー定義用@layer規則の導入

• @import定義へのlayer/layer()オプション追加

• 以前のレイヤーに値を戻すためのrevert-layerキーワードの導入

4.5. レベル3以降の追加事項

レベル3以降に追加された機能：

• revertキーワード（カスケードのロールバック用）

• supports()構文（supports-conditionalな@import規則用）

• カプセル化コンテキストをカスケードソート基準に追加（Shadow DOM対応）[DOM]

• レガシー構文対応のためのCSSプロパティエイリアスメカニズム2種を定義。詳細はCSS Cascading 4 § 3.1 Property Aliasing参照。

4.6. レベル2以降の追加事項

レベル2以降に追加された機能：

• allショートハンド
• initialキーワード
• unsetキーワード
• アニメーションや遷移のカスケードへの取り込み

謝辞

David Baron、 Tantek Çelik、 Keith Grant、 Giuseppe Gurgone、 Theresa O’Connor、 Florian Rivoal、 Noam Rosenthal、 Simon Sapin、 Jen Simmons、 Nicole Sullivan、 Lea Verou、 そして Boris Zbarsky が本仕様に貢献しました。

5. プライバシーに関する考慮事項

• スタイル規則の適用によって表現されるユーザーの設定やUAのデフォルトはカスケード処理によって公開され、文書に適用された計算済みスタイルから推測可能です。

6. セキュリティに関する考慮事項

• カスケード処理は、同一オリジンとクロスオリジンのスタイルシートを区別せず、クロスオリジンスタイルシートの内容がそれらが文書に適用する計算済みスタイルから推測できる可能性があります。

• @import 規則はクロスオリジンスタイルシートの読み込みに CORSプロトコル を適用せず、自由にインポート・適用されます。

• @import 規則は、 Content-Typeメタデータがないリソース （またはホスト文書がquirksモードの場合は同一オリジンファイル）を text/css と見なすため、 任意のファイルがCSSとしてページにインポート・解釈される可能性があり、計算済みスタイルから機密データが推測されるリスクがあります。