csswg-drafts/css2/conform.src at 762686639c73fbca23ee15dd5109660f3cd70537 · 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
242
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
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<!-- $Id: conform.src,v 1.21 1997-10-29 04:38:25 ian Exp $ -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Definitions and document conventions</TITLE>
<LINK rel="next" href="process.html">
<LINK rel="previous" href="intro.html">
<LINK rel="STYLESHEET" href="style/default.css" type="text/css">
</HEAD>
<BODY>
<H1 align="center">Definitions and document conventions</H1>
<H2><a name="definitions">Definitions</a></H2>
<H3><span class="index-def" title="document language">Document language</span></H3>
Style sheets specify the presentation of a document written in another
computer language (such as HTML) which, in this specification, is
referred to as the document language.

<H3><span class="index-def" title="element">Element</span></H3>
The primary syntactic constructs of the document language are called
elements (a term owed to SGML). Most CSS style sheet rules refer to
these elements of the document language. Examples of elements in HTML
include "P" (for structuring paragraphs), "TABLE" (for creating
tables), "OL" (for creating ordered lists), etc.

<H3><a name="inheritance">Inheritance of property values</a></h3>

<P>Property values may be set explicitly, inherited, or have an
initial value.  If a value is <span class="index-def"
title="inheritance of property values">inherited</span> inherited, 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, by default, when an element has no explicit
background, its 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 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>

<H3><span class="index-def" title="user agent|UA">User
agent</span> (or UA)</H3>

<P>Any agent that interprets a document written in the document
language and associated style sheets by applying the terms of this
specification. A user agent may display a document, read it aloud,
cause it to be printed, convert it, etc.

<H3><span class="index-def" title="conformance">Conforming user
agent</span></H3>

<p><em> This section only defines <a
name="conformance">conformance</a> with the CSS2 specification. There
may be other levels of CSS in the future that may require a UA to
implement a different set of features in order to conform.</em></P>


<p>A user agent that elects to implement a topic (e.g., fonts,
colors, aural style sheets, etc.) covered by this specification must
adhere to all pertinent sections of the specification in order to be
considered to conform to CSS2 for that topic. In such cases, a user
agent may claim to conform to part of the CSS2 specification.</P>

<p>A user agent that elects to implement all topics covered by this
specification and that does so in accordance with the specification
may claim to conform to all of CSS2. The inability of a user agent to
implement a specific topic due to the limitations of a particular
device (e.g., a user agent cannot render colors on a monochrome
monitor or a black and white page) does not imply non-conformance. </P>

CSS2 <strong>to display</strong> documents conforms to the CSS2
specification if:

  <UL>
    <LI> it attempts to retrieve all referenced style sheets and parse them
    according to this specification.

    <LI> it sorts the declarations according to the <a
	    href="./cascade.html#cascade-order">cascade order</a>.
  </UL>


<p>A user agent that <strong>outputs</strong> CSS2 style sheets
conforms to the CSS2 specification if it outputs valid CSS2 style
sheets.</P>

<p>A user agent that uses CSS2 to display documents <EM>and</EM>
outputs CSS2 style sheets conforms to the CSS2 specification if it
meets both sets of conformance requirements.</P>

<p>This specification also recommends, but doesn't require, that a UA
observe the following rules (which refer to functionality, not user
interface):

  <UL>
    <LI> allow the reader to specify personal style sheets
    <LI> allow individual style sheets to be turned on and off
    <LI> approximate style sheet values even if it can't implement
		      them exactly according to the specification.
  </UL>

<P>Different user interface paradigms may have their own constraints:
a VR browser may rescale the document based on its "distance" from the
user.</P>

<P> UAs may offer readers additional choices on presentation. For
example, the UA may provide options for readers with visual
impairments or may provide the choice to disable blinking.</P>

<H3><span class="index-def" title="default style sheet">Default style
			    sheet</span></H3>

<P>Conforming user agents must apply a default style sheet (or behave
as if they did) prior to all other style sheets for a document. A user
agent's default style sheet generally presents elements of the
document language in ways that satisfy the expectations that most
people have (e.g., for visual browsers, the EM element in HTML is
presented using an italic font).

<P>If a document has associated style sheets, the default style sheet
is considered along with author and user style sheets when determining
how rules <a href="cascade.html">cascade</a>.

<P>User agents that don't actually use style sheets to specify default
rules must behave as if they did.

<P>See <a href="sample.html">"A sample style sheet for HTML 2.0"</a>
for a recommended default style sheet for HTML 4.0 documents.

<H3><span class="index-def" title="visual rendering model">Visual
rendering model</span></H3> The <a href="./flowobj.html">visual
rendering model</a> describes how user agents should format a stream
of elements.

<H3><span class="index-def" title="canvas">Canvas</span></H3>

<P> The <a name="canvas">canvas</a> is an abstract rectangular surface
on which visual user agent's format document elements. The canvas may
be implemented in different media such as scrolled windows, on paper,
etc.  Please consult the section on <a href="./media.html">media
types</a> for more information.

<H2>Conventions</H2>

<H3>Document language elements and attributes</H3>

<ul>
<li>CSS property, descriptor, and pseudo-class names are delimited
by single quotes.
<li>CSS values are delimited by single quotes.
<li>Document language element names are in upper case letters.
<li>Document language attribute names are in lower case letters
and delimited by double quotes.
</ul>

<H3><a name="property-defs">CSS property definitions</a></H3>
<P>Each CSS property definition begins with a summary of key
information that resembles the following:

<P><strong>'Property-name'</strong>
<TABLE>
<TR><TH align="right">Value:<TD>Possible constant values or value types</TR>
<TR><TH align="right">Initial:<TD>The initial value</TR>
<TR><TH align="right">Applies to:<TD>Elements this property applies to</TR>
<TR><TH align="right">Inherited:<TD>Whether the property is inherited</TR>
<TR><TH align="right">Percentage values:<TD>How percentage values should be interpreted</TR>
</TABLE>

<P>The five categories have the following meanings:

<dl>
<dt><strong>Value</strong>
<dd>This part of the property definition specifies the set of valid
values for the property. Value types may be designated in several ways:

<ol>
<li> constant values (e.g., 'auto', 'disc', etc.)

<li> basic data types, which appear between "&lt;" and "&gt;" (e.g.,
&lt;length&gt;, &lt;percentage&gt;, etc.). In the electronic version
of the document, each instance of a basic data type links to its
definition.

<li> non-terminals that have the same range of values as a property
bearing the same name (e.g., &lt;border-width&gt;
&lt;background-attachment&gt;, etc.).  In this case, the non-terminal
name is the property name (complete with quotes) between "&lt;" and
"&gt;" (e.g., &lt;'border-width'&gt;). In the electronic version of
the document, each instance of this type of non-terminal links to the
corresponding property definition.

<li> non-terminals that do not share the same name as a property. In
this case, the non-terminal name appears between "&lt;" and "&gt;"
(e.g., &lt;border-width&gt;) and its definition is located near its
first appearance in the specification. In the electronic version of
the document, each instance of this type of non-terminal links to the
corresponding value definition.
</ol>

Other words are keywords that must appear literally, without
quotes. The slash (/) and the comma (,) must also appear literally.


<P> Several things juxtaposed mean that all of them must occur, in the
given order. A bar (|) separates alternatives: one of them must
occur. A double bar (A || B) means that either A or B or both must
occur, in any order. Brackets ([]) are for grouping. Juxtaposition is
stronger than the double bar, and the double bar is stronger than the
bar. Thus "a b | c || d e" is equivalent to "[ a b ] | [ c || [ d e
]]".


<P> Every type, keyword, or bracketed group may be followed by one of
the following modifiers:

  <UL>
    <LI>
      An asterisk (*) indicates that the preceding type, word or group is repeated
      zero or more times.
    <LI>
      A plus (+) indicates that the preceding type, word or group is repeated one
      or more times.
    <LI>
      A question mark (?) indicates that the preceding type, word or group is optional.
    <LI>
      A pair of numbers in curly braces ({A,B}) indicates that the preceding type,
      word or group is repeated at least A and at most B times.
  </UL>


<div class="example"><P>
The following examples illustrate different value types:

<BLOCKQUOTE>
    <EM>Value:</EM> N | NW | NE<BR>
    <EM>Value:</EM> [ &lt;length&gt; | thick | thin ]{1,4}<BR>
    <EM>Value:</EM> [&lt;family-name&gt; , ]* &lt;family-name&gt;<BR>
    <EM>Value:</EM> &lt;url&gt;? &lt;color&gt; [ / &lt;color&gt; ]?<BR>
    <EM>Value:</EM> &lt;url&gt; || &lt;color&gt;<BR>
</BLOCKQUOTE>
</div>

<dt><strong>Initial</strong>
<dd>The property's default value. If the property is inherited, this
is the value that is given to the root element of the
document. Otherwise it is the value that the property will have if
there are no style rules for it in either the user's or the designer's
style sheet.</dd>

<dt><strong>Applies to</strong>
<dd>Lists the elements to which the property applies. All elements are
considered to have all properties, but some properties have no effect
on some types of elements. For example, <span
class="propinst-font-style">'font-style'</span> has no effect if the
element is an image.
</dd>

<dt><strong>Inherited</strong>
<dd>Indicates whether the value of the property is inherited from a
parent element.</dd>

<dt><strong>Percentage values</strong>
<dd>Indicates how percentages should be interpreted, if they occur in
the value of the property. If "N/A" appears here, it means that the
property does not accept percentages as values.
</dd>
</dl>

<H3>HTML conventions</H3>
<P>In this specification, most of the examples refer to HTML. For
clarity, HTML elements are written with upper case letters (e.g.,
HTML, BODY, EM, P) an HTML attributes are written with lower case
letters (e.g., src, class, id).
</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:
-->