Step forward CSS の Section 3 でも触れたように,CSS においてカスケーディングはスタイルシートを設計する上でひじょうに重要な概念である。ここでは,さらに詳しくカスケーディングについて解説する。間違いなく無駄のないスタイルシートを作る知識としていただきたい。
カスケーディングとは同じ要素に対していくつかの宣言が衝突している場合に,それらの順位を決めて宣言を重ねていく方法である。
その概略については Setp forward CSS の Section 3 で解説した。実用上はそのときの解説でほとんど困ることはないだろうが,ときにはどちらの順位が上か微妙なこともあるだろうし,そのあとで解説した概念にカスケーディング順位に関わっているものもある。
そこで,ここでは W3C による CSS1 仕様にある,カスケーディング順位の決め方をもれなく紹介・解説しておこう。
カスケーディング順位を決定するアルゴリズムは次のとおり。
具体的には,1. で適用されるべき宣言を順にすべて抜き出して,条件ごとに並べ替えることを想像すればよい。2. で,“! important”を伴うものとそうでないものとを分ける。2 で分けられたそれぞれについて,読者のもの,筆者のものと分けてみるのが 3. である。ここまでで,カスケーディング順位が低い順に“読者の通常の宣言”“筆者の通常の宣言”“読者の‘! important’を伴う宣言”“筆者の‘! important’を伴う宣言”となっているはずである。
ここまで分けられたそれぞれについてさらに 4. で並べ替えを行う。その手順を以下に示す。
これをすべての(適用されうる)宣言について調べ,まず a の小さい順に並べ替える。次に並べ替えられたそれぞれについて b が小さい順に並べる。同様に,c についても並べる。5. によって,a も b も c も等しい宣言は出現順に並べる。
以上の作業でカスケーディング順位の低い順に宣言が並べ替えられる。
たとえば次の 1. で次の宣言があったとして,これをカスケーディング順位にしたがって並べ替えてみよう。
/* 1 */ EM { font-weight: bold; }
/* 2 */ P EM { text-transform: capitalize; }
/* 3 */ P Q EM { font-weight: bolder; }
/* 4 */ P EM.spacy { letter-spacing: 0.2em; }
/* 5 */ P EM { color: green ! important; }
/* 6 */ DIV.text Q EM { color: blue; }
/* 7 */ EM#id01 { text-transform: uppercase; }
/* 8 */ #id01 { color: red; }
/* 9 */ Q EM { font-style: italic ! important; }
/* 10 */ DIV.text EM { font-style: oblique; }
/* 11 */ P.intro Q.spec EM { text-decoration: underline; }
規則 2. にしたがうと,順序は
1,2,3,4,6,7,8,10,11(ここまで通常の宣言),5,9(ここまで“! important”を伴う宣言)
とできる。規則 3. は今は考えていないとして,規則 4. によって (a,b,c) は 2. までの順序でそれぞれ,
1 (0,0,1),2 (0,0,2),3 (0,0,3),4 (0,1,2),6 (0,1,3),7 (1,0,1),8 (1,0,0),10 (0,1,2),11 (0,2,3),5 (0,0,2),9 (0,0,2)
並べ替えると
1,2,3,4,10,6,11,8,7,5,9
4 と 10,5 と 9 はあとに指定したほうが優先なので,それぞれ 10,9 が高い順位を得る。よって,
1,2,3,4,10,6,11,8,7,5,9
の順で宣言が重ねられていく。結局,適用されるスタイルは,
font-style: italic;
color: green;
text-transform: uppercase;
text-decoration: underline;
letter-spacing: 0.2em;
font-weight: bolder;
である。
厳格な HTML 4(HTML 4 Strict)では関係ないのだが,HTML 4 Transitional では HTML の属性値とスタイルシートの指定が衝突することもある。この場合,HTML の属性値は筆者のスタイルシートの先頭に書かれた,(a,b,c)=(0,0,1) の宣言と見なされる。