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

1. はじめに

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

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

逆に、どの宣言も要素・プロパティの組み合わせに値を設定しない場合には、継承やプロパティの初期値によって値が決定されます。

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

文書内のすべての要素のすべてのプロパティの指定値を決定するためのルールは本仕様で記述されています。ページコンテキストおよびマージンボックス内の指定値を決定するためのルールは[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は無視する）、そうでなければ@importルールは無効となります。 @importの構文は次の通りです：

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

ここで<url>または<string>はインポートするスタイルシートのURLを指定し、オプションの[<supports-condition>|<declaration>]や<media-query-list>（まとめてimport条件）は適用される条件を示します。

次の条件付き@importルールは、UAがdisplay: flexをサポートしている場合のみスタイルシートを読み込み、かつハンドヘルドデバイスで、最大ビューポート幅が400pxのときのみスタイルシートを適用します。

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

<string>が指定された場合、同じ値の<url>として解釈しなければなりません。

次の2行は同じ意味であり、 @importの2つの構文（url()使用と裸の文字列）を示しています：

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

2.1. 条件付き @import ルール

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

次の規則は@importルールでメディア依存にできる例です：

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

ユーザーエージェントは、import条件が一致しない限り、条件付きインポートの取得を回避できます。さらに、<supports-condition>がインポートされたスタイルシートの適用を妨げる場合、 UAはスタイルシートを取得してはならず（他のリンク経由で取得される場合を除く）、インポートルールのCSSImportRule.styleSheet値には必ずnullを返す必要があります（他のリンク経由でロードされていても）。

次の規則は、著者がレガシーユーザーエージェント向けにフォールバック規則を提供しつつ、新しいユーザーエージェントでネットワークパフォーマンスに影響を与えない方法を示しています：

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

import条件は、<media-query-list>によって与えられ、これはメディアクエリリストとして解析・解釈されます。また、<supports-condition>は[[supports query]]として解析・解釈されます。 <supports-condition>の代わりに<declaration>が指定された場合、それは<supports-decl>（括弧が追加される）として解釈され、 <supports-condition>として扱われます。

例えば、次の2行は同じ意味になります：

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

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

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

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

注: これはリソースの取得方法には要件を課しません。CSSOMでの反映や本仕様のような仕様での利用方法のみを規定します。適切なキャッシュがあれば、UAはスタイルシートを1度だけ取得しても問題ありません。たとえ複数回リンク・インポートされていたとしてもです。

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

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

@importの取得を、@importルールruleに対して実行する場合：

parentStylesheetをruleの親CSSスタイルシートとする。[CSSOM]
ruleが<supports-condition>を持ち、その条件が偽の場合は終了。
parsedUrlをruleのURLとparentStylesheetのlocationを使ってURLパーサー手順を実行した結果とする。このアルゴリズムがエラーを返した場合、終了。[CSSOM]
スタイルリソースの取得をparsedUrl、スタイルシートparentStylesheet、destination "style"、CORS mode "no-cors"で実行し、 processResponseはresponse responseとバイトストリーム、nullまたは失敗byteStreamを受け取る以下の手順とする：
1. maybeByteStreamがバイトストリームでなければ終了。
2. parentStylesheetがquirks modeかつresponseがCORS-same-originの場合は、content typeを"text/css"とする。それ以外の場合はcontent typeをresponseのContent Typeメタデータとする。
3. content typeが"text/css"でなければ終了。
4. importedStylesheetをbyteStramとparsedUrlを使ってスタイルシートのパースした結果とする。
5. importedStylesheetのorigin-cleanフラグをparentStylesheetのorigin-cleanフラグと同じ値に設定する。
6. responseがCORS-same-originでなければ、 importedStylesheetのorigin-cleanフラグを未設定にする。
7. ruleのstyleSheetにimportedStylesheetを設定する。

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

インポートされたスタイルシートの処理は、リンクされたリソースの実際の型によって決定されます：

リソースがContent-Typeメタデータを持たない場合、型はtext/cssとして扱われます。
ホスト文書がquirks modeであり、かつホスト文書のオリジンがリンクされたリソースresponseの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つの方法を定義しています。

旧名エイリアス: 旧プロパティの値構文が新プロパティと同一の場合、解析時に旧プロパティ名が新プロパティ名に変換されるという、ケースマッピング同様の操作でエイリアスされます。この変換は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-before, page-break-after, page-break-insideプロパティ参照）。
page-break-before: alwaysを設定すると、パース時にbreak-before: pageに展開されます（他のショートハンド同様）。同様に、break-before: pageが設定されている場合、 getComputedStyle(el).pageBreakBeforeは"always"を返します。しかし、スタイルブロックをシリアライズする際（CSSOM 1 § 6.7.2 CSS値のシリアライズ参照）、 page-break-beforeプロパティは、指定の有無に関わらずシリアライズ時に選択されることはありません。代わりに、break-beforeが常に選択されます。 break-beforeが常に選ばれます。

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

名前:	all
値:	initial \| inherit \| unset \| revert
初期値:	各プロパティ参照
適用対象:	各プロパティ参照
継承:	各プロパティ参照
パーセンテージ:	各プロパティ参照
算出値:	各プロパティ参照
アニメーション型:	各プロパティ参照
正規順序:	文法による

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

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

例えば、著者が要素にall: initialを指定すると、すべての継承が阻止され、すべてのプロパティがリセットされます。これは、著者・ユーザー・ユーザーエージェントの全レベルで規則が一切現れなかった場合と同じです。

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

4. 値の処理

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

特定の要素またはボックスに対するCSSプロパティの最終的な値は、複数段階の計算の結果です：

まず、各要素・各プロパティに適用される宣言値をすべて収集します。その要素には宣言値が0個または複数適用されている場合があります。
カスケード処理によってカスケード値が決定されます。各要素の各プロパティごとに最大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>値を取るプロパティにも影響し得ます。

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

注: 「すべての要素」に適用されると定義されたプロパティは、すべての要素および表示型に適用されるが、必ずしもすべての疑似要素型に適用されるわけではない。疑似要素には、多くの場合、それら独自の特定のレンダリングモデルまたはその他の制限があるためである。ただし、::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

5. フィルタリング

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

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

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

6. カスケーディング

カスケードは、指定された要素の指定されたプロパティについて未整列の宣言値のリストを以下で定める宣言の優先順位でソートし、単一のカスケード値を出力します。

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

カスケードは以下の基準に従い、優先度の高い順に宣言をソートします：

オリジンと重要度

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

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

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

コンテキスト

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

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

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

詳細度

Selectors モジュール [SELECT] は、セレクターの詳細度を算出する方法を説明している。各宣言は、それが現れるスタイル規則と同じ詳細度を持つ。このステップの目的では、スタイル規則に属さない宣言（style 属性の内容など）は、どのセレクターよりも高い詳細度を持つものとみなされる。最も高い詳細度を持つ宣言が優先される。

出現順序

文書順で最後の宣言が優先される。この目的では:

インポートされたスタイルシートからの宣言は、そのスタイルシートが @import 規則の位置に置き換えられたかのように順序付けられる。
起点となる文書によって独立してリンクされたスタイルシートからの宣言は、ホスト文書言語によって決定されるリンク順に連結されたかのように扱われる。
style 属性からの宣言は、 style 属性が現れる要素の文書順に従って順序付けられ、すべてのスタイルシートの後に配置される。

カスケードの出力は、各要素の各プロパティについての宣言値を並べ替えた（空の場合もある）リストである。

6.2. カスケードの起源

各スタイル規則はカスケード起源を持ち、それがカスケードへの参入位置を決定します。 CSSは3つの基本的な起源を定義しています：

著者起源: 著者は、文書言語の慣習に従ってソース文書用のスタイルシートを指定します。例えばHTMLでは、スタイルシートを文書内に含めたり外部リンクすることができます。
ユーザー起源: ユーザーは特定の文書に対してスタイル情報を指定できる場合があります。例えば、ユーザーがスタイルシートを含むファイルを指定したり、ユーザーエージェントがユーザースタイルシートを生成するインターフェースを提供したり（またはそのように振る舞う）できる場合があります。
ユーザーエージェント起源: 準拠ユーザーエージェントはデフォルトスタイルシートを適用する（またはそのように振る舞う）必要があります。ユーザーエージェントのデフォルトスタイルシートは、文書言語の一般的な表示期待に応じて要素を表示すべきです（例：ビジュアルブラウザではHTMLのEM要素を斜体フォントで表示するなど）。例：HTMLユーザーエージェントスタイルシート参照。[HTML]

CSS拡張仕様は以下の追加起源を定義します：

アニメーション起源: CSSアニメーション[css-animations-1]は、実行時にその効果を表す「仮想」規則を生成します。
トランジション起源: CSSアニメーション同様、CSSトランジション[css-transitions-1]も実行時にその効果を表す「仮想」規則を生成します。

6.3. 重要な宣言：!important注釈

CSSは著者とユーザースタイルシート間の権限バランスを目指しています。デフォルトでは、著者のスタイルシート内の規則がユーザーのスタイルシートの規則を上書きし、ユーザーのスタイルシートはユーザーエージェントのデフォルトスタイルシートの規則を上書きします。このバランスのため、宣言を重要にすることで、カスケード内の重みが高まり、優先順位が逆転します。

宣言が重要であるのは、 !important注釈が[css-syntax-3]で定義されている場合です。すなわち、値の最後の2つの（空白・コメント以外の）トークンが区切りトークン!と識別子トークンimportantである場合です。その他の宣言は通常（非重要）宣言です。

[hidden] { display: none !important; }

重要宣言は通常宣言より優先されます。著者・ユーザースタイルシートの両方で重要宣言を含めることができ、ユーザー起源の重要宣言は著者起源の重要宣言より優先されます。このCSS機能はドキュメントのアクセシビリティを向上させ、特殊な要件（大きなフォントや色の組み合わせなど）を持つユーザーが表示をコントロールできるようにします。

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

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

次の例におけるユーザーのスタイルシートの最初の規則には、 !important 宣言が含まれており、これは作者のスタイルシート内の対応する宣言を上書きする。 2 番目の規則内の宣言も、!important と指定されているため優先される。ただし、ユーザーのスタイルシート内の 3 番目の宣言は !important ではないため、作者のスタイルシート内の 2 番目の規則に負ける（この規則はたまたまショートハンドプロパティにスタイルを設定している）。また、2 番目の宣言が !important であるため、作者の 3 番目の規則は作者の 2 番目の規則に負ける。これは、!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. 非CSSプレゼンテーションヒントの優先順位

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

文書言語は、そのようなプレゼンテーションヒントがカスケードへ UA起源または著者起源として参入するかどうかを定義できます。その場合、UAは定義に従って挙動する必要があります。例：[SVG11]はプレゼンテーション属性を著者起源にマッピングします。

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

7. デフォルト化

カスケードの結果として値が決定されない場合、指定値は別の方法で決定されなければなりません。継承プロパティは親要素から継承を通じてデフォルト値を取得します。その他のプロパティは初期値を取ります。著者はinheritおよびinitialキーワードを使って明示的に継承や初期化を指定できます。

7.1. 初期値

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

7.2. 継承

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

[DOM]ツリーにシャドウがある場合、継承はフラット化要素ツリー上で行われます。つまり、スロット割当された要素はslotに継承し、ライトツリーの親から直接継承するわけではありません。疑似要素は各疑似要素に記載された仮想タグ列に従って継承します。[CSS-PSEUDO-4]

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

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

注: 継承は文書ツリーを辿り、匿名ボックスで遮られたり、ボックスツリーの操作で影響されたりしません。

7.3. 明示的なデフォルト化

以下に定義されるCSS全体のプロパティ値がいくつかあります。プロパティをこれらの値に明示的に宣言することで、特定のデフォルト化挙動を指定できます。 CSS値と単位 [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 の目的上、このオリジンにはアニメーションオリジンが含まれる。

8. 変更点

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

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

@importの文法をメディアクエリおよびsupports条件に合わせて更新
関数記法の解析時エイリアスを許可
@importの取得をFetchの観点で定義
§ 4.1.1 値のエイリアス化セクション追加。 (Issue 6193)

8.2. 2018年8月28日候補勧告以降の変更点

2021 年 3 月 19 日の作業草案以降の軽微ではない変更には、次のものが含まれる:

作者オリジンのプレゼンテーションヒントを処理するために、ゼロ詳細度とソース順序に依存する代わりに、作者プレゼンテーションヒントオリジンを定義し、カスケードのカプセル化コンテキストの側面との相互作用を正しく定義した。 (Issue 66749)

2020 年 8 月 18 日の作業草案以降の軽微ではない変更には、次のものが含まれる:

レガシー名前エイリアスが値空間のサブセットに対応付けられる可能性を削除した。これは単純な名前エイリアスであるためである。 (Issue 4839)
適用対象という概念に独自の節を設け、その含意についていくつかの注記を追加した。 (Issues 1861 and 5565)
プロパティという用語を定義した。 (Issue 5633)
ツリーの一部ではない要素の値処理を定義した。 (Issue 1964 and 1548)

接続されていない要素、または文書の平坦化要素ツリーの一部ではない要素は、CSS 値処理に参加せず、宣言値、カスケード値、指定値、算出値、使用値、または実際の値を持たない。これは、それらにスタイル宣言が割り当てられている可能性がある場合（たとえば、style 属性によって）でも同様である。
§ 2.3 CSS スタイルシートの Content-Type における quirks モードの Content-Type 仮定について、オリジンの比較を明確化した。 (Issue 4838)

2018 年 8 月 28 日の勧告候補以降の軽微ではない変更には、次のものが含まれる:

Shadow DOM に対応するため、コンテキストをカスケードのソート基準に追加した。 [DOM] (Issue 5372)
シャドウツリーを考慮し、継承が平坦化要素ツリー上で機能することを定義した。
実装されていないため、カスケードのソート基準からスコープを削除した。

8.3. 2016年1月14日候補勧告以降の変更点

2016年1月14日作業草案以降の主な変更点：

CSSで使われるエイリアスの型を厳密に定義。 (Issue 866) § 3.1 プロパティのエイリアス化参照。
revertは継承値には影響せず、カスケード値のみに影響することを明確化。

ユーザー起源
~~カスケード~~ カスケード値をユーザーエージェントレベルに巻き戻し、指定値は、著者レベルやユーザーレベルの規則がこの要素のこのプロパティに指定されなかった場合と同様に計算されます。
著者起源
~~カスケード~~ カスケード値をユーザーレベルに巻き戻し、指定値は、著者レベルの規則がこの要素のこのプロパティに指定されなかった場合と同様に計算されます。
カスタムプロパティはallショートハンドではリセットされないことを明確化。 (2518)

allプロパティはショートハンドであり、 すべてのCSSプロパティをリセットしますが、 directionとunicode-bidiは除外されます。 … カスタムプロパティ [css-variables-1]はリセットされません。
インポートされたスタイルシートは、規則の順序などの観点でインポート元スタイルシートとは別個に解釈されることをより厳密に定義。
@import規則が有効なスタイルシートを参照する場合、 UAはそのスタイルシートの内容を@import規則の位置に書かれているかのように扱いますが、例外が2つあります：
- ある機能（例：@namespaceルール）が特定のスタイルシートにのみ明示的に適用され、インポートされたものには適用されないと定義されている場合、その機能はインポートスタイルシートには適用されません。
- スタイルシート内の複数の構造の相対順序に依存する機能（例：@charsetは他の内容より前に来てはならないなど）は、同じスタイルシート内の構造間にのみ適用されます。
テキストノードは親要素の子とみなされ、プロパティは親インライン要素とは独立して観察可能となり、display: contents [css-display-3]によってデフォルト化でスタイルが割り当てられることを明記。

本仕様の目的では、テキストノードは対応する要素の子要素扱いとなり、全プロパティを持ちます。セレクターでターゲットにできないため、すべての算出値はデフォルト化で割り当てられます。
廃止された“override”起源（DOM Level 2 Styleで定義されていたが後に廃止）に関する記述を削除。 (Issue 1385)

コメント処理状況一覧があります。

8.4. 2015年4月21日作業草案以降の変更点

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

defaultキーワードをrevertに名称変更。
supports()構文で宣言が1つだけの場合、重複する括弧を省略できるように変更。

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

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

カスケードを巻き戻すためのrevertキーワードを導入。
supports条件付きsupports()構文を@import規則に導入。
シャドウDOM対応のため、カプセル化コンテキストをカスケードのソート基準に追加。[DOM]
CSSがレガシー構文をサポートするための2種類のプロパティエイリアス機構を定義。§ 3.1 プロパティのエイリアス化参照。

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

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

allショートハンド
initialキーワード
unsetキーワード
アニメーションとトランジションをカスケードに組み込み

謝辞

David Baron、Tantek Çelik、Simon Sapin、Noam Rosenthal、Boris Zbarskyは本仕様への貢献者です。

プライバシーとセキュリティに関する考慮事項

カスケード処理は同一オリジンとクロスオリジンのスタイルシートを区別しないため、クロスオリジンスタイルシートの内容が、文書に適用された算出スタイルから推測される可能性があります。
ユーザーの設定やUAのデフォルトが、スタイル規則の適用によって表現されることで、カスケード処理を通して算出スタイルから推測される可能性があります。
@import規則は、クロスオリジンのスタイルシートの読込にCORSプロトコルを適用せず、自由にインポート・適用できるようになっています。
@import規則は、Content-Typeメタデータがないリソース（またはホスト文書がquirks modeの場合は同一オリジンのファイル）を 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"で他の規範的本文と区別されます。例：

勧告は規範的なセクションであり、特別な注意を促すためにスタイルされ、<strong class="advisement">で他の規範的本文と区別されます。例： UAはアクセス可能な代替手段を提供しなければなりません。

適合クラス

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

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

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

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

部分的な実装

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

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

非実験的な実装

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

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

CR終了基準

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