csswg-drafts/css2/process.src at b9459027d99a176438ee1e4b807e5c85cb26753e · w3c/csswg-drafts · GitHub

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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<!-- $Id: process.src,v 1.4 1997-11-04 20:34:31 howcome Exp $ -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>CSS2 processing model</TITLE>
<LINK rel="next" href="syndata.html">
<LINK rel="previous" href="convent.html">
<LINK rel="STYLESHEET" href="style/default.css" type="text/css">
</HEAD>
<BODY>
<H1 align="center">CSS2 processing model</H1>
<H2>Introduction to the CSS2 processing model</H2>

<P>This section of the specification presents a model of how user
agents that implement CSS2 behave. This is only a conceptual
model; real implementations may vary.

<P>In this model, a user agent processes a source document
written in the <a href="convent.html#document-language">document
language</a> by going through the following steps:

<ol>
<li>Create a <a href="#doctree">document tree</a> from the source
document. The document tree is a tree of elements from the
document language.</li>

<li>Annotate every node of the document tree by
assigning a single value for every CSS2 <a
href="syndata.html#properties">property</a>. The style sheets
associated with the source document generally specify values for some,
but not all nodes of the document tree (see the section on <a
href="selectors.html">selectors</a>) and values
for some, but not all, CSS properties.  Since rules often overlap in
CSS2, three mechanisms are applied until each property has exactly one
value at each node:

<ol style="list-style-type: lower-roman">

<li>Style rules are applied according to the <a
href="cascade.html">cascade</a>.

<li><a href="#inheritance">Inheritance</a> is invoked for properties
which inherit.

<li>The initial (default) value for the property is assigned.

</ol>
</li>

<li>From the annotated document tree, generate a tree of <a
href="#renderobj">rendering objects</a> based on the target <a
href="media.html">medium</a>. Since during this phase, some properties
may have non-specific values (e.g., the 'auto' value for many
properties), user agents must obey rendering algorithms defined in
this specification to complete the tree of rendering objects. For
example, if the destination medium is the screen, user agents must
obey the <a href="flowobj.html"> visual flow model</a>. If the
destination medium is the printed page, user agents must obey the <a
href="page.html#page-model">page model</a>. If the destination medium
is an aural rendering device (e.g., speech synthesizer), user agents
must obey the <a href="aural.html">aural rendering model</a>.</li>

<li>Finally, user agents transfer the tree of <a
href="#renderobj">rendering objects</a> to the destination <a
href="media.html">medium</a> (e.g., print the results, display them on
the screen, render text as speech, etc.).</li>
</ol>

<P>Step 1 lies outside the scope of this specification (see, for
example, <a rel="biblioentry" href="./refs.src#ref-DOM">[DOM]</a>).

<P>Steps 2 and 3 are addressed by the bulk of this specification.

<P>The majority of transfer issues in step 4 lie outside the scope of
this specification. However, CSS2 addresses these issues:

<ul>
<li>What can user agents do when certain system resources are
not available (e.g., <a href="fonts.html">fonts</a>)?
<li>How do style sheets interact
with system resources (e.g., <a href="ui.html">cursors and colors</a>)?
<li>How do style sheet properties assist certain devices
(e.g., <a href="paged.html">page orientation for a printer</a>)?
</ul>


<H2><a name="doctree">The document tree</a></H2>

<P>User agents transform a document written in the document language
into a <dfn>document tree</dfn> where every element except one has
exactly one <span class="index-def" title="parent">parent</span>
element. (See the SGML (<a href="refs.html#ref-ISO8879">[ISO8879]</a>)
and XML (<a href="refs.html#ref-XML">[XML]</a>) specifications for the
definition of parent.) The one exception is the <span
class="index-def" title="root">root</span> element, which has no
parent. An element A is called a <span class="index-def"
title="child">child</span> of an element B, if and only if B is the
parent of A.

<P>An element A is called an <span class="index-def"
title="ancestor">ancestor</span> of an element B, if either (1) A is
the parent B, or (2) A is the parent of some element C that is an
ancestor of B.

<P>An element A is called a <span class="index-def"
title="descendant">descendant</span> of an element B, if and only if B
is an ancestor of A.

<div class="example"><P>
For example, the following HTML document:
<PRE>
&lt;HTML&gt;
  &lt;TITLE&gt;My home page&lt;/TITLE&gt;
  &lt;BODY&gt;
    &lt;H1&gt;My home page&lt;/H1&gt;
    &lt;P&gt;Welcome to my home page! Let me tell you about my favorite
		composers:
    &lt;UL&gt;
      &lt;LI&gt; Elvis Costello
      &lt;LI&gt; Johannes Brahms
      &lt;LI&gt; Georges Brassens
    &lt;/UL&gt;
  &lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>

<P>results in the following tree:</P>

<IMG src="images/doctree.gif" alt="Sample document tree">

<P>According to the definition of HTML, HEAD elements will be inferred
during parsing and become part of the document tree even if the HEAD
tags are not in the document source.

</div>

<H2><a name="inheritance">Inheritance</a></h2>

<P>If a value is <span class="index-def" title="inheritance of
property values">inherited</span>, it means the value is the
same as the value in the rendering object for the parent element.

<div class="example"><P>
Suppose there is an H1 element with an emphasized element inside:

<PRE>
  &lt;H1&gt;The headline &lt;EM&gt;is&lt;/EM&gt; important!&lt;/H1&gt;
</PRE>

<P>If no color has been assigned to the EM element, the emphasized
"is" will inherit the color of the parent element, so if H1 has the
color blue, the EM element will likewise be in blue.
</div>

<!--
<P>Other style properties are likewise inherited, e.g., <span
class="propinst-font-family">'font-family'</span> and <span
class="propinst-font-size">'font-size'</span>.
-->

<P> To set a "default" style property for a document, one can set the
property on the root of the document tree. In HTML, the HTML or BODY
elements can serve this function. Note that this will work even if the
author omits the BODY tag in the HTML source since the HTML parser
will infer the missing tag.

<div class="example"><P>

For example, the <span class="propinst-color">'color'</span> property
on the BODY element is inherited by all descendents of the BODY
element:

<PRE>
  BODY {
    color: black;
    background: url(texture.gif) white;
  }
</PRE>

<P> In this example, all descendents of the BODY element inherit the
<span class="propinst-color">'color'</span> property.
</div>

<P> Not all style properties are inherited. For example, the <span
class="propinst-background">'background'</span> property is not
inherited. (However, due to the initial 'tranparent' value on the
'background' property, the parent's background shines through.) All
properties have an initial value. If the property is not inherited,
the value will be the initial value.

<!--
<P>Thus, in the example above, the <span
class="propinst-background">'background'</span> property on the BODY
element, although not inherited, establishes the background of the
entire document. The background will be white if the image is not
available (see the section on <a href="./colors.html#backgrounds">
backgrounds</a> for more information).
-->

<P>Each property definition indicates whether the property is
inherited by child elements, and what the initial value of the
property is.

<P>The root element obviously can't inherit values. If no value is set
explicitly, the initial value will be used.

<P>For all inherited CSS2 properties, if the value is specified as a
percentage, child elements inherit the resultant value, not the
percentage value.

<div class="example"><P>
For example, with the style sheet
<pre>
BODY {font-size: 10pt}
H1 {font-size: 120%}
</pre>

<p>and the document fragment

<pre>
&lt;BODY>
&lt;H1>A &lt;EM>large&lt;/EM> heading&lt;/H1>
...
</pre>

<p>the H1 element will have <span
class="prop-inst-font-size">'font-size'</span> 12pt (120% times 10pt),
but the EM will also be 12pt, since it inherits the resultant value
(12pt), not the percentage (120%).
</div>

<P>When a percentage value is set on a property of the root element,
and the percentage is defined as referring to the inherited value of
some property X, the resultant value is the percentage times the
initial value of property X.

<div class="example"><P>
For example, with and HTML document and the style sheet
<pre>
HTML {font-size: 120%}
</pre>

<p>The resultant value for <span
class="prop-inst-font-size">'font-size'</span> will be 120% of the
initial value of the 'font-size' property. (The initial value of
'font-size' is defined to be 'medium', so the resultant value is 20%
larger than 'medium'.)
</div>

<H2><a name="renderobj">Rendering objects</a></H2>

<P>Once a user agent has assigned, for every node in the document
tree, a value for every property, it generates a tree of rendering
objects. Each node in the document tree generates zero or more
rendering objects.

<P>A <span class="index-def" title="rendering object"><em>rendering
object</em></span>is defined by a set of CSS properties.  Since the
type of rendering object created depends on a specific target <a
href="media.html">medium</a>, a rendering object may not carry
information for every CSS2 property (e.g., a visual rendering object
may not carry aural properties).

<P>This specification defines three types of rendering objects:

<ul>
<li><strong><a href="box.html">Box</a>:</strong> The box rendering
object is meant for the <a href="media.html">screen medium</a>.
Boxes are rectangular objects with padding, borders, and margins.

<li><strong><a href="box.html">Page box</a>:</strong>
The page box rendering
object is meant for <a href="page.html">paged media</a>.

<li><strong><a href="box.html">Aural</a>:</strong>
The aural rendering object is meant for
<a href="page.html">aural media</a>.
</ul>

<P>If an element A is an ancestor of an element D, all rendering
objects generated for A must be above the rendering objects
rendered for D in the tree of rendering objects. For box
and page box rendering objects, this implies that, to
find a containing box for a node, a user agent need only search
upward in the tree of rendering objects (not left, right, or down).

</BODY>
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
End:
-->