Edit

Page

Page title:

Page body:

[17] [[CSS]] の[[特性]]の値を[DFN[[RUBY[特性値][とくせいち]@en[property value]]]]といいます。

* 仕様書

[REFS[
- [40] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2012-06-23 00:59:02 +09:00]] 版) <http://www.whatwg.org/specs/web-apps/current-work/#the-css-user-agent-style-sheet-and-presentational-hints>
- [45] [CITE[Quirks Mode Standard]] ([TIME[2012-04-25 18:53:19 +09:00]] 版) <http://simon.html5.org/specs/quirks-mode#css>
]REFS]

* [5] 初期値

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

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

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

* 値の導出

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

** [1] 指定値

[18] はじめに次の手順で各[[特性]]の[DFN[[RUBYB[指定値] @en[specified value]]]]を決定します。
= [[段階付け]]により結果が得られれば、それを[[指定値]]とします。 (優先度最大)
= [[特性]]が[[継承]]し、その[[要素]]が[[根要素]]で''なければ''、
[[親要素]]の[[算出値]]を[[指定値]]とします。
= [[特性]]の[[初期値]]を使います。 (優先度最小)

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

** [2] 算出値

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

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

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

-[26]  [[URI]] の[[算出値]]は[[絶対URI]] に[[解決]]したものです。
[[解決]]できない時は[[指定値]]のままとします。
-[27]  [[単位]]が [CODE(CSS)@en[[[em]]]] や [CODE(CSS)@en[[[ex]]]]
の[[値]]は[[画素]]か絶対長を[[単位]]に変換します。
-[28]  [[指定値]]が [CODE(CSS)@en[[[inherit]]]] なら、
[[親要素]]の[[算出値]]を[[算出値]]とします。
ただし[[根要素]]では[[初期値]]を[[算出値]]とします。
-[30] [[WinIE]] の [CODE(CSS)@en[[[expression()]]]] はこの段階で評価されているものと推測されます。
-[29] その他[[算出値]]に関しては各[[特性]]の項を参照してください。

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

*** 特殊なケース

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

- [39] [CODE(HTMLe)@en[[[noscript]]]] [[要素]]は、[[スクリプト処理が有効]]な時、常に [CODE(CSS)@en['[[display]]: [[none]]']] を[[算出値]]とすることが[[期待されます]] [SRC[>>40]]。
- [43] [[HTML文書]]の [CODE(HTMLe)@en[[[form]]]] [[要素]]は、
[CODE(HTMLe)@en[[[table]]]], [CODE(HTMLe)@en[[[thead]]]], [CODE(HTMLe)@en[[[tbody]]]],
[CODE(HTMLe)@en[[[tfoot]]]], [CODE(HTMLe)@en[[[tr]]]] の[[子供]]である時、常に [CODE(CSS)@en['[[display]]: [[none]]']] を[[算出値]]とすることが[[期待されます]] [SRC[>>40]]。
- [44] [[利用者インターフェイスを晒す]]以外の [CODE(HTMLe)@en[[[audio]]]] [[要素]]は、常に 
[CODE(CSS)@en['[[display]]: [[none]]']] を[[算出値]]とすることが[[期待されます]] [SRC[>>40]]。

** [CODE(DOMa)@en[currentStyle]]

[7] [[WinIE]] の [CODE(DOMa)@en[[[currentStyle]]]] [[属性]]の
[CODE(DOMi)@en[[[CSSStyleDeclaration]]]] [[物体]]から得られる値は、
[[指定値]]や[[算出値]]に近い何かです。

** [3] 使用値

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

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

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

*** 特殊なケース

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

** CSSOM View

[23] [CODE(DOMa)@en[[[offsetTop]]]]、[CODE(DOMa)@en[[[clientHeight]]]] など
[[CSSOM View]] 系の[[属性]]から得られる値は、[[使用値]]に近い何かです。

** [4] 実際値

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

** [6] 仕様書

- [[CSS 2.1]]
-- <IW:CSS2:"cascade.html">
- [32] [CITE[Styling – SVG 1.1 (Second Edition)]] ([TIME[2011-08-10 12:35:27 +09:00]] 版) <http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#Inheritance>

* SVG

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

* XSL-FO

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

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

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

- [36] [[根要素]]への指定が [[viewport]] に適用されるケース → [[viewport]] 参照
- [37] [CODE(HTMLe)@en[[[body]]]] [[要素]]への指定が[[根要素]]への指定とみなされるケース → [CODE(HTMLe)@en[[[body]]]]
参照
- [38] [CODE(HTMLe)@en[[[area]]]] [[要素]]への指定が[[shape]]への指定とみなされるケース → [CODE(HTMLe)@en[[[area]]]]
参照
- [42] [[要素]]に依存した[[算出値]]の決定 → >>40

* 関連

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

@@ [12] [[CSSアニメーション]]との関係は・・・。

@@ [CODE[[[-webkit-text-size-adjust]]]] との関係は・・・

[31] [CITE[CSS の「値」とは何か - IT戦記]] ([TIME[2009-05-09 22:31:39 +09:00]] 版) <http://d.hatena.ne.jp/amachang/20080409/1207756586>

[34] [CITE[SMIL Timesheets 1.0]]
( ([TIME[2012-03-29 03:27:58 +09:00]] 版))
<http://www.w3.org/TR/2012/NOTE-timesheets-20120328/>

[47] [CITE@en[Remove <iframe seamless> · whatwg/html@1490eba]]
([TIME[2016-02-04 19:14:46 +09:00]] 版)
<https://github.com/whatwg/html/commit/1490eba4dba5ab476f0981443a86c01acae01311>

[48] [CITE@en[Gloss the CSS term "used value" · whatwg/html@4a3a166]]
([TIME[2016-03-01 11:32:46 +09:00]] 版)
<https://github.com/whatwg/html/commit/4a3a166c554b6e6b8d04012ce18cd482f87edfd8>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)