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規則は、UAがdisplay: flexをdisplay: flexでサポートしている場合のみスタイルシートをロードし、さらにhandheldデバイスで最大ビューポート幅が400pxの場合にのみ適用されます。

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

次のレイヤーインポートは、スタイルシートをそれぞれframework.componentレイヤーと無名レイヤーにロードします：

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

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

次の2行は意味的に等価であり、 @importの両方の構文（url()付きと文字列のみ）を示しています：

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

2.1. 条件付き @import規則

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

次の規則は、@import規則がメディア依存にできる方法を示しています：

@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>として扱われます。

例えば、次の2行は等価です：

@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つのプロパティで指定できることを意味します。ショートハンドプロパティは、そのすべてのロングハンドサブプロパティを、その場で展開されたかのように設定します。

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

これは、ショートハンドプロパティ宣言が、明示的に設定されていないものも含めて すべてのサブプロパティを設定することを意味します。不注意に使うと、意図せずサブプロパティをリセットしてしまう可能性があります。慎重に使えば、ショートハンドは他のソースからカスケードされたサブプロパティをリセットし、「白紙状態」を保証できます。

例えば、background: greenと書くと background-color: greenと書く場合よりも、以前の宣言でbackground-imageで背景画像が設定されていた場合でも背景色が優先されることが保証されます。

例えば、CSS Level 1のfontプロパティは、ショートハンドプロパティであり、 font-style、 font-variant、 font-weight、 font-size、 line-height、 font-familyを一度に設定できます。この例の複数の宣言は：

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 }

CSSでfontのサブプロパティが追加されるほど、ショートハンド宣言でもそれらが初期値にリセットされます。

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

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

ショートハンドが CSS 全域キーワード [css-values-3] のいずれかとして指定された場合、そのすべてのサブプロパティをそのキーワードに設定する。これには、リセット専用サブプロパティも含まれる。（これらのキーワードは、単一の宣言内で他の値と組み合わせることはできず、ショートハンド内であっても同様であることに注意。）

ショートハンドプロパティを !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プロパティ

Name:	all
値:	initial \| inherit \| unset \| revert \| revert-layer
初期値:	各プロパティ参照
適用対象:	各プロパティ参照
継承:	各プロパティ参照
パーセンテージ:	各プロパティ参照
計算値:	各プロパティ参照
アニメーションタイプ:	各プロパティ参照
正規順序:	文法ごと

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

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

例えば、著者が要素にall: initialを指定した場合、すべての継承がブロックされ、すべてのプロパティがリセットされます。これは著者・ユーザー・ユーザーエージェントレベルのカスケードにどんな規則も現れなかったかのようになります。

これはページに含まれる「ウィジェット」のルート要素など、外部ページのスタイルを継承したくない場合に便利です。ただし、その要素に適用される「デフォルト」スタイル（例：UAスタイルシートの<div>などのブロック要素へのdisplay: blockなど）もすべて上書きされる点に注意してください。

4. 値の処理

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

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

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

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

4.1. 宣言値

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

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

4.1.1. 値のエイリアス化

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

4.2. カスケード値

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

4.3. 指定値

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

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

4.4. 算出値

算出値は、プロパティ定義表の「算出値」の行で定義されているとおりに指定値を解決した結果であり、一般に継承に備えて絶対値化したものである。

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

指定値は絶対値（例：redや2mmのように他の値に依存しない）にも、相対値（例：autoや2emのように他の値に依存する）にもなります。相対値の算出では一般的に絶対化が行われます：

相対単位（em、ex、vh、vwなど）は、適切な参照サイズで乗算して絶対値にします
特定のキーワード（例：smaller、bolderなど）は定義に従い置換されます
一部プロパティのパーセンテージ値は参照値（プロパティ定義による）で乗算されます
有効な相対URLは絶対URLに解決されます。

例（f）、（g）、（h）は下記の表を参照。

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

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

4.5. 使用値

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

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

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

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

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

4.5.1. 適用プロパティ

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

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

writing-modeやtext-orientationは表の行には適用されません（表の行や子のレイアウトには影響しません）が、こうしたボックスに設定すると、 chなどのフォント相対単位の計算に影響し、 <length>値を取るプロパティ全般に間接影響を及ぼすことがあります。

text-transformをHTML p 要素（デフォルトでdisplay: block）に設定すると、効果があります。 text-transformは本来インラインボックスだけに適用されますが、プロパティは継承され、段落の匿名ルートインラインボックスに適用され、そのテキストに効果が現れます。

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

4.6. 実際値

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

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

4.7. 例

CSS 値の算出例
	プロパティ	勝った宣言	カスケード値	指定値	算出値	使用値	実際の値
(a)	text-align	`text-align: left`	left	left	left	left	left
(b)	border-top-width, border-right-width, border-bottom-width, border-left-width	`border-width: inherit`	inherit	4.2px	4.2px	4.2px	4px
(c)	width	（なし）	（なし）	auto （初期値）	auto	120px	120px
(d)	list-style-position	`list-style-position: inherit`	inherit	inside	inside	inside	inside
(e)	list-style-position	`list-style-position: initial`	initial	outside （初期値）	outside	outside	outside
(f)	font-size	`font-size: 1.2em`	1.2em	1.2em	14.1px	14.1px	14px
(g)	width	`width: 80%`	80%	80%	80%	354.2px	354px
(h)	width	`width: auto`	auto	auto	auto	134px	134px
(i)	height	`height: auto`	auto	auto	auto	176px	176px
(j)	page-break-after	（なし）	（なし）	auto （初期値）	auto	auto	auto
(k)	orphans	`orphans: 3`	3	3	3	3	3

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>

各 div内では、「First line」テキストは黄色、「Second line」テキストは青色になります。各行を包む span の各フラグメントの枠線色もそれぞれの色になります。

しかし、すべてのspan要素に対して getComputedStyle() を呼ぶと、 border-colorは "blue"が返ります。これは ::first-line 疑似要素の効果がフラグメント非対応APIでは無視されるためです。

5. フィルタリング

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

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

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

6. カスケーディング

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

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

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

オリジンと重要度

宣言のオリジンは、その宣言がどこから来たかに基づき、その重要度は !important を付けて宣言されているかどうかで決まる（以下を参照）。各オリジンの優先順位は、降順で次のとおりである：

トランジション宣言 [css-transitions-1]
重要なユーザーエージェント宣言
重要なユーザー宣言
重要な作成者宣言
アニメーション宣言 [css-animations-1]
通常の作成者宣言
通常のユーザー宣言
通常のユーザーエージェント宣言

このリストで前にあるオリジンからの宣言は、後にあるオリジンからの宣言より優先される。

コンテキスト

文書言語は、異なるカプセル化コンテキストから得られた宣言を混在させる仕組みを提供できる。たとえば、[DOM] におけるシャドウツリーのネストされたツリーコンテキストなどである。

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

注: これは実質的に、通常の宣言でカプセル化コンテキストに属するものは、外側のコンテキストによって容易に上書きできるデフォルトを設定できる一方、重要な宣言でカプセル化コンテキストに属するものは、外側のコンテキストでは上書きできない要件を強制できることを意味する。

要素付随スタイル

通常の宣言と重要な宣言についてそれぞれ、スタイル規則のセレクターによって間接的に対応付けられるのではなく、要素に直接付随する宣言（style 属性の内容など）は、スタイル規則を介して対応付けられる同じ重要度の宣言より優先される。

[css-style-attr] を参照。

注: CSS 以外のプレゼンテーションヒント（プレゼンテーション用マークアップなど）は別個に処理される。 § 6.5 CSS 以外のプレゼンテーションヒントの優先順位を参照。

レイヤー

各オリジンおよびコンテキスト内の宣言は、明示的にカスケードレイヤーへ割り当てることができる。このステップの目的上、明示的なレイヤーに割り当てられていない宣言は、暗黙の最終レイヤーに追加される。

カスケードレイヤーは（宣言と同様に）出現順に並べられる。異なるレイヤーに属する宣言を比較する場合、通常の規則では、カスケードレイヤーが最後にある宣言が優先され、重要な規則では、カスケードレイヤーが最初にある宣言が優先される。

注: これは通常および重要なオリジンを階層化する場合と同じ論理に従い、 !important フラグがどちらの設定でも同じ「上書き」の目的を維持するようにする。

詳細度

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

出現順

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

スタイルシートは最終 CSS スタイルシートにおける順序で並べられる。
インポートされたスタイルシートからの宣言は、そのスタイルシートが @import 規則の位置に置き換えられたかのように並べられる。
元の文書から独立してリンクされたスタイルシートからの宣言は、ホスト文書言語によって決定されるリンク順に連結されたものとして扱われる。
style 属性からの宣言は、 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]

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

次の例でユーザースタイルシートの最初の規則は !important宣言を含み、著者スタイルシートの対応する宣言を上書きします。 2つ目の規則も!importantのため勝ちます。しかし、ユーザースタイルシートの3つ目の宣言は!importantでないため、著者スタイルシートの2つ目の規則に負けます（これはショートハンドプロパティへの設定です）。また、著者スタイルシートの3つ目の規則は2つ目の規則に負けます（2つ目が!importantだから）。これは!important宣言が著者スタイルシート内でも機能することを示しています。

/* ユーザースタイルシートより */
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 }

プロパティ	勝ち値
text-indent	1em
font-style	italic
font-size	12pt
font-family	sans-serif

6.4. カスケードレイヤー

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

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

例えば、以下は明示的なresetレイヤーを生成し、レイヤーなしのスタイルよりも低いカスケード重みとなります。

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

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

レイヤーなしの audio 要素への宣言は、 audio[controls]への明示的なレイヤー宣言よりも優先されます ― 詳細度が低く、ソース順が先でもです。

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

例えば、著者はフレームワークのアニメーションを、より優先度の高いレイヤーで同じ名前のkeyframesを定義することで上書きできます。

/* レイヤー順を定義し、"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; }

この場合、overrideレイヤーがframeworkレイヤーより高いカスケード優先度を持つため、 slide-leftアニメーションはtranslateプロパティを使ってアニメーションされ、 margin-leftは使われません。

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規則など。

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

明示的なレイヤー識別子は複数のスタイルブロックを単一レイヤーに割り当てる方法を提供します。次の例では、 headings.cssとlinks.cssの内容はaudio[controls]規則と同じレイヤーでカスケードされます：

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

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

この例では、ネストされたframework.baseレイヤーはトップレベルのbaseレイヤーとは異なります：

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

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

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

結果のレイヤーはツリーとして表現できます：

base
framework
1. base
2. theme

または、ネストされた識別子を使ったフラットリストとして：

base
framework.base
framework.theme

構文的には、明示的なレイヤー名は、 @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>を指定しない）を使った場合、そのレイヤー名は固有の匿名セグメントを持ちます。そのため外部から参照できません。

匿名レイヤー宣言の各出現は固有のカスケードレイヤーとなります：

複数の名前なしレイヤー規則は、それぞれ別のレイヤーにスタイルを配置します（各出現が異なる匿名レイヤー名を参照するため）。
```
@layer { /* layer 1 */ }
@layer { /* layer 2 */ }
```
一つの名前なしレイヤー内では、同じ名前の子レイヤーは同じカスケードレイヤーを参照します（親レイヤーが匿名で同じだから）。
```
@layer {
  @layer foo { /* layer 1 */ }
  @layer foo { /* also layer 1 */ }
}
```
別々の名前なしレイヤーでは、同じ名前の子レイヤーは異なるカスケードレイヤーを参照します（親が異なる匿名レイヤーだから）。
```
@layer {
  @layer foo { /* layer 1 */ }
}
@layer {
  @layer foo { /* layer 2 */ }
}
```

<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; }
}

外側レイヤーが先にソートされ、レイヤーなしスタイル規則は暗黙の外側レイヤーに追加され、これは明示的なレイヤーよりも高い優先度（後になる）を持ちます：

reset
framework
（暗黙の外側レイヤー）

各レイヤー内では、ネストされたレイヤーが出現順でソートされ、さらなるネストなしのスタイル規則も明示的なネストレイヤーの後に暗黙のサブレイヤーとして追加されます：

reset.type
reset（暗黙のサブレイヤー）
framework.theme
framework（暗黙のサブレイヤー）
（暗黙の外側レイヤー）

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

注: レイヤー順は文書全体でグローバルなので、要素感知型条件付きグループ規則内で定義されるレイヤーもグローバルなレイヤー順を確立する際に考慮されます（条件に関わらず）。ただし文書全体にグローバルな条件（@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;

最初のメディアクエリがビューポート寸法で一致すると、 layoutレイヤーがレイヤー順の先頭になります。カラースキームのプリファレンスが一致する場合や、どちらの条件も真でない場合は、themeが先頭になります。

この挙動を避けたい著者は、事前にレイヤーの順序を明示的に定め、条件付き規則内で新たなレイヤーを定義しないようにできます。

注: カスケードレイヤーは起源とコンテキストごとにスコープされるので、 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と@mediaは混在できます：

@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 レイヤーの順序参照）、この規則によりページはレイヤーの順序を事前に宣言でき、スタイルシート全体を読まなくても順序が分かります。また、インラインレイヤーをインポートレイヤーと混在でき、ブロック構文ではできません。

文の構文により、スタイル規則を各レイヤーに追加する順序に関係なく事前にレイヤー順を定められます。このレイヤー順を事前に定めておくと便利な場合があります。例えば、@import規則の前などです。この例では、インポートされたtheme.cssスタイル規則が後のdefaultブロックで追加された規則よりも優先されます（レイヤー順が事前に定義されているため）：

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

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

また、@import規則を@layer規則の間に挿入して順序を定めることもできます。この例でも同じ結果になります：

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

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

ただし、@importと@namespace規則は連続していなければならず、間に他の規則を挟んではいけません。以下は無効です：

@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 属性や [HTML] の s 要素などである。文書言語に基づくすべてのスタイル指定は、対応する 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 { }
}

この場合、内側の@layer規則のname は「foo.bar」（「outer.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 を nullable に変更（Issue 6576）
style 属性の revert-layer は author レイヤーを revert しないことを明確化（Issue 6743）
style 属性およびキーフレームにおける revert-layer を明確化（Issue 6743）
§ 4.1.1 値のエイリアス化セクションを追加。（Issue 6193）
§ 8 レイヤー APIセクションを追加。（Issue 6576）
style 属性または @keyframes at-rule で使用された場合の 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 を使用するものに変更した。（Issue 5681）
revert-layer キーワードを追加した。（Issue 5793）

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

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

カスケードレイヤーをカスケードのソート基準に追加した（また、適切に相互作用するように、スタイル属性をカスケードのソート基準の独立したステップとして定義した）。
カスケードレイヤーを定義するための @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としてインポート・解釈される可能性があり、計算スタイルから機密データが推測される可能性があります。

適合性

文書の慣習

適合性要件は記述的な断定とRFC 2119用語の組み合わせで表現されています。規範部分で使われる「MUST」「MUST NOT」「REQUIRED」「SHALL」「SHALL NOT」「SHOULD」「SHOULD NOT」「RECOMMENDED」「MAY」「OPTIONAL」等のキーワードはRFC 2119に定義された通り解釈されますが、可読性のため本仕様ではすべて大文字で記述していません。

本仕様のすべてのテキストは、明示的に非規範とされたセクション、例、および注記を除き規範的です。[RFC2119]

本仕様の例は「for example」で始まるか、class="example"で規範テキストと区別されて提示されます：

情報的な注記は「Note」で始まり、class="note"で規範テキストから区別されて提示されます：

助言は規範的なセクションで特別な注意を促すようスタイリングされ、他の規範テキストと区別されて提示されます： UAはアクセシブルな代替手段を提供しなければならない。

適合クラス

本仕様への適合性は以下の3つの適合クラスで定義されます：

スタイルシートが本仕様に適合するためには、このモジュールで定義された構文を使うすべての文が、汎用CSS文法およびこのモジュールで定義された各機能ごとの個別文法に従って有効でなければなりません。

レンダラーが本仕様に適合するためには、スタイルシートを適切な仕様に従って解釈するだけでなく、本仕様で定義されたすべての機能を適切にパースし、文書をそれに応じてレンダリングすることが必要です。ただし、デバイスの制限により文書を正しくレンダリングできない場合でも、UAが非適合になるわけではありません（例：UAはモノクロモニターで色をレンダリングする必要はない）。

オーサリングツールが本仕様に適合するためには、汎用CSS文法およびこのモジュールで定義された各機能ごとの個別文法に従って構文的に正しいスタイルシートを書き、このモジュールで説明されているスタイルシートのその他の適合要件も満たす必要があります。

部分的な実装

著者が将来互換性のあるパース規則を利用してフォールバック値を割り当てられるように、CSSレンダラーは利用可能なレベルのサポートがないat規則、プロパティ、プロパティ値、キーワード、その他の構文要素を無効として（適切に無視）しなければなりません。特に、UAはサポートされないコンポーネント値のみを無視してサポートされる値のみを一つの複数値プロパティ宣言で適用することはしてはならない：いずれかの値が無効（サポートされない値は必ずそうなる）とみなされた場合、CSSは宣言全体を無視することを要求します。

不安定および独自機能の実装

非実験的な実装

仕様が候補勧告段階に達したら、非実験的な実装が可能となり、実装者は仕様通り正しく実装できたCRレベル機能については、プレフィックスなしの実装をリリースするべきです。

CSSの実装間の相互運用性を確立・維持するため、CSS作業グループは非実験的CSSレンダラーに対し、実装レポート（必要に応じてそのテストケースも）をW3Cに提出することを求めます。W3Cに提出されたテストケースはCSS作業グループによるレビューや修正の対象となります。

テストケースおよび実装レポートの提出方法等の詳細はCSS作業グループのウェブサイト https://www.w3.org/Style/CSS/Test/ を参照してください。質問は public-css-testsuite@w3.org メーリングリストまで。

CR終了基準

本仕様を提案勧告に進めるには、各機能について少なくとも2つの独立した相互運用可能な実装が必要です。各機能は異なる製品セットで実装されてもよく、すべての機能が一つの製品で実装される必要はありません。この基準のために、以下の用語を定義します：