css3-values/Overview.html@c38cec6b116e
css3-values/Overview.html
Thu, 11 Aug 2011 01:08:22 +0000
- author
- Elika Etemad <fantasai.cvs@inkedblade.net>
- date
- Thu, 11 Aug 2011 01:08:22 +0000
- changeset 3293
- c38cec6b116e
- parent 3292
- 324c6ef7c447
- child 3294
- d53bfb984a91
- permissions
- -rw-r--r--
Generic Datatype Reorganization Part VI: Shift <image> and <color> into their own subsection, grid and fr into their own subsection
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
4 <html lang=en>
5 <head><meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
7 <title>CSS3 Values and Units</title>
9 <style type="text/css">
10 .issue { color: red }
11 table { border-collapse: collapse; border: 1px solid black; margin: 1em 0 }
12 th, td { border: 1px solid black; padding: 0.2em; text-align: left }
13 tt.declaration { white-space: nowrap }
14 .del { text-decoration: line-through}
15 .say { font-style: italic }
16 .value { font: inherit; white-space: pre-wrap; margin: 0; padding: 0; }
17 #propvalues td { text-align: right; }
18 #propvalues td + td { text-align: left; }
19 p { text-indent: 0 !important; margin: 1em 0 !important; }
20 </style>
21 <link href="../default.css" rel=stylesheet type="text/css">
22 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
23 type="text/css">
25 <body>
26 <div class=head> <!--begin-logo-->
27 <p><a href="http://www.w3.org/"><img alt=W3C height=48
28 src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
30 <h1 id=css3-template>CSS3 Values and Units</h1>
32 <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 11 August 2011</h2>
34 <dl>
35 <dt>This version:
37 <dd><a
38 href="http://www.w3.org/TR/2011/ED-css3-values-20110811/">http://www.w3.org/TR/2011/ED-css3-values-20110811/</a>
40 <dt>Latest version:
42 <dd><a
43 href="http://www.w3.org/TR/css3-values">http://www.w3.org/TR/css3-values</a>
45 <dt>Previous version:
47 <dd><a
48 href="http://www.w3.org/TR/2005/WD-css3-values-20050726">http://www.w3.org/TR/2005/WD-css3-values-20050726</a>
50 <dt>Editors:
52 <dd>Håkon Wium Lie, Opera Software <howcome@opera.com>
54 <dd>Tab Atkins, Google
56 <dd>Elika J. Etemad, Invited Expert
57 </dl>
58 <!--begin-copyright-->
59 <p class=copyright><a
60 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
61 rel=license>Copyright</a> © 2011 <a
62 href="http://www.w3.org/"><acronym title="World Wide Web
63 Consortium">W3C</acronym></a><sup>®</sup> (<a
64 href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
65 of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
66 title="European Research Consortium for Informatics and
67 Mathematics">ERCIM</acronym></a>, <a
68 href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
69 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
70 <a
71 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
72 and <a
73 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
74 use</a> rules apply.</p>
75 <!--end-copyright-->
76 <hr title="Separator for header">
77 </div>
79 <h2 class="no-num no-toc" id=abstract>Abstract</h2>
81 <p>This CSS3 module describes the various values and units that CSS
82 properties accept. Also, it describes how values are computed from
83 "specified" through "computed" and "used" into "actual" values. The main
84 purpose of this module is to define common values and units in one
85 specification which can be referred to by other modules. As such, it does
86 not make sense to claim conformance with this module alone.
88 <h2 class="no-num no-toc" id=status>Status of this document</h2>
89 <!--begin-status-->
91 <p>This is a public copy of the editors' draft. It is provided for
92 discussion only and may change at any moment. Its publication here does
93 not imply endorsement of its contents by W3C. Don't cite this document
94 other than as work in progress.
96 <p>The (<a
97 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
98 mailing list <a
99 href="mailto:www-style@w3.org?Subject=%5Bcss3-values%5D%20PUT%20SUBJECT%20HERE">
100 www-style@w3.org</a> (see <a
101 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
102 discussion of this specification. When sending e-mail, please put the text
103 “css3-values” in the subject, preferably like this:
104 “[<!---->css3-values<!---->] <em>…summary of
105 comment…</em>”
107 <p>This document was produced by the <a href="/Style/CSS/members">CSS
108 Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
110 <p>This document was produced by a group operating under the <a
111 href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
112 Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
113 rel=disclosure>public list of any patent disclosures</a> made in
114 connection with the deliverables of the group; that page also includes
115 instructions for disclosing a patent. An individual who has actual
116 knowledge of a patent which the individual believes contains <a
117 href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
118 Claim(s)</a> must disclose the information in accordance with <a
119 href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
120 W3C Patent Policy</a>.</p>
121 <!--end-status-->
123 <p>All features described in this specification that also exist in CSS 2.1
124 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> are intended
125 to be backwards compatible. In case of conflict between this draft and
126 CSS 2.1 <a href="#CSS21"
127 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, CSS 2.1 probably
128 represents the intention of the CSS WG better than this draft (other than
129 on values and units that are new to CSS3).
131 <p>This is a draft of a <a href="http://www.w3.org/TR/css3-roadmap/">module
132 of CSS level 3</a>. It will probably be bundled with some other modules
133 before it becomes a <a href="http://www.w3.org/TR/#About">W3C
134 Recommendation</a>.
136 <h2 class="no-num no-toc" id=contents>Table of contents</h2>
137 <!--begin-toc-->
139 <ul class=toc>
140 <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
141 <ul class=toc>
142 <li><a href="#placement"><span class=secno>1.1. </span> Module
143 Interactions</a>
144 </ul>
146 <li><a href="#value-defs"><span class=secno>2. </span> Value Definition
147 Syntax</a>
148 <ul class=toc>
149 <li><a href="#component-types"><span class=secno>2.1. </span> Component
150 value types</a>
152 <li><a href="#component-combinators"><span class=secno>2.2. </span>
153 Component value combinators</a>
155 <li><a href="#component-multipliers"><span class=secno>2.3. </span>
156 Component value multipliers</a>
158 <li><a href="#component-whitespace"><span class=secno>2.4. </span>
159 Component values and white space</a>
161 <li><a href="#value-examples"><span class=secno>2.5. </span> Property
162 value examples</a>
163 </ul>
165 <li><a href="#syntax-and-terminology"><span class=secno>3. </span>Syntax
166 and terminology</a>
167 <ul class=toc>
168 <li><a href="#functional-notation"><span class=secno>3.1.
169 </span>Functional notation</a>
170 </ul>
172 <li><a href="#textual-values"><span class=secno>4. </span> Textual Data
173 Types</a>
174 <ul class=toc>
175 <li><a href="#keywords"><span class=secno>4.1. </span> Pre-defined
176 Keywords</a>
177 <ul class=toc>
178 <li><a href="#initial-inherit"><span class=secno>4.1.1. </span> The
179 ‘<code class=css>initial</code>’ and ‘<code
180 class=css>inherit</code>’ keywords</a>
181 </ul>
183 <li><a href="#identifiers"><span class=secno>4.2. </span> User-defined
184 Identifiers: the ‘<code
185 class=css><identifier></code>’ type</a>
187 <li><a href="#strings"><span class=secno>4.3. </span> Quoted Strings:
188 the ‘<code class=css><string></code>’ type</a>
190 <li><a href="#urls"><span class=secno>4.4. </span> Resource Locators:
191 the ‘<code class=css><url></code>’ type</a>
192 </ul>
194 <li><a href="#numeric-types"><span class=secno>5. </span> Numeric Data
195 Types</a>
196 <ul class=toc>
197 <li><a href="#integers"><span class=secno>5.1. </span> Integers: the
198 ‘<code class=css><integer></code>’ type</a>
200 <li><a href="#numbers"><span class=secno>5.2. </span> Numbers: the
201 ‘<code class=css><number></code>’ type</a>
203 <li><a href="#percentages"><span class=secno>5.3. </span> Percentages:
204 the ‘<code class=css><percentage></code>’ type</a>
205 </ul>
207 <li><a href="#lengths"><span class=secno>6. </span> Distance Units: the
208 ‘<code class=css><length></code>’ type</a>
209 <ul class=toc>
210 <li><a href="#relative-lengths"><span class=secno>6.1. </span> Relative
211 lengths</a>
212 <ul class=toc>
213 <li><a href="#font-relative-lengths"><span class=secno>6.1.1. </span>
214 Font-relative lengths: the ‘<code class=css>em</code>’,
215 ‘<code class=css>ex</code>’, ‘<code
216 class=css>ch</code>’, ‘<code class=css>rem</code>’
217 units</a>
219 <li><a href="#viewport-relative-lengths"><span class=secno>6.1.2.
220 </span> Viewport-relative lengths: the ‘<code
221 class=css>vw</code>’, ‘<code class=css>vh</code>’,
222 ‘<code class=css>vm</code>’ units</a>
223 </ul>
225 <li><a href="#absolute-lengths"><span class=secno>6.2. </span> Absolute
226 lengths: the ‘<code class=css>cm</code>’, ‘<code
227 class=css>mm</code>’, ‘<code class=css>in</code>’,
228 ‘<code class=css>pt</code>’, ‘<code
229 class=css>pc</code>’, ‘<code class=css>px</code>’
230 units </a>
231 </ul>
233 <li><a href="#other-units"><span class=secno>7. </span> Other Units</a>
234 <ul class=toc>
235 <li><a href="#angles"><span class=secno>7.1. </span> Angles: the
236 ‘<code class=css><angle></code>’ type and
237 ‘<code class=css>deg</code>’, ‘<code
238 class=css>grad</code>’, ‘<code class=css>rad</code>’,
239 ‘<code class=css>turn</code>’ units</a>
241 <li><a href="#time"><span class=secno>7.2. </span> Times: the
242 ‘<code class=css><time></code>’ type and ‘<code
243 class=css>s</code>’, ‘<code class=css>ms</code>’
244 units</a>
246 <li><a href="#frequencies-the-ltfrequencygt-type-and-h"><span
247 class=secno>7.3. </span>Frequencies: the ‘<code
248 class=css><frequency></code>’ type and ‘<code
249 class=css>Hz</code>’, ‘<code class=css>kHz</code>’
250 units</a>
251 </ul>
253 <li><a href="#defined-elsewhere"><span class=secno>8. </span> Data Types
254 Defined Elsewhere</a>
255 <ul class=toc>
256 <li><a href="#colors"><span class=secno>8.1. </span> Colors: the
257 ‘<code class=css><color></code>’ type</a>
259 <li><a href="#images"><span class=secno>8.2. </span> Images: the
260 ‘<code class=css><image></code>’ type</a>
261 </ul>
263 <li><a href="#layout-values"><span class=secno>9. </span> Layout-specific
264 Data Types</a>
265 <ul class=toc>
266 <li><a href="#proportions"><span class=secno>9.1. </span> Proportions:
267 the ‘<code class=css><fraction></code>’ type and
268 ‘<code class=css>fr</code>’ unit</a>
270 <li><a href="#grids"><span class=secno>9.2. </span> Grid Units: the
271 ‘<code class=css><grid></code>’ type and ‘<code
272 class=css>gr</code>’ unit</a>
273 <ul class=toc>
274 <li><a href="#the-calc-min-and-max-functions"><span class=secno>9.2.1.
275 </span>The ‘<code class=property>calc</code>’,
276 ‘<code class=property>min</code>’ and ‘<code
277 class=property>max</code>’ functions</a>
278 </ul>
280 <li><a href="#ltattrgt"><span class=secno>9.3. </span><attr></a>
281 </ul>
283 <li><a href="#specified-computed-used-and-actual-value"><span
284 class=secno>10. </span>Specified, computed, used, and actual values</a>
285 <ul class=toc>
286 <li><a href="#finding-the-specified-value"><span class=secno>10.1.
287 </span>Finding the specified value</a>
289 <li><a href="#finding-the-computed-value"><span class=secno>10.2.
290 </span>Finding the computed value</a>
292 <li><a href="#finding-the-used-value"><span class=secno>10.3.
293 </span>Finding the used value</a>
295 <li><a href="#finding-the-actual-value"><span class=secno>10.4.
296 </span>Finding the actual value</a>
297 </ul>
299 <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
301 <li class=no-num><a href="#references">References</a>
302 <ul class=toc>
303 <li class=no-num><a href="#normative-references">Normative
304 references</a>
306 <li class=no-num><a href="#other-references">Other references</a>
307 </ul>
309 <li class=no-num><a href="#index">Index</a>
310 </ul>
311 <!--end-toc-->
313 <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
315 <p>The value definition field of each CSS property can contain keywords,
316 data types (which appear between ‘<code class=css><</code>’
317 and ‘<code class=css>></code>’), and information on how they
318 can be combined. Generic data types (<a
319 href="#length-value"><code><length></code></a> being the most widely
320 used) that can be used by many properties are described in this
321 specification, while more specific data types (e.g.,
322 <code><border-width></code>) are described in the corresponding
323 modules. </code>
325 <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3>
327 <p>This module replaces and extends the data type definitions in <a
328 href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> sections <a
329 href="http://www.w3.org/TR/CSS21/about.html#value-defs">1.4.2.1</a>, <a
330 href="http://www.w3.org/TR/CSS21/syndata.html#values">4.3</a>, and <a
331 href="http://www.w3.org/TR/CSS21/aural.html#aural-intro">A.2</a>.
333 <h2 id=value-defs><span class=secno>2. </span> Value Definition Syntax</h2>
335 <p>The syntax described here is used to define the set of valid values for
336 CSS properties. A property value can have one or more components.
338 <h3 id=component-types><span class=secno>2.1. </span> Component value types</h3>
340 <p>Component value types are designated in several ways:
342 <ol>
343 <li><a href="#keyword">keyword</a> values (such as ‘<code
344 class=css>auto</code>’, ‘<code class=css>disc</code>’,
345 etc.), which appear literally, without quotes (e.g. <code>auto</code>)
347 <li>basic data types, which appear between ‘<code
348 class=css><</code>’ and ‘<code
349 class=css>></code>’ (e.g., <a
350 href="#length-value"><code><length></code></a>, <a
351 href="#percentage-value"><code><percentage></code></a>, etc.).
353 <li>types that have the same range of values as a property bearing the
354 same name (e.g., <code><'border-width'></code>
355 <code><'background-attachment'></code>, etc.). In this case, the
356 type name is the property name (complete with quotes) between the
357 brackets. Such a type does <em>not</em> include the value ‘<code
358 class=property>inherit</code>’.
360 <li>non-terminals that do not share the same name as a property. In this
361 case, the non-terminal name appears between ‘<code
362 class=css><</code>’ and ‘<code
363 class=css>></code>’, as in <code><spacing></code>. Notice
364 the distinction between <code><border-width></code> and
365 <code><'border-width'></code>: the latter is defined as the value
366 of the ‘<code class=property>border-width</code>’ property,
367 the former requires an explicit expansion elsewhere. The definition of a
368 non-terminal is located near its first appearance in the specification.
369 </ol>
371 <p>Some property value definitions also include the slash (/) and/or the
372 comma (,) as literals. These represent their corresponding tokens.
374 <p>All CSS properties also accept the keyword values ‘<code
375 class=css>inherit</code>’ and ‘<code
376 class=css>initial</code>’ as their property value, but for
377 readability these are not listed explicitly in the property value syntax
378 definitions. These keywords cannot be combined with other component values
379 in same declaration; such a declaration is invalid. For example,
380 ‘<code class=css>background: url(corner.png) no-repeat,
381 inherit;</code>’ is invalid.
383 <h3 id=component-combinators><span class=secno>2.2. </span> Component value
384 combinators</h3>
386 <p>Component values can be arranged into property values as follows:
388 <ul>
389 <li>Several juxtaposed words mean that all of them must occur, in the
390 given order.
392 <li>A double ampersand (&&) separates two or more components, all of which
393 must occur, in any order.
395 <li>A double bar (||) separates two or more options: one or more of them
396 must occur, in any order.
398 <li>A bar (|) separates two or more alternatives: exactly one of them must
399 occur.
401 <li>Brackets ([ ]) are for grouping.
402 </ul>
404 <p>Juxtaposition is stronger than the double ampersand, the double
405 ampersand is stronger than the double bar, and the double bar is stronger
406 than the bar. Thus, the following lines are equivalent:
408 <pre>
409 <!----> a b | c || d && e f
410 <!---->[ a b ] | [ c || [ d && [ e f ]]]</pre>
412 <h3 id=component-multipliers><span class=secno>2.3. </span> Component value
413 multipliers</h3>
415 <p>Every type, keyword, or bracketed group may be followed by one of the
416 following modifiers:
418 <ul>
419 <li>An asterisk (*) indicates that the preceding type, word, or group
420 occurs zero or more times.
422 <li>A plus (+) indicates that the preceding type, word, or group occurs
423 one or more times.
425 <li>A question mark (?) indicates that the preceding type, word, or group
426 is optional.
428 <li>A pair of numbers in curly braces ({<var>A</var>,<var>B</var>})
429 indicates that the preceding type, word, or group occurs at least
430 <var>A</var> and at most <var>B</var> times.
432 <li>A hash mark (#) indicates that the preceding type, word, or group
433 occurs one or more times, separated by comma tokens.
434 </ul>
436 <h3 id=component-whitespace><span class=secno>2.4. </span> Component values
437 and white space</h3>
439 <p>Component values are specified in terms of tokens, as described in <a
440 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">Chapter 4</a>
441 of <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. As the
442 grammar allows spaces between tokens in the components of the
443 <code>value</code> production, spaces may appear between tokens in
444 property values.
446 <p class=note>Note: In many cases, spaces will in fact be <em>required</em>
447 between tokens in order to distinguish them from each other. For example,
448 the value ‘<code class=css>1em2em</code>’ would be parsed as a
449 single <code>DIMEN</code> token with the number ‘<code
450 class=css>1</code>’ and the identifier ‘<code
451 class=css>em2em</code>’, which is an invalid unit. In this case, a
452 space would be required before the ‘<code class=css>2</code>’
453 to get this parsed as the two lengths ‘<code
454 class=css>1em</code>’ and ‘<code class=css>2em</code>’.
456 <h3 id=value-examples><span class=secno>2.5. </span> Property value
457 examples</h3>
459 <p>Below are some examples of properties with their corresponding value
460 definition fields
462 <div class=example>
463 <table class=data id=propvalues>
464 <thead>
465 <tr>
466 <th>Property
468 <th>Value definition field
470 <th>Example value
472 <tbody>
473 <tr>
474 <td>‘<code class=property>orphans</code>’
476 <td><integer>
478 <td>‘<code class=css>3</code>’
480 <tr>
481 <td>‘<code class=property>text-align</code>’
483 <td>left | right | center | justify
485 <td>‘<code class=css>center</code>’
487 <tr>
488 <td>‘<code class=property>padding-top</code>’
490 <td><length> | <percentage>
492 <td>‘<code class=css>5%</code>’
494 <tr>
495 <td>‘<code class=property>outline-color</code>’
497 <td><color> | invert
499 <td>‘<code class=css>#fefefe</code>’
501 <tr>
502 <td>‘<code class=property>text-decoration</code>’
504 <td>none | underline || overline || line-through || blink
506 <td>‘<code class=css>overline underline</code>’
508 <tr>
509 <td>‘<code class=property>font-family</code>’
511 <td><family-name>#
513 <td>‘<code class=css>"Gill Sans", Futura,
514 sans-serif</code>’
516 <tr>
517 <td>‘<code class=property>border-width</code>’
519 <td>[ <length> | thick | medium | thin ]{1,4}
521 <td>‘<code class=css>2px medium 4px</code>’
523 <tr>
524 <td>‘<code class=property>text-shadow</code>’
526 <td>[ inset? && [ <length>{2,4} && <color>? ] ]# | none
528 <td>‘<code class=css>3px 3px rgba(50%, 50%, 50%, 50%),
529 lemonchiffon 0 0 4px inset</code>’
531 <tr>
532 <td>‘<code class=property>voice-pitch</code>’
534 <td>
535 <pre class=value><frequency> && absolute |
536 <!-- -->[[x-low | low | medium | high | x-high] ||
537 <!-- --> [<frequency> | <semitones> | <percentage>]]</pre>
539 <td>‘<code class=css>-2st x-low</code>’
540 </table>
541 </div>
543 <h2 id=syntax-and-terminology><span class=secno>3. </span>Syntax and
544 terminology</h2>
546 <p>The generic data types described in the next sections use some common
547 syntactic building blocks and terms that are described in this section.
549 <h3 id=functional-notation><span class=secno>3.1. </span>Functional
550 notation</h3>
552 <p>Some values use a <dfn id=functional-notation0>functional notation</dfn>
553 to type values and to and lump values together. The syntax starts with the
554 name of the function followed by a left parenthesis followed by optional
555 whitespace followed by the argument(s) to the functions followed by
556 optional whitespace followed by a right parenthesis. If a function takes
557 more than one argument, the arguments are separated by a comma
558 (‘<code class=css>,</code>’) with optional whitespace before
559 and after the comma.
561 <div class=example> background: url(http://www.example.org/image); color:
562 rgb(100, 200, 50 );</div>
564 <p>Some properties accept space- or comma-separated lists of values. A
565 value that is composed of several values with spaces or commas between
566 them, is called a <dfn id=compound-value>compound value</dfn>. A value
567 that is not a compound value is a <dfn id=simple-value>simple value</dfn>.
570 <h2 id=textual-values><span class=secno>4. </span> Textual Data Types</h2>
572 <p>An <dfn id=identifier>identifier</dfn> is a sequence of characters
573 conforming to the <code>IDENT</code> token in the <a
574 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>.
575 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> Identifiers
576 cannot be quoted; otherwise they would be interpreted as a string.
578 <h3 id=keywords><span class=secno>4.1. </span> Pre-defined Keywords</h3>
580 <p>In the value definition fields, keywords with a pre-defined meaning
581 appear literally. Keywords are CSS <i>identifiers</i> and are interpreted
582 case-insensitively within the ASCII range (i.e., [a-z] and [A-Z] are
583 equivalent).
585 <div class=example>
586 <p>For example, here is the value definition for the ‘<code
587 class=property>border-collapse</code>’ property:</p>
589 <pre>Value: collapse | separate</pre>
591 <p>And here is an example of its use:</p>
593 <pre>table { border-collapse: separate }</pre>
594 </div>
596 <h4 id=initial-inherit><span class=secno>4.1.1. </span> The ‘<code
597 class=css>initial</code>’ and ‘<code
598 class=css>inherit</code>’ keywords</h4>
600 <p>As defined <a href="#component-types">above</a>, all properties accept
601 the ‘<code class=css>initial</code>’ and ‘<code
602 class=css>inherit</code>’ keywords, which represent value concepts
603 common to all CSS properties.
605 <p>The <dfn id=inherit>‘<code class=css>inherit</code>’</dfn>
606 keyword is <a
607 href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">defined</a>
608 in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
610 <p>The <dfn id=initial>‘<code class=css>initial</code>’</dfn>
611 keyword represents the value that is designated as the property's initial
612 value. <a href="#CSS3CASCADE"
613 rel=biblioentry>[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a>
615 <p class=issue>Should these keywords affect the specified or computed
616 value? See <a
617 href="http://lists.w3.org/Archives/Public/www-style/2011Jan/0075.html">various</a>
618 <a
619 href="http://lists.w3.org/Archives/Public/www-style/2011May/0402.html">issues</a>.
622 <p class=issue>Would it be useful to have a ‘<code
623 class=property>default</code>’ value, defined to be equivalent to <a
624 class=css href="#inherit">‘<code
625 class=property>inherit</code>’</a> for properties that are inherited
626 by default and equivalent to <a class=css href="#initial">‘<code
627 class=property>initial</code>’</a> for properties that are not
628 inherited by default? This might be easier for authors to use than <a
629 class=css href="#initial">‘<code
630 class=property>initial</code>’</a> and <a class=css
631 href="#inherit">‘<code class=property>inherit</code>’</a>
632 since it wouldn't require thinking about whether a property is inherited
633 by default or not (which isn't obvious for some properties, such as
634 text-decoration and visibility).
636 <h3 id=identifiers><span class=secno>4.2. </span> User-defined Identifiers:
637 the ‘<a href="#identifier-value"><code
638 class=css><identifier></code></a>’ type</h3>
640 <p>Some properties accept arbitrary user-defined identifiers as a component
641 value. This generic data type is denoted by <dfn
642 id=identifier-value><code><identifier></code></dfn>, and represents
643 any valid CSS <a href="#identifier"><i>identifier</i></a> that does not
644 otherwise appear as a pre-defined keyword in that property's value
645 definition. Such identifiers are fully case-sensitive, even in the ASCII
646 range (e.g. ‘<code class=css>example</code>’ and ‘<code
647 class=css>EXAMPLE</code>’ are two different, unrelated user-defined
648 identifiers).
650 <h3 id=strings><span class=secno>4.3. </span> Quoted Strings: the ‘<a
651 href="#string-value"><code class=css><string></code></a>’ type</h3>
653 <p>Strings are denoted by <dfn
654 id=string-value><code><string></code></dfn> and consist of a
655 sequence of characters delimited by double quotes or single quotes. They
656 correspond to the <code>STRING</code> token in the <a
657 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>.
658 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
660 <div class=example>
661 <p>Double quotes cannot occur inside double quotes, unless escaped (as
662 ‘<code class=css>\"</code>’ or as ‘<code
663 class=css>\22</code>’). Analogously for single quotes
664 ("\‘<code class=css>" or "\27"). </code>
666 <pre>
667 <!-- -->content: "this is a ’string'.";
668 <!-- -->content: "this is a \"string\".";
669 <!-- -->content: ‘<code class=css>this is a "string".</code>’;
670 <!-- -->content: ‘<code class=css>this is a \</code>’string\‘<code class=css>.</code>’;</pre>
671 </div>
673 <p>It is possible to break strings over several lines, for aesthetic or
674 other reasons, but in such a case the newline itself has to be escaped
675 with a backslash (\). The newline is subsequently removed from the string.
676 For instance, the following two selectors are exactly the same:
678 <div class=example>
679 <p style="display:none">Example(s):</p>
681 <pre>
682 <!-- -->a[title="a not s\
683 <!-- -->o very long title"] {/*...*/}
684 <!-- -->a[title="a not so very long title"] {/*...*/}</pre>
685 </div>
687 <p>Since a string cannot directly represent a newline, to include a newline
688 in a string, use the escape "\A". (Hexadecimal A is the line feed
689 character in Unicode (U+000A), but represents the generic notion of
690 "newline" in CSS.)
692 <h3 id=urls><span class=secno>4.4. </span> Resource Locators: the ‘<a
693 href="#url-value"><code class=css><url></code></a>’ type</h3>
695 <p>A <dfn id=url>URL</dfn> is a pointer to a resource and is a <a
696 href="http://www.w3.org/TR/CSS21/syndata.html#uri">specially-parsed</a> <a
697 href="#functional-notation">functional notation</a> denoted by <dfn
698 id=url-value><code><url></code></dfn>. It corresponds to the
699 <code>URI</code> token in the <a
700 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>.
701 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
703 <div class=example>
704 <p>Below is an example of a URL being used as a background image:
706 <pre>body { background: url("http://www.example.com/pinkish.gif") }</pre>
708 <p>The same example can be written without quotes:
710 <pre>body { background: url(http://www.example.com/pinkish.gif) }</pre>
711 </div>
713 <p class=note>Note that in some CSS syntactic contexts (as defined by that
714 context), a URL can be represented as a <a
715 href="#string-value"><code><string></code></a> rather than by <a
716 href="#url-value"><code><URL></code></a>. An example of this is the
717 <a href="http://www.w3.org/TR/CSS21/cascade.html#at-import">‘<code
718 class=css>@import</code>’ rule</a>.
720 <p>Parentheses, whitespace characters, single quotes (') and double
721 quotes (") appearing in a URL must be escaped with a backslash so that the
722 resulting value is a valid <a href="#url"><code>URL</code></a> token, e.g.
723 ‘<code class=css>url(open\(parens)</code>’, ‘<code
724 class=css>url(close\)parens)</code>’. Depending on the type of URL,
725 it might also be possible to write these characters as URI-escapes (where
726 <code>(</code> = <code>%28</code>, <code>)</code> = <code>%29</code>,
727 etc.) as described in <a href="#URI"
728 rel=biblioentry>[URI]<!--{{URI}}--></a>. Alternatively a URL containing
729 such characters may be represented as a quoted <a
730 href="#string">string</a> within the ‘<a href="#url"><code
731 class=css>url()</code></a>’ notation.
733 <p>In order to create modular style sheets that are not dependent on the
734 absolute location of a resource, authors should use relative URIs.
735 Relative URIs (as defined in [[RFC3986]]) are resolved to full URIs using
736 a base URI. RFC 3986, section 3, defines the normative algorithm
737 for this process. For CSS style sheets, the base URI is that of the style
738 sheet, not that of the source document.
740 <div class=example>
741 <p>For example, suppose the following rule:
743 <pre>body { background: url("tile.png") }</pre>
745 <p>is located in a style sheet designated by the URL:</p>
747 <pre>http://www.example.org/style/basic.css</pre>
749 <p>The background of the source document's <code><body></code> will
750 be tiled with whatever image is described by the resource designated by
751 the URL:
753 <pre>http://www.example.org/style/tile.png</pre>
755 <p>The same image will be used regardless of the URL of the source
756 document containing the <code><body<</code>.
757 </div>
759 <h2 id=numeric-types><span class=secno>5. </span> Numeric Data Types</h2>
761 <h3 id=integers><span class=secno>5.1. </span> Integers: the ‘<a
762 href="#integer-value"><code class=css><integer></code></a>’
763 type</h3>
765 <p>Integer values are denoted by <dfn
766 id=integer-value><code><integer></code></dfn>. An <dfn
767 id=integer>integer</dfn> is one or more decimal digits ‘<code
768 class=css>0</code>’ through ‘<code class=css>9</code>’
769 and corresponds to a subset of the <a
770 href="#number"><code>NUMBER</code></a> token in the <a
771 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>.
772 Integers may be immediately preceded by ‘<code
773 class=css>-</code>’ or ‘<code class=css>+</code>’ to
774 indicate the sign.
776 <p>Properties may restrict the integer value to some range. If the value is
777 outside the allowed range, the declaration is invalid and must be <a
778 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.
780 <h3 id=numbers><span class=secno>5.2. </span> Numbers: the ‘<a
781 href="#number-value"><code class=css><number></code></a>’ type</h3>
783 <p>Number values are denoted by <dfn
784 id=number-value><code><number></code></dfn>. A <dfn
785 id=number>number</dfn> is either an <a href="#integer"><i>integer</i></a>,
786 or zero or more decimal digits followed by a dot (.) followed by one or
787 more decimal digits. It corresponds to the <a
788 href="#number"><code>NUMBER</code></a> token in the <a
789 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>.
790 Like integers, numbers may also be immediately preceded by ‘<code
791 class=css>-</code>’ or ‘<code class=css>+</code>’ to
792 indicate the sign.
794 <p>Properties may restrict the number value to some range. If the value is
795 outside the allowed range, the declaration is invalid and must be <a
796 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.
798 <h3 id=percentages><span class=secno>5.3. </span> Percentages: the
799 ‘<a href="#percentage-value"><code
800 class=css><percentage></code></a>’ type</h3>
802 <p>A percentage value is denoted by <dfn
803 id=percentage-value><code><percentage></code></dfn>, consists of a
804 <a href="#number-value"><i><number></i></a> immediately followed by
805 a percent sign ‘<code class=css>%</code>’. It corresponds to
806 the <code>PERCENTAGE</code> token in the <a
807 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>.
809 <p>Percentage values are always relative to another value, for example a
810 length. Each property that allows percentages also defines the value to
811 which the percentage refers. The value may be that of another property for
812 the same element, a property for an ancestor element, or a value of the
813 formatting context (e.g., the width of a <i>containing block</i>). When a
814 percentage value is set for a property of the <i>root</i> element and the
815 percentage is defined as referring to the inherited value of some
816 property, the resultant value is the percentage times the <i>initial
817 value</i> of that property.
819 <p>Properties may restrict the percentage value to some range. If the value
820 is outside the allowed range, the declaration is invalid and must be <a
821 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.
823 <h2 id=lengths><span class=secno>6. </span> Distance Units: the ‘<a
824 href="#length-value"><code class=css><length></code></a>’ type</h2>
826 <p>Lengths refer to distance measurements and are denoted by <dfn
827 id=length-value><code><length></code></dfn> in the property
828 definitions. A length is a <a href="#dimension"><i>dimension</i></a>. A
829 zero length may be represented instead as the <a
830 href="#number-value"><code><number></code></a> ‘<code
831 class=css>0</code>’. (In other words, for zero lengths the unit
832 identifier is optional.)
834 <p> A <dfn id=dimension>dimension</dfn> is a <a
835 href="#number"><i>number</i></a> immediately followed by a unit
836 identifier. It corresponds to the <a
837 href="#dimension"><code>DIMENSION</code></a> token in the <a
838 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>.
839 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> Like
840 keywords, unit identifiers are case-insensitive within the ASCII range.
842 <p>Properties may restrict the length value to some range. If the value is
843 outside the allowed range, the declaration is invalid and must be <a
844 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.
846 <p>While some properties allow negative length values, this may complicate
847 the formatting and there may be implementation-specific limits. If a
848 negative length value is allowed but cannot be supported, it must be
849 converted to the nearest value that can be supported.
851 <p>In cases where the <a href="#used-value">used</a> length cannot be
852 supported, user agents must approximate it in the <a
853 href="#actual-value">actual</a> value.
855 <p>There are two types of length units: relative and absolute.
857 <h3 id=relative-lengths><span class=secno>6.1. </span> Relative lengths</h3>
859 <p><dfn id=relative-length-units title="relative length">Relative length
860 units</dfn> specify a length relative to another length. Style sheets that
861 use relative units can more easily scale from one output environment to
862 another.
864 <p>The relative units are:
866 <table class=data>
867 <caption>Informative Summary of Relative Units</caption>
869 <thead>
870 <tr>
871 <th>unit
873 <th>relative to
875 <tbody>
876 <tr>
877 <td>‘<a href="#em-unit"><code class=css>em</code></a>’
879 <td>font size of the element
881 <tr>
882 <td>‘<a href="#ex-unit"><code class=css>ex</code></a>’
884 <td><i>x-height</i> of the element's font
886 <tr>
887 <td>‘<a href="#ch-unit"><code class=css>ch</code></a>’
889 <td>width of the "0" glyph in the element's font
891 <tr>
892 <td>‘<a href="#rem-unit"><code class=css>rem</code></a>’
894 <td>font size of the root element
896 <tr>
897 <td>‘<a href="#vw-unit"><code class=css>vw</code></a>’
899 <td>viewport's width
901 <tr>
902 <td>‘<a href="#vh-unit"><code class=css>vh</code></a>’
904 <td>viewport's height
906 <tr>
907 <td>‘<a href="#vm-unit"><code class=css>vm</code></a>’
909 <td>minimum of the viewport's height and width
910 </table>
912 <p>Child elements do not inherit the relative values as specified for their
913 parent; they inherit the <a href="#computed-value">computed values</a>.
915 <h4 id=font-relative-lengths><span class=secno>6.1.1. </span> Font-relative
916 lengths: the ‘<a href="#em-unit"><code
917 class=css>em</code></a>’, ‘<a href="#ex-unit"><code
918 class=css>ex</code></a>’, ‘<a href="#ch-unit"><code
919 class=css>ch</code></a>’, ‘<a href="#rem-unit"><code
920 class=css>rem</code></a>’ units</h4>
922 <p>Aside from ‘<a href="#rem-unit"><code
923 class=css>rem</code></a>’ (which refers to the font-size of the root
924 element), the font-relative lengths refer to the computed font metrics of
925 the element on which they are used. The exception is when they occur in
926 the value of the ‘<code class=property>font-size</code>’
927 property itself, in which case they refer to the font metrics of the
928 parent element (or the font metrics corresponding to the initial values of
929 the ‘<code class=property>font</code>’ property, if the
930 element has no parent).
932 <dl>
933 <dt><dfn id=em-unit title=em>em unit</dfn>
935 <dd>
936 <p>Equal to the computed value of the ‘<code
937 class=property>font-size</code>’ property of the element on which
938 it is used.
940 <div class=example>
941 <p>The rule:</p>
943 <pre>h1 { line-height: 1.2em }</pre>
945 <p>means that the line height of <code>h1</code> elements will be 20%
946 greater than the font size of <code>h1</code> element. On the other
947 hand:
949 <pre>h1 { font-size: 1.2em }</pre>
951 <p>means that the font size of <code>h1</code> elements will be 20%
952 greater than the font size inherited by <code>h1</code> elements.</p>
953 </div>
955 <dt><dfn id=ex-unit title=ex>ex unit</dfn>
957 <dd>
958 <p>Equal to the font's x-height. The x-height is so called because it is
959 often equal to the height of the lowercase "x". However, an ‘<a
960 href="#ex-unit"><code class=css>ex</code></a>’ is defined even for
961 fonts that do not contain an "x".
963 <p>The x-height of a font can be found in different ways. Some fonts
964 contain reliable metrics for the x-height. If reliable font metrics are
965 not available, UAs may determine the x-height from the height of a
966 lowercase glyph. One possible heuristic is to look at how far the glyph
967 for the lowercase "o" extends below the baseline, and subtract that
968 value from the top of its bounding box. In the cases where it is
969 impossible or impractical to determine the x-height, a value of 0.5em
970 must be assumed.
972 <dt><dfn id=ch-unit title=ch>ch unit</dfn>
974 <dd>
975 <p>Equal to the advance measure of the "0" (ZERO, U+0030) glyph found in
976 the font used to render it.
978 <dt><dfn id=rem-unit title=rem>rem unit</dfn>
980 <dd>
981 <p>Equal to the computed value of ‘<code
982 class=property>font-size</code>’ on the root element.
984 <p>When specified on the ‘<code
985 class=property>font-size</code>’ property of the root element, the
986 ‘<a href="#rem-unit"><code class=css>rem</code></a>’ units
987 refer to the property's <em>initial value</em>.</p>
988 </dl>
990 <h4 id=viewport-relative-lengths><span class=secno>6.1.2. </span>
991 Viewport-relative lengths: the ‘<a href="#vw-unit"><code
992 class=css>vw</code></a>’, ‘<a href="#vh-unit"><code
993 class=css>vh</code></a>’, ‘<a href="#vm-unit"><code
994 class=css>vm</code></a>’ units</h4>
996 <p>The viewport-relative lengths are relative to the size of the initial
997 containing block. When the height or width of the viewport is changed,
998 they are scaled proportionally.
1000 <dl>
1001 <dt><dfn id=vw-unit title=vw>vw unit</dfn>
1003 <dd>Equal to 1/100th of the width of the initial containing block.
1004 <div class=example>
1005 <p>In the example below, if the width of the viewport is 200mm, the font
1006 size of <code>h1</code> elements will be 16mm (i.e.
1007 (8×200mm)/100).
1009 <pre>h1 { font-size: 8vw }</pre>
1010 </div>
1012 <dt><dfn id=vh-unit title=vh>vh unit</dfn>
1014 <dd>Equal to 1/100th of the height of the initial containing block.
1016 <dt><dfn id=vm-unit title=vm>vm unit</dfn>
1018 <dd>Equal to the smaller of ‘<a href="#vw-unit"><code
1019 class=css>vw</code></a>’ or ‘<a href="#vh-unit"><code
1020 class=css>vh</code></a>’.
1021 <p class=issue>Do we need this now that we have the min() function?
1022 </dl>
1024 <h3 id=absolute-lengths><span class=secno>6.2. </span> Absolute lengths:
1025 the ‘<code class=css>cm</code>’, ‘<code
1026 class=css>mm</code>’, ‘<code class=css>in</code>’,
1027 ‘<code class=css>pt</code>’, ‘<code
1028 class=css>pc</code>’, ‘<code class=css>px</code>’ units</h3>
1030 <p>The <dfn id=absolute-length-units>absolute length units</dfn> are fixed
1031 in relation to each other and anchored to some physical measurement. They
1032 are mainly useful when the output environment is known. The absolute units
1033 consist of the physical units (in, cm, mm, pt, pc) and the px unit:
1035 <table class=data>
1036 <thead>
1037 <tr>
1038 <th>unit
1040 <th>definition
1042 <tbody>
1043 <tr>
1044 <td>‘<code class=css>cm</code>’
1046 <td>centimeters
1048 <tr>
1049 <td>‘<code class=css>mm</code>’
1051 <td>millimeters
1053 <tr>
1054 <td>‘<code class=css>in</code>’
1056 <td>inches; 1in is equal to 2.54cm
1058 <tr>
1059 <td>‘<code class=css>px</code>’
1061 <td>pixels; 1px is equal to 1/96th of 1in
1063 <tr>
1064 <td>‘<code class=css>pt</code>’
1066 <td>points; 1pt is equal to 1/72nd of 1in
1068 <tr>
1069 <td>‘<code class=css>pc</code>’
1071 <td>picas; 1pc is equal to 12pt
1072 </table>
1074 <pre class=example>
1075 h1 { margin: 0.5in } /* inches */
1076 h2 { line-height: 3cm } /* centimeters */
1077 h3 { word-spacing: 4mm } /* millimeters */
1078 h4 { font-size: 12pt } /* points */
1079 h4 { font-size: 1pc } /* picas */
1080 p { font-size: 12px } /* px */</pre>
1082 <p>For a CSS device, these dimensions are either anchored (i) by relating
1083 the physical units to their physical measurements, or (ii) by relating the
1084 pixel unit to the <a href="#reference-pixel"><i>reference pixel</i></a>.
1085 For print media and similar high-resolution devices, the anchor unit
1086 should be one of the standard physical units (inches, centimeters, etc).
1087 For lower-resolution devices, and devices with unusual viewing distances,
1088 it is recommended instead that the anchor unit be the pixel unit. For such
1089 devices it is recommended that the pixel unit refer to the whole number of
1090 device pixels that best approximates the reference pixel.
1092 <p class=note>Note that if the anchor unit is the pixel unit, the physical
1093 units might not match their physical measurements. Alternatively if the
1094 anchor unit is a physical unit, the pixel unit might not map to a whole
1095 number of device pixels.
1097 <p class=note>Note that this definition of the pixel unit and the physical
1098 units differs from previous versions of CSS. In particular, in previous
1099 versions of CSS the pixel unit and the physical units were not related by
1100 a fixed ratio: the physical units were always tied to their physical
1101 measurements while the pixel unit would vary to most closely match the
1102 reference pixel. (This change was made because too much existing content
1103 relies on the assumption of 96dpi, and breaking that assumption breaks the
1104 content.)
1106 <p>The <dfn id=reference-pixel>reference pixel</dfn> is the visual angle of
1107 one pixel on a device with a pixel density of 96dpi and a distance from
1108 the reader of an arm's length. For a nominal arm's length of 28 inches,
1109 the visual angle is therefore about 0.0213 degrees. For reading at arm's
1110 length, 1px thus corresponds to about 0.26 mm (1/96 inch).
1112 <p>The image below illustrates the effect of viewing distance on the size
1113 of a reference pixel: a reading distance of 71 cm (28 inches)
1114 results in a reference pixel of 0.26 mm, while a reading distance of
1115 3.5 m (12 feet) results in a reference pixel of 1.3 mm.
1117 <div class=figure>
1118 <p><img alt="This diagram illustrates how the definition of a pixel
1119 depends on the users distance from the viewing surface (paper or screen).
1120 The image depicts the user looking at two planes, one 28 inches (71 cm)
1121 from the user, the second 140 inches (3.5 m) from the user. An expanding
1122 cone is projected from the user's eye onto each plane. Where the cone
1123 strikes the first plane, the projected pixel is 0.26 mm high. Where the
1124 cone strikes the second plane, the projected pixel is 1.4 mm high."
1125 src=pixel1.png>
1127 <p class=caption>Showing that pixels must become larger if the viewing
1128 distance increases
1129 </div>
1131 <p>This second image illustrates the effect of a device's resolution on the
1132 pixel unit: an area of 1px by 1px is covered by a single dot in a
1133 low-resolution device (e.g. a typical computer display), while the same
1134 area is covered by 16 dots in a higher resolution device (such as a
1135 printer).
1137 <div class=figure>
1138 <p><img alt="This diagram illustrates the relationship between the
1139 reference pixel and device pixels (called "dots" below). The
1140 image depicts a high resolution (large dot density) laser printer output
1141 on the left and a low resolution monitor screen on the right. For the
1142 laser printer, one square reference pixel is implemented by 16 dots. For
1143 the monitor screen, one square reference pixel is implemented by a single
1144 dot." src=pixel2.png>
1146 <p class=caption>Showing that more device pixels (dots) are needed to
1147 cover a 1px by 1px area on a high-resolution device than on a low-res one
1149 </div>
1151 <h2 id=other-units><span class=secno>7. </span> Other Units</h2>
1153 <h3 id=angles><span class=secno>7.1. </span> Angles: the ‘<a
1154 href="#angle-value"><code class=css><angle></code></a>’ type
1155 and ‘<a href="#deg"><code class=css>deg</code></a>’, ‘<a
1156 href="#grad"><code class=css>grad</code></a>’, ‘<a
1157 href="#rad"><code class=css>rad</code></a>’, ‘<a
1158 href="#turn"><code class=css>turn</code></a>’ units</h3>
1160 <p>Angle values are <i>dimensions</i> denoted by <dfn
1161 id=angle-value><angle></dfn>. The angle unit identifiers are:
1163 <dl>
1164 <dt><dfn id=deg title=deg>deg</dfn>
1166 <dd>Degrees. There are 360 degrees in a full circle.
1168 <dt><dfn id=grad title=grad>grad</dfn>
1170 <dd>Gradians. There are 400 gradians in a full circle.
1172 <dt><dfn id=rad title=rad>rad</dfn>
1174 <dd>Radians. There are 2π radians in a full circle. <span
1175 class=issue>Who is going to use this anyway?</span>
1177 <dt><dfn id=turn title=turn>turn</dfn>
1179 <dd>Turns. There is 1 turn in a full circle.
1180 </dl>
1182 <p>For example, a right angle is ‘<code class=css>90deg</code>’
1183 or ‘<code class=css>100grad</code>’ or ‘<code
1184 class=css>0.25turn</code>’ or approximately ‘<code
1185 class=css>1.570796326794897rad</code>’.
1187 <h3 id=time><span class=secno>7.2. </span> Times: the ‘<a
1188 href="#time-value"><code class=css><time></code></a>’ type and
1189 ‘<a href="#s"><code class=css>s</code></a>’, ‘<a
1190 href="#ms"><code class=css>ms</code></a>’ units</h3>
1192 <p>Time values are <i>dimensions</i> denoted by <dfn
1193 id=time-value><time></dfn>. The time unit identifiers are:
1195 <dl>
1196 <dt><dfn id=s title=s>s</dfn>
1198 <dd>Seconds.
1200 <dt><dfn id=ms title=ms>ms</dfn>
1202 <dd>Milliseconds. There are 1000 milliseconds in a second.
1203 </dl>
1205 <p>Properties may restrict the time value to some range. If the value is
1206 outside the allowed range, the declaration is invalid and must be <a
1207 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.
1209 <h3 id=frequencies-the-ltfrequencygt-type-and-h><span class=secno>7.3.
1210 </span>Frequencies: the ‘<a href="#frequency-value"><code
1211 class=css><frequency></code></a>’ type and ‘<a
1212 href="#hz"><code class=css>Hz</code></a>’, ‘<a
1213 href="#khz"><code class=css>kHz</code></a>’ units</h3>
1215 <p>Frequency values are <i>dimensions</i> denoted by <dfn
1216 id=frequency-value><frequency></dfn>. The frequency unit identifiers
1217 are:
1219 <dl>
1220 <dt><dfn id=hz title=Hz>Hz</dfn>
1222 <dd>Hertz. It represents the number of occurrences per second.
1224 <dt><dfn id=khz title=kHz>kHz</dfn>
1226 <dd>KiloHertz. A kiloHertz is 1000 Hertz.
1227 <p>For example, when representing sound pitches, 200Hz (or 200hz) is a
1228 bass sound, and 6kHz (or 6khz) is a treble sound.</p>
1230 <h2 id=defined-elsewhere><span class=secno>8. </span> Data Types Defined
1231 Elsewhere</h2>
1233 <p>Some data types are defined in their own modules. The two common ones
1234 are <a href="#color-value"><code><color></code></a> and <a
1235 href="#image-value"><code><image></code></a>.
1237 <h3 id=colors><span class=secno>8.1. </span> Colors: the ‘<a
1238 href="#color-value"><code class=css><color></code></a>’ type</h3>
1240 <p>The <dfn id=color-value><code><color></code></dfn> data type is
1241 <a
1242 href="http://www.w3.org/TR/CSS21/syndata.html#color-units">defined</a>
1243 in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and <a
1244 href="http://www.w3.org/TR/css3-color/#colorunits">extended</a> in <a
1245 href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{!CSS3COLOR}}--></a>.
1246 UAs that support CSS Color Level 3 must interpret <a
1247 href="#color-value"><code><color></code></a> as defined therein.
1249 <h3 id=images><span class=secno>8.2. </span> Images: the ‘<a
1250 href="#image-value"><code class=css><image></code></a>’ type</h3>
1252 <p>The <dfn id=image-value><code><image></code></dfn> data type is
1253 defined herein as equivalent to <a
1254 href="#url-value"><code><url></code></a>. It is <a
1255 href="http://www.w3.org/TR/css3-images/#image">extended</a> in
1256 [[!CSS3IMAGES]]: UAs that support CSS Image Values Level 3 must
1257 interpret <a href="#image-value"><code><image></code></a> as
1258 defined therein.
1260 <h2 id=layout-values><span class=secno>9. </span> Layout-specific Data
1261 Types</h2>
1263 <h3 id=proportions><span class=secno>9.1. </span> Proportions: the
1264 ‘<code class=css><fraction></code>’ type and ‘<a
1265 href="#fr-unit"><code class=css>fr</code></a>’ unit</h3>
1267 <p>The <dfn id=fr-unit title=fr>fr unit</dfn> is used to represent
1268 proportions, such as the proportions used to distribute remaining space
1269 in a flex layout computation. [[CSS3FLEX]] When multiple fractions
1270 participate in a calculation, the remainder is distributed
1271 proportionally to their numeric value.
1273 <div class=example>
1274 <pre>
1275 <!-- -->border-parts: 10px 1fr 10px;
1276 <!-- -->border-parts: 10px 1fr 10px 1fr 10px;
1277 <!-- -->border-parts: 10px 2fr 10px 2fr 10px;</pre>
1278 </div>
1280 <h3 id=grids><span class=secno>9.2. </span> Grid Units: the ‘<code
1281 class=css><grid></code>’ type and ‘<a
1282 href="#gr-unit"><code class=css>gr</code></a>’ unit</h3>
1284 <p>A grid is a set of invisible vertical and horizontal lines that can be
1285 used to align content. In CSS, grid lines can be established implicitly
1286 (as in <a href="#CSS3COL"
1287 rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>) or explicitly (as in <a
1288 href="#CSS3GRID" rel=biblioentry>[CSS3GRID]<!--{{CSS3GRID}}--></a>). In
1289 either case, the distance between grid lines can be referred to by the
1290 <dfn id=gr-unit title=gr>‘<code class=css>gr</code>’
1291 unit</dfn>.
1293 <div class=example>
1294 <pre>
1295 <!-- -->img {
1296 <!-- --> float: top left multicol;
1297 <!-- --> float-offset: 2gr;
1298 <!-- --> width: 1gr;
1299 <!-- -->}</pre>
1300 </div>
1302 <p>Grid lines can be laid out in uneven patterns. Therefore, the
1303 ‘<a href="#gr-unit"><code class=css>gr</code></a>’ unit is
1304 not linear. For example, "2gr" is not necessarily twice as long as
1305 "1gr".
1307 <h4 id=the-calc-min-and-max-functions><span class=secno>9.2.1. </span>The
1308 ‘<a href="#calc"><code class=property>calc</code></a>’,
1309 ‘<a href="#min"><code class=property>min</code></a>’ and
1310 ‘<a href="#max"><code class=property>max</code></a>’
1311 functions</h4>
1313 <p>The <dfn id=calc>calc()</dfn>, <dfn id=min>min()</dfn>, and <dfn
1314 id=max>max()</dfn> functions can be used wherever length, frequency,
1315 angle, time, or number values are allowed.
1317 <div class=example>
1318 <pre>
1319 section {
1320 float: left;
1321 margin: 1em; border: solid 1px;
1322 width: calc(100%/3 - 2*1em - 2*1px);
1323 }
1324 </pre>
1325 </div>
1327 <div class=example>
1328 <pre>
1329 p {
1330 margin: calc(1rem - 2px) calc(1rem - 1px);
1331 }
1332 </pre>
1333 </div>
1335 <div class=example>
1336 <pre>
1337 p { font-size: min(10px, 3em) }
1338 blockquote { font-size: max(30px, 3em) }
1339 </pre>
1340 </div>
1342 <div class=example>
1343 <pre>
1344 .box { width: min(10% + 20px, 300px) }
1345 </pre>
1346 </div>
1348 <p>The expression language of these functions is described by the grammar
1349 and prose below.
1351 <pre>
1352 S : calc | min | max;
1353 calc : "calc(" S* sum ")" S*;
1354 min : "min(" S* sum [ "," S* sum ]* ")" S*;
1355 max : "max(" S* sum [ "," S* sum ]* ")" S*;
1356 sum : product [ [ "+" | "-" ] S* product ]*;
1357 product : unit [ [ "*" | "/" | "mod" ] S* unit ]*;
1358 unit : ["+"|"-"]? [ NUMBER S* | DIMENSION S* | PERCENTAGE S* |
1359 min | max | "(" S* sum ")" S* ];
1360 </pre>
1362 <p>The context of the expression imposes a target type, which is one of
1363 length, frequency, angle, time, or number. NUMBER tokens are of type
1364 number. DIMENSION tokens have types of their units (‘<code
1365 class=property>cm</code>’ is length, ‘<a href="#deg"><code
1366 class=property>deg</code></a>’ is angle etc.); any DIMENSION whose
1367 type does not match the target type is not allowed and must be a parse
1368 error. If percentages are accepted in that context and convertible to
1369 the target type, a PERCENTAGE token in the expression has the target
1370 type; otherwise percentages are not allowed and must be a parse error.
1372 <p>To make expressions simpler, operators have restrictions on the types
1373 they accept. At each operator, the types of the left and right side have
1374 to be checked for these restrictions. If compatible, they return roughly
1375 as follows (the following ignores precedence rules on the operators for
1376 simplicity):
1378 <ol>
1379 <li>At ",", "+", "-":<br>
1380 check: both sides have the same type<br>
1381 return: that type
1383 <li>At "*":<br>
1384 check: at least one side is "number" <br>
1385 return: the type of the other side
1387 <li>At "/":<br>
1388 check: right side is "number"<br>
1389 return: the type of the left side
1390 </ol>
1392 <p>Division by zero is a parse error.
1394 <p>The value resulting from an expression must be clamped to the range
1395 allowed in the target context.
1397 <div class=example> These two are equivalentequivalent to ‘<code
1398 class=css>width: 0px</code>’ since widths smaller than 0px are not
1399 allowed.
1400 <pre>
1401 width: calc(5px - 10px);
1402 width: 0px;
1403 </pre>
1404 </div>
1406 <p>Given the complexities of ‘<code
1407 class=property>width</code>’ and ‘<code
1408 class=property>height</code>’ on table cells and table elements,
1409 calc() expressions for ‘<code class=property>width</code>’
1410 and ‘<code class=property>height</code>’ on table columns,
1411 table column groups, table rows, table row groups, and table cells in
1412 both auto and fixed layout tables are treated as if ‘<code
1413 class=property>auto</code>’ had been specified.
1415 <h3 id=ltattrgt><span class=secno>9.3. </span><attr></h3>
1417 <p class=issue>Describe the feature fully here, not just a delta from CSS
1418 21.
1420 <p class=issue>When attr is set on a pseudo-element, it should apply to
1421 the originating element
1423 <p>In CSS2.1 <a href="#CSS21"
1424 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, the ‘<code
1425 class=css>attr()</code>’ expression always returns a string. In
1426 CSS3, the ‘<code class=css>attr()</code>’ expression can
1427 return many different types. The new syntax for the attr() expression
1428 is:
1430 <pre>
1431 'attr(' ident [ ',' <type> [ ',' <value> ]? ]? ')'
1432 </pre>
1434 <p>The first argument represents the attribute name. The value of the
1435 attribute with that name on the element whose computed values are being
1436 computed is used as the value of the expression, according to the rules
1437 given below.
1439 <p>The first argument accepts an optional namespace prefix to identify
1440 the namespace of the attribute. The namespace prefix and the attribute
1441 name is separated by ‘<code class=css>|</code>’, with no
1442 whitespace before or after the separator <a href="#CSS3NAMESPACE"
1443 rel=biblioentry>[CSS3NAMESPACE]<!--{{CSS3NAMESPACE}}--></a>.
1445 <p>The second argument (which is optional but must be present if the
1446 third argument is present) is a <type> and tells the UA how to
1447 interpret the attribute value. It may be one of the values from the list
1448 below.
1450 <p>The third argument (which is optional) is a CSS value which must be
1451 valid where the attr() expression is placed. If it is not valid, then
1452 the whole attr() expression is invalid.
1454 <p>If the attribute named by the first argument is missing, cannot be
1455 parsed, or is invalid for the property, then the value returned by
1456 attr() will be the third argument, or, if the third argument is absent,
1457 will be the value given as the default for the relevant type in the list
1458 below.
1460 <dl>
1461 <dt>string
1463 <dd>The attribute value will be interpreted as the contents of a CSS
1464 string. The default is the empty string.
1466 <dt>color
1468 <dd>The attribute value will be interpreted as a CSS <color> value.
1469 The default is UA dependent but must be the same as the initial value
1470 of the ‘<code class=property>color</code>’ property.
1472 <dt>url
1474 <dd>The attribute value will be interpreted as the URI part of a
1475 ‘<a href="#url"><code class=css>url()</code></a>’
1476 expression. The default is a UA-dependent URI defined to point to a
1477 non-existent document with a generic error condition. (i.e. it
1478 shouldn't be an FTP URI that causes a DNS error, or an HTTP URI that
1479 results in a 404, it should be a nondescript error condition.)
1481 <dt>integer
1483 <dd>The attribute value will be interpreted as a CSS integer. The
1484 default is 0. The default should also be used if the property in
1485 question only accepts integers within a certain range and the attribute
1486 is out of range.
1488 <dt>number
1490 <dd>The attribute value will be interpreted as a CSS number. The default
1491 is 0.0. The default should also be used if the property in question
1492 only accepts numbers within a certain range and the attribute is out of
1493 range.
1495 <dt>length, angle, time, frequency
1497 <dd>The attribute value will be interpreted as a CSS length, angle, time
1498 or frequency (respectively), and the unit identifier (if any) will
1499 appear in the attribute value. The default is 0. The default should
1500 also be used if the property in question only accepts values within a
1501 certain range (e.g. positive lengths or angles from 0 to 90deg) and the
1502 attribute is out of range (e.g. a negative length or 180deg).
1504 <dt>em, ex, px, gr, rem, vw, vh, vm, mm, cm, in, pt, pc, deg, grad, rad,
1505 ms, s, Hz, kHz, %
1507 <dd>The attribute value will be interpreted as a float, with the given
1508 type suffixed as a unit. The default is 0 in the relevant units.
1509 </dl>
1511 <p class=issue>Should there also be a "keyword" type to, e.g., support
1512 ‘<code class=css>float: attr(align)</code>’</p>
1514 <p>If the <type> is missing, ‘<code
1515 class=property>string</code>’ is implied.
1517 <p class=issue>Ideally, it shouldn't be necessary to specify the type if
1518 it is obvious. For example, this should be valid: "<tt>background-image:
1519 attr(href);</tt>". This could be described as: <q>If the property only
1520 accepts one type of value (aside from ‘<code
1521 class=property>inherit</code>’ and ‘<code
1522 class=property>initial</code>’), that type is implied</q>.
1524 <p>The attr() form is only valid if the type given (or implied, if it is
1525 missing) is valid for the property. For example, all of the following
1526 are invalid and would cause a parse-time error (and thus cause the
1527 relevant declaration, in this case all of them, to be ignored):
1529 <div class="illegal example">
1530 <p style="display:none">Illegal Examples:
1532 <pre>
1533 content: attr(title, color); /* 'content' doesn't accept colors */
1535 content: attr(end-of-quote, string, inherit) close-quote; /* the
1536 'inherit' value is not allowed there, since the result would be
1537 'inherit close-quote', which is invalid. */
1539 margin: attr(vertical, length) attr(horizontal, deg); /* deg
1540 units are not valid at that point */
1541 <!--
1542 font: attr(weight, integer) attr(size, length)/attr(height,
1543 integer) attr(family, string); /* invalid because
1544 <'font-weight'>s are not integers, but identifiers. */
1545 -->
1546 color: attr(color); /* 'color' doesn't accept strings */
1547 </pre>
1548 </div>
1550 <p>The attr() expression cannot return everything, for example it cannot
1551 do counters, named strings, quotes, or values such as ‘<code
1552 class=property>auto</code>’, ‘<code
1553 class=property>nowrap</code>’, or ‘<code
1554 class=property>baseline</code>’. This is intentional, as the
1555 intent of the ‘<code class=css>attr()</code>’ expression is
1556 not to make it possible to describe a presentational language's
1557 formatting using CSS, but to enable CSS to take semantic data into
1558 account.
1560 <p>Note that the default value need not be of the type given. For
1561 instance, if the type required of the attribute by the author is
1562 ‘<code class=property>px</code>’, the default could still be
1563 ‘<code class=css>5em</code>’.
1565 <div class=example>
1566 <p>Examples:
1568 <pre>
1569 <stock>
1570 <wood length="12"/>
1571 <wood length="5"/>
1572 <metal length="19"/>
1573 <wood length="4"/>
1574 </stock>
1576 stock::before {
1577 display: block;
1578 content: "To scale, the lengths of materials in stock are:";
1579 }
1580 stock > * {
1581 display: block;
1582 width: attr(length, em); /* default 0 */
1583 height: 1em;
1584 border: solid thin;
1585 margin: 0.5em;
1586 }
1587 wood {
1588 background: orange url(wood.png);
1589 }
1590 metal {
1591 background: silver url(metal.png);
1592 }
1594 /* this also uses a possible extension to the 'content' property
1595 to handle replaced content and alternatives to unavailable,
1596 corrupted or unsupported content */
1597 img {
1598 content: replaced attr(src, url), attr(alt, string, none);
1599 height: attr(height, px, auto);
1600 width: attr(width, px, auto);
1601 }
1602 </pre>
1603 </div>
1605 <p>The attr() expression cannot currently fall back onto another
1606 attribute. Future versions of CSS may extend attr() in this direction.
1608 <p class=issue>Should ‘<code class=css>attr()</code>’ be
1609 allowed on any property, in any source language? For example, do we
1610 expect UAs to honor this rule for HTML documents?: <tt>P[COLOR] { color:
1611 attr(COLOR, color) }</tt>. <!--
1612 <h4>The 'counter' function</h4>
1614 <p><dfn title="<counter>, definition of">Counters</dfn> are denoted by
1615 identifiers (see the <span class="property">'counter-increment'</span> and
1616 <span class="property">'counter-reset'</span> properties). To refer to the
1617 value of a counter, the notation <dfn>'counter(<identifier>)'</dfn> or
1618 <dfn>'counter(<identifier>, <list-style-type>)'</dfn> is used.
1619 The default style is 'decimal'.</p>
1621 <p>To refer to a sequence of nested counters of the same name, the notation
1622 is 'counters(<identifier>, <string>)' or
1623 'counters(<identifier>, <string>, <list-style-type>)'. See
1624 "Nested counters and scope" [add ref] in the chapter on generated content
1625 [add ref].</p>
1627 <p>In CSS2.1, the values of counters can only be referred to from the <span
1628 class="property">'content'</span> property. Note that 'none' is a possible
1629 <list-style-type>: 'counter(x, none)' yields an empty string.</p>
1631 <div class="example">
1632 <p style="display:none">Example(s):</p>
1634 <p>Here is a style sheet that numbers paragraphs (P) for each chapter (H1).
1635 The paragraphs are numbered with roman numerals, followed by a period and a
1636 space:</p>
1638 <pre>
1639 p { counter-increment: par-num }
1640 h1 { counter-reset: par-num }
1641 p:before { content: counter(par-num, upper-roman) ". " }
1642 </pre>
1643 </div>
1644 -->
1645 <!--
1647 <h3>Special cases</h3>
1649 <p>Two common types of values fall outside the types
1650 described above: the value for font families and the hexadecimal color
1651 notation.
1653 <h4>Font families</h4>
1655 <p>The <span class="property">'font'</span>
1656 and <span class="property">'font-family'</span> properties accept a
1657 comma-separated list of font families. Font families can either be the
1658 name of a certain font, or it can be one of
1659 five <em class="index">generic font families</em>: 'serif',
1660 'sans-serif', 'cursive','fantasy', and 'monospace'. Font family names
1661 are like strings, except that the quotes around them may be omitted.
1662 If quoting is omitted, any white space characters before and after the
1663 font name are ignored and any sequence of white space characters
1664 inside the font name is converted to a single space. Font family names
1665 that happen to be the same as a keyword value (e.g. 'initial',
1666 'inherit', 'default', 'serif', 'sans-serif', 'monospace', 'fantasy',
1667 and 'cursive') must be quoted to prevent confusion with the keywords
1668 with the same names. UAs must not consider these keywords as matching
1669 the ''<family-name>'' type.
1671 <p>Generic font family names are keywords and must not be quoted.
1673 <div class="example">
1674 <pre>body { font-family: "Helvetica", "Univers", "Arial", sans-serif }</pre>
1675 </div>
1676 -->
1679 <h2 id=specified-computed-used-and-actual-value><span class=secno>10.
1680 </span>Specified, computed, used, and actual values</h2>
1682 <p>The final value of a CSS3 property for a given element is the result
1683 of a four-step calculation. First, cascading and inheritance yields the
1684 <a href="#specified-value"><em>specified value</em></a> <a
1685 href="#CSS3CASCADE"
1686 rel=biblioentry>[CSS3CASCADE]<!--{{!CSS3CASCADE}}--></a>. Second,
1687 relative values are computed into absolute values as far as possible
1688 without formatting the document, thereby yielding the <a
1689 href="#computed-value"><em>computed value</em></a>. The computed value
1690 is transformed into the <a href="#used-value"><em>used value</em></a> in
1691 the formatting process. Finally, the computed value is transformed to
1692 the <a href="#actual-value"><em>actual value</em></a> based on
1693 constraints in the user agent.</p>
1695 <h3 id=finding-the-specified-value><span class=secno>10.1. </span>Finding
1696 the <dfn id=specified-value>specified value</dfn></h3>
1698 <p>The <a href="#specified-value"><em>specified value</em></a> is the
1699 output of the cascading and inheritance process <a href="#CSS3CASCADE"
1700 rel=biblioentry>[CSS3CASCADE]<!--{{!CSS3CASCADE}}--></a>.
1702 <h3 id=finding-the-computed-value><span class=secno>10.2. </span>Finding
1703 the <dfn id=computed-value>computed value</dfn></h3>
1705 <p>Specified values may be absolute (i.e., they are not specified
1706 relative to another value, as in ‘<code
1707 class=property>red</code>’ or ‘<code
1708 class=css>2mm</code>’) or relative (i.e., they are specified
1709 relative to another value, as in ‘<code
1710 class=property>auto</code>’, ‘<code
1711 class=css>2em</code>’). For absolute values, no processing is
1712 needed to find the computed value.</p>
1714 <p>For relative values, on the other hand, computation is necessary to
1715 find the computed values: percentages must be multiplied by a reference
1716 value (each property defines which value that is), values with relative
1717 units (em, ex, px) must be made absolute by multiplying with the
1718 appropriate font or pixel size, ‘<code
1719 class=property>auto</code>’ values must be computed by the
1720 formulas given with each property, certain keywords (e.g., ‘<code
1721 class=property>smaller</code>’, ‘<code
1722 class=property>bolder</code>’) must be replaced according to their
1723 definitions. See example (f), (g) and (h) in the table below.</p>
1725 <p>Also, relative URIs are computed into absolute URIs at this stage. The
1726 computed value of invalid and absolute URIs is the same as the specified
1727 value.
1729 <h3 id=finding-the-used-value><span class=secno>10.3. </span>Finding the
1730 <dfn id=used-value>used value</dfn></h3>
1732 <p>Computed values are processed as far as possible without formatting
1733 the document. Some values, however, can only be determined when the
1734 document is being laid out. For example, if the width of an element is
1735 set to be a certain percentage of its containing block, the width cannot
1736 be determined until the width of the containing block has been
1737 determined. The used value is the result of taking the computed value
1738 and resolving any remaining dependencies into an absolute value.
1740 <h3 id=finding-the-actual-value><span class=secno>10.4. </span>Finding
1741 the <dfn id=actual-value>actual value</dfn></h3>
1743 <p>A used value is in principle ready to be used, but a user agent may
1744 not be able to make use of the value in a given environment. For
1745 example, a user agent may only be able to render borders with integer
1746 pixel widths and may therefore have to approximate the computed width.
1747 Also, the font size of an element may need adjustment based on the
1748 availability of fonts or the value of the ‘<code
1749 class=property>font-size-adjust</code>’ property. The actual value
1750 is the computed value after adjustments have been made.
1752 <p>By probing the actual values of elements, much can be learned about
1753 how the document is laid out. However, not all information is recorded
1754 in the actual values. For example, the actual value of the ‘<code
1755 class=property>page-break-after</code>’ property does not reflect
1756 whether there is a page break or not after the element. Similarly, the
1757 actual value of ‘<code class=property>orphans</code>’ does
1758 not reflect how many orphan lines there is in a certain element. See
1759 examples (j) and (k) in the table below.
1761 <table>
1762 <tbody>
1763 <tr>
1764 <th>Example
1766 <th>Winning declaration
1768 <th>Property</th>
1769 <!-- <th>Cascaded value</th> -->
1771 <th>Specified value
1773 <th>Computed value
1775 <th>Used value
1777 <th>Actual value
1779 <tr>
1780 <td>a
1782 <td><tt class=declaration>text-align: left</tt>
1784 <td>text-align</td>
1785 <!-- <td>left</td>-->
1787 <td>left
1789 <td>left
1791 <td>left
1793 <td>left
1795 <tr>
1796 <td>b
1798 <td><tt class=declaration>border-width: inherit</tt>
1800 <td>border-top-width, border-right-width, border-bottom-width,
1801 border-left-width</td>
1802 <!-- <td>inherit</td> -->
1804 <td class=say>4.2px
1806 <td>4.2px
1808 <td>4.2px
1810 <td>4px
1812 <tr>
1813 <td>c
1815 <td>(no winning declaration)
1817 <td>width</td>
1818 <!-- <td>(no specified value)</td>-->
1820 <td>auto (initial value)
1822 <td>auto
1824 <td>120px
1826 <td>120px
1828 <tr>
1829 <td>d
1831 <td><tt class=declaration>list-style-position: inherit</tt>
1833 <td>list-style-position</td>
1834 <!-- <td>inherit</td> -->
1836 <td class=say>inside
1838 <td>inside
1840 <td>inside
1842 <td>inside
1844 <tr>
1845 <td>e
1847 <td><tt class=declaration>list-style-position: initial</tt>
1849 <td>list-style-position</td>
1850 <!-- <td>initial</td>-->
1852 <td>outside (initial value)
1854 <td>outside
1856 <td>outside
1858 <td>outside
1860 <tr>
1861 <td>f
1863 <td><tt class=declaration>font-size: 1.2em</tt>
1865 <td>font-size</td>
1866 <!-- <td>1.2em</td>-->
1868 <td>1.2em
1870 <td class=say>14.1px
1872 <td>14.1px
1874 <td>14px
1876 <tr>
1877 <td>g
1879 <td><tt class=declaration>width: 80%</tt>
1881 <td>width</td>
1882 <!-- <td>80%</td>-->
1884 <td>80%
1886 <td>80%
1888 <td class=say>354.2px
1890 <td>354px
1892 <tr>
1893 <td>h
1895 <td><tt class=declaration>width: auto</tt>
1897 <td>width</td>
1898 <!-- <td>auto</td>-->
1900 <td>auto
1902 <td>auto
1904 <td class=say>134px
1906 <td>134px
1908 <tr>
1909 <td>i
1911 <td><tt class=declaration>height: auto</tt>
1913 <td>height</td>
1914 <!-- <td>auto</td>-->
1916 <td>auto
1918 <td>auto
1920 <td class=say>176px
1922 <td>176px
1924 <tr>
1925 <td>j
1927 <td>(no winning declaration)
1929 <td>page-break-after</td>
1930 <!-- <td>(no specified value)</td>-->
1932 <td>auto (initial value)
1934 <td>auto
1936 <td>auto
1938 <td>auto
1940 <tr>
1941 <td>k
1943 <td><tt class=declaration>orphans: 3</tt>
1945 <td>orphans</td>
1946 <!-- <td>3</td>-->
1948 <td>3
1950 <td>3
1952 <td>3
1954 <td>3
1955 </table>
1957 <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
1959 <p>Comments and suggestions from Giovanni Campagna, Christoph Päper,
1960 Keith Rarick, Alex Mogilevsky, Ian Hickson, David Baron, Edward
1961 Welbourne, Boris Zbarsky, Björn Höhrmann and Michael Day
1962 improved this module. <!--
1964 Ian's proposal:
1965 http://lists.w3.org/Archives/Member/w3c-css-wg/2002OctDec/0141.html
1966 David's proposal
1967 http://lists.w3.org/Archives/Member/w3c-css-wg/2002OctDec/0191.html
1969 -->
1972 <h2 class=no-num id=references>References</h2>
1974 <h3 class=no-num id=normative-references>Normative references</h3>
1975 <!--begin-normative--> <!-- Sorted by label -->
1976 <dl class=bibliography>
1977 <dt style="display:
1978 none"><!-- keeps the doc valid if the DL is empty --> <!---->
1980 <dt id=CSS21>[CSS21]
1982 <dd>Bert Bos; et al. <a
1983 href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading
1984 Style Sheets Level 2 Revision 1 (CSS 2.1)
1985 Specification.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
1986 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
1987 </dd>
1988 <!---->
1990 <dt id=CSS3CASCADE>[CSS3CASCADE]
1992 <dd>Håkon Wium Lie. <a
1993 href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215"><cite>CSS3
1994 module: Cascading and inheritance.</cite></a> 15 December 2005. W3C
1995 Working Draft. (Work in progress.) URL: <a
1996 href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215">http://www.w3.org/TR/2005/WD-css3-cascade-20051215</a>
1997 </dd>
1998 <!---->
2000 <dt id=CSS3COLOR>[CSS3COLOR]
2002 <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
2003 href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS
2004 Color Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL:
2005 <a
2006 href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
2007 </dd>
2008 <!---->
2009 </dl>
2010 <!--end-normative-->
2011 <h3 class=no-num id=other-references>Other references</h3>
2012 <!--begin-informative--> <!-- Sorted by label -->
2013 <dl class=bibliography>
2014 <dt style="display:
2015 none"><!-- keeps the doc valid if the DL is empty --> <!---->
2017 <dt id=CSS3CASCADE>[CSS3CASCADE]
2019 <dd>Håkon Wium Lie. <a
2020 href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215"><cite>CSS3
2021 module: Cascading and inheritance.</cite></a> 15 December 2005. W3C
2022 Working Draft. (Work in progress.) URL: <a
2023 href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215">http://www.w3.org/TR/2005/WD-css3-cascade-20051215</a>
2024 </dd>
2025 <!---->
2027 <dt id=CSS3COL>[CSS3COL]
2029 <dd>Håkon Wium Lie. <a
2030 href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412"><cite>CSS
2031 Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate
2032 Recommendation. (Work in progress.) URL: <a
2033 href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a>
2034 </dd>
2035 <!---->
2037 <dt id=CSS3GRID>[CSS3GRID]
2039 <dd>Alex Mogilevsky; Markus Mielke. <a
2040 href="http://www.w3.org/TR/2007/WD-css3-grid-20070905"><cite>CSS Grid
2041 Positioning Module Level 3.</cite></a> 5 September 2007. W3C
2042 Working Draft. (Work in progress.) URL: <a
2043 href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a>
2044 </dd>
2045 <!---->
2047 <dt id=CSS3NAMESPACE>[CSS3NAMESPACE]
2049 <dd>Elika J. Etemad; Anne van Kesteren. <a
2050 href="http://www.w3.org/TR/2008/CR-css3-namespace-20080523/"><cite>CSS
2051 Namespaces Module.</cite></a> 23 May 2008. W3C Candidate
2052 Recommendation. (Work in progress.) URL: <a
2053 href="http://www.w3.org/TR/2008/CR-css3-namespace-20080523/">http://www.w3.org/TR/2008/CR-css3-namespace-20080523/</a>
2054 </dd>
2055 <!---->
2057 <dt id=URI>[URI]
2059 <dd>T. Berners-Lee; R. Fielding; L. Masinter. <a
2060 href="http://www.ietf.org/rfc/rfc3986.txt"><cite>Uniform Resource
2061 Identifiers (URI): generic syntax.</cite></a> January 2005. Internet
2062 RFC 3986. URL: <a
2063 href="http://www.ietf.org/rfc/rfc3986.txt">http://www.ietf.org/rfc/rfc3986.txt</a>
2064 </dd>
2065 <!---->
2066 </dl>
2067 <!--end-informative-->
2068 <h2 class=no-num id=index>Index</h2>
2069 <!--begin-index-->
2070 <ul class=indexlist>
2071 <li>absolute length units, <a href="#absolute-length-units"
2072 title="absolute length units"><strong>6.2.</strong></a>
2074 <li>actual value, <a href="#actual-value" title="actual
2075 value"><strong>10.4.</strong></a>
2077 <li><angle>, <a href="#angle-value"
2078 title="<angle>"><strong>7.1.</strong></a>
2080 <li>calc(), <a href="#calc" title="calc()"><strong>9.2.1.</strong></a>
2082 <li>ch, <a href="#ch-unit" title=ch><strong>6.1.1.</strong></a>
2084 <li><a href="#color-value"><code><color></code></a>, <a
2085 href="#color-value" title="<color>"><strong>8.1.</strong></a>
2087 <li>compound value, <a href="#compound-value" title="compound
2088 value"><strong>3.1.</strong></a>
2090 <li>computed value, <a href="#computed-value" title="computed
2091 value"><strong>10.2.</strong></a>
2093 <li>deg, <a href="#deg" title=deg><strong>7.1.</strong></a>
2095 <li>dimension, <a href="#dimension"
2096 title=dimension><strong>6.</strong></a>
2098 <li>em, <a href="#em-unit" title=em><strong>6.1.1.</strong></a>
2100 <li>ex, <a href="#ex-unit" title=ex><strong>6.1.1.</strong></a>
2102 <li>fr, <a href="#fr-unit" title=fr><strong>9.1.</strong></a>
2104 <li><frequency>, <a href="#frequency-value"
2105 title="<frequency>"><strong>7.3.</strong></a>
2107 <li>functional notation, <a href="#functional-notation0"
2108 title="functional notation"><strong>3.1.</strong></a>
2110 <li>gr, <a href="#gr-unit" title=gr><strong>9.2.</strong></a>
2112 <li>grad, <a href="#grad" title=grad><strong>7.1.</strong></a>
2114 <li>Hz, <a href="#hz" title=Hz><strong>7.3.</strong></a>
2116 <li>identifier, <a href="#identifier"
2117 title=identifier><strong>4.</strong></a>
2119 <li><a href="#identifier-value"><code><identifier></code></a>, <a
2120 href="#identifier-value"
2121 title="<identifier>"><strong>4.2.</strong></a>
2123 <li><a href="#image-value"><code><image></code></a>, <a
2124 href="#image-value" title="<image>"><strong>8.2.</strong></a>
2126 <li>‘<code class=css>inherit</code>’, <a href="#inherit"
2127 title="''inherit''"><strong>4.1.1.</strong></a>
2129 <li>‘<code class=css>initial</code>’, <a href="#initial"
2130 title="''initial''"><strong>4.1.1.</strong></a>
2132 <li>integer, <a href="#integer" title=integer><strong>5.1.</strong></a>
2134 <li><a href="#integer-value"><code><integer></code></a>, <a
2135 href="#integer-value" title="<integer>"><strong>5.1.</strong></a>
2138 <li>kHz, <a href="#khz" title=kHz><strong>7.3.</strong></a>
2140 <li><a href="#length-value"><code><length></code></a>, <a
2141 href="#length-value" title="<length>"><strong>6.</strong></a>
2143 <li>max(), <a href="#max" title="max()"><strong>9.2.1.</strong></a>
2145 <li>min(), <a href="#min" title="min()"><strong>9.2.1.</strong></a>
2147 <li>ms, <a href="#ms" title=ms><strong>7.2.</strong></a>
2149 <li>number, <a href="#number" title=number><strong>5.2.</strong></a>
2151 <li><a href="#number-value"><code><number></code></a>, <a
2152 href="#number-value" title="<number>"><strong>5.2.</strong></a>
2154 <li><a href="#percentage-value"><code><percentage></code></a>, <a
2155 href="#percentage-value"
2156 title="<percentage>"><strong>5.3.</strong></a>
2158 <li>rad, <a href="#rad" title=rad><strong>7.1.</strong></a>
2160 <li>reference pixel, <a href="#reference-pixel" title="reference
2161 pixel"><strong>6.2.</strong></a>
2163 <li>relative length, <a href="#relative-length-units" title="relative
2164 length"><strong>6.1.</strong></a>
2166 <li>rem, <a href="#rem-unit" title=rem><strong>6.1.1.</strong></a>
2168 <li>s, <a href="#s" title=s><strong>7.2.</strong></a>
2170 <li>simple value, <a href="#simple-value" title="simple
2171 value"><strong>3.1.</strong></a>
2173 <li>specified value, <a href="#specified-value" title="specified
2174 value"><strong>10.1.</strong></a>
2176 <li><a href="#string-value"><code><string></code></a>, <a
2177 href="#string-value" title="<string>"><strong>4.3.</strong></a>
2179 <li><time>, <a href="#time-value"
2180 title="<time>"><strong>7.2.</strong></a>
2182 <li>turn, <a href="#turn" title=turn><strong>7.1.</strong></a>
2184 <li>URL, <a href="#url" title=URL><strong>4.4.</strong></a>
2186 <li><a href="#url-value"><code><url></code></a>, <a
2187 href="#url-value" title="<url>"><strong>4.4.</strong></a>
2189 <li>used value, <a href="#used-value" title="used
2190 value"><strong>10.3.</strong></a>
2192 <li>vh, <a href="#vh-unit" title=vh><strong>6.1.2.</strong></a>
2194 <li>vm, <a href="#vm-unit" title=vm><strong>6.1.2.</strong></a>
2196 <li>vw, <a href="#vw-unit" title=vw><strong>6.1.2.</strong></a>
2197 </ul>
2198 <!--end-index-->
2199 </dl>
