滝

CSS ポッドキャスト - 004: カスケード

CSS はカスケーディング スタイルシートの略です。 カスケードとは、複数の CSS ルールが 1 つの HTML 要素に適用される場合の競合を解決するアルゴリズムです。 次の CSS でスタイル設定されているボタンのテキストが青色になるのは、このためです。

button {
  color: red;
}

button {
  color: blue;
}

カスケード アルゴリズムを理解すると、このような競合をブラウザがどのように解決するかを理解できます。 カスケード アルゴリズムは 4 つのステージに分かれています。

  1. 表示位置と表示順序: CSS ルールの表示順序
  2. 特異性: 最も一致する CSS セレクタを決定するアルゴリズム
  3. オリジン: CSS が表示される順序とソース（ブラウザのスタイルであるかどうかに関係なく） ブラウザ拡張機能からの CSS、または作成した CSS からの CSS
  4. 重要性: CSS ルールの中には、他よりも重要度の高いものがあるが、 特に !important ルールタイプでは、

表示の位置と順序

CSS ルールの表示順序と表示方法は、カスケード ルールによって考慮されます。 競合の解決を計算するときに使用します。

このレッスンの最初に紹介したデモは、最もわかりやすい位置の例です。 同じ限定性のセレクタを持つルールが 2 つあります。 最後に宣言されたものが優先されます

スタイルは HTML ページのさまざまなソースから取得でき、 <link> タグなど 埋め込み <style> タグ 要素の style 属性で定義されたインライン CSS です。

HTML ページの上部に CSS を含む <link> がある場合は、 次に、ページの下部に CSS を含む別の <link> を追加します。下部の <link> が最も詳細度が高まります。 埋め込まれた <style> 要素でも同じことが起こります。 ページの下流にあるほど、より具体的になります。

ボタンの背景は青で、 <link /> 要素に含まれる CSS の定義に従います。 暗く設定する CSS ルールは、リンクされた 2 つ目のスタイルシートにあります。 後者に表示されます。

この順序は埋め込みの <style> 要素にも適用されます。 <link> の前に宣言すると、 リンク先のスタイルシートの CSS の詳細度が最も高くなります。

<style> 要素は <head> 内で宣言されており、 <link /> 要素は <body> で宣言されています。 つまり、<style> 要素よりも限定的になります。

CSS が宣言されているインライン style 属性は、他のすべての CSS をオーバーライドします。 （宣言で !important が定義されている場合を除きます）

位置は CSS ルールの順番にも適用されます。 この例では、background: purple が最後に宣言されたため、要素の背景は紫色になります。 緑色の背景は紫色の背景の前に宣言されていたため、ブラウザで無視されるようになりました。

.my-element {
  background: green;
  background: purple;
}

同じプロパティに 2 つの値を指定できること を使用すると、特定の値をサポートしていないブラウザ用の代替を簡単に作成できます。 次の例では、font-size が 2 回宣言されています。 clamp() がブラウザでサポートされている場合、 この場合、以前の font-size 宣言は破棄されます。 clamp() がブラウザでサポートされていない場合: 最初の宣言が適用され、フォントサイズは 1.5rem になります。

.my-element {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}
で確認できます。

理解度をチェックする

カスケードに関する知識をテストする

ページに次の HTML 要素があるとします。

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/https/web.dev/styles.css" />
  </head>
  <body>
    <button>I am a button</button>
    <style>
      button {
        background: pink;
      }
    </style>
  </body>
</html>

styles.css 内に、次の CSS ルールがあります。

button {
  background: yellow;
}

ボタンの背景は何色ですか？

ピンク
埋め込まれた <style> のオリジンがページの下側にある <link> タグがあるため、button の特異性は同じですが、 スタイルルールの position: 優先する
黄
HTML ドキュメントでは、黄色のボタンの背景が読み取られている可能性があります。 後に同じ特異性の新しいルールが発見された場合は、 このルールはボタンには適用されません。

特異性

特異性は、最も詳細な CSS セレクタを判別するアルゴリズムで、 重み付けまたはスコアリング システムを使用してそれらの計算を行います。 ルールをより具体的にすることで、 セレクタに一致する他の CSS が CSS の後続部分に存在していても、その CSS が適用される場合があります。

次のレッスンで、特異性の計算方法の詳細、 ただし、いくつかの点に留意することで、あまりに多くの特異性の問題を回避できます。

CSS で特定の要素クラスをターゲットにすると、そのルールがより具体的になります。 適用されることがより重要だと考えられる場合は 要素のみをターゲットとする CSS よりも高い精度で処理できます。 つまり、次の CSS では、 両方のルールが一致し、h1 セレクタのルールはスタイルシートで後から挿入されますが、h1 は赤色になります。

<h1 class="my-element">Heading</h1>

.my-element {
  color: red;
}

h1 {
  color: blue;
}

id は CSS をさらに具体的にし、 そのため、ID に適用したスタイルは、他の多くの方法で適用されているスタイルをオーバーライドします。 このため、id にスタイルを適用することは一般的におすすめできません。 スタイルを別のスタイルで上書きするのが難しくなる場合があります。

特異性は累積的

次のレッスンで確認するように 各タイプのセレクタには「ポイント」が与えられます。 要素をターゲットにするために使用したすべてのセレクタのポイントが加算されます。 つまり、 a.my-class.another-class[href]:hover: 他の CSS で上書きするのがかなり難しいものになります。 CSS の再利用性を高めるために セレクタはできるだけシンプルにすることをおすすめします 必要に応じて要素を特定するためのツールとして特異性を使用します。 可能な限り、特定の長いセレクタリストのリファクタリングを検討してください。

出発地

記述する CSS 以外にも、ページに適用される CSS があります。 このカスケードでは、CSS のオリジンが考慮されます。 このオリジンには、ブラウザの内部スタイルシート、 ブラウザ拡張機能やオペレーティング システムにより追加されたスタイル、 作成した CSS を定義します。 これらのオリジンの特異性の順位は、具体性が低いものから高いものの順に次のとおりです。

  1. ユーザー エージェントの基本スタイル。これらのスタイルは、ブラウザがデフォルトで HTML 要素に適用するものです。
  2. ローカル ユーザーのスタイル。ベースフォントサイズや モーションの抑制が好みになります ブラウザ拡張機能や たとえば、ユーザーがウェブページ用に独自のカスタム CSS を作成できるブラウザ拡張機能などです。
  3. 作成された CSS。作成する CSS。
  4. 作成日: !important。作成した宣言に追加する !important。
  5. ローカル ユーザー スタイル !important。オペレーティング システム レベルにあるすべての !important ブラウザ拡張機能レベルの CSS です。
  6. ユーザー エージェント !important。デフォルトの CSS で定義されているすべての !important 表示されます。
リストでも説明されているオリジンの順序を図で示した図。

作成した CSS に !important ルールタイプがある場合 かつ、ユーザーのカスタム CSS に !important ルールタイプがあり、どの CSS が優先しますか？

理解度をチェックする

カスケード オリジンの知識をテストする

カスケード オリジンの知識をテストし、次のスタイルを検討します。 生成します。

User-agent のスタイル

h1 { margin-block-start: 0.83em; }

ブートストラップ

h1 { margin-block-start: 20px; }

ページ作成者のスタイル

h1 { margin-block-start: 2ch; }

@media (max-width: 480px) {
  h1 { margin-block-start: 1ch; }
}

ユーザーのカスタム スタイル

h1 { margin-block-start: 2rem !important; }

次の HTML があるとします。

<h1>Lorem ipsum</h1>

h1 の最後の margin-block-start はいくつですか？

20px
ブートストラップは作成オリジンの一部であり、重要なローカル ユーザー スタイルが失われます。
0.83 m
ユーザー エージェント スタイルのオリジンは、重要なローカル ユーザー スタイルに負けています。
2 レム
この !important ユーザーのカスタム スタイルは最も限定的なオリジンです。
2ch
この作成者スタイルは作成元の一部であり、重要なローカル ユーザー スタイルと失われます。
1ch
この作成者スタイルは作成元の一部であり、重要なローカル ユーザー スタイルと失われます。

重要度

すべての CSS ルールが互いに同じように計算されるわけではなく、 互いに同じ特異性を持つようにできます

重要度の優先順位（最も低いものから順に） 最重要事項は次のとおりです

  1. 通常のルールタイプ（font-size、background、color など）
  2. animation 個のルールの種類
  3. !important ルールタイプ（オリジンと同じ順序）
  4. transition 個のルールの種類

アクティブ アニメーションと遷移ルールのタイプは、通常のルールよりも重要度が高くなります。 !important ルールタイプよりも重要度が高い移行の場合。 これは、アニメーションや遷移がアクティブになると、 視覚的な状態を変更するという動作をします。

DevTools を使用して、一部の CSS が適用されない理由を調べる

ブラウザの DevTools には通常、要素に一致する可能性のある CSS がすべて表示されますが、 未使用のものに取り消し線が引かれます

上書きされた CSS に取り消し線が引かれたブラウザ DevTools の画像

適用するはずだった CSS がまったく表示されない場合は 要素と一致しなかったことを意味します その場合、他の場所を調べる必要があります。 クラス名や要素名の入力ミス、無効な CSS が原因の可能性があります。

理解度をチェックする

カスケードに関する知識をテストする

カスケードの用途

複数のスタイルが要素に適用されている場合の競合を解決する。
これは、競合の解決という主な目的の一つです。
描画時に各プロパティに 1 つのスタイル値のみが存在するようにします。
テキストの色は 1 色のみで、カスケードはテキストの色を決めるための手段です。
スタイルルールのスコア付けと重み付け。
スコアリングと重み付けは、カスケードの並べ替えフェーズの一部です。
スタイル属性の並べ替えとフィルタリング。
並べ替えとフィルタは、競合解決のさまざまな側面を理解するためのカスケードのフェーズです。

リソース