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 url("narrow.css") supports(display: flex) handheld and (max-width: 400px);

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

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

2.1. 条件付き @import ルール

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

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

@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]

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

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

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

• ホスト文書がquirks modeであり、 かつホスト文書のオリジンがリンクされたリソースresponseの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]で指定された場合、 すべてのサブプロパティにそのキーワードを設定します（リセット専用サブプロパティも含む）。 （これらのキーワードは、同じ宣言内で他の値と併用できません。ショートハンドでも同様です。）

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

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

4. 値の処理

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

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

1. まず、各要素・各プロパティに適用される宣言値をすべて収集します。 その要素には宣言値が0個または複数適用されている場合があります。
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. 例

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]のツリーコンテキストは シャドウを含むツリー順でネストされるとみなされます。

注: これは、通常のカプセル化コンテキストの宣言が外側コンテキストに簡単に上書きされる初期値をセットでき、 重要な宣言は外側から上書きできない強制指定となることを意味します。

詳細度

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]

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

/* ユーザーのスタイルシート */
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. 非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属性などでスタイル宣言が割り当てられていてもです。

• クイックモードのContent-Type仮定に関する起源比較の明確化。§ 2.3 CSSスタイルシートのContent-Type参照。 (Issue 4838)

2018年8月28日候補勧告以降の主な変更点：

• シャドウDOMに対応するためcontextをカスケードのソート基準に追加。[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として解釈され、 適用された算出スタイルから機密情報が推測される可能性があります。