2008-04-07
CSS3 のカスケーディングについてのおさらい
いつも忘れて、毎回どうだったっけって確認するのがめんどいのでまとめておきます。
仕様
参照する仕様は CSS3 とします。（ワーキングドラフトなので、この内容は変わる可能性があります）
CSS3 の仕様は以下から探してください
site:http://www.w3.org/TR/css3 - Google Search
カスケーディングとは
カスケーディングに関する言葉の意味は以下に書いてあります。
CSS allows several style sheets to influence the rendering of a document, and the process of combining these style sheets is called “cascading”.
http://www.w3.org/TR/css3-cascade/#abstract
超意訳すると
CSS では一つの HTML *1に対して複数のスタイルシートを使えます。そして、複数のスタイルシートを結合するプロセスのことを「カスケーディング」と呼びます。
ということです。
もっと簡単に言うと
- 要素の見た目って複数の link 要素とか style 要素とか style 属性でいっぱい宣言するよね！
- するする！
- 宣言が被ったときに、どの宣言を適用するかを決めないといけないよね！
- うんうん！
- その宣言選択方法のことを「カスケーディング」っていうよ！
- ひゃー！
ということです。
実際のカスケーディングを解説
カスケーディングの手順は以下に書いてあります。
The purpose of cascading is to find one winning declaration among the set of declarations that apply for a given element/property combination.
User agents must sort declarations according to the following criteria, in order of importance:
- Weight. In CSS3, the weight of a declaration is based on the origin of the declaration and its marked level of importance. See a separate section below for how to compute the weight. The declaration with the highest weight wins.
- Specificity. The Selectors module [SELECT] describes how to compute the specificity. The declaration with the highest specificity wins.
- Order of appearance. The last declaration wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself. Rules in two imported style sheets are considered to be in the same order as the @import rules themselves.
The sorting process continues until one winning declaration is found.
http://www.w3.org/TR/css3-cascade/#cascading
超意訳すると
カスケーディングは、与えられた宣言の中から「勝つ宣言」を見つけることです。
すべての宣言を以下の順で、勝敗を決めていきます。
ということです。
もっと簡単にいうと
- この要素には width に関する宣言がいっぱい定義されているなあ。
- 困ったね！
- じゃあ、一番 weight（優先度）が高い宣言を適用するよ
- でも、weight（優先度）が同じ宣言が三つもあるよ
- じゃあ、その中で一番 specificity（詳細度）が高い宣言を適用するよ
- でも、weight（優先度）も specificity（詳細度）も同じ宣言が二つあるよ
- じゃあ、後に出てきたほうの宣言を適用するよ
- ひゃー！
ということです。
（ちなみに、ショートハンドな宣言がある場合は、複数の宣言がそのルールセットに宣言されていると思えばいいです。）
weight（優先度）とは何か
めんどくなってきたので、仕様へのリンクはやめます。
優先度とは、その宣言が含まれるスタイルシートが誰によって与えられたかという情報と !important の有無によってきまります。
誰によって与えられたかは以下の三つのパターンがあります。
で、優先度が高い順に並べると
- !important が含まれるユーザによって与えられた宣言
- !important が含まれるウェブサイトによって与えられた宣言
- !important が含まれないウェブサイトによって与えられた宣言
- !important が含まれないユーザによって与えられた宣言
- ウェブブラウザによって与えられた宣言
となります。
speficity（詳細度）とは何か
詳細度の高低は以下のように決まります。*2
- まず、ID セレクタ（#hogehoge, #fugafuga）の数が多いルールセットに含まれる宣言のほうが詳細度が高い
- 次に、ID セレクタ（#hogehoge, #fugafuga）の数が同じなら、クラスセレクタ（.hogehoge, .fugafuga）、属性セレクタ（[title="hoge"], [class$="fuga"]）、疑似クラスセレクタの合計数が多いルールセットに含まれる宣言のほうが詳細度が高い。
- 次に、IDセレクタの数と、クラスセレクタと属性セレクタと疑似クラスセレクタの合計数が同じなら、要素名セレクタ（div, ul, li）の数が多いルールセットに含まれる宣言のほうが詳細度が高い。
- 最後にこれらのすべてのセレクタ数が同じのなら、詳細度は同じ
- ちなみに、全称セレクタ（*）や疑似要素セレクタ（::before）は詳細度に影響を与えない。
style 属性
style 属性のことは、 CSS2.1 ではちゃんと詳細度として定義されているのですが、 CSS3 では何故か消されています。何故？
style 属性に書かれた宣言は実際の挙動としては、以下のような挙動をします。
- ウェブサイトで宣言された宣言と style 属性で宣言された宣言を比べると style 属性の宣言が勝ちます
- ウェブサイトで宣言された !important 宣言と style 属性で宣言された !important 付きの宣言を比べると style 属性の宣言が勝ちます
まとめ
もう忘れません
Permalink | コメント(5) | トラックバック(1) | 03:51 
CSS の名前の整理
CSS の話をする時に
名前をはっきりさせてないと混乱するので、整理しておこう。自分用です。けっこう適当です。
仕様
ここの仕様を見て書いています。
CSS
日本語では「スィーエスエス」と言いますね。
CSS とはHTML, XML の要素をどのように表示するかを示すための仕様のことです。
style sheet
日本語では「スタイルシート」と言いますね。
これはすごくやっかいな言葉です。以下の二つ意味があるからです。
- HTML, XML の表示形式を制御する概念のこと。 CSS は、このスタイルシートという概念を実現するための一つの仕様。
- CSS の仕様に従って書かれたファイルや style 要素の内容。簡単にいうと css ファイルや style 要素の内容一個一個がスタイルシート。このエントリでは、こっちのほうは「CSS スタイルシート」と呼ぶことにします。JavaScript では、 CSSStyleSheet オブジェクト。
rule
日本語では「ルール」とか「規則」とか言いますね。
CSS スタイルシート内に書かれている @import url("hoge.css"); や @media print { ... } や div { width: 100px; height: 100px } のことです。
JavaScript では CSSRule オブジェクト。
rule set
日本語では「ルールセット」とか「規則集合」とか言いますね。
ルールの中でも div { ... } とかのようなものです。 @ が付かないルールと覚えておけばいいと思います。
JavaScript では CSSStyleRule オブジェクト
at-rule
日本語では「アットマークルール」と言いますね。
ルールの中でもルールセット以外のものです。 @import ... とか @media ... とか先頭に @ が付くルールですね。
JavaScript では、以下のようにそれぞれのアットマークルールごとにオブジェクトが定義されています。
- CSSCharsetRule
- CSSFontFaceRule
- CSSImportRule
- CSSMediaRule
- CSSPageRule
selector
日本語では「セレクタ」と言いますね。
ルールセットの中括弧の前に書かれてるやつです。 body, div { ... } とかだったら body, div がセレクタですね。
JavaScript だと CSSStyleRule オブジェクトの selectorText プロパティの値のこと。
declaration
日本語では「宣言」と言いますね。
ルールセットの中括弧の中にセミコロン区切りで書かれているやつです。 body, div { width: 100px; height: 100px } だと width: 100px と height: 100px が宣言ですね。
JavaScript だと CSSStyleDeclaration オブジェクトのそれぞれのプロパティ名とプロパティ値のこと
property
日本語では「プロパティ」と言いますね。
宣言のコロンで区切られた左側のやつです。 width とか font-size とかですね。
JavaScript だと CSSStyleDeclaration オブジェクトのプロパティ名のこと
value
日本語では「値」と言いますね。
宣言のコロンで区切られた右側のやつです。 100px とか 2em とか #ff0000 とかですね。
JavaScript だと CSSStyleDeclaration オブジェクトのプロパティ値のこと
こんなところです
間違えないようにしましょう（自戒
Permalink | コメント(1) | トラックバック(0) | 21:04 
