CSSカスケーディングと継承 レベル5

1. はじめに

CSSは、文書のレンダリングを指示する有限のパラメータセットを プロパティ と呼び、定義します。 各 プロパティ には名前 （例：color、font-size、または border-style）、 値空間 （例：<color>、 <length-percentage>、[ solid | dashed | dotted | … ]）、 および文書のレンダリングに関する定義済みの挙動を持ちます。 プロパティの値は、プロパティ宣言を通じて文書の各部分に割り当てられ、 （例：red、12pt、dottedなど） 関連する要素やボックスに値が割り当てられます。

CSSの基本的な設計原則のひとつが カスケーディング です。 これにより、複数のスタイルシートが文書の表示に影響を与えることができます。 異なる宣言が同じ要素/プロパティの組み合わせに値を設定しようとした場合、 その競合を何らかの方法で解決する必要があります。

逆に、どの宣言も要素/プロパティの組み合わせに値を設定しようとしない場合には、 継承やプロパティの初期値を参照することで値が決定されます。

カスケーディングとデフォルト化の処理は、 宣言の集合を入力とし、 各要素の各プロパティのための指定値を出力します。

文書内のすべての要素のすべてのプロパティの指定値を決定するための規則は本仕様で記述されています。 ページコンテキストとマージンボックスで指定値を決定する規則は [css-page-3] で説明されています。

1.1. モジュール間の相互作用

このセクションは規定です。

このモジュールは、 [CSS2] 6章で定義されているプロパティ値の割り当て、カスケーディング、継承の規則を置き換え、拡張します。

他のCSSモジュールは、ここで定義された構文や機能の定義を拡張する場合があります。 例えば、Media Queries Level 4仕様は、 本モジュールと組み合わせることで <media-query>値型の定義を拡張します。

本仕様の目的では、テキストノードは、 関連する要素の要素の子として扱われ、 完全なプロパティセットを持ちます。 ただしセレクタでターゲットにできないため、 計算値はすべてデフォルト化によって割り当てられます。

2. スタイルシートのインポート: @import規則

@import 規則は、他のスタイルシートからスタイル規則をインポートすることを可能にします。 @import規則が有効なスタイルシートを参照する場合、 ユーザーエージェントは、そのスタイルシートの内容を@import規則の位置に記述されたかのように扱う必要があります。 ただし、例外が2つあります：

• ある機能（例えば @namespace規則）が、特定のスタイルシートにのみ適用され、 インポートされたものには明示的に適用されないと定義されている場合は、インポートされたスタイルシートには適用されません。

• ある機能がスタイルシート内の複数の構成要素の相対的順序に依存する場合 （例えば @namespace規則は@import以外の規則が前にあってはならないなど）、 それは同じスタイルシート内の構成要素間にのみ適用されます。

例えば、インポートされたスタイルシートのスタイル規則内の宣言は、 @importの位置にそのまま記述されたかのようにカスケードに作用します。

@import規則は、スタイルシート内の他の有効なat規則やスタイル規則（@charsetおよび空の@layer定義は除く）より前に配置しなければならず、 また、前の@import規則との間に他の有効なat規則やスタイル規則があってはなりません。 そうでない場合、その@import規則は無効です。 @importの構文は次の通りです：

@import [ <url> | <string> ]
        [ layer | layer(<layer-name>) ]?
        [ supports( [ <supports-condition> | <declaration> ] ) ]?
        <media-query-list>? ;

各項目の意味：

• <url>または<string>は、インポートするスタイルシートのURLを指定します。

• オプションのlayerキーワードまたはlayer()関数は、 スタイルシートの内容を匿名カスケードレイヤーまたは指定名のカスケードレイヤーに割り当てます。

  インポートがスタイルシートの取得に失敗しても、レイヤーはレイヤー順序に追加されますが、 インポート条件の影響を受けます（適切な@layer規則が 条件付きグループ規則でラップされている場合と同様）。

• オプションの[<supports-condition>|<declaration>]および<media-query-list>（まとめてインポート条件）は、 適用条件を指定します。

@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);

@import url("tabs.css") layer(framework.component);
@import url("override.css") layer();

<string>が指定された場合は、 同じ値の<url>として解釈されます。

@import "mystyle.css";
@import url("mystyle.css");

2.1. 条件付き @import規則

インポート条件によって、インポートをメディアや機能サポートに依存させることができます。 インポート条件がない場合は、インポートは無条件です。 （<media-query-list>にallを指定した場合も同じ効果です。） インポート条件が一致しない場合は、 インポートされたスタイルシートの規則は適用されません。 まるでインポートされたスタイルシートが、与えられた条件の@media や@supportsブロックでラップされているかのように動作します。

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);

したがってユーザーエージェントは、インポート条件が一致しない限り、 条件付きインポートを取得しなくても構いません。 さらに、<supports-condition>によってインポートされたスタイルシートの適用がブロックされる場合、 UAはそのスタイルシートを（他のリンクでロードされない限り）取得してはならず、 インポート規則のCSSImportRule.styleSheet値にはnullを返さなければならない（他のリンクでロードされていても）。

@import url("fallback-layout.css") supports(not (display: flex));
@supports (display: flex) {
  ...
}

インポート条件は、 <media-query-list>によって与えられ、これは メディアクエリリストとして構文解析・解釈されます。 また<supports-condition>は [[supports query]]として構文解析・解釈されます。 <declaration>が<supports-condition>の代わりに与えられた場合、 追加の括弧が暗黙的にあるものとして<supports-decl>として解釈され、 <supports-condition>として扱われます。

@import "mystyle.css" supports(display: flex);
@import "mystyle.css" supports((display: flex));

インポート条件の評価と完全な構文は、Media Queries [MEDIAQ]およびCSS Conditional Rules [CSS-CONDITIONAL-3] 仕様で定義されています。

2.2. スタイルシートインポートの処理

同じスタイルシートが複数箇所で文書にインポートまたはリンクされている場合、 ユーザーエージェントは各リンクを独立したスタイルシートへのリンクとして処理（またはそのように振る舞う）しなければなりません。

注: これはリソースの取得方法には何も要求しません。 スタイルシートがCSSOMでどのように反映され、この仕様などでどのように使われるかだけに関わります。 適切なキャッシュがあれば、UAがスタイルシートを一度しか取得しなくても、 複数回リンクやインポートされている場合でも問題ありません。

インポートされたスタイルシートのカスケードの起源は、 それをインポートしたスタイルシートのカスケードの起源です。

インポートされたスタイルシートの環境エンコーディングは、 それをインポートしたスタイルシートのエンコーディングです。 [css-syntax-3]

2.3. CSSスタイルシートのContent-Type

インポートされたスタイルシートの処理は、リンクされたリソースの実際のタイプに依存します：

• リソースにContent-Typeメタデータがない場合、 タイプはtext/cssとして扱われます。

• ホスト文書がクィークスモードであり、 かつホスト文書のオリジンがリンクされたリソースレスポンスのURLのオリジンと同一オリジンの場合、 タイプはtext/cssとして扱われます。

• それ以外の場合、タイプはContent-Typeメタデータから決定されます。

リンクされたリソースのタイプがtext/cssの場合、 CSSスタイルシートとして解釈しなければなりません。 それ以外の場合はネットワークエラーとして解釈しなければなりません。

3. ショートハンドプロパティ

いくつかのプロパティはショートハンドプロパティです。 これは、著者が複数のプロパティの値を1つのプロパティで指定できることを意味します。 ショートハンドプロパティは、 そのすべてのロングハンドサブプロパティを、 その場で展開されたかのように設定します。

ショートハンド形式で値が省略された場合、 特に定義がない限り、 省略された各サブプロパティには 初期値が割り当てられます。

h1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal;
}

h1 { font: bold 12pt/14pt Helvetica }

場合によっては、ショートハンドが 異なる構文や、サブプロパティの値と直接対応しない特別なキーワードを持つことがあります。 （その場合はショートハンドが値の展開方法を明示的に定義します。）

他の場合、あるプロパティがショートハンドのリセット専用サブプロパティであることがあります。 他のサブプロパティと同様、 未指定の場合はショートハンドによって初期値にリセットされますが、 ショートハンドにそのサブプロパティの他の値を設定する構文がないことがあります。 例えば、borderショートハンドは border-imageを初期値noneにリセットしますが、 他の値に設定する構文はありません。 [css-backgrounds-3]

ショートハンドが CSS全体キーワードとして指定された場合 [css-values-3]、 すべてのサブプロパティがそのキーワードに設定されます。 リセット専用サブプロパティも含みます。 （これらのキーワードは、1つの宣言内で他の値と組み合わせることはできません。ショートハンドでも不可。）

ショートハンドプロパティに !importantを指定すると、すべてのサブプロパティも!importantと宣言したのと同じになります。

3.1. プロパティのエイリアス化

プロパティは、しばらくサポートされた後で名前が変更されることがあります。 例えばベンダープレフィックス付きプロパティが標準化される場合などです。 元の名前は互換性のために引き続きサポートする必要がありますが、新しい名前の方が推奨されます。 このため、CSSでは古い構文を新しい構文に「エイリアス」する方法が2つ定義されています。

レガシー名エイリアス

古いプロパティの値構文が新しいプロパティと同一の場合、 2つの名前は大文字小文字のマッピングと同様にパース時にエイリアスされます。 パース時に古いプロパティは新しいプロパティに変換されます。 この変換はCSSOMでも適用されます。 文字列引数やプロパティアクセスでも、 古いプロパティ名への要求は新しいプロパティ名へ透過的に転送されます。

例えばold-nameが レガシー名エイリアスで new-nameのエイリアスである場合、 getComputedStyle(el).oldNameは newNameプロパティの計算スタイルを返し、 el.style.setPropertyValue("old-name", "value") は、new-nameプロパティに"value"を設定します。

レガシーショートハンド

古いプロパティの構文が新しいプロパティと異なる場合、 2つの名前はショートハンドの仕組みでエイリアスされます。 これらのショートハンドはレガシーショートハンドと定義され、 使用は非推奨です。 それ以外の挙動は通常のショートハンドと同じですが、 CSSOMが宣言をシリアライズする際には使用されません。 [CSSOM]

例えば、page-break-*プロパティは レガシーショートハンドであり、 break-*プロパティのエイリアスです （CSS Fragmentation 3 § 3.4 Page Break Aliases: the page-break-before, page-break-after, and page-break-inside properties参照）。

page-break-before: alwaysを設定すると、 パース時にbreak-before: pageに展開されます。通常のショートハンドと同様です。 同様に、break-before: pageを設定した場合、 getComputedStyle(el).pageBreakBeforeを呼び出すと "always"が返ります。 しかし、スタイルブロックをシリアライズする際 （CSSOM 1 § 6.7.2 Serializing CSS Values参照）、 page-break-beforeプロパティは ショートハンドとしてシリアライズされることはなく、 break-beforeが指定されていたかどうかに関わらず、 必ずbreak-beforeが選択されます。

3.2. すべてのプロパティのリセット: allプロパティ

all プロパティはショートハンドであり、 すべてのCSSプロパティをリセットします。 ただしdirectionとunicode-bidiは除きます。 このプロパティはCSS全体キーワードのみを受け付けます。 カスタムプロパティはリセットされません。 [css-variables-1]

注: 除外されたCSSプロパティ directionおよびunicode-bidiは実際にはマークアップレベルの機能であり、 著者のスタイルシートで設定すべきではありません。 （これらはUAがサポートしない文書言語をスタイルするためだけにCSSプロパティとして存在します。） 著者はHTMLのdir属性など、適切なマークアップを使うべきです。 [css-writing-modes-3]

4. 値の処理

ユーザーエージェントが文書をパースし、文書ツリーを構築したら、 ツリー内のすべての要素およびフォーマット構造のすべてのボックスに対して、 対象メディアタイプに適用されるすべてのプロパティの値を割り当てなければなりません。

与えられた要素またはボックスのCSSプロパティの最終値は、 複数ステップの計算結果です：

1. まず、各要素の各プロパティについて、その要素に適用された宣言値を集めます。 要素には宣言値がゼロ個または複数個適用されている可能性があります。
2. カスケード処理によってカスケード値が得られます。 各要素の各プロパティにつきカスケード値は最大1つです。
3. デフォルト化によって指定値が得られます。 すべての要素はすべてのプロパティにつき指定値を1つ持ちます。
4. 値の依存関係を解決することで算出値が得られます。 すべての要素はすべてのプロパティにつき算出値を1つ持ちます。
5. 文書のフォーマットにより使用値が得られます。 要素がそのプロパティに対して使用値を持つのは、そのプロパティが要素に適用される場合のみです。
6. 最後に、表示環境の制約に基づき、使用値が実際値に変換されます。 使用値と同様、 要素のプロパティに対して実際値が存在する場合としない場合があります。

接続されていない要素や文書のフラット化要素ツリーに含まれていない要素は、 CSS値処理に参加せず、 宣言値、 カスケード値、 指定値、 算出値、 使用値、 実際値を持ちません。 たとえスタイル宣言が割り当てられていても（例えばstyle属性によって）、値の処理はされません。

4.1. 宣言値

要素に適用された各プロパティ宣言は、その要素に関連付けられたプロパティについて宣言値を与えます。 詳細は宣言のフィルタリングを参照してください。

これらの値はカスケードによって処理され、単一の「勝ち値」が選ばれます。

4.1.1. 値のエイリアス化

一部のプロパティ値にはレガシー値エイリアスがあります。 パース時にレガシー構文が新しい構文に変換され、 パース入力とは異なる宣言値が生成されます。 このエイリアスは主にレガシー互換性のために使われ、 例えばベンダープレフィックス付き値を標準値へ変換する用途などです。

4.2. カスケード値

カスケード値はカスケード処理の結果を表します。 カスケードで勝った宣言値 （カスケード結果で最初に並ぶもの）です。 カスケード結果が空リストの場合、 カスケード値はありません。

4.3. 指定値

指定値は 著者がその要素に対して意図した特定プロパティの値です。 これはカスケード値にデフォルト化処理を適用した結果であり、 すべての要素のすべてのプロパティに指定値が存在することを保証します。

多くの場合、指定値はカスケード値です。 ただしカスケード値が全くない場合、 指定値はデフォルト化されます。 CSS全体キーワードがプロパティのカスケード値になった場合は特別に扱われ、 キーワードに応じて指定値が設定されます。 詳細は§ 7.3 明示的デフォルト化参照。

4.4. 算出値

算出値は 指定値をプロパティ定義表の「算出値」行で定義される方法で解決した結果です。 通常は継承に備えて絶対化されます。

注: 算出値は、継承の際に親から子へ伝達される値です。 歴史的理由により、これはgetComputedStyle() 関数が返す値とは限りません。 この関数はしばしば使用値を返します。 [CSSOM] また、算出値は抽象的なデータ表現です。 定義はそのデータ表現を反映しており、データのシリアライズ方法ではありません。 例えばシリアライズ規則では、パース時に暗黙的となる値の省略が許されることがありますが、 それらの値も算出値の一部です。

注: 一般に算出値は、文書のレイアウトやネットワークリクエストの解決、 要素やその親以外から値を取得するなど、コストが高い/並列化しづらい処理を行わずに 指定値を可能な限り解決します。

算出値はプロパティが適用されない場合でも存在します。 ただし、プロパティによっては算出値の決定方法が、 そのプロパティが要素に適用されるかどうかで変わる場合があります。

4.5. 使用値

使用値は、 算出値を絶対理論値に仕上げるために残る計算を行った結果であり、 文書のフォーマットで使用されます。

例えば、width: auto の宣言は、要素の祖先レイアウトが分からなければ長さに解決できません。 そのため算出値はautoですが、 使用値は例えば100pxのような絶対長さです。[CSS2]

他の例として、 <div>は算出break-before値としてautoを持つことがありますが、 最初の子からの伝播により使用break-before値としてpageを得ることがあります。[css-break-3]

プロパティがこの要素やボックスタイプに適用されない場合、 そのプロパティの使用値はありません。

例えば、flexプロパティは、 フレックスアイテムでない要素には使用値がありません。

4.5.1. 適用プロパティ

プロパティがある要素やボックスタイプに適用されない場合（「適用対象」行に記載）、 そのボックスや要素には直接的な効果を持ちません。

注: 適用されないプロパティでも、 その算出値が適用される他のプロパティの計算に影響する場合は間接的にフォーマットに効果があります。 また、算出値自体は常に存在し、 子孫に継承され、そこで効果を持つことがあります。

注: 「すべての要素」に適用されると定義されたプロパティは、 すべての要素とdisplay型に適用されますが、 すべての疑似要素型に必ずしも適用されるわけではありません。 疑似要素は固有のレンダリングモデルや制限を持つことが多いためです。 ただし::beforeと::after疑似要素は、 通常の要素とほぼ同様のボックス生成が定義されており、 「すべての要素」に適用されるプロパティを受け付けるよう定義されています。 疑似要素については[CSS-PSEUDO-4]を参照してください。 疑似要素については詳細もそちらを参照。

4.6. 実際値

使用値は本来そのまま利用可能ですが、 ユーザーエージェントが特定環境で値を利用できない場合があります。例えば、ユーザーエージェントが整数ピクセル幅のみで枠線を描画できる場合、 使用値を近似する必要が生じます。 また、要素のフォントサイズは利用可能なフォントやfont-size-adjustプロパティの値によって調整される場合があります。 実際値は、 このような調整が行われた後の使用値です。

注: 要素の実際値を調べることで、 文書のレイアウトの多くを知ることができます。 ただしすべての情報が実際値に記録されるわけではありません。 例えばpage-break-afterプロパティの実際値は、 要素の後に改ページがあるかどうかを反映しません。 同様にorphansの実際値は、 ある要素内に孤児行が何行あるかを反映しません。 例（j）、（k）は下記の表を参照してください。

4.7. 例

4.8. フラグメントごとの値処理

特定のCSS機能は フラグメント単位で値処理に影響を与える場合があります。 例えば CSS Pseudo-Elements 4 § 2.1.3 継承と ::first-line 疑似要素では、 ::first-line 疑似要素内のフラグメントの継承を変更しています。 このような場合、個々のフラグメントに異なる指定値が与えられるときは、 他のプロパティの算出値に基づいて解決される値 （例えば currentcolor や em単位など） は ボックスフラグメントごとに解決されます。 以降の値処理は各フラグメントで通常通り進行します。

ボックス単位（ボックスフラグメント単位ではなく）で 単一値を仮定するAPIは、非ツリー従属な 疑似要素の影響を無視しなければなりません。 （例えば ::first-line のスタイルは getComputedStyle() の返す値には影響しません。）

<div><span>First line<br />Second line</span></div>
<div><span>First line</span></div>
<div>First line<br><span>Second line</span></div>
<style>
div { color: blue; }
div::first-line { color: yellow; }
span { border: thin solid currentcolor; }
</style>

5. フィルタリング

宣言値を見つけるために、 実装はまず各要素に適用されるすべての宣言を特定しなければなりません。 宣言が要素に適用されるのは次の場合です：

• スタイルシートが現在この文書に適用されている
• 条件付き規則[CSS-CONDITIONAL-3]で偽条件によって制限されていない
• セレクタが要素に一致するスタイル規則に属している [SELECT] （必要ならスコーピングも考慮）
• 構文的に有効である： 宣言のプロパティが既知のプロパティ名であり、宣言値がそのプロパティの構文に一致する

適用される宣言の値は各要素の各プロパティごとに 宣言値のリストを形成します。 次のセクションである カスケードがこれらのリストを優先順位付けします。

6. カスケーディング

カスケードは、 与えられた要素の与えられたプロパティについて 宣言値の順序付けされていないリストを受け取り、 下記で決定される宣言の優先順位でソートし、 単一のカスケード値を出力します。

6.1. カスケードのソート順

カスケードは以下の基準で宣言を優先順位順（高い順）にソートします：

起源と重要度

宣言の起源はどこから来たかによります。 重要度は !importantで宣言されているかどうかです（詳細は下記）。 各起源の優先順位は高い順に：

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

このリストの先頭の起源の宣言が 後ろの起源の宣言よりも優先されます。

コンテキスト

文書言語は異なるカプセル化コンテキスト（例えばツリーコンテキストなど）から宣言を混在させる場合があります。 これはシャドウツリーなど [DOM]のネストされたツリーコンテキストが例です。

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

注: これは、あるカプセル化コンテキストの 通常宣言が外側コンテキストによって容易に上書きできる一方、 重要宣言は外側コンテキストで上書きできなくなることを意味します。

要素直付けスタイル

通常宣言と 重要宣言についてそれぞれ、 要素に直接付与された宣言（style属性の内容など）は、 セレクタで間接的にマッピングされた宣言よりも同じ重要度で優先されます。

詳細は[css-style-attr]参照。

注: 非CSS表示ヒント（例：プレゼンテーションマークアップ）は 別途扱われます。§ 6.5 非CSS表示ヒントの優先順位参照。

レイヤー

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

カスケードレイヤー（宣言同様）は出現順で並びます。 異なるレイヤーの宣言を比較するとき、 通常規則では最後のレイヤーの宣言が勝ち、 重要規則では最初のレイヤーの宣言が勝ちます。

注: これは通常と 重要な起源のレイヤー化と同じ論理で、 !importantフラグが両者で同じ「上書き」目的で機能するようにしています。

詳細度

Selectorsモジュール [SELECT]で セレクタの詳細度の計算方法が定義されています。 各宣言は所属するスタイル規則と同じ詳細度を持ち、 詳細度が最も高い宣言が勝ちます。

出現順

文書順で最後に現れた宣言が勝ちます。 この目的のために：

• スタイルシートは最終CSSスタイルシートの順序で並びます。
• インポートスタイルシートの宣言は スタイルシートが@import規則の位置に挿入されたかのように並びます。
• 発信文書で独立してリンクされたスタイルシートの宣言は ホスト文書言語で定義されたリンク順で連結されたかのように扱われます。
• style属性の宣言は、その要素の文書順に並び、すべてのスタイルシートより後に置かれます。

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

6.2. カスケーディングの起源

各スタイル規則はカスケード起源を持ち、 カスケードへの参加位置を決定します。 CSSは3つのコア起源を定義します：

著者起源

著者は文書言語の慣習に従ってソース文書用のスタイルシートを指定します。 例えばHTMLでは、スタイルシートは文書内に含めることも外部からリンクすることもできます。

ユーザー起源

ユーザーは特定文書用にスタイル情報を指定できる場合があります。 例えば、ユーザーがスタイルシートを含むファイルを指定したり、 ユーザーエージェントがユーザースタイルシートを生成するインターフェースを提供したり（またはそのように振る舞う）ことがあります。

ユーザーエージェント起源

準拠ユーザーエージェントはデフォルトスタイルシートを適用しなければなりません（またはそのように振る舞う）。 ユーザーエージェントのデフォルトスタイルシートは、 文書言語に対する一般的な表示期待を満たす方法で文書言語の要素を提示するべきです。 （例：ビジュアルブラウザでは、HTMLのEM要素はイタリック体で表示されます） 例として HTMLユーザーエージェントスタイルシート。 [HTML]

CSSの拡張では、以下の追加起源が定義されています：

アニメーション起源

CSS Animations [css-animations-1]は 実行時にその効果を表す「仮想」規則を生成します。

トランジション起源

CSS Animationsと同様、CSS Transitions [css-transitions-1]も 実行時にその効果を表す「仮想」規則を生成します。

6.3. 重要宣言：!important注釈

CSSは著者とユーザースタイルシートの間の権限バランスを作ろうとします。 デフォルトでは、著者のスタイルシートの規則がユーザーのスタイルシートの規則よりも優先され、 ユーザーのスタイルシートの規則はユーザーエージェントのデフォルトスタイルシートの規則よりも優先されます。 これを補うため、宣言にimportantを付けて カスケード内での重みを高め、優先順位の順序を反転できます。

宣言は、値の最後の2つ（空白・コメントを除く）トークンが 区切りトークン!と識別子トークンimportantであれば [css-syntax-3]定義通り 重要です。 その他の宣言は通常（非重要）です。

[hidden] { display: none !important; }

重要な宣言は 通常宣言より優先されます。 著者およびユーザースタイルシートには重要な宣言を含めることができ、 ユーザー起源の 重要宣言が 著者起源の重要宣言より優先されます。 このCSS機能は、特別な要件（大きなフォント、色の組み合わせなど）を持つユーザーが 表示を制御できるようにすることで文書のアクセシビリティを高めます。

すべての起源の重要宣言は アニメーションよりも優先されます。 これにより、著者は重要な場合にアニメーション値を上書きできます。 （アニメーション値は通常他のすべての規則より優先されます。） [css-animations-1]

ユーザーエージェントスタイルシートにも 重要宣言を含めることができます。 これらはすべての著者およびユーザー宣言よりも優先されます。

/* ユーザースタイルシートより */
p { text-indent: 1em !important }
p { font-style: italic !important }
p { font-size: 18pt }

/* 著者スタイルシートより */
p { text-indent: 1.5em !important }
p { font: normal 12pt sans-serif !important }
p { font-size: 24pt }

6.4. カスケードレイヤー

カスケード起源がユーザーと著者のスタイル間の権限バランスを提供するのと同様に、カスケードレイヤーは、単一の起源内で構造的に懸案事項を整理・バランスする方法を提供します。 一つのカスケードレイヤー内の規則は一緒にカスケードされ、 レイヤー外のスタイル規則とは混ざりません。

著者は、要素のデフォルト、サードパーティライブラリ、テーマ、コンポーネント、上書き、その他のスタイリング懸案を表すレイヤーを作成でき、各レイヤー内でセレクタや詳細度を変更せず、またソース順に依存せずに、レイヤーのカスケード順を明示的に並べ替えることができます。

audio {
  /* 詳細度 0,0,1 - 暗黙（最終）レイヤー */
  display: flex;
}

@layer reset {
  audio[controls] {
    /* 詳細度 0,1,1 - 明示的な "reset" レイヤー */
    display: block;
  }
}

名前定義at規則（@keyframesや@font-faceなど）がカスケードレイヤー内で定義された場合も、名前衝突の解決にレイヤー順を使います。

/* レイヤー順を定義し、"override" レイヤーが優先されるようにする */
@layer framework, override;

@layer override {
  @keyframes slide-left {
    from { translate: 0; }
    to { translate: -100% 0; }
  }
}

@layer framework {
  @keyframes slide-left {
    from { margin-left: 0; }
    to { margin-left: -100%; }
  }
}

.sidebar { animation: slide-left 300ms; }

6.4.1. カスケードレイヤーの宣言

カスケードレイヤーは以下の方法で宣言できます：

• @import規則でlayerキーワードまたはlayer()関数を使い、インポートファイルの内容をそのレイヤーに割り当てる。

• @layer block at規則を使い、その子スタイル規則をそのレイヤーに割り当てる。

• @layer statement at規則を使い、規則を割り当てずに名前付きレイヤーのみ宣言する。

linkやstyle要素をカスケードレイヤーに割り当てる属性を提供すべきか？ [Issue #w3c/csswg-drafts#5853]

6.4.2. レイヤーの名前付けとネスト

カスケードレイヤーはレイヤー名を持ちます。 これは各レイヤーネストレベルを表す順序付きリストで、 各セグメントは（CSS識別子として）名前付きまたは匿名にできます。 （つまり、レイヤーが他のレイヤー内にネストされている場合、名前が連結されます。） レイヤーが他のレイヤーのスコープ内で宣言された場合、 それは他のレイヤーにネストされます。 例えば、@layer規則の中に別の@layer、 レイヤー付き@importの中にレイヤー付きインポート、 またはレイヤー付きインポート内の@layer規則など。

レイヤー名は、同じ順序で同じセグメントを持つ場合、同じカスケードレイヤーを表します。 ただし匿名セグメントはそれぞれ固有の識別子を持ちます。 ネストによって複数のレイヤーが同じ匿名セグメントを共有することもあります。

@import url(headings.css) layer(default);
@import url(links.css) layer(default);

@layer default {
  audio[controls] {
    display: block;
  }
}

@layer base {
  p { max-width: 70ch; }
}

@layer framework {
  @layer base {
    p { margin-block: 0.75em; }
  }

  @layer theme {
    p { color: #222; }
  }
}

構文的には、明示的なレイヤー名は、 @layerや@import規則の <layer-name>で表現され、 ピリオド区切りの<ident>トークンのリスト （空白なし）です：

<layer-name> = <ident> [ '.' <ident> ]*

CSS全体キーワードは将来のために予約されており、 <ident>として <layer-name>に使用するとパース時に無効です。 複数識別子をピリオドで連結すると、 それぞれのレイヤーが順にネストされたことを表す省略記法です。

@layer framework {
  @layer default {
     p { margin-block: 0.75em; }
  }

  @layer theme {
    p { color: #222; }
  }
}

@layer framework.theme {
  /* これらのスタイルは framework レイヤー内の theme レイヤーに追加されます */
  blockquote { color: rebeccapurple; }
}

注: ネストしたレイヤーは親レイヤーの外へ「脱出」して外部レイヤーを参照できません。

6.4.2.1. 匿名レイヤー

@layer規則で<layer-name>を省略した場合や、 @import規則でlayerキーワード（<layer-name>を指定しない）を使った場合、 そのレイヤー名は固有の匿名セグメントを持ちます。 そのため外部から参照できません。

/* bootstrap-base.css */
/* 各サブファイルの名前なしラッパーレイヤー */
@import url(base-forms.css) layer;
@import url(base-links.css) layer;
@import url(base-headings.css) layer;

/* bootstrap.css */
/* 内部名はアクセス不可、"base"に吸収される */
@import url(bootstrap-base.css) layer(base);

/* author.css */
/* 著者は bootstrap.base レイヤーにはアクセスできるが、名前なしレイヤーにはアクセスできない */
@import url(bootstrap.css) layer(bootstrap);

/* bootstrap レイヤーに追加スタイルを加える： */
@layer bootstrap {...}

6.4.3. レイヤーの順序

カスケードレイヤーは最初に宣言された順でソートされ、 ネストされたレイヤーは親レイヤー内でまとめられ、 レイヤーなしの規則より先になります。

/* レイヤーなしスタイルはレイヤー順で最後に来る */
h1 { color: darkslateblue; }

@layer reset.type {
  strong { font-weight: bold; }
}

@layer framework {
  .title { font-weight: 100; }

  @layer theme {
    h1, h2 { color: maroon; }
  }
}

@layer reset {
  [hidden] { display: none; }
}

レイヤーが条件付きグループ規則内で定義された場合、 条件が真でなければレイヤー順に寄与しません。 あるいは、その条件付きグループ規則が文書内の異なる要素ごとに異なる評価ができる場合は寄与します。

注: レイヤー順は文書全体でグローバルなので、 要素感知型条件付きグループ規則内で定義されるレイヤーも グローバルなレイヤー順を確立する際に考慮されます（条件に関わらず）。 ただし文書全体にグローバルな条件（@mediaや@supportsなど）は、 そのような@layer規則を条件付きで扱うことができます。

@media (min-width: 30em) {
  @layer layout {
    .title { font-size: x-large; }
  }
}

@media (prefers-color-scheme: dark) {
  @layer theme {
    .title { color: white; }
  }
}

@layer theme, layout;

注: カスケードレイヤーは起源とコンテキストごとにスコープされるので、 light DOMのレイヤー順がshadow DOMの同名レイヤー順に影響したり、その逆になることはありません。

著者がレイヤーなしスタイルをレイヤー順に明示的に配置できるようにする [Issue #6323]

6.4.4. インラインでのレイヤー宣言：@layer規則

@layer規則は、カスケードレイヤーを宣言し、スタイル規則を割り当てることができます。

6.4.4.1. インラインでのスタイル割り当て：@layerブロックat規則

@layer ブロックat規則は、その子スタイル規則を特定の名前付きカスケードレイヤーに割り当てます。 このブロックレイヤー割り当て構文は次のとおりです：

@layer <layer-name>? {
  <stylesheet>
}

このような@layerブロック規則は、条件付きグループ規則 [CSS-CONDITIONAL-3]（条件がtrueの場合）と同じ制限と処理を受けます。

@layer framework {
  h1, h2 { color: maroon; background: white;}

  @media (prefers-color-scheme: dark) {
    h1, h2 { color: red; background: black; }
  }
}

注: @layer ブロックat規則は@import規則と混在できません。

6.4.4.2. スタイルなしの宣言：@layer文at規則

@layer 規則は、スタイル規則を割り当てずにレイヤー名のみを指定することで新しいレイヤーを定義することもできます：

@layer <layer-name>#;

このような空の@layer規則は、@importや@namespace規則の前（@charset規則の後、あれば）、 または@layerブロックat規則が許可されるすべての場所で使用できます。

注: @layer規則は@importと@namespace規則の間に挿入できません。 @layer規則が@importや@namespace規則の後に現れると、それ以降の@importや@namespace規則は無視されます。

ブロック構文と異なり、この構文では複数のレイヤー名をカンマ区切りで指定でき、それぞれのレイヤーを指定順で宣言します。

注: レイヤーの順序はレイヤー名の最初の出現で定義されるため（§ 6.4.3 レイヤーの順序参照）、 この規則によりページはレイヤーの順序を事前に宣言でき、スタイルシート全体を読まなくても順序が分かります。 また、インラインレイヤーをインポートレイヤーと混在でき、ブロック構文ではできません。

@layer default, theme, components;
@import url(theme.css) layer(theme);

@layer default {
  audio[controls] {
    display: block;
  }
}

@layer default;
@import url(theme.css) layer(theme);
@layer components;

@layer default {
  audio[controls] {
    display: block;
  }
}

@import url(default.css) layer(default);
@layer theme;
@import url(components.css) layer(components);

@layer theme {
  audio[controls] { display: block;
  }
}

6.5. 非CSSプレゼンテーションヒントの優先順位

UAはソース文書のマークアップに含まれるプレゼンテーションヒント（例：bgcolor属性やs要素 [HTML]）を尊重することができます。 文書言語ベースのスタイリングはすべて対応するCSS規則に変換され、 UA起源または通常のユーザー起源と著者起源の間の特別な著者プレゼンテーションヒント起源の規則としてカスケードに加わります。 カスケードの目的では、この著者プレゼンテーションヒント起源は独立した起源として扱われますが、revertキーワードの目的では著者起源の一部とみなされます。

文書言語は、このようなプレゼンテーションヒントがカスケードにUA起源または著者起源として入るかを定義できます。その場合、UAはそれに従って動作しなければなりません。例えば、[SVG11]はそのプレゼンテーション属性を著者起源にマッピングします。

注: プレゼンテーションヒントがカスケードにUA起源規則として入る場合、著者起源やユーザー起源スタイルで上書きできます。 著者プレゼンテーションヒント起源規則として入る場合は、著者起源スタイルで上書きできますが、非重要なユーザー起源スタイルでは上書きできません。ホスト言語はこれらを考慮して適切な起源を選択すべきです。

7. デフォルト化

カスケードで値が決まらない場合、 指定値は他の方法で決定する必要があります。 継承プロパティは親要素から継承によってデフォルト値を取得し、それ以外のプロパティは初期値を取得します。 著者はinheritやinitialキーワードを用いて継承や初期化を明示的に指定できます。

7.1. 初期値

各プロパティは初期値を持ち、これはプロパティ定義表で定義されています。 プロパティが継承プロパティでなく、 カスケードで値が決まらない場合、 そのプロパティの指定値は初期値となります。

7.2. 継承

継承は、親要素から子要素へプロパティ値を伝播します。 要素のプロパティの継承値は、親要素のそのプロパティの算出値です。 ルート要素は親要素がないため、その継承値はプロパティの初期値となります。

[DOM]ツリーにシャドウがある場合、継承はフラット化要素ツリー上で動作します。これにより、スロットに割り当てられた要素はslot要素から継承し、light treeの親からは直接継承しません。 疑似要素は各疑似要素のために記述された架空タグシーケンスに従い継承します。[CSS-PSEUDO-4]

一部プロパティは継承プロパティであり、プロパティ定義表で定義されています。 これは、カスケードで値が決まらない場合、継承によって値が決定されることを意味します。

プロパティは明示的に継承することもできます。inheritキーワード参照。

注: 継承は文書ツリーに従い、匿名ボックスやボックスツリーの操作によって妨げられません。

7.3. 明示的デフォルト化

以下にCSS全体プロパティ値が定義されています。 プロパティをこれらの値で宣言すると、特定のデフォルト化動作を明示的に指定します。 CSS Values and Units [css-values-3]で規定されている通り、すべてのCSSプロパティはこれらの値を受け入れられます。

7.3.1. プロパティのリセット：initialキーワード

プロパティのカスケード値が initialキーワードの場合、 プロパティの指定値はその初期値となります。

7.3.2. 明示的継承：inheritキーワード

プロパティのカスケード値が inheritキーワードの場合、 プロパティの指定値と算出値は、継承値となります。

7.3.3. すべての宣言の消去：unsetキーワード

プロパティのカスケード値が unsetキーワードの場合、 継承プロパティならinheritとして扱い、 それ以外はinitialとして扱います。 このキーワードは、カスケード内で以前に現れた宣言値をすべて消去し、プロパティ（またはショートハンドの全ロングハンド）に応じて正しく継承または初期化します。

7.3.4. カスケード起源の巻き戻し：revertキーワード

プロパティのカスケード値が revertキーワードの場合、 挙動は宣言が属するカスケード起源によって異なります：

ユーザーエージェント起源

unsetと同等。

ユーザー起源

カスケード値をユーザーエージェントレベルまで巻き戻し、指定値はこの要素のこのプロパティについて著者起源またはユーザー起源規則が何も指定されていないかのように計算される。

著者起源

カスケード値をユーザー起源まで巻き戻し、指定値はこの要素のこのプロパティについて著者起源規則が何も指定されていないかのように計算される。revertの目的では、この起源にアニメーション起源も含む。

7.3.5. カスケードレイヤーの巻き戻し：revert-layer キーワード

プロパティのカスケード値が revert-layerキーワードの場合、 カスケード値は一つ下のレイヤーまで巻き戻されます。 この要素のこのプロパティについて、現在のカスケードレイヤー内（またはその通常と重要レベルの間）に規則が何も指定されていないかのように指定値が計算されます。 ただし、重要な要素直付けスタイルに対するrevert-layerの場合は、 要素直付けスタイルとその間のアニメーション起源のみ巻き戻し、 その間の著者起源の重要規則は巻き戻しません。

注: 同じカスケード起源内に下位の宣言がない場合、revert-layer値は前の起源まで巻き戻されます。

注: アニメーション起源はこの目的では著者起源と統合されません（revertの場合とは異なり）、実質的に独自のカスケードレイヤーを形成します。

8. レイヤーAPI

8.1. CSSImportRule インターフェースの拡張

CSSImportRuleインターフェースは以下のように拡張されます：

partial interface CSSImportRule {
  readonly attribute CSSOMString? layerName;
};

このlayerName属性は at規則で宣言されたレイヤー名を表し、 匿名レイヤーの場合は空文字列、レイヤーが宣言されていない場合はnullとなります。

8.2. CSSLayerBlockRule インターフェース

CSSLayerBlockRule インターフェースは @layerブロック規則を表します：

[Exposed=Window]
interface CSSLayerBlockRule : CSSGroupingRule {
  readonly attribute CSSOMString name;
};

このname属性は at規則自体で宣言されたレイヤー名を表し、 匿名レイヤーの場合は空文字列となります。

@layer outer {
  @layer foo.bar { }
}

8.3. CSSLayerStatementRule インターフェース

CSSLayerStatementRule インターフェースは @layer文規則を表します：

[Exposed=Window]
interface CSSLayerStatementRule : CSSRule {
  readonly attribute FrozenArray<CSSOMString> nameList;
};

このnameList属性は at規則で宣言されたレイヤー名のリストを表し、 CSSLayerBlockRuleの name 属性と同じルールで正規化されます。

9. 変更点

9.1. 2021年10月15日作業草案以降の変更点

2021年10月15日作業草案以降の重要な変更点：

• @importのメディアクエリとsupports条件の文法スタイルを更新

• 関数表記のパース時エイリアスを許可（Issue 6193）

• CSSImportRule.layerNameをnull許容型に（Issue 6576）

• revert-layerがstyle属性では著者レイヤーを巻き戻さないことを明確化（Issue 6743）

• style属性とkeyframesでのrevert-layerの挙動を明確化（Issue 6743）

• § 4.1.1 値のエイリアス化セクション追加 （Issue 6193）

• § 8 レイヤーAPIセクション追加 （Issue 6576）

• style属性やrevert-layerキーワードを使う場合の挙動を明確化 （Issue 6743）

• @import規則でlayerキーワードとlayer()関数の挙動を明確化 （Issue 6776）

9.2. 2021年8月29日作業草案以降の変更点

2021年8月29日作業草案以降の変更点：

• レイヤーなしスタイルの順序を元に戻した。 （§ 9.3 2021年6月8日作業草案以降の変更点とIssue 6284参照）

• プレゼンテーションヒントがレイヤーではなく著者プレゼンテーションヒント起源を使うように定義（[CSS-CASCADE-4]の更新に合わせ） （Issue 6659）

9.3. 2021年6月8日作業草案以降の変更点

2021年6月8日作業草案以降の主な変更点：

• レイヤー名でCSS全体キーワードを将来のために予約。 （Issue 6323）

• @layer規則がグローバル条件付き規則を尊重することを明確化、ただしコンテナクエリなどグローバルでない条件では常にレイヤー順に加えられる。 （Issue 6407）

• 名前定義at規則はレイヤー順で衝突解決することを、詳細度解決と同様に定義。 （Issue 6404）

• @layerを@importや@namespace規則と混在できないことを禁止。 （Issue 6522）

9.4. 2021年3月19日作業草案以降の変更点

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

• 通常起源におけるレイヤーなしスタイルの順序を最高から最低優先度に切り替え。 （Issue 6284）

9.5. 2021年1月19日作業草案以降の変更点

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

• layer import構文を@layerから@importへ変更。 （Issue 5681）

• revert-layerキーワード追加。 （Issue 5793）

9.6. レベル4以降の追加点

レベル4以降の追加機能：

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

• カスケードレイヤーを定義する@layer規則導入。

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

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

9.7. レベル3以降の追加点

レベル3以降の追加機能：

• カスケード巻き戻し用のrevertキーワード導入。

• サポート条件付きsupports()構文による@import規則導入。

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

• CSSがレガシー構文をサポートするためのプロパティの2つのエイリアス機構を定義。§ 3.1 プロパティのエイリアス化参照。

9.8. レベル2以降の追加点

レベル2以降の追加機能：

• allショートハンド
• initialキーワード
• unsetキーワード
• アニメーションやトランジションのカスケードへの統合

謝辞

David Baron、Tantek Çelik、Florian Rivoal、Simon Sapin、Jen Simmons、 Boris Zbarskyは本仕様に貢献しました。

プライバシーとセキュリティの考慮事項

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

• ユーザー設定やUAデフォルトはスタイル規則の適用を通じてカスケード処理に現れ、計算スタイルから推測される可能性があります。

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

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