CSSのカスケードと継承

カスケード

カスケードとは、様々なソースから来るCSSの宣言を組み合わせる際のアルゴリズムのことを指しています。
一口にCSSと言っても、Webサイトの製作者が意識して触っているもの以外にも、いくつかの種類が存在します。異なるソースから来るCSSの宣言を整理して、実際のWebページに反映させるために、カスケードのアルゴリズムが定義されています。

ユーザーエージェントスタイルシート

ブラウザーには、任意の文書に既定のスタイルを提供する基本的なスタイルシートがあります。
このスタイルシートのことを、「ユーザーエージェントスタイルシート」と呼んでいます。

ページ作成者スタイルシート

最も一般的なスタイルシートで、Webサイトのコンテンツの一部として提供されるスタイルシートのことを、「ページ作成者スタイルシート」と呼んでいます。
通常、サイト製作者が用意するスタイルシートは、このページ作成者スタイルシートとなります。

ユーザースタイルシート

ウェブサイトのユーザー (または読者) は、ユーザーの希望に合わせて使い勝手を調整するように設計された独自のユーザースタイルシートを使用して、多くのブラウザーでスタイルを上書きすることを選択できます。

カスケード順の決定方法

カスケード順は以下のルールで決定されます。

1.要素に適用される宣言をフィルタリング

まずは、すべてのソースから、特定の要素に適用されるCSSの宣言をすべて抽出します。

2.次に、抽出した宣言をその重要度に基づいて並び替えます。

並び替えは、下記の順で行われ、後に出てきたものほど優先されます。

1. ユーザーエージェントスタイルシート
2. ユーザースタイルシート
3. ページ作成者スタイルシート
4. アニメーション関連の宣言
5. ユーザーエージェントスタイルシートで、!important 付きの宣言
6. ユーザースタイルシートで、!important 付きの宣言
7. ページ作成者スタイルシートで、!important 付きの宣言
8. トランジション関連の宣言

3.ここまでで同等だった場合に、詳細度で判断されます。

CSS アニメーションとカスケード

CSS アニメーションは、 @keyframes @-規則を使用して、状態間のアニメーションを定義します。キーフレームはカスケードされません。つまり、 CSS は常に単一の @keyframes から値を取得し、複数の値を混合することはありません。
複数のキーフレームが適用された場合は、最も重要な文書で定義されている最新のものを選択しますが、すべてを組み合わせることはありません。

継承

CSS における継承とは、要素のプロパティに値が指定されなかった場合の挙動です。
要素の「継承プロパティ」に値が設定されていなかった場合、要素はその親要素のプロパティの計算値を取得します。

See the Pen gOamRaR by Masahiko Iwakiri (@m-iwakiri) on CodePen.

この例の場合、文字色の colorプロパティ は継承プロパティなので、<article> 要素で宣言した緑の文字色は、そのまま <p> 要素に継承されています。
その一方で、borderプロパティ や paddingプロパティ は非継承プロパティなので、<article> 要素で宣言した枠線や余白は <p> 要素には適用されていません。

継承を制御するプロパティ値

CSSには、継承を制御するための特別なユニバーサルプロパティ値というものがあり、すべての CSS プロパティはこれらの値を受け入れます。

• inherit ： 明示的に継承させます。
• initial ： ユーザーエージェントスタイルシートで定義されている値にリセットします。
• unset ： プロパティが自然に継承される場合は inherit のように動作し、そうでない場合は initial のように動作します。