computed value

computed value

[17] CSS特性の値を特性値 (とくせいち) (property value) といいます。

仕様書

[5] 初期値

[14] CSS の各特性には初期値 (initial value) が定義されています。 初期値継承しない特性の値が明示的に指定されなかった場合や、 根要素特性値が明示的に指定されなかった場合に用いられます。

[15] 特性値として明示的に初期値を指定したい場合には鍵語 initial を使うことができます。

[16] 詳しくは初期値の項をご覧ください。

値の導出

[13] CSS特性値の指定は、必ずしもすべての要素のすべての特性に対して明示的に与えられるわけではありません。 むしろほとんどすべての場合、指定されるのは一部の要素の一部の特性に対してのみです。 CSS ではレンダリングされる文書木上のすべての要素はすべての特性の値を持つことになっていますが、 それらの値の導出は次に示す指定値算出値使用値実際値という概念によって規定されています。

[1] 指定値

[18] はじめに次の手順で各特性指定値 (specified value) を決定します。

  1. 段階付けにより結果が得られれば、それを指定値とします。 (優先度最大)
  2. 特性継承し、その要素根要素なければ親要素算出値指定値とします。
  3. 特性初期値を使います。 (優先度最小)

[19] この過程はレンダリングと独立に行えます。

[2] 算出値

[20] 次に指定値から算出値 (computed value) を得ます。 この過程で相対値絶対値解決されます。

[24] この過程はレンダリングと独立に行えます。

[25] 算出値はその特性がその要素に適用されない場合も存在します。

[22] CSS2 では算出値に相当する概念がありませんでしたが、 CSS 2.1算出値使用値が分離されました。

特殊なケース

[41] 一部の要素特性については特別な規定があります。

currentStyle

[7] WinIEcurrentStyle 属性CSSStyleDeclaration 物体から得られる値は、 指定値算出値に近い何かです。

[3] 使用値

[8] 算出値を基に、実際のレンダリングに必要な計算を行ったのが使用値 (used value) です。 例えば幅の百分率値を実際に使用する値に変換したものです。

[21] CSS2 では算出値と呼ばれていましたが、 CSS 2.1使用値に改められました。

[9] DOM2getComputedStyle メソッドにより返される CSSStyleDeclaration 物体から得られる値は、 使用値です。現実の Webブラウザーの実装上得られる値は、 使用値に近い何かです。

特殊なケース

[46] 奇癖モードでは幾つかのケースで使用値が特別な方法で決定されます >>45

CSSOM View

[23] offsetTopclientHeight など CSSOM View 系の属性から得られる値は、使用値に近い何かです。

[4] 実際値

[10] 使用値を実際に使用する環境の制限に応じて調整したのが実際値 (actual value) です。 例えば使用できる精度に合わせて使用値四捨五入したものが実際値となります。

[6] 仕様書

SVG

[33] SVG でも原則として CSS における特性継承の規則を採用するとされています >>32

XSL-FO

[49] XSL-FO では xml:lang 属性でも inherit が使えるとされていました。

カスケードと継承の特殊処理

[35] カスケードは通常選択子の記述により、継承は通常要素文書木上の構造に基づき行われますが、 いくつか特殊な扱いが求められるケースがあります。

関連

[11] SMILアニメーションcascading における上書きスタイル・シートの指定とみなされると規定されており、 指定値実際値の概念とは直交するものです。

[12] CSSアニメーションとの関係は・・・。
-webkit-text-size-adjust との関係は・・・

[31] CSS の「値」とは何か - IT戦記 ( 版) http://d.hatena.ne.jp/amachang/20080409/1207756586

[34] SMIL Timesheets 1.0 ( ( 版)) http://www.w3.org/TR/2012/NOTE-timesheets-20120328/

[47] Remove <iframe seamless> · whatwg/html@1490eba ( 版) https://github.com/whatwg/html/commit/1490eba4dba5ab476f0981443a86c01acae01311

[48] Gloss the CSS term "used value" · whatwg/html@4a3a166 ( 版) https://github.com/whatwg/html/commit/4a3a166c554b6e6b8d04012ce18cd482f87edfd8