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 宣言は、ユーザーエージェントスタイルシート、ページ作成者スタイルシート、**ユーザースタイルシート**など、さまざまなものに由来します。

スタイルシートの起源はこのように異なりますが、その範囲は重複しています。これを実現するために、カスケードアルゴリズムが相互作用を定義しています。

ブラウザーには、任意の文書に既定のスタイルを提供する基本的なスタイルシートがあります。これらのスタイルシートにはユーザーエージェントスタイルシートと呼ばれています。実際のスタイルシートを使用するブラウザーもあれば、コードでシミュレートするブラウザーもありますが、最終的な結果は同じです。

ブラウザーによっては、ユーザーがユーザーエージェントスタイルシートを変更することができます。ユーザーエージェントスタイルシートに関するいくつかの制約は HTML 仕様書によって設定されていますが、ブラウザーにはまだ多くの自由度があります。つまり、ブラウザーごとに大きな違いがあります。開発プロセスを簡素化するために、ウェブ開発者は多くの場合、 CSS リセットスタイルシートを使用して、特定のニーズに合わせて変更を開始する前に、共通のプロパティ値を既知の状態にします。

作成者スタイルシートは、スタイルシートの最も一般的な種類です。これらは、特定のウェブページまたはサイトのデザインの一部としてスタイルを定義するスタイルシートです。ページの作成者は、1つ以上のスタイルシートを使用して文書のスタイルを定義します。スタイルシートは、ウェブサイトの外観 (テーマ) を定義します。

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

カスケードアルゴリズムは、文書の各要素の各プロパティに適用する値を見つける方法を決定します。

1. 最初に、さまざまな起源からすべての規則をフィルタリングして、特定の要素に適用されるルールのみを保持します。つまり、セレクターが指定された要素と一致し、適切な media アット規則の一部である規則を意味します。
2. 次に、これらの規則をその重要度、つまり、 !important が後に続くかどうか、およびその起源に従って並べ替えます。カスケードは上流から下流に向けて行われます。つまり、ユーザー定義のスタイルシートによる !important の値は、ユーザーエージェントスタイルシートによる通常の値よりも優先されます。

   	起源	重要度
   1	ユーザーエージェント	通常
   2	ユーザー	通常
   3	作成者	通常
   4	アニメーション
   5	作成者	!important
   6	ユーザー	!important
   7	ユーザーエージェント	!important
   8	トランジション

3. 同等の場合は、詳細度を考慮してどれを選択するかを考慮します。

コンテンツがスタイルの変更を終えた後、スタイルを既知の状態に戻す必要が出てくることがあります。これは、アニメーションやテーマの変更などの場合に起こります。 CSS プロパティの all を使うと、 CSS 内の (ほぼ) すべてのものを既知の状態に素早く戻すことができます。

all では、すべてのプロパティを、初期状態 (既定)、カスケードの前のレベルから引き継いだ状態、特定のオリジン (ユーザーエージェントスタイルシート、作成者スタイルシート、ユーザースタイルシート)、さらにはプロパティの値を完全にクリアする状態のいずれかにすぐに戻すことができます。

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 カスケードの紹介
• CSS の主要概念: CSS 構文、 アット規則、 コメント、 詳細度、 継承、 ボックス、 レイアウトモード、 視覚整形モデル (en-US)、 マージンの相殺、 値 (初期値、 計算値、 解決値、 指定値、 使用値、 実効値)、 値の定義構文、 一括指定プロパティ、 置換要素