/
993.txt
142 lines (96 loc) · 7.75 KB
/
993.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
[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]]。
* カスケードと継承の特殊処理
[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>