Mon, 01 Oct 2012 12:17:55 +0800
[cssom] first draft of color serialization rules
1 <!doctype html>
2 <html lang="en-US">
3 <head>
4 <meta charset=utf-8>
5 <title>CSS Object Model (CSSOM)</title>
6 <link rel="stylesheet" href="cssom.css">
7 <link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS]">
8 </head>
9 <body class="draft">
10 <div class="head">
11 <!--logo-->
13 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
14 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
16 <h1 id="cssom">CSS Object Model (CSSOM)</h1>
18 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
20 <h2 class="no-num no-toc" id="w3c-doctype">[LONGSTATUS] [DATE: 3 August 2002]</h2>
22 <dl>
24 <dt>This Version:</dt>
25 <dd class=dontpublish><a href="http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom/Overview.html">http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom/Overview.html</a></dd>
26 <dd class=publish><a href="[VERSION]">[VERSION]</a></dd>
28 <dt class=dontpublish>Participate:</dt>
29 <dd class=dontpublish><a href="mailto:www-style@w3.org?subject==%5Bcssom%5D%20">www-style@w3.org</a> (<a href="http://lists.w3.org/Archives/Public/www-style/">archives</a>)</dd>
30 <dd class=dontpublish><a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?product=CSS&component=CSSOM">File a bug</a></dd>
31 <dd class=dontpublish><a href="irc://irc.w3.org/css">IRC: #css on W3C</a></dd>
33 <dt class=publish>Latest Version:</dt>
34 <dd class=publish><a href="[LATEST]">[LATEST]</a></dd>
36 <dt class=publish>Latest Editor's draft:</dt>
37 <dd class=publish><a href="http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom/Overview.html">http://dvcs.w3.org/hg/csswg/raw-file/tip/cssom/Overview.html</a></dd>
39 <dt class=dontpublish>Previous Version:</dt>
40 <dd class=dontpublish><a href="http://www.w3.org/TR/2011/WD-cssom-20110712/">http://www.w3.org/TR/2011/WD-cssom-20110712/</a></dd>
41 <dd class=dontpublish><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/">http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/</a></dd>
43 <dt>Editors:</dt>
44 <dd><a href="http://www.w3.org/wiki/User:Gadams">Glenn Adams</a>
45 (<a href="http://www.cox.com/">Cox Communications, Inc.</a>)
46 <<a href="mailto:glenn.adams@cox.com">glenn.adams@cox.com</a>></dd>
47 <dd><a>Shane Stephens</a>
48 (<a href="http://www.google.com/">Google, Inc.</a>)
49 <<a href="mailto:shans@google.com">shans@google.com</a>></dd>
51 <dt>Previous Editor:</dt>
52 <dd><a href="http://annevankesteren.nl/">Anne van Kesteren</a>
53 (<a href="http://www.opera.com/">Opera Software ASA</a>)
54 <<a href="mailto:annevk@opera.com">annevk@opera.com</a>></dd>
55 </dl>
57 <!--copyright-->
59 </div>
61 <hr class="top">
63 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
65 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
67 <p>CSSOM defines APIs (including generic parsing and serialization rules)
68 for Media Queries, Selectors, and of course CSS itself.</p>
70 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
72 <h2 class="no-num no-toc" id="sotd">Status of this Document</h2>
74 <p>This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment.
75 Its publication here does not imply endorsement of its contents by W3C or by the CSS Working Group. Don't cite
76 this document other than as work in progress.</p>
78 <p class="note">Implementers should note well that this specification is an ongoing effort to sort out
79 what has been widely implemented and deployed from <span data-anolis-ref>DOM2STYLE</span> as well as common extensions thereto, some details
80 of which are currently interoperable and others which are not currently interoperable. As this specification moves
81 forward, it is hoped that these differences will be resolved and an unambiguous and adequate consensus-based
82 specification will emerge.</p>
84 <p><em>This section describes the status of this document at the time of
85 its publication. Other documents may supersede this document. A list of
86 current W3C publications and the latest revision of this technical report
87 can be found in the
88 <a href="http://www.w3.org/TR/">W3C technical reports index at http://www.w3.org/TR/.</a></em>
90 <p class="dontpublish">This is the [DATE: 3 August 2002] [LONGSTATUS] of CSSOM. Please send comments to
91 <a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a>
92 (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
93 with <samp>[cssom]</samp> at the start of the subject line.
95 <p class="publish">This is the [DATE] First Public Working Draft of CSSOM, produced by the
96 <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part
97 of the <a href="http://www.w3.org/Style/">Style Activity</a>).
98 <!--XXX remove "First Public" after initial publication -->
100 <p>This document was produced by a group operating under the
101 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>.
102 W3C maintains a
103 <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel=disclosure>public list of any patent disclosures</a>
104 made in connection with the deliverables of the group; that page also
105 includes instructions for disclosing a patent. An individual who has
106 actual knowledge of a patent which the individual believes contains
107 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a>
108 must disclose the information in accordance with
109 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>.</p>
111 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
113 <h2 class="no-num no-toc" id="toc">Table of Contents</h2>
115 <!--toc-->
117 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
119 <h2 id="introduction">Introduction</h2>
121 <p>This document formally specifies the core features of the CSS Object Model (CSSOM). Other documents in the CSSOM family of specifications
122 as well as other CSS related specifications define extensions to these core features.</p>
124 <p>The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to
125 and manipulation of style related state information and processes.</p>
127 <p>The features defined below are fundamentally based on prior specifications of the W3C DOM Working Group, primarily
128 <span data-anolis-ref>DOM2STYLE</span>. The purposes of the present document are (1) to improve on that prior work by providing
129 more technical specificity (so as to improve testability and interoperability), (2) to deprecate or remove certain less-widely implemented
130 features no longer considered to be essential in this context, and (3) to newly specify certain extensions that have been
131 or expected to be widely implemented.</p>
133 <p>A full list of the changes to API signatures can be found in <a href="#changes-from-dom2"><cite>Changes from DOM-2 Style</cite></a>.</p>
135 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
137 <h2>Conformance</h2>
139 <p>All diagrams, examples, and notes in this specification are
140 non-normative, as are all sections explicitly marked non-normative.
141 Everything else in this specification is normative.
143 <p>The key words "MUST", "MUST NOT", "REQUIRED", <!--"SHALL", "SHALL
144 NOT",--> "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and
145 "OPTIONAL" in the normative parts of this document are to be
146 interpreted as described in RFC2119. For readability, these words do
147 not appear in all uppercase letters in this specification.
148 <span data-anolis-ref>RFC2119</span>
150 <p>Requirements phrased in the imperative as part of algorithms
151 (such as "strip any leading space characters" or "return false and
152 terminate these steps") are to be interpreted with the meaning of the
153 key word ("must", "should", "may", etc) used in introducing the
154 algorithm.
156 <p>Conformance requirements phrased as algorithms or specific steps
157 may be implemented in any manner, so long as the end result is
158 equivalent. (In particular, the algorithms defined in this
159 specification are intended to be easy to follow, and not intended to
160 be performant.)
162 <p id="hardwareLimitations">User agents may impose
163 implementation-specific limits on otherwise unconstrained inputs,
164 e.g. to prevent denial of service attacks, to guard against running
165 out of memory, or to work around platform-specific limitations.
167 <p>When a method or an attribute is said to call another method or attribute, the user agent must invoke its internal API for that attribute or method so that e.g. the author can't change the behavior by overriding attributes or methods with custom properties or functions in ECMAScript.
169 <p>Unless otherwise stated, string comparisons are done in a
170 <span data-anolis-spec=dom>case-sensitive</span> manner.
172 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
174 <h2 id="terminology">Terminology</h2>
176 <p>This specification employs certain terminology from the following documents:
177 <cite>DOM4</cite>,
178 <cite>HTML</cite>,
179 <cite>Associating Style Sheets with XML documents</cite>
180 and
181 <cite>XML</cite>
182 <span data-anolis-ref>DOM</span>
183 <span data-anolis-ref>HTML</span>
184 <span data-anolis-ref>XMLSS</span>
185 <span data-anolis-ref>XML</span>.
187 <p>When this specification talks about object
188 <code><var>A</var></code> where <code><var>A</var></code> is actually an interface, it generally means an object implementing interface
189 <code><var>A</var></code>.</p>
191 <p>The term <dfn id="whitespace">whitespace</dfn> is used as defined in <span data-anolis-ref>CSS</span>.
193 <!-- ........................................................................................................................ -->
194 <!-- ........................................................................................................................ -->
196 <h3>Common Serializing Idioms</h3>
198 <p>To <dfn>escape a character</dfn> means to create a string of
199 "<code>\</code>" (U+005C), followed by the character.</p>
201 <p>To <dfn>escape a character as code point</dfn> means to create a
202 string of "<code>\</code>" (U+005C), followed by the Unicode code point as
203 the smallest possible number of hexadecimal digits in the range 0-9 a-f
204 (U+0030 to U+0039 and U+0061 to U+0066) to represent the code point in
205 base 16, followed by a space (U+0020).</p>
207 <p>To <dfn>serialize an identifier</dfn> means to create a string represented
208 by the concatenation of, for each character of the identifier:</p>
210 <ul>
211 <li>If the character is in the range U+0000 to U+001F or U+007F to
212 U+009F, the character
213 <span title="escape a character as code point">escaped as code point</span>.</li>
214 <li>If the character is the first character and is in the range 0-9
215 (U+0030 to U+0039), the character
216 <span title="escape a character as code point">escaped as code point</span>.</li>
217 <li>If the character is the second character and is in the range 0-9
218 (U+0030 to U+0039) and the first character is a "<code>-</code>"
219 (U+002D), the character
220 <span title="escape a character as code point">escaped as code point</span>.</li>
221 <li>If the character is the second character and is "<code>-</code>"
222 (U+002D) and the first character is "<code>-</code>" too, the
223 <span title="escape a character">escaped</span> character.</li>
224 <li>If the character is not handled by one of the above rules and is
225 greater than or equal to U+0080, is "<code>-</code>" (U+002D) or
226 "<code>_</code>" (U+005F), or is in one of the ranges 0-9 (U+0030 to
227 U+0039), A-Z (U+0041 to U+005A), or a-z (U+0061 to U+007A), the character
228 itself.</li>
229 <li>Otherwise, the <span title="escape a character">escaped</span>
230 character.</li>
231 </ul>
233 <p>To <dfn>serialize a string</dfn> means to create a string represented
234 by '<code>"</code>' (U+0022), followed by the result of applying the rules
235 below to each character of the given string, followed by
236 '<code>"</code>' (U+0022):</p>
238 <ul>
239 <li>If the character is in the range U+0000 to U+001F or U+007F to
240 U+009F, the character
241 <span title="escape a character as code point">escaped as code point</span>.</li>
242 <li>If the character is '<code>"</code>' (U+0022) or '<code>\</code>'
243 (U+005C), the <span title="escape a character">escaped</span> character.</li>
244 <li>Otherwise, the character itself.</li>
245 </ul>
247 <p class="note">"<code>'</code>" (U+0027) is not escaped because strings
248 are always serialized with '<code>"</code>' (U+0022).</p>
250 <p>To <dfn>serialize a URL</dfn> means to create a string represented by
251 "<code>url(</code>", followed by the
252 <span title="serialize a string">string escaped</span> value of the given
253 string, followed by "<code>)</code>".</p>
255 <p>To <dfn>serialize a comma-separated list</dfn> concatenate all items of
256 the list in list order while separating them by "<code>,</code>" (U+002C),
257 followed by a space (U+0020).</p>
259 <p>To <dfn>serialize a whitespace-separated list</dfn> concatenate all
260 items of the list in list order while separating them a space (U+0020).</p>
262 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
264 <h2>Media Queries</h2>
266 <p>Media queries are defined by the Media Queries specification. This
267 section defines various concepts around media queries, including their API
268 and serialization form.</p>
270 <!-- XXX ref -->
272 <!-- ........................................................................................................................ -->
273 <!-- ........................................................................................................................ -->
275 <h3>Parsing Media Queries</h3>
277 <p>To
278 <dfn id="parse-a-media-query-list">parse a media query list</dfn> for a
279 given string <var>s</var> into a media query list is defined in
280 the Media Queries specification. Return the list of one or more media
281 queries that the algorithm defined there gives.</p> <!-- XXX ref -->
283 <p class="note">A media query that ends up being "ignored" will turn
284 into "<code>not all</code>".</p>
286 <p>To
287 <dfn id="parse-a-media-query">parse a media query</dfn> for a given string
288 <var>s</var> means to follow the
289 <span>parse a media query list</span> steps and return null if more
290 than one media query is returned or a media query if a
291 single media query is returned.</p>
293 <p class="note">Again, a media query that ends up being "ignored" will
294 turn into "<code>not all</code>".</p>
296 <!-- ........................................................................................................................ -->
298 <h3>Serializing Media Queries</h3>
300 <p>To
301 <dfn id="serialize-a-media-query-list">serialize a media query list</dfn>
302 run these steps:</p>
304 <ol>
305 <li><p>If the media query list is empty return the empty string and
306 terminate these steps.</p></li>
308 <li><p><span title="serialize a media query">Serialize</span> each
309 media query in the list of media queries, sort them in lexicographical
310 order, and then
311 <span title="serialize a comma-separated list">serialize</span> the
312 list.</p></li>
313 </ol>
315 <p>To
316 <dfn id="serialize-a-media-query">serialize a media query</dfn> let
317 <var>s</var> be the empty string, run the steps below, and
318 finally return <var>s</var>:</p>
320 <ol>
321 <li><p>If the media query is negated append "<code>not</code>", followed
322 by a space (U+0020), to <var>s</var>.</p></li>
324 <li><p>Let <var>type</var> be the media type of the media query,
325 <span title="serialize an identifier">escaped</span> and
326 <span data-anolis-spec=dom>converted to ASCII lowercase</span>.</p></li>
328 <li><p>If the media query does not contain media features append
329 <var>type</var>, to <var>s</var>,
330 then return <var>s</var> and terminate this algorithm.</p></li>
332 <li><p>If <var>type</var> is not "<code>all</code>" or if the
333 media query is negated append <var>type</var>, followed by a
334 space (U+0020), followed by "<code>and</code>", followed by a space
335 (U+0020), to <var>s</var>.</p></li>
337 <li><p>Sort the media features in lexicographical order.</p></li>
339 <li>
340 <p>Then, for each media feature:</p>
342 <ol>
343 <li>Append a "<code>(</code>" (U+0028), followed by the media feature
344 name, <span data-anolis-spec=dom>converted to ASCII lowercase</span>,
345 to <var>s</var>.</p></li>
347 <li><p>If a value is given append a "<code>:</code>" (U+003A), followed
348 by a space (U+0020), followed by the
349 <span title="serialize a media feature value">serialized media feature value</span>,
350 to <var>s</var>.</p></li>
352 <li><p>Append a "<code>)</code>" (U+0029) to
353 <var>s</var>.</p></li>
355 <li><p>If this is not the last media feature append a space (U+0020),
356 followed by "<code>and</code>", followed by a space (U+0020), to
357 <var>s</var>.</p></li>
358 </ol>
359 </li>
360 </ol>
362 <div class="example">
363 <p>Here are some examples of input (first column) and output (second
364 column):</p>
366 <table>
367 <thead>
368 <tr><th>Input<th>Output
369 <tbody>
370 <tr>
371 <td><code>not screen and (min-WIDTH:5px) AND (max-width:40px )</code>
372 <td><code>not screen and (max-width: 40px) and (min-width: 5px)</code>
373 <tr>
374 <td><code>all and (color) and (color)</code>
375 <td><code>(color)</code>
376 </table>
377 </div>
380 <!-- ........................................................................................................................ -->
382 <h4>Serializing Media Feature Values</h4>
384 <p class="issue">This should probably be done in terms of mapping it to
385 serializing CSS values as media features are defined in terms of CSS
386 values after all.</p>
388 <p>To <dfn id="serialize-a-media-feature-value">serialize a media feature value</dfn>
389 named <var>v</var> locate <var>v</var> in the first
390 column of the table below and use the serialization format described in
391 the second column:</p>
393 <table>
394 <tr>
395 <th>Media Feature
396 <th>Serialization
397 <tr>
398 <td><code>width</code>
399 <td>...
400 <tr>
401 <td><code>height</code>
402 <td>...
403 <tr>
404 <td><code>device-width</code>
405 <td>...
406 <tr>
407 <td><code>device-height</code>
408 <td>...
409 <tr>
410 <td><code>orientation</code>
411 <td>
412 <p>If the value is `<code>portrait</code>`: "<code>portrait</code>".</p>
413 <p>If the value is `<code>landscape</code>`: "<code>landscape</code>".</p>
414 <tr>
415 <td><code>aspect-ratio</code>
416 <td>...
417 <tr>
418 <td><code>device-aspect-ratio</code>
419 <td>...
420 <tr>
421 <td><code>color</code>
422 <td>...
423 <tr>
424 <td><code>color-index</code>
425 <td>...
426 <tr>
427 <td><code>monochrome</code>
428 <td>...
429 <tr>
430 <td><code>resolution</code>
431 <td>...
432 <tr>
433 <td><code>scan</code>
434 <td>
435 <p>If the value is `<code>progressive</code>`: "<code>progressive</code>".</p>
436 <p>If the value is `<code>interlace</code>`: "<code>interlace</code>".</p>
437 <tr>
438 <td><code>grid</code>
439 <td>...
440 </table>
442 <p>Other specifications can extend this table and vendor-prefixed media
443 features can have custom serialization formats as well.</p>
445 <!-- ........................................................................................................................ -->
446 <!-- ........................................................................................................................ -->
448 <h3>Comparing Media Queries</h3>
450 <p>To
451 <dfn id="compare-media-queries">compare media queries</dfn>
452 <var>m1</var> and <var>m2</var> means to
453 <span title="serialize a media query">serialize</span> them both and
454 return true if they are a
455 <span data-anolis-spec=dom>case-sensitive</span> match and false if they
456 are not.</p>
458 <!-- ........................................................................................................................ -->
459 <!-- ........................................................................................................................ -->
461 <h3>The <code>MediaList</code> Interface</h3>
463 <!--{@idl(MediaList)}-->
465 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
467 <h2>Selectors</h2>
469 <p>Selectors are defined in the Selectors specification. This section
470 mainly defines how to serialize them.</p> <!-- XXX ref -->
472 <!-- XXX ref universal selector etc? some are in <span> some not -->
474 <!-- ........................................................................................................................ -->
475 <!-- ........................................................................................................................ -->
477 <h3>Parsing Selectors</h3>
479 <p>To
480 <dfn id="parse-a-group-of-selectors">parse a group of selectors</dfn>
481 means to parse the value using the <code>selectors_group</code>
482 production defined in the Selectors specification and return either a
483 group of selectors if parsing did not fail or null if parsing did
484 fail.</p> <!-- XXX ref -->
486 <!-- ........................................................................................................................ -->
487 <!-- ........................................................................................................................ -->
489 <h3>Serializing Selectors</h3>
490 <!-- http://dump.testsuite.org/2009/cssom/serializing-selectors.htm -->
492 <p>To
493 <dfn id="serialize-a-group-of-selectors">serialize a group of selectors</dfn>
494 <span title="serialize a selector">serialize</span> each selector in the
495 group of selectors and then
496 <span title="serialize a comma-separated list">serialize</span> the
497 group.</p>
499 <p>To <dfn id="serialize-a-selector">serialize a selector</dfn> let
500 <var>s</var> be the empty string, run the steps below for each
501 part of the chain of the selector, and finally return
502 <var>s</var>:</p>
504 <ol>
505 <li><p>If there is only one <span>simple selector</span> in the
506 <span>sequence of simple selectors</span> which is a
507 <span>universal selector</span>, append the result of
508 <span title="serialize a simple selector">serializing</span> the
509 <span>universal selector</span> to <var>s</var>.</p></li>
511 <li><p>Otherwise, for each <span>simple selector</span> in the
512 <span>sequence of simple selectors</span> that is not a
513 universal selector of which the <span>namespace prefix</span> maps to
514 the null namespace (not in a namespace) or of which the
515 <span>namespace prefix</span> maps to a namespace that is not the
516 <span>default namespace</span>
517 <span title="serialize a simple selector">serialize</span> the
518 <span>simple selector</span> and append the result to
519 <var>s</var>.</p></li>
521 <li><p>If this is not the last part of the chain of the selector append a
522 space (U+0020), followed by the combinator
523 "<code>></code>",
524 "<code>+</code>", or
525 "<code>~</code>"
526 as appropriate, followed by another space (U+0020) if the combinator was
527 not whitespace, to <var>s</var>.</p></li>
529 <li><p>If this is the last part of the chain of the selector and there is
530 a pseudo-element, append "<code>::</code>" followed by the name of the
531 pseudo-class, to <var>s</var>.</p></li>
532 </ol>
535 <p>To
536 <dfn id="serialize-a-simple-selector">serialize a simple selector</dfn>
537 let <var>s</var> be the empty string, run the steps below, and
538 finally return <var>s</var>:</p>
540 <dl class="switch">
541 <dt>type selector</dt>
542 <dt>universal selector</dt>
543 <dd>
544 <ol>
545 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
546 not the <span>default namespace</span> and is not the
547 null namespace (not in a namespace) append the
548 <span title="serialize an identifier">escaped</span>
549 <span>namespace prefix</span>, followed by a "<code>|</code>" (U+007C)
550 to <var>s</var>.</p></li>
552 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
553 the null namespace (not in a namespace) append
554 "<code>|</code>" (U+007C) to <var>s</var>.</p></li>
555 <!-- This includes |* -->
557 <li><p>If this is a type selector append the
558 <span title="serialize an identifier">escaped</span> element name to
559 <var>s</var>.</p></li>
561 <li><p>If this is a universal selector append "<code>*</code>" (U+002A)
562 to <var>s</var>.</p></li>
563 </ol>
564 </dd>
566 <dt>attribute selector</dt>
567 <dd>
568 <ol>
569 <li><p>Append "<code>[</code>" (U+005B) to
570 <var>s</var>.</p></li>
572 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
573 not the null namespace (not in a namespace) append the
574 <span title="serialize an identifier">escaped</span>
575 <span>namespace prefix</span>, followed by a "<code>|</code>" (U+007C)
576 to <var>s</var>.</p></li>
578 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
579 the null namespace (not in a namespace) append
580 "<code>|</code>" (U+007C) to <var>s</var>.</p></li>
581 <!-- This includes |* -->
583 <li><p>Append the <span title="serialize an identifier">escaped</span>
584 attribute name to <var>s</var>.</p></li>
586 <li><p>If there is an attribute value specified, append
587 "<code>=</code>",
588 "<code>~=</code>",
589 "<code>|=</code>",
590 "<code>^=</code>",
591 "<code>$=</code>", or
592 "<code>*=</code>"
593 as appropriate (depending on the type of attribute selector), followed
594 by the <span title="serialize a string">string escaped</span>
595 attribute value, to <var>s</var>.</p></li>
597 <li><p>Append "<code>]</code>" (U+005D) to
598 <var>s</vaR>.</p></li>
599 </ol>
600 </dd>
602 <dt>class selector</dt>
603 <dd><p>Append a "<code>.</code>" (U+002E), followed by the
604 <span title="serialize an identifier">escaped</span> class name to
605 <var>s</var>.</p></dd>
607 <dt>ID selector</dt>
608 <dd><p>Append a "<code>#</code>" (U+0023), followed by the
609 <span title="serialize an identifier">escaped</span> ID to
610 <var>s</var>.</p></dd>
612 <dt>pseudo-class</dt>
613 <dd>
614 <p>If the pseudo-class does not accept arguments append
615 "<code>:</code>" (U+003A), followed by the name of the pseudo-class, to
616 <var>s</var>.</p>
618 <p>Otherwise, append "<code>:</code>" (U+003A), followed by the name of
619 the pseudo-class, followed by "<code>(</code>" (U+0028), followed by the
620 value of the pseudo-class argument determined as per below, followed by
621 "<code>)</code>" (U+0029), to <var>s</var>.</p>
623 <dl class="switch">
624 <dt><code>:lang()</code></dt>
625 <dd><p>The <span title="serialize an identifier">escaped</span>
626 value.</p></dd>
628 <dt><code>:nth-child()</code></dt>
629 <dt><code>:nth-last-child()</code></dt>
630 <dt><code>:nth-of-type()</code></dt>
631 <dt><code>:nth-last-of-type()</code></dt>
632 <dd>
633 <ol>
634 <li><p>If the value is odd let the value be
635 "<code>2n+1</code>".</p></li>
637 <li><p>If the value is even let the value be
638 "<code>2n</code>".</p></li>
640 <li><p>If <var>a</var> is zero let the value be
641 <var>b</var>
642 <span title="serialize a CSS component value">serialized</span> as <integer>.</p></li>
644 <li><p>If <var>a</var> is one or minus one and
645 <var>b</var> is zero let the value be
646 "<code>n</code>" (U+006E).</p></li>
648 <li><p>If <var>a</var> is one or minus one let the value be
649 "<code>n</code>" (U+006E), followed by
650 "<code>+</code>" (U+002B) if <var>b</var> is positive,
651 followed by <var>b</var>
652 <span title="serialize a CSS component value">serialized</span> as <integer>.</p></li>
654 <li><p>If <var>b</var> is zero let the value be
655 <var>a</var>
656 <span title="serialize a CSS component value">serialized</span> as <integer>,
657 followed by "<code>n</code>" (U+006E).</p></li>
659 <li><p>Otherwise let the value be
660 <var>a</var>
661 <span title="serialize a CSS component value">serialized</span> as <integer>,
662 followed by "<code>n</code>" (U+006E), followed by
663 "<code>+</code>" (U+002B) if <var>b</var> is positive,
664 followed by <var>b</var>
665 <span title="serialize a CSS component value">serialized</span> as <integer>.</p></li>
666 </ol>
667 </dd>
669 <dt><code>:not()</code></dt>
670 <dd><p>The result of serializing the value using the rules for
671 <span title="serialize a group of selectors">serializing a group of selectors</span>.</p></dd>
672 </dl>
673 </dd>
674 </dl>
676 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
678 <h2>CSS</h2>
680 <!-- ........................................................................................................................ -->
681 <!-- ........................................................................................................................ -->
683 <h3>CSS Style Sheets</h3>
685 <!-- XXX
686 element inserted into the DOM, style sheet created, element removed from
687 the DOM, what happens to StyleSheet?
688 -->
690 <p>A <dfn id="css-style-sheet">CSS style sheet</dfn> is an abstract concept that
691 represents a style sheet as defined by the CSS specification. In the CSSOM a
692 <span>CSS style sheet</span> is represented as a <code>CSSStyleSheet</code> object. A
693 <span>CSS style sheet</span> has a number of associated state items:</p>
695 <dl>
696 <dt><dfn id="style-sheet-type">style sheet type</dfn></dt>
697 <dd><p>The literal string "<code>text/css</code>".</p></dd>
699 <dt><dfn id="style-sheet-location">style sheet location</dfn></dt>
700 <dd><p>The <span data-anolis-spec=html>URL</span> of the
701 <span>style sheet</span> or null if the <span>style sheet</span> was
702 embedded.</p></dd>
704 <dt><dfn id="style-sheet-parent">style sheet parent</dfn></dt>
705 <dd><p>The <span>style sheet</span> that is the parent of the
706 <span>style sheet</span>.</p></dd>
708 <dt><dfn id="style-sheet-owner-node">style sheet owner node</dfn></dt>
709 <dd><p>The DOM node associated with the <span>style sheet</span> or
710 null if there is no associated DOM node.</p></dd>
712 <dt><dfn id="style-sheet-owner-css-rule">style sheet owner CSS rule</dfn></dt>
713 <dd><p>The <span>CSS rule</span> in the <span>style sheet parent</span>
714 that caused the inclusion of the <span>style sheet</span> or null if
715 there is no such <span>CSS rule</span>.</p></dd>
717 <dt><dfn id="style-sheet-media">style sheet media</dfn></dt>
718 <dd>
719 <p>The <code>MediaList</code> object associated with the
720 <span>style sheet</span>.</p>
722 <p>If this property is set to a string run the
723 <span>create a <code>MediaList</code> object</span> steps for that
724 string and associate the returned object with the
725 <span>style sheet</span>.</p>
726 </dd>
728 <dt><dfn id="style-sheet-title">style sheet title</dfn></dt>
729 <dd>
730 <p>The title of the <span>style sheet</span>. It is said to be empty
731 if the title is the empty string.</p>
733 <div class="example">
734 <p>In these examples the <span>style sheet title</span> ends up being
735 empty:</p>
737 <pre><style> body { background:papayawhip } </style></pre>
739 <pre><style> body { background:orange } </style></pre>
740 </div>
741 </dd>
743 <dt><dfn id="style-sheet-alternate-flag">style sheet alternate flag</dfn></dt>
744 <dd>
745 <p>Either set or unset. Unset by default.</p>
747 <div class="example">
748 <p>The following <span title="style sheet">style sheets</span> have
749 their <span>style sheet alternate flag</span> set:</p>
751 <pre><code><?xml-stylesheet alternate="yes" title="x" href="data:text/css,…"?></code></pre>
753 <pre><code><link rel="alternate stylesheet" title="x" href="data:text/css,…"></code></pre>
754 </div>
755 </dd>
757 <dt><dfn id="style-sheet-disabled-flag">style sheet disabled flag</dfn></dt>
758 <dd>
759 <p>Either set or unset. Unset by default.</p>
761 <p class="note">Even when unset it does not necessarily mean that the
762 <span>style sheet</span> is actually used for rendering.</p>
763 </dd>
766 <dt><dfn id="style-sheet-css-rules">style sheet CSS rules</dfn></dt>
767 <dd><p>The <span title="CSS rule">CSS rules</span> associated with the
768 <span>style sheet</span>.</p></dd>
769 </dl>
771 <p>When you are to <span>create a style sheet</span> the above properties,
772 with the exception of <span>style sheet type</span> and
773 <span>style sheet CSS rules</span>, are to be set to
774 their proper values.</p>
776 <!-- same-origin restrictions -->
778 <!-- ........................................................................................................................ -->
780 <h4>The <code>StyleSheet</code> Interface</h4>
782 <!--{@idl(StyleSheet)}-->
784 <!-- ........................................................................................................................ -->
786 <h4>The <code>CSSStyleSheet</code> Interface</h4>
788 <!--{@idl(CSSStyleSheet)}-->
790 <!-- ........................................................................................................................ -->
791 <!-- ........................................................................................................................ -->
793 <h3>Style Sheet Collections</h3>
795 <p>Below various new concepts are defined that are associated with each
796 <code data-anolis-spec=dom>Document</code> object.</p>
798 <p>Each <code data-anolis-spec=dom>Document</code> has an associated list of zero or more
799 <span title="style sheet">style sheets</span>, named the
800 <dfn id="document-style-sheets">document style sheets</dfn>. This is
801 an ordered list that contains all
802 <span title="style sheet">style sheets</span> associated with the
803 <code data-anolis-spec=dom>Document</code>, in
804 <span data-anolis-spec=dom title=concept-tree-order>tree order</span>, with
805 <span title="style sheet">style sheets</span> created from HTTP
806 <code title="http-link">Link</code> headers first, if any, in header
807 order.</p>
809 <p>To <dfn id="create-a-style-sheet">create a style sheet</dfn>, run these
810 steps:</p>
812 <ol>
813 <li><p>Create a new <span>style sheet</span> object and set its
814 properties as specified.</p></li>
816 <li><p>Then run the <span>add a style sheet</span> steps for the newly
817 created <span>style sheet</span>.</p></li>
818 </ol>
820 <p>To <dfn id="add-a-style-sheet">add a style sheet</dfn>, run these
821 steps:</p>
823 <ol>
824 <li><p>Add the <span>style sheet</span> to the list of
825 <span>document style sheets</span> at the appropriate location. The
826 remainder of these steps deal with the
827 <span>style sheet disabled flag</span>.</p></li>
829 <li><p>If the <span>style sheet disabled flag</span> is set, terminate
830 these steps.</p></li>
832 <li><p>If the <span>style sheet title</span> is non-empty, the
833 <span>style sheet alternate flag</span> is unset, and
834 <span>preferred style sheet set name</span> is the empty string
835 <span>change the preferred style sheet set name</span> to the
836 <span>style sheet title</span>.</p></li>
838 <li>
839 <p>If any of the following is true unset the
840 <span>style sheet disabled flag</span> and terminate these steps:
842 <ul>
843 <li><p>The <span>style sheet title</span> is empty.</p></li>
844 <li><p>The <span>last style sheet set name</span> is null and the
845 <span>style sheet title</span> is a
846 <span data-anolis-spec=dom>case-sensitive</span> match
847 for the <span>preferred style sheet set name</span>.</p></li>
848 <li><p>The <span>style sheet title</span> is a
849 <span data-anolis-spec=dom>case-sensitive</span> match for the
850 <span>last style sheet set name</span>.</p></li>
851 </ul>
852 </li>
854 <li><p>Set the <span>style sheet disabled flag</span>.</li>
855 </ol>
857 <p>A <dfn id="persistent-style-sheet">persistent style sheet</dfn> is a
858 <span>style sheet</span> from the <span>document style sheets</span>
859 whose <span>style sheet title</span> is the empty string and whose
860 <span>style sheet alternate flag</span> is unset.</p>
862 <p>A <dfn id="style-sheet-set">style sheet set</dfn> is an ordered
863 collection of one or more <span title="style sheet">style sheets</span>
864 from the <span>document style sheets</span> which have an identical
865 <span>style sheet title</span> that is not the empty string.</p>
867 <p>A <dfn id="style-sheet-set-name">style sheet set name</dfn> is the
868 <span>style sheet title</span> the <span>style sheet set</span> has in
869 common.</p>
871 <p>An <dfn id="enabled-style-sheet-set">enabled style sheet set</dfn> is a
872 <span>style sheet set</span> of which each <span>style sheet</span> has
873 its <span>style sheet disabled flag</span> unset.</p>
875 <p>To <dfn id="enable-a-style-sheet-set">enable a style sheet set</dfn>
876 with name <var>name</var>, run these steps:</p>
878 <ol>
879 <li><p>If <var>name</var> is the empty string, set the
880 <span>style sheet disabled flag</span> for each <span>style sheet</span>
881 that is in a <span>style sheet set</span> and terminate these steps.</li>
883 <li><p>Unset the <span>style sheet disabled flag</span> for each
884 <span>style sheet</span> in a <span>style sheet set</span> whose
885 <span>style sheet set name</span> is a
886 <span data-anolis-spec=dom>case-sensitive</span> match for
887 <var>name</var> and set it for all other
888 <span title="style sheet">style sheets</span> in a
889 <span>style sheet set</span>.</p></li>
890 </ol>
892 <p>To <dfn id="select-a-style-sheet-set">select a style sheet set</dfn>
893 with name <var>name</var>, run these steps:</p>
895 <ol>
896 <li><p><span>Enable a style sheet set</span> with name
897 <var>name</var>.</p></li>
899 <li><p>Set <span>last style sheet set name</span> to
900 <var>name</var>.</p></li>
901 </ol>
903 <p>A <dfn id="last-style-sheet-set-name">last style sheet set name</dfn>
904 is a concept to determine what <span>style sheet set</span> was last
905 <span title="select a style sheet set">selected</span>. Initially its
906 value is null.</p>
908 <p>A
909 <dfn id="preferred-style-sheet-set-name">preferred style sheet set name</dfn>
910 is a concept to determine which
911 <span title="style sheet">style sheets</span> need to have their
912 <span>style sheet disabled flag</span> unset. Initially its value
913 is the empty string.
915 <p>To
916 <dfn id="change-the-preferred-style-sheet-set-name">change the preferred style sheet set name</dfn>
917 with name <var>name</var>, run these steps:</p>
919 <ol>
920 <li><p>Let <var>current</var> be the <span>preferred style sheet set name</span>.</p></li>
922 <li><p>Set <span>preferred style sheet set name</span> to
923 <var>name</var>.</p></li>
925 <li><p>If <var>name</var> is not a
926 <span data-anolis-spec=dom>case-sensitive</span> match for
927 <var>current</var> and
928 <span>last style sheet set name</span> is null
929 <span>enable a style sheet set</span> with name
930 <var>name</var>.</p></li>
931 </ol>
933 <!-- XXX ought to define "applied"
935 thoughts:
936 depends on disabled flag, alternate flag, media queries, sheesh
937 -->
939 <!-- ........................................................................................................................ -->
941 <h4>The HTTP <code>Default-Style</code> Header</h4>
943 <p>The HTTP <code title="http-default-style">Default-Style</code> header
944 can be used to set the <span>preferred style sheet set name</span>
945 influencing which <span>style sheet set</span> is (initially) the
946 <span>enabled style sheet set</span>.</p>
948 <p>For each HTTP <code title="http-default-style">Default-Style</code>
949 header, in header order, the user agent must
950 <span>change the preferred style sheet set name</span> with name being the
951 value of the header.</p>
953 <!-- ........................................................................................................................ -->
955 <h4>The <code>StyleSheetList</code> Sequence</h4>
957 <!--{@idl(StyleSheetList)}-->
959 <!-- ........................................................................................................................ -->
961 <h4>Extensions to the <code>Document</code> Interface</h4>
963 <!--{@idl(Document)}-->
965 <!-- ........................................................................................................................ -->
967 <h4>Interaction with the User Interface</h4>
969 <p>The user interface of Web browsers that support style sheets
970 should list the style sheet titles given in the
971 <code title="dom-Document-styleSheetSets">styleSheetSets</code> list,
972 showing the
973 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
974 as the selected style sheet set, leaving none selected if it is
975 null or the empty string, and selecting an extra option
976 "Basic Page Style" (or similar) if it is the empty string and the
977 <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
978 is the empty string as well.</p>
980 <p>Selecting a style sheet from this list should
981 use the <span>select a style sheet set</span> set of steps. This
982 (by definition) affects the
983 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
984 attribute.</p>
986 <h5>Persisting the selected style sheet set</h5>
988 <p>If a user agent persist the selected style sheet set, they should use
989 the value of the
990 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
991 attribute, or if that is null, the
992 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
993 attribute, when leaving the page (or at some other time) to determine the
994 set name to store. If that is null then the style sheet set should not be
995 persisted.</p>
997 <p>When re-setting the style sheet set to the persisted value (which can
998 happen at any time, typically at the first time the style sheets are
999 needed for styling the document, after the <code><head></code> of
1000 the document has been parsed, after any scripts that are not dependent on
1001 computed style have executed), the style sheet set
1002 should be set by using the
1003 <span>select a style sheet set</span> set of steps as if the user had
1004 selected the set manually.</p>
1006 <p class="note">This specification does not give any suggestions on
1007 how user agents should decide to persist the style sheet set or whether or
1008 how to persist the selected set across pages.</p>
1010 <!-- XXX this UI section suggests we may want to introduce a few more
1011 idioms -->
1013 <!-- ........................................................................................................................ -->
1015 <h4>Examples</h4>
1017 <div class="example">
1018 <p>Thus, in the following HTML snippet:</p>
1020 <pre><link rel="alternate stylesheet" title="foo" href="a">
1021 <link rel="alternate stylesheet" title="bar" href="b">
1022 <script>
1023 document.selectedStyleSheetSet = 'foo';
1024 document.styleSheets[1].disabled = false;
1025 </script>
1026 <link rel="alternate stylesheet" title="foo" href="c">
1027 <link rel="alternate stylesheet" title="bar" href="d"></pre>
1029 <p>...the style sheets that end up enabled are style sheets "a", "b",
1030 and "c", the
1031 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
1032 attribute would return null,
1033 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
1034 would return "foo", and
1035 <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
1036 would return the empty string.</p>
1038 <p>Similarly, in the following HTML snippet:</p>
1040 <pre><link rel="alternate stylesheet" title="foo" href="a">
1041 <link rel="alternate stylesheet" title="bar" href="b">
1042 <script>
1043 var before = document.preferredStyleSheetSet;
1044 document.styleSheets[1].disabled = false;
1045 </script>
1046 <link rel="stylesheet" title="foo" href="c">
1047 <link rel="alternate stylesheet" title="bar" href="d">
1048 <script>
1049 var after = document.preferredStyleSheetSet;
1050 </script></pre>
1052 <p>...the "before" variable will be equal to the empty string, the
1053 "after" variable will be equal to "foo", and style sheets "a" and "c"
1054 will be enabled. This is the case even though the first script block
1055 sets style sheet "b" to be enabled, because upon parsing the
1056 following <code><link></code> element, the
1057 <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
1058 is set and the
1059 <code title="dom-Document-enableStyleSheetsForSet">enableStyleSheetsForSet()</code>
1060 method is called (since
1061 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
1062 was never set
1063 explicitly, leaving
1064 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code> at
1065 null throughout), which changes which style sheets are enabled and which
1066 are not.</p>
1067 </div>
1069 <!-- ........................................................................................................................ -->
1070 <!-- ........................................................................................................................ -->
1072 <h3>Style Sheet Association</h3>
1074 <p>This section defines the interface a
1075 <span>style sheet owner node</span> of a <span>style sheet</span> has to
1076 implement and defines the requirements for
1077 <span data-anolis-spec=xmlss title="xml-stylesheet processing instruction">xml-stylesheet processing instructions</span>
1078 and HTTP <code title="http-link">Link</code> headers when the link
1079 relation type is an
1080 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
1081 "<code>stylesheet</code>" since nobody else was interested in
1082 defining this.</p>
1084 <p class=note>The editor is in good hope that HTML and SVG will define the
1085 appropriate processing in their respective specifications, in terms of
1086 this specification, in due course.</p>
1089 <!-- ........................................................................................................................ -->
1091 <h4>The <code>LinkStyle</code> Interface</h4>
1093 <!--{@idl(LinkStyle)}-->
1095 <div class="example">
1096 <p>In the following HTML snippet the first HTML <code>style</code>
1097 element has a <code>sheet</code> attribute that returns a
1098 <code>StyleSheet</code> object representing the style sheet, but for
1099 the second <code>style</code> attribute it returns null.
1100 (Assuming the user agent supports CSS (<code>text/css</code>) and does
1101 not support ExampleSheets (<code>text/example-sheets</code>).</p>
1103 <pre><style type=text/css> body { background:lime } </style>
1104 <style type=text/example-sheets> $(body).background := lime </style></pre>
1105 </div>
1107 <p class="note">Whether or not the node refers to a style sheet is defined
1108 by the specification that defines the semantics of said node.</p>
1110 <!-- ........................................................................................................................ -->
1112 <h4>Requirements on specifications</h4>
1114 <p>Specifications introducing new ways of associating style sheets through
1115 the DOM should define which nodes implement the
1116 <code>LinkStyle</code> interface. When doing so, they
1117 must also define when a <span>style sheet</span> is
1118 <span title="create a style sheet">created</span>.</p>
1123 <!-- ........................................................................................................................ -->
1125 <h4>Requirements on User Agents Implementing the
1126 <span><code>xml-stylesheet</code> processing instruction</span></h4>
1128 <!-- XXX load/error events, reparse -->
1130 <!--{@idl(ProcessingInstruction)}-->
1132 <!--
1133 <pre class="idl"><span data-anolis-spec=dom>ProcessingInstruction</span> implements <span>LinkStyle</span>;</pre>
1134 -->
1136 <p>For each
1137 <span data-anolis-spec=xmlss><code>xml-stylesheet</code> processing instruction</span>
1138 that is not part of the
1139 <span data-anolis-spec=xml>document type declaration</span> and has an
1140 <code>href</code>
1141 <span data-anolis-spec=xmlss>pseudo-attribute</span> these steps must
1142 (unless otherwise stated) be run:</p>
1144 <ol>
1145 <li><p>Let <var>title</var> be the value of the
1146 <code>title</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> or the empty string if the
1147 <code>title</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> is not specified.</p></li>
1149 <li><p>If there is an <code>alternate</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>
1150 whose value is a <span data-anolis-spec=dom>case-sensitive</span> match
1151 for "<code>yes</code>" and <var>title</var> is the
1152 empty string terminate these steps.</p></li>
1154 <li><p>If there is a <code>type</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> whose
1155 value is not a <span>supported styling language</span> the user agent
1156 may terminate these steps.</p></li>
1158 <li><p><span data-anolis-spec=html title="Resolve a URL">Resolve</span>
1159 the <span data-anolis-spec=html>URL</span> specified by the
1160 <code>href</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> and then
1161 <span data-anolis-spec=html>fetch</span> it.</p></li>
1163 <li>
1164 <p>When the resource is available, the document is in
1165 <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>
1166 and the
1167 <span data-anolis-spec=html>Content-Type metadata</span> of
1168 the resource is not a <span>supported styling language</span> change the
1169 <span data-anolis-spec=html>Content-Type metadata</span> of the resource
1170 to <code>text/css</code>.</p>
1172 <p class="note">This step might never actually happen, but is included
1173 here in case other specifications change, to keep things consistent.</p>
1174 </li>
1176 <li><p>If the resource is not in a
1177 <span>supported styling language</span> terminate these steps.</p></li>
1179 <li>
1180 <p><span>Create a style sheet</span> with the following properties:</p>
1182 <dl>
1183 <dt><span>style sheet location</span></dt>
1184 <dd><p>The <span data-anolis-spec=html>absolute URL</span> of the
1185 resource.</p></dd>
1187 <dt><span>style sheet parent</span></dt>
1188 <dd><p>null</p></dd>
1190 <dt><span>style sheet owner node</span></dt>
1191 <dd><p>The node.</p></dd>
1193 <dt><span>style sheet owner CSS rule</span></dt>
1194 <dd><p>null</p></dd>
1196 <dt><span>style sheet media</span></dt>
1197 <dd><p>The value of the <code>media</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>
1198 if any, or the empty string otherwise.</p></dd>
1200 <dt><span>style sheet title</span></dt>
1201 <dd><p><var>title</var></p></dd>
1203 <dt><span>style sheet alternate flag</span></dt>
1204 <dd><p>Set if the <code>alternate</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>
1205 value is a <span data-anolis-spec=dom>case-sensitive</span> match for
1206 "<code>yes</code>", or unset otherwise.
1207 </dl>
1208 </li>
1209 </ol>
1213 <!-- ........................................................................................................................ -->
1215 <h4>Requirements on User Agents Implementing the HTTP
1216 <code>Link</code> Header</h4>
1218 <!-- XXX ref, one day -->
1220 <!-- XXX deal with media param -->
1222 <p>For each HTTP <code title="http-link">Link</code> header of which one
1223 of the link relation types is an
1224 <span data-anolis-spec=dom>ASCII case-insensitive</span> match
1225 for "<code>stylesheet</code>" these steps
1226 must be run:</p>
1228 <ol>
1229 <li><p>Let <var>title</var> be the value of the first of all the
1230 <code>title</code> and <code>title*</code> parameters.
1231 If there are no such parameters it is the empty string.</p></li>
1233 <li><p>If one of the (other) link relation types is an
1234 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
1235 "<code>alternate</code>" and <var>title</var> is the
1236 empty string terminate these steps.</p></li>
1238 <li><p><span data-anolis-spec=html title="Resolve a URL">Resolve</span>
1239 the specified <span data-anolis-spec=html>URL</span> and
1240 <span data-anolis-spec=html>fetch</span> it.</p></li>
1242 <li><p>When the resource is available, the document is in
1243 <span data-anolis-spec=dom title=concept-quirks-mode>quirks mode</span>
1244 and the <span data-anolis-spec=html>Content-Type metadata</span> of
1245 the resource is not a <span>supported styling language</span> change the
1246 <span data-anolis-spec=html>Content-Type metadata</span> of the resource
1247 to <code>text/css</code>.</p></li>
1249 <li><p>If the resource is not in a
1250 <span>supported styling language</span> terminate these steps.</p></li>
1252 <li>
1253 <p><span>Create a style sheet</span> with the following properties:</p>
1255 <dl>
1256 <dt><span>style sheet location</span></dt>
1257 <dd><p>The <span data-anolis-spec=html>absolute URL</span> of the
1258 resource.</p></dd>
1260 <dt><span>style sheet owner node</span></dt>
1261 <dd><p>null</p></dd>
1263 <dt><span>style sheet parent</span></dt>
1264 <dd><p>null</p></dd>
1266 <dt><span>style sheet owner CSS rule</span></dt>
1267 <dd><p>null</p></dd>
1269 <dt><span>style sheet media</span></dt>
1270 <dd><p>The value of the first <code>media</code> parameter.</p></dd>
1271 <!-- XXX register media parameter? bah -->
1273 <dt><span>style sheet title</span></dt>
1274 <dd><p><var>title</var></p></dd>
1276 <dt><span>style sheet alternate flag</span></dt>
1277 <dd><p>Set if one of the specified link relation type for this HTTP
1278 <code title="http-link">Link</code> header is an
1279 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
1280 "<code>alternate</code>", or false otherwise.
1281 </dl>
1282 </li>
1283 </ol>
1285 <!-- ........................................................................................................................ -->
1286 <!-- ........................................................................................................................ -->
1288 <h3>CSS Rules</h3>
1290 <p>A <dfn id="rule">CSS rule</dfn> is an abstract concept that
1291 represents a rule as defined by the CSS specification. In the CSSOM a
1292 <span>CSS rule</span> is represented as an object that implements a subclass of
1293 the <code>CSSRule</code> interface. A <span>CSS rule</span> has the following
1294 associated state items:</p>
1296 <dl>
1297 <dt><dfn id="rule-type">rule type</dfn></dt>
1298 <dd><p>A non-negative integer associated with a particular type of rule.
1299 This item is initialized when a rule is created and must never change.</p></dd>
1301 <dt><dfn id="rule-text">rule text</dfn></dt>
1302 <dd><p>A text representation of the rule suitable for direct use in a style sheet.
1303 This item is initialized when a rule is created, and may change over the lifetime of the rule.</p></dd>
1305 <dt><dfn id="rule-parent">rule parent</dfn></dt>
1306 <dd><p>An optional reference to another, enclosing <span>CSS rule</span>.
1307 If the rule has an enclosing rule when it is created, then this item is initialized to the enclosing rule; otherwise it is null.
1308 Subsequent to initialization, this item is reset to null if the rule becomes non-enclosed. Once reset to null, it must never change.</p></dd>
1310 <dt><dfn id="rule-style-sheet">rule parent style sheet</dfn></dt>
1311 <dd><p>An optional reference to an associated <span>CSS style sheet</span>.
1312 This item is initialized to reference an associated style sheet when the rule is created. Subsequent to initialization, this item
1313 is reset to null if the rule becomes disassociated from its initial style sheet. Once reset to null, it must never change.</p></dd>
1314 </dl>
1316 <p>In addition to the above state, each <span>CSS rule</span> may be associated
1317 with other state in accordance to the <span>rule type</span>.</p>
1319 <p>To <dfn>parse a CSS rule</dfn> ...</p>
1321 <p>To <dfn>serialize a CSS rule</dfn> depends on the type of CSS rule, as
1322 follows:</p>
1324 <dl class="switch">
1325 <dt><code>CSSStyleRule</code></dt>
1326 <dd><p class="issue">...</p></dd>
1328 <dt><code>CSSCharsetRule</code></dt>
1329 <dd><p class="issue">...</p></dd>
1331 <dt><code>CSSImportRule</code></dt>
1332 <dd>
1333 <p>The result of concatenating these strings:</p>
1334 <ol>
1335 <li>The literal string "<code>@import</code>", followed by a space
1336 (U+0020), followed by the <span title="serialize a URL">URL escaped</span>
1337 value of the <code title="dom-CSSImportRule-href">href</code>
1338 attribute.</li>
1339 <li>If the associated <code>MediaList</code> object is not empty, a
1340 space (U+0020), followed by the value of the
1341 <code title="dom-MediaList-mediaText">mediaText</code> attribute of the
1342 associated <code>MediaList</code> object.</li>
1343 <li>A "<code>;</code>" (U+003B).</li>
1344 </ol>
1345 </dd>
1347 <dt><code>CSSMediaRule</code></dt>
1348 <dd><p class="issue">...</p></dd>
1350 <dt><code>CSSFontFaceRule</code></dt>
1351 <dd><p class="issue">...</p></dd>
1353 <dt><code>CSSPageRule</code></dt>
1354 <dd><p class="issue">...</p></dd>
1356 <dt><code>CSSNamespaceRule</code></dt>
1357 <dd><p>The literal string "<code>@namespace</code>", followed by a space
1358 (U+0020), followed by the
1359 <span title="serialize an identifier">identifier escaped</span> value of the
1360 <code title="dom-CSSNamespaceRule-prefix">prefix</code> attribute (if
1361 any), followed by a space (U+0020) if there is a prefix, followed by the
1362 <span title="serialize a URL">URL escaped</span> value of the
1363 <code title="dom-CSSNamespaceRule-namespaceURI">namespaceURI</code>
1364 attribute, followed the character "<code>;</code>" (U+003B).</p></dd>
1365 </dl>
1367 <!-- ........................................................................................................................ -->
1369 <h4>The <code>CSSRuleList</code> Sequence</h4>
1371 <!--{@idl(CSSRuleList)}-->
1373 <!-- ........................................................................................................................ -->
1375 <h4>The <code>CSSRule</code> Interface</h4>
1377 <!--{@idl(CSSRule)}-->
1379 <!-- ........................................................................................................................ -->
1381 <h4>The <code>CSSStyleRule</code> Interface</h4>
1383 <!--{@idl(CSSStyleRule)}-->
1385 <!-- ........................................................................................................................ -->
1387 <h4>The <code>CSSCharsetRule</code> Interface</h4>
1389 <!--{@idl(CSSCharsetRule)}-->
1391 <!-- ........................................................................................................................ -->
1393 <h4>The <code>CSSImportRule</code> Interface</h4>
1395 <!--{@idl(CSSImportRule)}-->
1397 <!-- ........................................................................................................................ -->
1399 <h4>The <code>CSSMediaRule</code> Interface</h4>
1401 <!--{@idl(CSSMediaRule)}-->
1403 <!-- ........................................................................................................................ -->
1405 <h4>The <code>CSSFontFaceRule</code> Interface</h4>
1407 <!--{@idl(CSSFontFaceRule)}-->
1409 <!-- ........................................................................................................................ -->
1411 <h4>The <code>CSSPageRule</code> Interface</h4>
1413 <!--{@idl(CSSPageRule)}-->
1415 <!-- ........................................................................................................................ -->
1417 <h4>The <code>CSSNamespaceRule</code> Interface</h4>
1419 <!--{@idl(CSSNamespaceRule)}-->
1421 <!-- ........................................................................................................................ -->
1422 <!-- ........................................................................................................................ -->
1424 <h3>CSS Declaration Blocks</h3>
1426 <p>A <dfn>CSS declaration block</dfn> is an ordered collection of CSS
1427 properties with their associated values, also named CSS declarations. In
1428 the DOM a <span>CSS declaration block</span> is a
1429 <code>CSSStyleDeclaration</code> object. A
1430 <span>CSS declaration block</span> has two associated properties:</p>
1432 <dl>
1433 <dt><dfn>CSS declaration block readonly flag</dfn></dt>
1434 <dd><p>Unset if the object can be manipulated. Set if it can not be
1435 manipulated. Unless otherwise stated it is unset.</p></dd>
1437 <dt><dfn>CSS declaration block declarations</dfn></dt>
1438 <dd><p>The CSS declarations associated with the object.</p></dd>
1439 </dl>
1441 <p class="note">The <span>CSS declaration block declarations</span> are
1442 ordered. This matters for the
1443 <code title="dom-CSSStyleDeclaration-item">item()</code> method.</p>
1446 <p class="issue">To
1447 <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn>
1448 ...</p>
1450 <p>To <dfn id="serialize-a-css-declaration-block">serialize a CSS declaration block</dfn>
1451 represented by a <code>CSSStyleDeclarations</code> instance named <var>d</var>,
1452 let <var>s</var> be the empty string, then run the steps below:</p>
1454 <ol>
1455 <li><p>If <code><var>d</var>.length</code> is zero (0), then return <var>s</var>.</p></li>
1456 <li><p>For each <var>i</var> from zero (0) through <code><var>d</var>.length</code> - 1 (inclusive), perform the following sub-steps:</p>
1457 <ol>
1458 <li><p>Let <var>n</var> be the value returned by <code><var>d</var>.item(<var>i</var>)</code>.</p></li>
1459 <li><p>Let <var>v</var> be the value returned by <code><var>d</var>.getPropertyValue(<var>n</var>)</code>.</p></li>
1460 <li><p>If <var>v</var> is the empty string, then continue.</p></li>
1461 <li><p>Otherwise (<var>v</var> is non-empty), perform the following sub-steps:</p>
1462 <ol>
1463 <li><p>If <var>s</var> is not empty, then append a SPACE (U+0020) to <var>s</var>.</p></li>
1464 <li><p>Append <var>n</var> to <var>s</var>.</p></li>
1465 <li><p>Append COLON (U+003A) followed by SPACE (U+0020), i.e., "<code>: </code>", to <var>s</var>.</p></li>
1466 <li><p>Append <var>v</var> to <var>s</var>.</p></li>
1467 </ol>
1468 </li>
1469 <li><p>Let <var>p</var> be the value returned by <code><var>d</var>.getPropertyPriority(<var>n</var>)</code>.</p></li>
1470 <li><p>If <var>p</var> is not the empty string, then perform the following sub-steps:</p>
1471 <ol>
1472 <li><p>Append SPACE (U+0020) followed by EXCLAMATION MARK (U+0021), i.e., "<code> !</code>", to <var>s</var>.</p></li>
1473 <li><p>Append <var>p</var> to <var>s</var>.</p></li>
1474 </ol>
1475 </li>
1476 <li><p>Append SEMICOLON (U+003B), i.e., "<code>;</code>", to <var>s</var>.</p></li>
1477 </ol>
1478 </li>
1479 <li><p>Return <var>s</var>.</p></li>
1480 </ol>
1482 <p class="note">The serialization of an empty CSS declaration block is the empty string.</p>
1484 <p class="note">The serialization of a non-empty CSS declaration block does not include any surrounding whitespace, i.e., no whitepsace appears
1485 before the first property name and no whitespace appears after the final semicolon delimiter that follows the last property value.</p>
1487 <!-- ........................................................................................................................ -->
1489 <h4>The <code>CSSStyleDeclaration</code> Interface</h4>
1491 <!--{@idl(CSSStyleDeclaration)}-->
1493 <hr>
1495 <p>For the table below, the IDL attribute in the first column
1496 must return the result of invoking
1497 <code title="dom-CSSStyleDeclaration-getPropertyValue">getPropertyValue()</code>
1498 with as argument the CSS property given in the second column on the same
1499 row.</p>
1501 <p>Similarly for the table below, setting the IDL attribute in the
1502 first column must invoke
1503 <code title="dom-CSSStyleDeclaration-setProperty">setProperty()</code>
1504 with as first argument the CSS property given in the second column on the
1505 same row, as second argument the given value, and no third argument. Any
1506 exceptions thrown must be re-thrown.</p>
1508 <p class="issue">Restore the entries for the following table or resurrect
1509 CSS2Properties (or similar) or define in general terms using prose or ...</p>
1511 <table>
1512 <thead>
1513 <tr>
1514 <th>IDL attribute
1515 <th>CSS property
1516 <tbody>
1517 <!--CSSOM-DECLARATIONTABLE-->
1518 </table>
1520 <!--
1521 <h4>CSS Properties</h4>
1523 <p>The DOM attribute name of a CSS property can be found by using the
1524 following algorithm:</p>
1526 <ol>
1527 <li>Let <var>r</var> be the CSS property to be
1528 converted.</li>
1530 <li>Uppercase the first character after every U+002D (<code>-</code>) in
1531 <var>r</var>.</li>
1533 <li>Remove every U+002D (<code>-</code>) in <var>r</var>.</li>
1535 <li>Return <var>r</var>.</li>
1536 </ol>
1538 <p class="note">This means that
1539 <code>-<var>vendor</var>-<var>property</var></code>
1540 becomes
1541 <code><var><strong>V</strong>endor</var><var><strong>P</strong>roperty</var></code>
1542 for instance.</p>
1543 -->
1545 <!-- ........................................................................................................................ -->
1546 <!-- ........................................................................................................................ -->
1548 <h3>CSS Values</h3>
1550 <!-- ........................................................................................................................ -->
1552 <h4>Parsing CSS Values</h4>
1554 <p>To <dfn id="parse-a-css-value">parse a CSS value</dfn> for a given
1555 <var>property</var> means to a parse the given value according to
1556 the definition of the property that is an
1557 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
1558 <var>property</var> in the CSS specification. If the given value
1559 is <span>ignored</span> return null. Otherwise return the CSS value for
1560 the given <var>property</var>.</p>
1562 <p class="note">"<code>!important</code>" declarations are not
1563 part of the property value space and will therefore cause
1564 <span>parse a CSS value</span> to return null.</p>
1567 <!-- ........................................................................................................................ -->
1569 <h4>Serializing CSS Values</h4>
1571 <!-- based on http://damowmow.com/playground/canon.txt -->
1573 <p>To <dfn id="serialize-a-css-value">serialize a CSS value</dfn> follow
1574 these rules:</p>
1576 <ul>
1577 <li><p><span title="Serialize a CSS component value">Serialize</span> any
1578 CSS component values in the value.</p></li>
1580 <li><p>Where multiple CSS component values can appear in any order
1581 without changing the meaning of the value (typically represented by a
1582 double bar <code>||</code> in the value syntax), use the order as given
1583 in the syntax.</p></li>
1584 <!-- <code><border-width> <border-style> <color></code>
1585 for <code>border</code> -->
1587 <li>
1588 <p>Where CSS component values of the value can be omitted without
1589 changing the meaning of the value (e.g. initial values in shorthand
1590 properties), omit them. If this would remove all the values, then
1591 include the first allowed value.</p>
1593 <p class="example">E.g. <code>margin: 20px 20px</code> becomes
1594 <code>margin: 20px</code>.</p>
1596 <p class="example">E.g. the value <code>0</code> for the
1597 '<code>border</code>' property.</p>
1598 </li>
1600 <li><p>If the value of a shorthand property is requested and it cannot be
1601 computed because the properties associated with the shorthand have values
1602 that cannot be represented by the shorthand the serialization is the
1603 empty string.</p></li>
1605 <li><p>If a value has a <span>whitespace</span>-separated list of
1606 CSS component values,
1607 <span title="serialize a whitespace-separated list">serialize</span> the
1608 value as a whitespace-separated list.</p></li>
1610 <li><p>If a value has a comma-separated list of
1611 CSS component values,
1612 <span title="serialize a comma-separated list">serialize</span> the
1613 value as a comma-separated list.</p></li>
1614 </ul>
1617 <p>To
1618 <dfn id="serialize-a-css-value-component">serialize a CSS component value</dfn>
1619 depends on the component, as follows:</p>
1621 <dl class="switch">
1622 <dt>keyword</dt>
1623 <dd><p>The keyword
1624 <span data-anolis-spec=dom>converted to ASCII lowercase</span>.</p></dd>
1626 <dt><angle></dt>
1627 <dd><p>The number of degrees serialized as per <number> followed by
1628 the literal string "<code>deg</code>".</p></dd>
1630 <dt><color></dt>
1631 <dd>
1632 <p>If <color> is a component of a resolved or computed value, then
1633 return the color using the <code>rgb()</code> or <code>rgba()</code> functional
1634 notation as follows:</p>
1635 <ol>
1636 <li>If the alpha component of the color is equal to one, then return the serialization of the
1637 <code>rgb()</code> functional equivalent of the opaque color.</li>
1638 <li>If the alpha component of the color is not equal to one, then return the serialization of the
1639 <code>rgba()</code> functional equivalent of the non-opaque color.</li>
1640 </ol>
1641 <p>The serialization of the <code>rgb()</code> functional equivalent is the concatenation of the following:</p>
1642 <ol>
1643 <li>The string "<code>rgb(</code>".</li>
1644 <li>The shortest base-ten integer serialization of the red value.</li>
1645 <li>The string "<code>, </code>".</li>
1646 <li>The shortest base-ten serialization of the green value.</li>
1647 <li>The string "<code>, </code>".</li>
1648 <li>The shortest base-ten serialization of the blue value.</li>
1649 <li>The string "<code>)</code>".</li>
1650 </ol>
1651 <p>The serialization of the <code>rgba()</code> functional equivalent is the concatenation of the following:</p>
1652 <ol>
1653 <li>The string "<code>rgba(</code>".</li>
1654 <li>The shortest base-ten serialization of the red value.</li>
1655 <li>The string "<code>, </code>".</li>
1656 <li>The shortest base-ten serialization of the green value.</li>
1657 <li>The string "<code>, </code>".</li>
1658 <li>The shortest base-ten serialization of the blue value.</li>
1659 <li>The string "<code>, </code>".</li>
1660 <li>The shortest serialization of the <number> that denotes the alpha value.</li>
1661 <li>The string "<code>)</code>".</li>
1662 </ol>
1664 <p>If <color> is a component of a specified value, then
1665 return the color as follows:</p>
1666 <ol>
1667 <li>If the color was explicitly specified by the author, then return the original, author specified color value.</li>
1668 <li>Otherwise, return the value that would be returned if the color were a component of a computed value.</li>
1669 </ol>
1670 <p class="issue">Should author specified values be normalized for case? Or should original case be preserved?</p>
1671 </dd>
1672 <!--
1673 <dt>It is a system color</dt>
1675 <dd>See below (you use the representation given in the specification that
1676 defines the keyword).</dd>
1678 <dt>Alpha component is equal to 1.0</dt>
1680 <dd>The color is an uppercase six-digit hexadecimal value, prefixed with a
1681 <code>#</code> character (U+0023 NUMBER SIGN), with the first two digits
1682 representing the red component, the next two digits representing the green
1683 component, and the last two digits representing the blue component, the
1684 digits being in the range 0-9 A-F (U+0030 to U+0039 and U+0041 to
1685 U+0046).</dd>
1687 <dt>Alpha component is less than 1.0</dt>
1689 <dd>The color is in the CSS <code>rgba()</code> functional-notation format:
1690 the literal string <code>rgba</code> (U+0072 U+0067 U+0062 U+0061) followed
1691 by a U+0028 LEFT PARENTHESIS, a <span>color component integer</span>
1692 representing the red component, a <span>color component separator</span>, a
1693 <span>color component integer</span> for the green component, a <span>color
1694 component separator</span>, a <span>color component integer</span> for the
1695 blue component, another <span>color component separator</span> a U+0030
1696 DIGIT ZERO, a U+002E FULL STOP (representing the decimal point), one or
1697 more digits in the range 0-9 (U+0030 to U+0039) representing the fractional
1698 part of the alpha value, and finally a U+0029 RIGHT PARENTHESIS.</dd>
1700 <dt>The keyword <code>transparent</code> is used</dt>
1702 <dd>The color is <code>rgba(0, 0, 0, 0)</code>.</dd>
1703 -->
1705 <dt><counter></dt>
1706 <dd>
1707 <p>The concatenation of:</p>
1708 <ol>
1709 <li><p>If <counter> has three CSS component values the string
1710 "<code>counters(</code>".</p></li>
1711 <li><p>If <counter> has two CSS component values the string
1712 "<code>counter(</code>".</p></li>
1713 <li><p>The result of
1714 <span title="serialize a comma-separated list">serializing</span> the
1715 <span title="serialize a CSS component value">serialized</span>
1716 CSS component values belonging to <counter> as list while omitting
1717 the last CSS component value if it is 'decimal'.</p></li>
1718 <li><p>"<code>)</code>" (U+0029).</p></li>
1719 </ol>
1720 </dd>
1722 <dt><frequency></dt>
1723 <dd><p>The frequency in hertz serialized as per <number> followed by
1724 the literal string "<code>hz</code>".</dd>
1726 <dt><identifier></dt>
1727 <dd><p>The identifier
1728 <span title="serialize an identifier">escaped</span>.</p></dd>
1730 <dt><integer></dt>
1731 <dd><p>A base-ten integer using digits 0-9 (U+0030 to U+0039) in the
1732 shortest form possible, preceded by "<code>-</code>" (U+002D) if it is
1733 negative.</p></dd>
1735 <dt><length></dt>
1736 <dd>
1737 <p>A length of zero is represented by the literal string
1738 "<code>0px</code>".</p>
1740 <p>Absolute lengths: the number of millimeters serialized as per
1741 <number> followed by the literal string "<code>mm</code>".</p>
1742 <p class="issue">Rumor has it absolute lengths will become relative
1743 lengths. Centimeters would be compatible with <resolution>...</p>
1745 <p>Relative lengths: the <number> component serialized as per
1746 <number> followed by the unit in its canonical form as defined in its
1747 respective specification.</p>
1748 </dd>
1750 <dt><number></dt>
1751 <dd><p class="issue">Browsers seem to use ToString(), but that might give a
1752 significand which according to some is teh evil (and also currently does
1753 not parse correctly).</p></dd>
1755 <dt><percentage></dt>
1756 <dd><p>The <number> component serialized as per <number> followed
1757 by the literal string "<code>%</code>" (U+0025).</p></dd>
1759 <dt><resolution></dt>
1760 <dd><p>The resolution in dots per centimeter serialized as per
1761 <number> followed by the literal string "<code>dpcm</code>".</dd>
1763 <dt><shape></dt>
1764 <dd><p>The string "<code>rect(</code>", followed by the result
1765 of <span title="serialize a comma-separated list">serializing</span> the
1766 <span title="serialize a CSS component value">serialized</span>
1767 CSS component values belonging to <shape> as list, followed by
1768 "<code>)</code>" (U+0029).</p></dd>
1770 <dt><string></dt>
1771 <dt><family-name></dt>
1772 <dt><specific-voice></dt>
1773 <dd><p>The string
1774 <span title="serialize a string">string escaped</span>.</p></dd>
1776 <dt><time></dt>
1777 <dd><p>The time in seconds serialized as per <number> followed by
1778 the literal string "<code>s</code>".</dd>
1780 <dt><uri></dt>
1781 <dd><p>The <span data-anolis-spec=html>absolute URL</span>
1782 <span title="serialize a URL">URL escaped</span>.</p></dd>
1783 </dl>
1785 <p>
1786 <absolute-size>,
1787 <border-width>,
1788 <border-style>,
1789 <bottom>,
1790 <generic-family>,
1791 <generic-voice>,
1792 <left>,
1793 <margin-width>,
1794 <padding-width>,
1795 <relative-size>,
1796 <right>, and
1797 <top>,
1798 are considered macros by this specification. They all represent instances
1799 of components outlined above.</p>
1801 <p class="issue">One idea is that we can remove this section somewhere in
1802 the CSS3/CSS4 timeline by moving the above definitions to the drafts that
1803 define the CSS components.</p>
1806 <h5>Examples</h5>
1808 <p>Here are some examples of before and after results on specified values.
1809 The before column could be what the author wrote in a style sheet, while
1810 the after column shows what querying the DOM would return.</p>
1812 <div class="example">
1813 <table>
1814 <thead>
1815 <tr><th>Before<th>After
1816 <tbody>
1817 <tr><td><code>background: none</code><td><code>background: rgba(0, 0, 0, 0)</code>
1818 <tr><td><code>outline: none</code><td><code>outline: invert</code>
1819 <tr><td><code>border: none</code><td><code>border: medium</code>
1820 <tr><td><code>list-style: none</code><td><code>list-style: disc</code>
1821 <tr><td><code>margin: 0 1px 1px 1px</code><td><code>margin: 0px 1px 1px</code>
1822 <tr><td><code>azimuth: behind left</code><td><code>azimuth: 220deg</code>
1823 <tr><td><code>font-family: a, 'b"', serif</code><td><code>font-family: "a", "b\"", serif</code>
1824 <tr><td><code>content: url('h)i') '\[\]'</code><td><code>content: url("h)i") "[]"</code>
1825 <tr><td><code>azimuth: leftwards</code><td><code>azimuth: leftwards</code>
1826 <tr><td><code>color: rgb(18, 52, 86)</code><td><code>color: #123456</code>
1827 <tr><td><code>color: rgba(000001, 0, 0, 1)</code><td><code>color: #000000</code>
1828 </table>
1830 <p class="issue">Some of these need to be updated per the new rules.</p>
1831 </div>
1833 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
1835 <h2>DOM Access to CSS Declaration Blocks</h2>
1837 <!-- ........................................................................................................................ -->
1838 <!-- ........................................................................................................................ -->
1840 <h3>The <code>ElementCSSInlineStyle</code> Interface</h3>
1842 <!--{@idl(ElementCSSInlineStyle)}-->
1844 <!-- ........................................................................................................................ -->
1845 <!-- ........................................................................................................................ -->
1847 <h3>Extensions to the <code>Window</code> Interface</h3>
1849 <!--{@idl(Window)}-->
1851 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
1853 <h2>Resolved Values</h2>
1855 <p><code title="dom-Window-getComputedStyle">getComputedStyle()</code> was
1856 historically defined to return the "computed value" of an element or
1857 pseudo-element. However, the concept of "computed value" changed between
1858 revisions of CSS while the implementation of
1859 <code title="dom-Window-getComputedStyle">getComputedStyle()</code> had to
1860 remain the same for compatibility with deployed scripts. To address this
1861 issue this specification introduces the concept of a
1862 <dfn>resolved value</dfn>.</p>
1864 <p>The <span>resolved value</span> for a given property can be determined
1865 as follows:</p>
1867 <dl class="switch">
1868 <!--
1869 We want to treat shorthand properties like any other value basically.
1871 <dt>'<code>background</code>'
1872 <dt>'<code>border</code>'
1873 <dt>'<code>border-collapse</code>'
1874 <dt>'<code>border-color</code>'
1875 <dt>'<code>border-spacing</code>'
1876 <dt>'<code>border-style</code>'
1877 <dt>'<code>border-top</code>'
1878 <dt>'<code>border-right</code>'
1879 <dt>'<code>border-bottom</code>'
1880 <dt>'<code>border-left</code>'
1881 <dt>'<code>border-width</code>'
1882 <dt>'<code>font</code>'
1883 <dt>'<code>list-style</code>'
1884 <dt>'<code>margin</code>'
1885 <dt>'<code>outline</code>'
1886 <!- - overflow is not - ->
1887 <dt>'<code>padding</code>'
1888 <dt>'<code>pause</code>'
1889 <dd>
1890 <p>There is no <span>resolved value</span>.</p>
1891 </dd>
1892 -->
1894 <dt>'<code>line-height</code>'</dt>
1895 <dd><p>The <span>resolved value</span> is the used value.</p></dd>
1897 <dt>'<code>height</code>'</dt>
1898 <dt>'<code>margin</code>'</dt>
1899 <dt>'<code>margin-bottom</code>'</dt>
1900 <dt>'<code>margin-left</code>'</dt>
1901 <dt>'<code>margin-right</code>'</dt>
1902 <dt>'<code>margin-top</code>'</dt>
1903 <dt>'<code>padding</code>'</dt>
1904 <dt>'<code>padding-bottom</code>'</dt>
1905 <dt>'<code>padding-left</code>'</dt>
1906 <dt>'<code>padding-right</code>'</dt>
1907 <dt>'<code>padding-top</code>'</dt>
1908 <dt>'<code>width</code>'</dt>
1909 <dd><p>If the property applies to the element or pseudo-element and the
1910 <span>resolved value</span> of the '<code>display</code>' property is not
1911 <code>none</code>, the <span>resolved value</span> is the
1912 <span>used value</span>. Otherwise the <span>resolved value</span> is the
1913 computed value.</p></dd>
1915 <dt>'<code>bottom</code>'</dt>
1916 <dt>'<code>left</code>'</dt>
1917 <dt>'<code>right</code>'</dt>
1918 <dt>'<code>top</code>'</dt>
1919 <dd><p>If the property applies to a positioned element and the
1920 <span>resolved value</span> of the '<code>display</code>' property is not
1921 <code>none</code>, the <span>resolved value</span> is the
1922 <span>used value</span>. Otherwise the <span>resolved value</span> is the
1923 computed value.</p></dd>
1925 <dt>Any other property</dt>
1926 <dd><p>The <span>resolved value</span> is the computed value.</p></dd>
1927 </dl>
1929 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
1931 <h2 id="iana-considerations">IANA Considerations</h2>
1933 <!-- ........................................................................................................................ -->
1934 <!-- ........................................................................................................................ -->
1936 <h3><dfn title="http-default-style"><code>Default-Style</code></dfn></h3>
1938 <p>This section describes a header field for registration in the Permanent
1939 Message Header Field Registry.
1940 <!--<a href="XXX">[RFC3864]</a>--></p>
1942 <dl>
1943 <dt>Header field name</dt>
1944 <dd>Default-Style</dd>
1945 <dt>Applicable protocol</dt>
1946 <dd>http</dd>
1947 <dt>Status</dt>
1948 <dd>standard</dd>
1949 <dt>Author/Change controller</dt>
1950 <dd>W3C</dd>
1951 <dt>Specification document(s)</dt>
1952 <dd>This document is the relevant specification.</dd>
1953 <dt>Related information</dt>
1954 <dd>None.</dd>
1955 </dl>
1957 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
1959 <h2 class=no-num>References</h2>
1961 <!-- ........................................................................................................................ -->
1962 <!-- ........................................................................................................................ -->
1964 <h3 class=no-num>Normative references</h3>
1965 <div id=anolis-references-normative></div>
1967 <!-- ........................................................................................................................ -->
1968 <!-- ........................................................................................................................ -->
1970 <h3 class=no-num>Informative references</h3>
1971 <div id=anolis-references-informative></div>
1973 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
1975 <h2 class="no-num" id="changes">Change History</h2>
1977 <p>This section documents the primary technical changes of CSSOM related functionality, with a focus on changes to API signatures.</p>
1979 <h3 class="no-num" id="changes-from-dom2">Changes From DOM-2 Style</h3>
1981 <ul>
1982 <li><p>Remove definition of <code>CSSRule.UNKNOWN_RULE</code>, reserving its value (0) to prevent future reuse.</p></li>
1983 <li><p>Remove definition of <code>DOMImplementationCSS</code> interface.</p></li>
1984 </ul>
1986 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
1988 <h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
1990 <p>The editors would like to thank
1992 Alexey Feldgendler,
1993 Björn Höhrmann,
1994 Boris Zbasky,
1995 Brian Kardell,
1996 Christian Krebs,
1997 Daniel Glazman,
1998 David Baron,
1999 <i>fantasai</i>,
2000 Hallvord R. M. Steen,
2001 Ian Hickson,
2002 John Daggett,
2003 Lachlan Hunt,
2004 Morten Stenshorne,
2005 Philip Taylor,
2006 Robert O'Callahan,
2007 Sjoerd Visscher,
2008 Simon Pieters,
2009 Sylvain Galineau,
2010 Tarquin Wilton-Jones, and
2011 Zack Weinberg
2013 for contributing to this specification.</p>
2015 <p>Additional thanks to Ian Hickson for writing the
2016 initial version of the alternative style sheets API and canonicalization
2017 (now serialization) rules for CSS values.</p>
2019 <!-- XXX NOTES
2021 <style type=text/css;charset=utf-8> does create a StyleSheet in Firefox
2022 and Opera, but does not create a StyleSheet in IE. I prefer IE.
2024 <style type=TEXT/CSS> sets the style sheet type to text/css in Firefox and
2025 TEXT/CSS in Opera and IE. I prefer Firefox.
2027 <style> sets the style sheet location to the document location Firefox,
2028 the empty string in IE, and null in Opera. I prefer Opera
2030 <style media="x"> invokes .sheet.media.mediaText = "x"
2032 <style> does not "have" a title
2034 .cascadedStyle that returns less keywords than currentStyle, no inherit,
2035 etc.
2037 Markup style: http://krijnhoetmer.nl/irc-logs/whatwg/20100204#l-529
2038 -->
2039 </body>
2040 </html>