🎨 CSS Advent Calendar: Day 6 / Cascade for Cascading Style Sheets - UA Origin in Cascade
Published on
Updated on
Cascade Sorting Order と UA Origin の解剖
Table of Contents
Table of Contents
はじめに
前回までで、Cascade が「Suggest/Influence」するものであり、!important
が「create a balance」するものであるという、Cascade の基本思想を解説してきました。
これを踏まえた上で、2025年現在、我々が慣れ親しんでいる CSS の Cascade について、改めて整理したいと思います。
Cascade に関しての詳説は、すでに日本語でも良質なものが多く存在します。よって、本エントリでは、あくまで CSS や Cascade の根幹となる思想を理解していくものにできればと思います。(Cascade に関する詳細は MDN などのドキュメントを参照ください。)
CSS Snapshot 2024(執筆時点で最新) によると、現在の主要なブラウザや WPT は、基本的には CSS Cascading and Inheritance Level 4 を実装しているべきとされています。よって、今回参照するのは、2025 年現在、 Stable な Candidate Recommendation Snapshot でとして勧告されている Level4 の仕様です。
なぜ、Candidate Recommendation や Level4 を参照するのかに関する詳細は、以下の note を参照ください。
The Cascade - Cascade Sorting Order
現在、皆さんがみているこのページのスタイルは、CSS ルールの競合が完全に解決され、計算された結果です。
2025/07/12 現在、CSS には全 638 プロパティあり、その全てに対して、最終的には単一の値(Actual Value)が決定されます。
638 distinct property names from 92 technical reports and 92 editors’ drafts.
後日詳細に解説しますが、 Actual Value の導出には、多くの競合解決・計算過程を経ることになります。
e.g. 値の指定されていない width
の Actual Value 導出まで:
- Winning declaration (none)
- Cascaded value (none)
- Specified value (auto (initial value))
- Computed value (auto)
- Used Value (120px)
- Actual Value (120px)
その内の Cascade というステップで利用するアルゴリズムが、仕様でいうところの「Cascade Sorting Order」です。Cascade Sorting Order によって、 Cascaded Value が導出されます。Cascaded Value は、Cascade Sorting Order によって CSS ルールの競合が解決された状態の値を指します。
CSS Cascading and Inheritance Level 4 時点での Cascade Sorting Order を図解すると、以下のようになります。
図が示す通り、Origin and Importance が、Cascade Sorting Order の中で最も優先度の高い競合解決です。どんなに Specificity が高くとも、それは同一 Origin and Importance の中でのみ効力を持ち、低い Specificity でもより高い Origin and Importance に属する場合は、そちらが優先されるということになります。
Origin and Importance
Origin and Importance について詳しく見ていきます。
Origin
「Origin(Cascade Origin)」は、「どこから」そのスタイルが Cascade の世界に入るのかを示します。
Cascade Origin には 5 種類あり、シンプルに示すと以下のようになります。
- Author Origin: ページの Author が指定したスタイル
- User Origin: ページの閲覧者が指定したスタイル
- User Agent Origin: ブラウザが指定したスタイル
- Animation Origin: Animation によって指定されたスタイル
- Transition Origin: Transition によって指定されたスタイル
そして、これらの Origin は、デフォルトでは以下の順に Cascade Sorting Order に追加され、下に行くほど優先度は高くなります。(現時点で、Importance や Animation/Transition は考慮しないものとします)
- Normal User Agent Declarations
- Normal User Declarations
- Normal Author Declarations
Normal User Agent Declarations - Suggestions to the PURE HTML Rendering Result
UA/User/Author 3 つの Origin がありますが、UA StyleSheet は、「素の HTML の見た目」に対して “Suggest” するスタイルシートということができます。
UA StyleSheet は、各ブラウザがそれぞれ持っています。
これらは、ブラウザベンダの嗜好で決まっているわけではなく、一定のルールに従って実装されており、現在は HTML Living Standard の Rendering セクションにて基準が設けられています。(CSS1, 2 では、HTML4 に対するスタイルシートが設けられていました)
だだし、仕様にもある通り、これらのデフォルトの見た目は ”Suggestion” であり、強制されているものでもありません。CSS で表現できない見た目も存在し、テキストによる説明が記載されているものもあります。
How much UA Style modifies the Rendering Result?
では、UA StyleSheet がなければ、どんなスタイルが吐き出されるのか。 今からちょっとした手順を踏んで、素の HTML のスタイルを見てみましょう。
使用するページは、シンプルな HTML と CSS で構成されているものにします。ページは筆者の Chrome Dev 140 で画像のように表示されています。これは、UA StyleSheet + User Style + Author Style の組み合わせによるものです。
UA Style + User Style + Author Style
まず、できる限り Author Style を取り除いて、UA Style + User Style に近づけます。
// 以下を devtool で実行し、できる限り Author Style を削除する
document.querySelectorAll('style, link[rel="stylesheet"]').forEach(e => e.remove());
document.querySelectorAll('[style]').forEach(e => e.removeAttribute('style'));
すると、以下のような表示になります。ほぼ UA Style + User Style の組み合わせです。
UA Style + User Style
次に、個人的でブラウザで設定したフォントや色などの User Style をオフにします。
UA Style
これが、UA StyleSheet のみ当たったページの見た目です。
最後に、all: initial
を用いて、全てのプロパティの値を仕様上のデフォルト値に指定します。(これが究極の CSS Reset なのでは)
* {
all: initial !important;
}
こうしてようやく、(ほぼ)一切の CSS が当たっていない、素の HTML の見た目が得られました。
Rendering Result Style
ここでは特に完璧な HTML レンダリング結果のスタイルを得ることは目指していませんので、この程度でやめておきますが、UA StyleSheet が HTML のレンダリング結果をどれだけ整えてくれているのか、おわかりいただけたのではないでしょうか。
UA StyleSheet がなければ、我々はもっと冗長で大規模なスタイルシートを書かねばならなかったと考えると、UA StyleSheet の存在が大きなものに感じられます。
本当は、Day6 で少なくとも Origin and Importance の話を終わらせるつもりだったのですが、Origin and Importance の UA Origin の話にとどまりました。 次回以降では、残りの Origin と Importance の話と、Cascade Sorting Order 全体の解説を行う予定です。To be continued…
Appendix
- CSS Cascading and Inheritance Level 5 publication history | Standards | W3C
- CSS Cascading and Inheritance Level 6 publication history | Standards | W3C
- Levels, snapshots, modules…
- CSS Snapshot 2024
- 15.2 The CSS user agent style sheet and presentational hints | HTML Standard