csswg-drafts/css2/about.html at f1d3f99b0a0b19f72721ee689a989ce54be225fe · 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
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'>

<html lang="en">

<HEAD>
<TITLE>About the CSS&nbsp;2.2 Specification</TITLE>
<link rel="stylesheet" href="style/default.css" type="text/css">
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED.css" type="text/css">
<link rel="prev" href="cover.html">
<link rel="next" href="intro.html">
<link rel="contents" href="cover.html#minitoc">
<link rel="CSS-properties" href="propidx.html" title="properties">
<link rel="index" href="indexlist.html" title="index">
<link rel="first" href="cover.html">
<script type="text/javascript" src="//www.w3.org/scripts/TR/2016/fixup.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

</HEAD>
<BODY>
<div class="navbar">
<p><a href="cover.html">previous</a> &nbsp;
<a href="intro.html">next</a> &nbsp;
<a href="cover.html#minitoc">contents</a> &nbsp;
<a href="propidx.html">properties</a> &nbsp;
<a href="indexlist.html">index</a> &nbsp;
</div>
<hr class="navbar">

<H1><a name="q0">1 About the CSS&nbsp;2.2 Specification</a></H1>
<div id="toc" class="subtoc">
<p><strong>Contents</strong>
  <ul class="toc">
    <li><a href="about.html#css2.2-v-css2" class="tocxref">1.1 CSS&nbsp;2.2 vs CSS&nbsp;2</a>
    <li><a href="about.html#reading" class="tocxref">1.2 Reading the specification</a>
    <li><a href="about.html#organization" class="tocxref">1.3 How the specification is organized</a>
    <li><a href="about.html#conventions" class="tocxref">1.4 Conventions</a>
    <ul class="toc">
      <li><a href="about.html#doc-language" class="tocxref">1.4.1 Document language elements and attributes</a>
      <li><a href="about.html#property-defs" class="tocxref">1.4.2 CSS property definitions</a>
      <ul class="toc">
        <li><a href="about.html#value-defs" class="tocxref">1.4.2.1 Value</a>
        <li><a href="about.html#initial-value" class="tocxref">1.4.2.2 Initial</a>
        <li><a href="about.html#applies-to" class="tocxref">1.4.2.3 Applies to</a>
        <li><a href="about.html#inherited-prop" class="tocxref">1.4.2.4 Inherited</a>
        <li><a href="about.html#percentage-wrt" class="tocxref">1.4.2.5 Percentage values</a>
        <li><a href="about.html#media-applies" class="tocxref">1.4.2.6 Media groups</a>
        <li><a href="about.html#computed-defs" class="tocxref">1.4.2.7 Computed value</a>
      </ul>
      <li><a href="about.html#shorthand" class="tocxref">1.4.3 Shorthand properties</a>
      <li><a href="about.html#notes-and-examples" class="tocxref">1.4.4 Notes and examples</a>
      <li><a href="about.html#images-and-longdesc" class="tocxref">1.4.5 Images and long descriptions</a>
    </ul>
    <li><a href="about.html#acknowledgements" class="tocxref">1.5 Acknowledgments</a>
  </ul>
</div>


<h2>1.1 <a name="css2.2-v-css2">CSS&nbsp;2.2 vs CSS&nbsp;2</a></h2>

<p>The CSS community has gained significant experience with the CSS2
specification since it became a recommendation in 1998. Errors in the
CSS2 specification have subsequently been corrected in the first
revised edition <a href="refs.html#ref-CSS21" rel="biblioentry" class="noxref"><span class="informref">[CSS21]</span></a> in 2011, but new errata were necessary.

<p>While many of the issues will be addressed by the upcoming CSS3
specifications, the current state of affairs hinders the
implementation and interoperability of CSS2. The CSS&nbsp;2.2 specification
attempts to address this situation by:

<ul>
<li>Maintaining compatibility with those portions of CSS2 that are
widely accepted and implemented.

<li>Incorporating all published CSS2 errata.

<li>Where implementations overwhelmingly differ from the CSS2
specification, modifying the specification to be in accordance with
generally accepted practice.

<li>Removing CSS2 features which, by virtue of not having been
implemented, have been rejected by the CSS community. CSS&nbsp;2.2 aims to
reflect what CSS features are reasonably widely implemented for HTML
and XML languages in general (rather than <em>only</em> for a
particular XML language, or <em>only</em> for HTML).

<li>Removing CSS2 features that will be obsoleted by CSS3, thus
encouraging adoption of the proposed CSS3 features in their place.

<li>Adding a (very) small number of new
property values, when implementation experience has shown that
they are needed for implementing CSS2.
</ul>

<p>Thus, while it is not the case that a CSS2 style sheet is
necessarily forwards-compatible with CSS&nbsp;2.2, it is the case that a
style sheet restricting itself to CSS&nbsp;2.2 features is more likely to
find a compliant user agent today and to preserve forwards
compatibility in the future. While breaking forward compatibility is
not desirable, we believe the advantages to the revisions in CSS&nbsp;2.2
are worthwhile.

<p>CSS&nbsp;2.2 is derived from and is intended to replace
CSS&nbsp;2.1 and CSS2. Some parts of CSS2 are unchanged in
CSS&nbsp;2.2, some parts have been
altered, and some parts removed. The removed portions may be used in a
future CSS3 specification. Future specs should refer to CSS&nbsp;2.2
(unless they need features from CSS2 which have been dropped in
CSS&nbsp;2.2, and then they should only reference CSS2 for those
features, or preferably reference such feature(s) in the respective
CSS3 Module that includes those feature(s)).

<h2>1.2 <a name="reading">Reading the specification</a></h2>

<p>This section is non-normative.

<P>This specification has been written with two types of readers in
mind: CSS authors and CSS implementors. We hope the specification will
provide authors with the tools they need to write efficient,
attractive, and accessible documents, without overexposing them to
CSS's implementation details. Implementors, however, should find all
they need to build <a href="conform.html#conformance">conforming user
agents</a>.

The specification begins with a general presentation of CSS and
becomes more and more technical and specific towards the end. For
quick access to information, a general table of contents,
specific tables of contents at the beginning of each section,
and an index provide easy navigation, in both the electronic
and printed versions.

<P>The specification has been written with two modes of presentation
in mind: electronic and printed. Although the two presentations will
no doubt be similar, readers will find some differences. For example,
links will not work in the printed version (obviously), and page
numbers will not appear in the electronic version. In case of a
discrepancy, the electronic version is considered the authoritative
version of the document.

<h2>1.3 <a name="organization">How the specification is organized</a></h2>

<p>This section is non-normative.

<P>The specification is organized into the following sections:

<dl>

<dt><Strong>Section 2: An introduction to CSS&nbsp;2.2</strong>

<dd>The introduction includes a brief tutorial on CSS&nbsp;2.2 and
a discussion of design principles behind CSS&nbsp;2.2.

<dt><strong>Sections 3 - 18: CSS&nbsp;2.2 reference manual.</strong>

<dd>The bulk of the reference manual consists of the CSS&nbsp;2.2 language
reference. This reference defines what may go into a CSS&nbsp;2.2 style sheet
(syntax, properties, property values) and how user agents must
interpret these style sheets in order to claim <a
href="conform.html#conformance">conformance</a>.


<dt><strong>Appendixes:</strong>

<dd>Appendixes contain information about <a href="aural.html">aural
properties</a> (non-normative), <a href="sample.html">a
sample style sheet for HTML 4</a>, <a href="changes.html">changes
from CSS&nbsp;2.1</a>, <a href="grammar.html">the grammar of CSS&nbsp;2.2</a>,
a list of normative and informative <a href="refs.html">references</a>,
and two indexes: one for
<a href="propidx.html">properties</a> and one
<a href="indexlist.html">general index</a>.
</dl>

<H2>1.4 <a name="conventions">Conventions</a></H2>

<H3>1.4.1 <a name="doc-language" href="conform.html#doclanguage">Document language</a> elements
and attributes</H3>

<ul>
<li>CSS property and pseudo-class names are delimited
by single quotes.
<li>CSS values are delimited by single quotes.
<li>Document language attribute names are in lowercase letters
and delimited by double quotes.
</ul>

<H3>1.4.2 <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>

<table class="def propdef">
 <tbody>
  <tr>
   <th>Name:
   <td><a name="x0"><span class="index-def" title="'property-name'"><dfn id="propdef-property-name">property-name</dfn></span></a><tr><th>Value:<td>legal values &amp; syntax
<tr><th>Initial:<td>initial value
<tr><th>Applies to:<td>elements this property applies to
<tr><th>Inherited:<td>whether the property is inherited
<tr><th>Percentages:<td>how percentage values are interpreted
<tr><th>Media:<td>which media groups the property applies to
<tr><th>Computed&nbsp;value:<td>how to compute the computed value
</table>

<h4>1.4.2.1 <a name="value-defs">Value</a></h4>

<P>This part specifies the set of valid values for the property whose
name is <a href="about.html#propdef-property-name" class="noxref"><span class="propinst-property-name">'property-name'</span></a>. A property
value can have one or more components. Component value types are designated
in several ways:

<ol>
<li> <a name="syndata.html#keywords">keyword</a> 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> types 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 type name
is the property name (complete with quotes) between "&lt;" and "&gt;"
(e.g., &lt;'border-width'&gt;).  Such a type does <strong>not</strong>
include the value 'inherit'.  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;", as in
&lt;border-width&gt;.  Notice the distinction between
&lt;border-width&gt; and &lt;'border-width'&gt;; the latter is defined
in terms of the former. The definition of a non-terminal is located
near its first appearance in the specification.  In the electronic
version of the document, each instance of this type of value links to
the corresponding value definition.
</ol>

<P>Other words in these definitions are keywords that must appear
literally, without quotes (e.g., red). The slash (/) and the comma (,)
must also appear literally.

<P>Component values may be arranged into property values as follows:</p>

<ul>
<li>Several juxtaposed words mean that all of them must occur, in the
given order.
<li>A bar (|) separates two or more alternatives:
exactly one of them must occur.
<li>A double bar (||) separates
two or more options: one or more of them must occur, in any order.
<li>A double ampersand (&amp;&amp;) separates two or more components, all of which
must occur, in any order.
<li>Brackets ([&nbsp;]) are for grouping.
</ul>

<P>Juxtaposition is stronger than the double ampersand, the double
ampersand is stronger than the double bar, and the double bar
is stronger than the bar. Thus, the following lines are equivalent:
<PRE>
    a b   |   c ||   d &amp;&amp;   e f
  [ a b ] | [ c || [ d &amp;&amp; [ e f ]]]
</PRE>

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

  <UL>
    <LI>
      An asterisk (*) indicates that the preceding type, word, or group
      occurs zero or more times.

    <LI>
      A plus (+) indicates that the preceding type, word, or group
      occurs 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 occurs at least A and at most
      B times.
  </UL>


<P>The following examples illustrate different value types:

<BLOCKQUOTE><P>
    <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;uri&gt;? &lt;color&gt; [ / &lt;color&gt; ]?<BR>
    <EM>Value:</EM> &lt;uri&gt; || &lt;color&gt;<BR>
    <EM>Value:</EM> inset? &amp;&amp; [ &lt;length&gt;{2,4} &amp;&amp; &lt;color&gt;? ]
</BLOCKQUOTE>

<p>Component values are specified in terms of tokens, as described in <a
href="grammar.html#scanner">Appendix G.2</a>. As the grammar allows spaces
between tokens in the components of the <code>expr</code> production,
spaces may appear between tokens in property values.

<p class=note>Note: In many cases, spaces will in fact be
<em>required</em> between tokens in order to distinguish them from
each other. For example, the value '1em2em' would be parsed as a
single <code>DIMEN</code> token with the number '1' and the identifier
'em2em', which 
8000
is an invalid unit. In this case, a space would be
required before the '2' to get this parsed as the two lengths '1em'
and '2em'.


<h4>1.4.2.2 <a name="initial-value">Initial</a></h4>

<P>This part specifies the property's initial value. Please consult
the section on <a href="cascade.html">the cascade</a> for information
about the interaction between style sheet-specified, inherited, and
initial property values.


<h4>1.4.2.3 <a name="applies-to">Applies to</a></h4>

<p>This part lists the elements to which the property applies. All
elements are considered to have all properties, but some properties
have no rendering effect on some types of elements. For example, the <a href="visuren.html#propdef-clear" class="noxref"><span
class="propinst-clear">'clear'</span></a> property only affects block-level elements.

<h4>1.4.2.4 <a name="inherited-prop">Inherited</a></h4>

<p>This part indicates whether the value of the property is inherited
from an ancestor element. Please consult the section on <a
href="cascade.html">the cascade</a> for information about the
interaction between style sheet-specified, inherited, and initial
property values.


<h4>1.4.2.5 <a name="percentage-wrt">Percentage values</a></h4>

<p>This part 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 in its values.

<h4>1.4.2.6 <a name="media-applies">Media groups</a></h4>

<p>This part indicates the <a href="media.html#media-groups">media
groups</a> to which the property applies. Information about media
groups is non-normative.

<h4>1.4.2.7 <a name="computed-defs">Computed value</a></h4>

<p>This part describes the computed value for the property. See the
section on <a href="cascade.html#computed-value">computed values</a>
for how this definition is used.


<H3>1.4.3 <a name="shorthand">Shorthand properties</a></H3>

<p>Some properties are <a name="x1"><span class="index-def" title="shorthand
property"><dfn>shorthand properties</dfn></span></a>, meaning that they allow
authors to specify the values of several properties with a single
property.

<P>For instance, the <a href="fonts.html#propdef-font" class="noxref"><span class="propinst-font">'font'</span></a> property
is a shorthand property for setting <a href="fonts.html#propdef-font-style" class="noxref"><span
class="propinst-font-style">'font-style'</span></a>, <a href="fonts.html#propdef-font-variant" class="noxref"><span
class="propinst-font-variant">'font-variant'</span></a>, <a href="fonts.html#propdef-font-weight" class="noxref"><span
class="propinst-font-weight">'font-weight'</span></a>, <a href="fonts.html#propdef-font-size" class="noxref"><span
class="propinst-font-size">'font-size'</span></a>, <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a>, and <a href="fonts.html#propdef-font-family" class="noxref"><span
class="propinst-font-family">'font-family'</span></a> all at once.</p>

<P>When values are omitted from a shorthand form, each
"missing" property is assigned
its initial value (see the section on <a href="cascade.html">the
cascade</a>).

<div class="example"><P style="display:none">Example(s):</P><p>
The multiple style rules of this example:</p>

<pre>
h1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal;
}
</pre>

<p>may be rewritten with a single shorthand property:</p>

<pre>
h1 { font: bold 12pt/14pt Helvetica }
</pre>

<p>In this example, <a href="fonts.html#propdef-font-variant" class="noxref"><span
class="propinst-font-variant">'font-variant'</span></a>, and <a href="fonts.html#propdef-font-style" class="noxref"><span
class="propinst-font-style">'font-style'</span></a>
take their initial values.</p>
</div>

<h3>1.4.4 <a name="notes-and-examples">Notes and examples</a></h3>

<P>All examples that illustrate illegal usage are clearly
marked as "ILLEGAL EXAMPLE".

<P>HTML examples lacking DOCTYPE declarations are SGML Text Entities
conforming to the HTML 4.01 Strict DTD <a href="refs.html#ref-HTML4" rel="biblioentry" class="noxref"><span class="normref">[HTML4]</span></a>. Other HTML examples
conform to the DTDs given in the examples.

<P>All notes are informative only.

<P>Examples and notes are <a href="conform.html#defs">marked within
the source HTML</a> for the specification and CSS user agents will
render them specially.

<h3>1.4.5 <a name="images-and-longdesc">Images and long descriptions</a></h3>

<P>Most images in the electronic version of this specification are
accompanied by "long descriptions" of what they represent.  A link to
the long description is denoted by a "[D]" after the image.

<P>Images and long descriptions are informative only.

<H2>1.5 <a name="acknowledgements">Acknowledgments</a></H2>

<p>This section is non-normative.

<p>CSS 2.2 is based on CSS2 and CSS&nbsp;2.1. See the <a
href="http://www.w3.org/TR/2008/REC-CSS2-20080411/about.html#q15"
>acknowledgments section of CSS2</a> and the <a
href="http://www.w3.org/TR/2011/REC-CSS2-20110607/about.html#acknowledgements"
>acknowledgments section of CSS&nbsp;2.1</a> for the people that
contributed to CSS2 and CSS&nbsp;2.1.

<p>We would like to thank the following people who, through their
input and feedback on the www-style mailing list, have helped us with
the creation of this speci
46D4
fication:

<strong>TBD.</strong>

	<p>In addition, we would like to extend special thanks to

<strong>TBD.</strong>

	<p>Many thanks also to the following people for their help
	with the test suite:

<strong>TBD</strong>

	 &hellip; and all the contributors to the CSS1 test suite.

<hr class="navbar">

<div class="navbar">
<p><a href="cover.html">previous</a> &nbsp;
<a href="intro.html">next</a> &nbsp;
<a href="cover.html#minitoc">contents</a> &nbsp;
<a href="propidx.html">properties</a> &nbsp;
<a href="indexlist.html">index</a> &nbsp;
</div>
</BODY>
</HTML>