日向夏特殊応援部隊

俺様向けメモ

カスケード処理について

CSS

ってもこれCSSな人には常識なのか？

  1. Assigning property values, Cascading, and Inheritance
  2. 値の割り当て、カスケード処理、継承
  3. http://www6.plala.or.jp/go_west/nextcss/ref/basic/cascade.htm
  4. http://anslasax.net/css-make/cascade.html

ここら辺がソース。

追記

今日、会社のCSS勉強会があってそれの資料作ったので後ほど公開しまっする。
んでもってカスケード処理についても言及したので、興味のある人は見て下さい。

カスケード順位の定義

大まかに分けると次の4つの要素が問題となる。

  1. 媒体型(media type)
  2. 出所(誰が作ったスタイルか)
  3. 詳細度
  4. 出現順

で、適用される重みもこの順番。

出所について

つまりはこういう事です。

文書作成者のスタイル > ユーザースタイル > デフォルト

最重要宣言がある場合はユーザースタイルの方が優先になります。

詳細度

  1. セレクタ内の一意属性を数え上げ、その数を「a」とする。
  2. 他の属性及び擬似クラスを数え上げ、その数を「b」とする。
  3. 要素名を数え上げ、その数を「c」とする。
  4. 擬似要素は無視する。

で例えば10進法で詳細度を計算するならば、
上の桁を超えない十分大きな基数で計算すると、

(詳細度) = a * MAX(a, b, c)^2 + b * MAX(a, b, c) + c

で算出出来るみたいです。これ、如何なるCSSの如何なるセレクタも、仮に同じセレクタだとしても詳細度ってのはあくまで相対的な値になるだけみたいですね。*1

出現順

パースされた順番ですね。

まとめ

んー、ちょっと今度もう少し詳しく書くですよ。
!importantとかも割り込んでくるので、もう少し丁寧に調べないとですね。

*1:thanks id:amachang, id:cho45