カスケードは、異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズムです。これはカスケーディングスタイルシートという名前で強調されているように、 CSS の中心を占めるものです。この記事では、カスケードとは何か、 CSS 宣言をカスケードする順番、そしてウェブ開発者にどのように影響するかを説明します。
どの CSS エンティティがカスケードに関係するか
CSS 宣言のみが、つまりプロパティ/値の組だけが、カスケードに加わります。つまり、宣言以外のエンティティを含む @-規則、例えば記述子を含む @font-face
などは、カスケードには加わりません。これらの場合、カスケードには全体としての @-規則のみがカスケードに加わります。ここで、 @font-face
は font-family
記述子で識別されます。いくつかの @font-face
規則に同じ記述子が定義されていた場合は、全体から見て、最も適切な @font-face
が考慮されます。
大部分の @-規則 — @media
, @document
, @supports
の中など — に含まれる宣言はカスケードに加わりますが、 @keyframes
に含まれる宣言は加わりません。 @font-face
と同様に、 @-規則全体のみがカスケードアルゴリズムによって選択されます。
最後に、 @import
および @charset
は特定のアルゴリズムに従い、カスケードアルゴリズムには影響を与えないことに注意してください。
CSS 宣言のオリジン
CSS カスケードアルゴリズムの役割は、 CSS プロパティの正しい値を決定するために CSS 宣言を選択することです。 CSS 宣言は、 ユーザーエージェントスタイルシート, ページ作成者スタイルシート, ユーザースタイルシート など、さまざまなものに由来します。
スタイルシートはこれらの異なる起源に由来しますが、それらは範囲が重複しています。これを機能させるために、カスケードアルゴリズムはそれらの相互作用を定義します。
ユーザーエージェントスタイルシート
ブラウザーには、任意の文書に既定のスタイルを提供する基本的なスタイルシートがあります。これらのスタイルシートにはユーザーエージェントスタイルシートという名前が付けられています。実際のスタイルシートを使用するブラウザーもあれば、コードでシミュレートするブラウザーもありますが、最終的な結果は同じです。
一部のブラウザーでは、ユーザーがユーザーエージェントスタイルシートを変更することができます。ユーザーエージェントスタイルシートに関するいくつかの制約は HTML 仕様書によって設定されていますが、ブラウザーにはまだ多くの自由度があります。つまり、ブラウザーごとに大きな違いがあります。開発プロセスを簡素化するために、ウェブ開発者は多くの場合、 CSS リセットスタイルシートを使用して、特定のニーズに合わせて変更を開始する前に、共通のプロパティ値を既知の状態にします。
ページ作成者スタイルシート
ページ作成者スタイルシートは、スタイルシートの最も一般的な種類です。これらは、特定のウェブページまたはサイトのデザインの一部としてスタイルを定義するスタイルシートです。ページの作成者は、1つ以上のスタイルシートを使用して文書のスタイルを定義します。スタイルシートは、ウェブサイトの外観 (テーマ) を定義します。
ユーザースタイルシート
ウェブサイトのユーザー (または読者) は、ユーザーの希望に合わせて使い勝手を調整するように設計された独自のユーザースタイルシートを使用して、多くのブラウザーでスタイルを上書きすることを選択できます。
カスケード順
カスケードアルゴリズムは、文書の各要素の各プロパティに適用する値を見つける方法を決定します。
- 最初に、さまざまな起源からすべての規則をフィルタリングして、特定の要素に適用されるルールのみを保持します。つまり、セレクターが指定された要素と一致し、適切な
media
@-規則の一部である規則を意味します。 - 次に、これらのルールをその重要度、つまり、
!important
が後に続くかどうか、およびその起源に従って並べ替えます。カスケードは上流から下流に向けて行われます。つまり、ユーザー定義のスタイルシートによる!important
の値は、ユーザーエージェントスタイルシートによる通常の値よりも優先されます。起源 重要性 1 ユーザーエージェント normal 2 ユーザー normal 3 作成者 normal 4 アニメーション 5 ユーザーエージェント !important
6 作成者 !important
7 ユーザー !important
8 トランジション - 同等の場合は、どれを選択するかに値の詳細度が考慮されます。
スタイルの初期化
コンテンツのスタイルの変更が完了した後で、それ自体を既知の状態に戻す必要がある状況に陥ることがあります。アニメーションやテーマの変更などの場合に起こるかもしれません。 CSS プロパティ all
を使用すると、 CSS 内の (ほぼ) すべてのものを既知の状態に素早く戻すことができます。
all
では、すべてのプロパティを初期 (既定) 状態、前のレベルのカスケードから継承した状態、特定の起源 (ユーザーエージェントスタイルシート、作成者スタイルシート、またはユーザースタイルシート) のいずれかに直ちに復元することを選択できます。または、プロパティの値を完全にクリアすることもできます。
CSS アニメーションとカスケード
CSS アニメーションは、 @keyframes
@-規則を使用して、状態間のアニメーションを定義します。キーフレームはカスケードされません。つまり、 CSS は常に単一の @keyframes
から値を取得し、複数の値を混合することはありません。
複数のキーフレームが適用された場合は、最も重要な文書で定義されている最新のものを選択しますが、すべてを組み合わせることはありません。
例
さまざまなオリジンにまたがる CSS の複数のソースを含む例を見てみましょう。ここには、ユーザーエージェントスタイルシート、2つの作成者スタイルシート、ユーザースタイルシート、および HTML 内のインラインスタイルがあります。
ユーザーエージェント CSS:
li { margin-left: 10px }
作成者 CSS 1:
li { margin-left: 0 } /* 初期化のため */
作成者 CSS 2:
@media screen {
li { margin-left: 3px }
}
@media print {
li { margin-left: 1px }
}
ユーザー CSS:
.specific { margin-left: 1em }
HTML:
<ul>
<li class="specific">1<sup>st</sup></li>
<li>2<sup>nd</sup></li>
</ul>
この場合、 li
および .specific
規則内の宣言を適用する必要があります。 !important
として宣言されている宣言はないため、優先順位は、ユーザースタイルシートまたはユーザーエージェントスタイルシートの前の作成者スタイルシートです。
ここでは3つの宣言が競合しています。
margin-left: 0
margin-left: 3px
margin-left: 1px
最後のものは (画面上で) 無視され、最初の2つは同じセレクターを持つため、同じ詳細度があります。したがって、次に選択されるのは同じ詳細度のうちの最後のものです。
margin-left: 3px
カスケードアルゴリズムは詳細度アルゴリズムの前に適用されるため、ユーザー CSS で定義された宣言はより高い詳細度を持ちますが、選択されないことに注意してください。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Cascading and Inheritance Level 4 | 勧告候補 | プロパティをカスケードレベルに戻すことができる revert キーワードを追加。 |
CSS Cascading and Inheritance Level 3 | 勧告候補 | カスケードオリジンの上書を削除。 W3C 標準で使用されなかったため。 |
CSS Level 2 (Revision 1) the cascade の定義 |
勧告 | |
CSS Level 1 the cascade の定義 |
勧告 | 初回定義 |
関連情報
- とても簡単な CSS カスケードの紹介
- CSS の主要概念: CSS 構文、 詳細度、 継承、 ボックスモデル、 レイアウトモード、 視覚フォーマットモデル、 マージンの相殺、 値 (initial / computed / used / actual)、 値の定義構文、 ショートハンドプロパティ、 置換要素