import! がどうやって適応されていくのかの原理を理解する。
出典元
2024年時点だとLevel4の資料がベースになるのでそれを今回をベースに記載する。
CSS Cascading and Inheritance Level 4
どこの記述が利用されるかを決める "Cascade Sorting Order"
CSSのどの記述が採用されるかはLevel4では大きく4つのパートに分けており、1のルールから順番に適用されていく。
- Origin and Importance
- Context
- Specificity
- Order of Appearance
Origin and Importance（Originに関してとimportかどうか）
最初に適用順番が決まるのがこの Origin and Importance のルール。このルールを把握するためにまず、 Origin と Importance という概念に関して理解する必要がある。
Origin
Originはおおまかに言うとCSSが記述されている箇所の話であり、3つに区分けされている。
Author- HTMLやCSSファイルに書かれた領域のStyleの記述。普段から読み書きしているのはこの領域。
UserAgent- ブラウザが元から備える領域のStyle記述。リセットCSSなどで無効化される記述の部分などがそれにあたる。
User- ブラウザを利用するユーザが設定する領域のStyle記述。ブラウザ側によって様々だが、例としてブラウザが提供する拡張機能などに記載のあるStyleなどが挙げられる。
Importance
もう一つの概念として Importance がある。これは !important がついている記述かどうかの観点。ついていないものを normal と呼称し、ついているものを important という。
決定順番
| 優先順 | 優先されるもの |
|---|---|
| 1 | Transactionに関する記述 |
| 2 | UserAgent の領域で important な記述 |
| 3 | User の領域で important な記述 |
| 4 | Author の領域で important な記述 |
| 5 | Animationに関する記述 |
| 6 | Author の領域で normal な記述 |
| 7 | User の領域で normal な記述 |
| 8 | UserAgent の領域で normal な記述 |
この優先順の上で、同列の存在に関しては次以降の優先順位決定ロジックが適用されていく。
Context
こちらはカプセル化された内側要素（たとえばShadow DOM）と比較した場合にどちらの記述を優先するかという話を定義している。
前項であげた important か normal かで決まるルールとなっており…
importantの場合は内側の記述が優先されるnormalの場合は外側の記述が優先される。
分かりづらい話ではあるが、Shadow DOM採用時の例で整理すると、通常のDOM(Light DOM）が外側、Shadow DOMが内側となり、Shadow DOM側に !important があった場合は、外側であるLight DOMも影響を受ける、以下のサイトでは実例のコードも乗っているので参考のこと。
Cascading and Inheritance Level 4ではContextによるルールの優先付けが定義されており、normalな（!importantではない）ルールではShadow DOMの中よりも外が優先される一方で、!importantはルールではShadow DOMの外よりも中が優先されると定義されている。 - Shadow DOMによりスタイルが閉じ込められる仕組み
Specificity（詳細度）
この詳細度は普段から利用されるものなので、本説明では割愛する。
Order of Appearance（styleの登場順番）
styleの記述が重複している場合は、後に登場する記述が優先（後勝ち）される
挙動のまとめ
下記の順番で決まる。
- Origin and Importance
- Context
- Specificity
- Order of Appearance
1の中で優先度が同じルールのものは2のルールへ 2の比較をしてもでも同列のものは3の詳細度の高い順で 3の詳細度で最優先値のものが2つ並んだ場合は4のルールである登場順の後ろ
上記のような考え方で決まる。
補足 Level5とLevel6について
2024年2月時点ではLevel5とLevel6のルールも存在する
Level5の順番について
執筆時点でのpusblishedな情報だと以下の通り
- Origin and Importance
- Context
- [Level5での追加要素] Element-Attached Styles
- [Level5での追加要素] Layers
- Specificity
- Order of Appearance
2つ要素が追加されている。
Element-Attached Stylesは インラインstyleであればそちらを優先するというもの。header要素に<style>を宣言したり、<p style="margin: 10px">のような記述はCSSの詳細度判定以前に優先されるルール。この実装に関しては現時点でも多く行われている。Layersは@layerという新しい記述方法で優先されるものを切り分ける方法。詳しいことはここでは割愛する。Layerは2023年4月ごろには主要なブラウザには対応している。またトランスパイルも提供されている。
Level6の順番について
こちらに関しては2024年時点では絶賛議論中だが、2024年2月時点最新のEditors Draftによるとだと以下のようになりそう。
- Origin and Importance
- Context
- The Style Attribute(Element-Attached Stylesと内容は同じ）
- Layers
- Specificity
- [Level6での追加要素] Scoping Proximity
Order of Appearance
Scoping Proximityは@scopeを使うことで影響の及ぼす範囲を限定できるようにするもの。こちらも詳しいことは割愛する。当初Specificityより先に判断するか後に判断するかが議論されていたが、最終的にはSpecificityより後の順番になりそうな状況。
