CSS ポッドキャスト - 004: The Cascade
CSS はカスケーディング スタイルシートの略です。カスケードは、1 つの HTML 要素に複数の CSS ルールが適用される場合に、競合を解決するためのアルゴリズムです。そのため、次の CSS でスタイル設定されたボタンのテキストが青色になります。
button {
color: red;
}
button {
color: blue;
}
カスケード アルゴリズムを理解すると、ブラウザがこのような競合をどのように解決するかを理解するのに役立ちます。カスケード アルゴリズムは 4 つのステージに分割されます。
- 表示位置と表示順: CSS ルールが表示される順序
- 特異性: 最も一致度が高い CSS セレクタを決定するアルゴリズム
- 生成元: CSS が表示される順序と、その CSS の取得元（ブラウザのスタイル、ブラウザ拡張機能の CSS、独自の CSS など）
- 重要性: 特に
!importantルールタイプで、一部の CSS ルールが他のルールよりも重み付けされています。
表示位置と順序
CSS ルールの表示順序と表示方法は、競合解決の計算中にカスケードによって考慮されます。
このレッスンの冒頭にあるデモは、最もわかりやすい例です。同じ特異性を持つセレクタを持つ 2 つのルールがあるため、宣言される最後のルールが優先されます。
スタイルは、<link> タグ、埋め込み <style> タグ、要素の style 属性で定義されたインライン CSS など、HTML ページのさまざまなソースから取得できます。
HTML ページの上部に CSS を含む <link> がある場合、ページの下部に CSS を含む別の <link> がある場合、最下位の <link> が最も限定的になります。埋め込み <style> 要素でも同じことが起きます。ページの下に位置するほど、対象が絞り込まれます。
<link /> 要素に含まれる CSS で定義されているように、ボタンの背景は青色になります。ダークカラーに設定する CSS ルールは、リンクされている 2 つ目のスタイルシートにあります。後者の位置によって適用されます。この順序は、埋め込み <style> 要素にも適用されます。<link> の前に宣言されている場合、リンクされたスタイルシートの CSS が最も限定されます。
<style> 要素は <head> で宣言され、<link /> 要素は <body> で宣言されます。つまり、<style> 要素よりも限定的になります。CSS 内でインラインの style 属性が宣言されている場合、宣言に !important が定義されていない限り、位置に関係なく、他のすべての CSS がオーバーライドされます。
掲載順位も、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="/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 の特異性は同じですが、スタイルルールの位置が優先されます。詳細度
特異性とは、最も限定された 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 が含まれます。これらのオリジンの特異性の順序は、具体的でないものから最も具体的なものの順に、次のようになります。
- ユーザー エージェントの基本スタイル。これらは、ブラウザが HTML 要素にデフォルトで適用するスタイルです。
- ローカル ユーザー スタイル。これは、ベース フォントサイズやモーションの軽減設定など、オペレーティング システムのレベルに応じたものです。また、ユーザーがウェブページ用の独自のカスタム CSS を作成できるブラウザ拡張機能など、ブラウザ拡張機能から取得される場合もあります。
- 作成者の CSS:作成した CSS。
- 作成日:
!important。作成した宣言に追加した!important。 - ローカル ユーザー スタイル
!important。オペレーティング システム レベルまたはブラウザ拡張機能レベルの CSS から取得された任意の!important。 - ユーザー エージェント
!important:ブラウザによって提供されるデフォルトの CSS で定義されているすべての!important。
作成した CSS に !important ルールタイプがあり、ユーザーのカスタム CSS に !important ルールタイプがある場合、CSS はどの CSS が優先されますか。
理解度チェック
カスケード オリジンに関する知識をテストする
カスケードオリジンに関する知識をテストする。さまざまなオリジンの次のスタイルルールを検討してください。
ユーザー エージェント スタイル
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 はどれですか。
!important ユーザーのカスタム スタイルには、最も詳細なオリジンがあります。重要度
すべての CSS ルールが互いに同じように計算されているわけではなく、また、互いに同じ特異性が付与されているわけでもありません。
以下に、重要度の優先順位（重要度が低い順）を示します。
- 通常のルールタイプ（
font-size、background、colorなど） animation個のルールタイプ!importantルールタイプ（送信元と同じ順序）transition個のルールタイプ
アクティブなアニメーションと遷移ルールは、通常のルールよりも重要度が高くなります。遷移が !important ルールタイプよりも重要度が高い場合。これは、アニメーションまたは遷移がアクティブになったときに、動作が視覚的な状態を変えることになるからです。
DevTools を使用して一部の CSS が適用されない理由を特定する
通常、ブラウザの DevTools には、要素に一致する可能性のあるすべての CSS が表示され、使用されていないものに取り消し線が引かれます。
適用したい CSS がまったく表示されない場合は、要素と一致していません。その場合は、クラス名や要素名のスペルミス、無効な CSS などがないか他の場所を調べる必要があります。
理解度チェック
カスケードに関する知識をテストする
カスケードの用途