6 特性値の割当て,段階化及び継承

6.1 指定値, 計算値及び実際の値

利用者エージェントが一旦文書を構文解析し, 文書ツリーを構成すると, ツリーのあらゆる要素 について,対象メディア型に適用されるすべての特性に 値を割り当てなければならない。

特性の最終値は三つの手順で計算される。値は規定を通じて決定され ( "指定値"), 必要な場合に絶対値に変換され( "計算値"), 最後に局所環境 の制限に従って変換される( "実際の値")。

6.1.1 指定値

利用者エージェントは,まず指定値を次の機構に基づいて特性に割り当てなければなら ない。優先順位の高いものから列挙する。

  1. 段階が値となる場合,それを使用する。
  2. そうでない場合, 特性が 継承され, 親要素の値,一般には計算値を使用する。
  3. そうでない場合,特性の 初期値を使用する。各特性の 初期値は特性の定義で示される。

親がない場合は,文書ツリーのルートは親要素からの値を使用すること ができない。この場合,初期値が必要に応じて使用される。

6.1.2 計算値

指定値は絶対的であってもよいし,相対的であってもよい。絶対的とは, 指定値が'red'又は'2mm'など,別の値に関連して指定されないということであり, 相対的とは,指定値が'auto','2em'及び'12%'など,別の値に関連して指定される ということである。絶対値については,計算値を発見するための計算は必要ない。

一方で,相対値は計算値に変換されなければならない。パーセントは 参照値(それがどの値であるかを定義する各特性)によって乗算され, 相対単位(em,ex,px)を有する値は,適正なフォントサイズ又は画素サイズを用いて 乗算することによって,絶対化されなければならない。'auto'値は,各特性 で提供される数式によって計算されなければならず,'smaller','bolder','inherit'な どの一定のキーワードは,その定義に従って置換されなければならない。

ほとんどの場合,要素は計算値を継承する。しかし,指定値が継承される特性も 存在する。例えば,'line-height'特性に対する数値は, 指定値が継承される。 子要素が計算値を継承しない場合,これは特性定義に記述される。

6.1.3 実際の値

原則としては, 計算値がそのまま使われるが, 利用者エージェントが,与えられた環境では, その値を使えない場合がありうる。 例えば,利用者エージェントが,整数の 画素幅を有する境界しかレンダリングできないため,計算幅に近づける必要があることもある。 実際の値は,近似値が適用された後の計算値である。

6.2 継承

文書ツリーの要素の子によって継承される 値もある。各特性はそれが継承されるか,されないかを 定義する

内部に強調表示要素(EM)を有するH1要素があると仮定する。

<H1>The headline <EM>is</EM> important!</H1>

EM要素に色が割り当てられていない場合は,強調表示された "is"は親要素の色を継承し,そのため,H1が青であれば,EM要素も同様に青となる。

文書に "デフォルト" スタイル特性を設定するために,文書作成者は文書ツリーのルート 上で特性を設定する。例えば,HTMLでは,HTML要素又はBODY要素がこの機能を保持でき る。 HTML構文解析系が欠落するタグを暗示するため,文書作成者がHTMLソースのBODYタグを省略しても これは作動する点に注意すること。

例:

例えば, 'color'特性が継承されるため,BODY要素の子孫は すべて 色'black'を継承する。

BODY { color: black; }

指定されるパーセント値は継承されない。継承されるのは計算値である。

例:

例えば, 次のスタイルシートを考慮する。

BODY { font-size: 10pt }
H1 { font-size: 120% }

この文書の素片を次に示す。

<BODY>
  <H1>A <EM>large</EM> heading</H1>
</BODY>

H1要素に対する'font-size'特性 は計算値'12pt' (親の値10ptの1.2倍)を有する。 'font-size' の計算値が継承されるため, EM要素も計算値'12pt'を有する。利用者エージェントに利用可能な'12pt'が 存在しない場合,H1及びEMの両方に対する 'font-size'の実際の値は, 例えば, '11pt'となる。

6.2.1 'inherit'

各特性は'inherit'の指定値も有する場合もある。これは,一定の要素に対して,特性 は要素の 親に対する特性と同じ計算値をとることを意味する。 継承値は,通常,後退値として使用されるにすぎないが,'inherit'を明示的に 設定することによって,強調できる。

例:

次の例では, 'color'特性及び 'background'特性は, BODY要素上で設定される。 'color'値は 他のすべての要素上で継承され,背景は透明である。これらの規則が利用者のスタイルシ ートの一部である場合,白の背景で黒のテキストが文書全体を通して強制される。

BODY { 
  color: black !important; 
  background: white !important;
}

* { 
  color: inherit !important; 
  background: transparent;
}

6.3 @import 規則

'@import' 規則により,利用者は他のスタイル シートからスタイル規則をインポートすることができる。どの@import規則も スタイルシートのすべての規則設定に優先しなければならない。'@import'キーワード は,包含するスタイルシートのURIの前に配置されなければならない。 文字列も許容される。文字列はその周囲にuri(...)を有するものと解釈される。

例:

次の行の持つ意味は両者とも同じであり,両者とも '@import' 構文を記述している。一つは"url()"を用いて記述し,もう一方は文字列 をそのまま用いて記述している。

@import "mystyle.css";
@import url("mystyle.css");

利用者エージェントがサポートされない メディア型について,資源を検索するのを避けるため,文書作成者 は, メディア依存の@import規則を指定してよい。 これらの 条件付きインポート はカンマで区切られたメディア型をURIの後に指定する。

例:

次の規則は,インポートされたスタイルシートが同じメディアに対して@media規則 で折返された場合と同じ効果をもつ。しかし,それにより,UAのダウンロードの効果 は薄れる場合がある。

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;

どのメディア型も存在しない場合,インポートは無条件である。 メディアに'all'を指定することにより,同じ効果を得られる。

6.4 段階

スタイルシートには,文書作成者,利用者及び利用者エージェントという三つの起点が 存在する。

これら三つの起点からのスタイルシートは有効範囲が重なっており,段階に従って 相互に作用する。

CSS 段階 は各スタイル規則に重みを割り当てる。適用される規則が複数存在する場合, 最も重みのある規則が優先する。

デフォルトにより, 文書作成者のスタイルシートの規則は利用者のスタイルシートの規則よ り重視される。しかし, "!important" 規則の場合は,優先順位が逆転する。利用者の規則及び文書作成者の規則は すべて,UAのデフォルトスタイルシートの規則より重視される。

インポートされるスタイルシートも段階化し,重視される順序はインポートされる順序 に従う。一定のスタイルシートで指定される規則は,その他のスタイルシートから インポートされる規則を上書きする。インポートされるスタイルシートは,それ自体 インポートし,他のスタイルシートを上書きし,帰納的に,同じ優先順位の規則を適用 できる。

6.4.1 段階化の順序

要素/特性の組み合せについて値を発見するため,利用者エージェントは次の分類順序 を適用しなければならない。

  1. 問題の要素及び特性に適用されるすべての宣言を 対象メディア型に ついて発見する。関連選択子が問題の要素と 一致する場合,宣言が適用される。
  2. 第一に,宣言を重要性及び起点で分類する。即ち, 標準的な宣言については,文書作成者の スタイルシートは,デフォルトスタイルシートを上書きする利用者の スタイルシートを上書きする。 "!important" 宣言の場合,利用者のスタイルシートは,デフォルトスタイルシートを 上書きする文書作成者のスタイルシートを上書きする。利用者のスタイルシートは, "!important" 宣言は標準的な宣言を上書きする。 インポートされるスタイルシートは,それがインポートされたスタイルシートと同じ 起点を有する。
  3. 第2に,選択子の 固有性で分類する。 即ち, 固有性が高い選択子は,より一般的な選択子を上書きする。 擬似要素及び擬似クラスは,それぞれ,標準的な要素及びクラスと 考えられる。
  4. 最後に, 指定される順序で分類する。二つの規則の重要性,起点,固有性が 同じである場合,後に指定される規則が優先する。インポートされるスタイル シートの規則は,そのスタイルシート自体の規則のどれよりも順序が前である と考えられる。

個々の宣言上の "!important" 設定は別として,この方法は,読者のスタイルシート より,文書作成者のスタイルシートをより重視するものである。そのため,利用者エージェント が,プルダウンメニューなど,一定のスタイルシートの影響をなくす能力を利用者に提供 することが大切である。

6.4.2 !important規則

CSSは,文書作成者のスタイルシートと利用者のスタイルシートとの間に,力の均衡を生成 しようと試みている。デフォルトにより,文書作成者のスタイルシートの規則は,利用者の スタイルシートの規則を上書きする。(段階化規則3参照)

しかし, 均衡については,"!important"宣言(キーワード"!"及び "important"の前に宣言がくる) は,標準的な宣言に優先する。文書作成者のスタイルシートも 利用者のスタイルシートも "!important" 宣言を包含してもよく,その場合利用者の "!important" 規則は文書作成者の "!important"規則を上書きする。 このCSS機能は, 大きいフォント,色の組み合せなど,特別な要求をする利用者に,表示を 制御させることによって,文書のアクセス可能性を改善する。

備考 これはCSS1からのセマンティクスの変更である。CSS1では, 文書作成者の "!important"規則は 利用者の"!important"規則に優先した。

簡略記述特性 (e.g., 'background'など)が"!important" であると 宣言することは,その副特性がすべて "!important"であると宣言するのと同じである。

例:

次の例では,利用者のスタイルシートの最初の規則は,"!important" 宣言を包含し, 文書作成者 のスタイルシートで対応する宣言を 上書きしている。2番目の宣言も,"!important"とマークされているため, 優先される。しかし,利用者のスタイルシートの3番目の規則は "!important"ではないた め,簡略記述特性上にスタイルを設定している文書作成者のスタイルシートの2番目の規則に優 先しない。同様に,3番目の文書作成者の規則は,2番目の規則が "!important"であるため,2番目の文書作成者の規則に優先しない。これは, "!important" 宣 言が文書作成者のスタイルシート内部でも機能することを示している。

/* From the user's style sheet */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }

/* From the author's style sheet */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }

6.4.3 選択子の固有性の計算

選択子の固有性の計算を次に示す。

三つの数a-b-cを基数が大きい数値システムで連結することにより,固有性を提供する。

例を次に示す。

*             {}  /* a=0 b=0 c=0 -> specificity =   0 */
LI            {}  /* a=0 b=0 c=1 -> specificity =   1 */
UL LI         {}  /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI      {}  /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red  {}  /* a=0 b=1 c=3 -> specificity =  13 */ 
LI.red.level  {}  /* a=0 b=2 c=1 -> specificity =  21 */
#x34y         {}  /* a=1 b=0 c=0 -> specificity = 100 */ 

HTMLでは, 要素の "style"属性の値はスタイルシート規則である。 これらの規則には選択子がなく,段階アルゴリズムの手順3の目的のため,ID選択子 (固有性: a=1, b=0, c=0)を有すると考えられる。手順4の目的のため, これらの規則は他のすべての規則の後に配置されると 考えられる。

<HEAD>
<STYLE type="text/css">
  #x97z { color: blue }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: red">
</BODY>

上の例では,P要素の色は赤である。両宣言とも固有性は同じだが,"style"属性 の宣言は, 段階化規則4により,STYLE要素の宣言を上書きする。

6.4.4 非CSSの表示上ヒントの優先

UAは,スタイルシート以外の他のソースからの表示上のヒントを優先することを選択 してもよい。例えば,HTMLのFONT要素又は"align"属性である。 その場合,非CSSの表示上のヒントは,対応する固有性が0に等しいCSS規則に変換され なければならない。規則は,文書作成者のスタイルシートの冒頭に あると仮定され,連続するスタイルシート規則によって上書きされてもよい。

備考 変換の際には, この方法によって,様式的な属性のスタイルシートとの共存がより簡単になる。

備考 CSS1では, 非CSSの表示上のヒントは0ではなく1に等しい固有性に提供される。 固有性が0であるはん(汎)用選択子の導入により,これは変更された。