cssom/cssom-source@654203ca5641
cssom/cssom-source
Fri, 15 Mar 2013 08:52:20 +0100
- author
- Simon Pieters <simonp@opera.com>
- date
- Fri, 15 Mar 2013 08:52:20 +0100
- changeset 7759
- 654203ca5641
- parent 7728
- 766a04ad4cfb
- child 7761
- 01ac45a6e3f7
- permissions
- -rwxr-xr-x
correct instructions in README
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>Simon Pieters</a>
48 (<a href="http://www.opera.com/">Opera Software ASA</a>)
49 <<a href="mailto:simponp@opera.com">simonp@opera.com</a>></dd>
50 <dd><a>Shane Stephens</a>
51 (<a href="http://www.google.com/">Google, Inc.</a>)
52 <<a href="mailto:shans@google.com">shans@google.com</a>></dd>
54 <dt>Previous Editor:</dt>
55 <dd><a href="http://annevankesteren.nl/">Anne van Kesteren</a>
56 (<a href="http://www.opera.com/">Opera Software ASA</a>)
57 <<a href="mailto:annevk@opera.com">annevk@opera.com</a>></dd>
58 </dl>
60 <!--copyright-->
62 </div>
64 <hr class="top">
66 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
68 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
70 <p>CSSOM defines APIs (including generic parsing and serialization rules)
71 for Media Queries, Selectors, and of course CSS itself.</p>
73 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
75 <h2 class="no-num no-toc" id="sotd">Status of this Document</h2>
77 <p>This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment.
78 Its publication here does not imply endorsement of its contents by W3C or by the CSS Working Group. Don't cite
79 this document other than as work in progress.</p>
81 <p class="note">Implementers should note well that this specification is an ongoing effort to sort out
82 what has been widely implemented and deployed from <span data-anolis-ref>DOM2STYLE</span> as well as common extensions thereto, some details
83 of which are currently interoperable and others which are not currently interoperable. As this specification moves
84 forward, it is hoped that these differences will be resolved and an unambiguous and adequate consensus-based
85 specification will emerge.</p>
87 <p><em>This section describes the status of this document at the time of
88 its publication. Other documents may supersede this document. A list of
89 current W3C publications and the latest revision of this technical report
90 can be found in the
91 <a href="http://www.w3.org/TR/">W3C technical reports index at http://www.w3.org/TR/.</a></em>
93 <p class="dontpublish">This is the [DATE: 3 August 2002] [LONGSTATUS] of CSSOM. Please send comments to
94 <a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a>
95 (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
96 with <samp>[cssom]</samp> at the start of the subject line.
98 <p class="publish">This is the [DATE] First Public Working Draft of CSSOM, produced by the
99 <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part
100 of the <a href="http://www.w3.org/Style/">Style Activity</a>).
101 <!--XXX remove "First Public" after initial publication -->
103 <p>This document was produced by a group operating under the
104 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>.
105 W3C maintains a
106 <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel=disclosure>public list of any patent disclosures</a>
107 made in connection with the deliverables of the group; that page also
108 includes instructions for disclosing a patent. An individual who has
109 actual knowledge of a patent which the individual believes contains
110 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a>
111 must disclose the information in accordance with
112 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>.</p>
114 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
116 <h2 class="no-num no-toc" id="toc">Table of Contents</h2>
118 <!--toc-->
120 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
122 <h2 id="introduction">Introduction</h2>
124 <p>This document formally specifies the core features of the CSS Object Model (CSSOM). Other documents in the CSSOM family of specifications
125 as well as other CSS related specifications define extensions to these core features.</p>
127 <p>The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to
128 and manipulation of style related state information and processes.</p>
130 <p>The features defined below are fundamentally based on prior specifications of the W3C DOM Working Group, primarily
131 <span data-anolis-ref>DOM2STYLE</span>. The purposes of the present document are (1) to improve on that prior work by providing
132 more technical specificity (so as to improve testability and interoperability), (2) to deprecate or remove certain less-widely implemented
133 features no longer considered to be essential in this context, and (3) to newly specify certain extensions that have been
134 or expected to be widely implemented.</p>
136 <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>
138 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
140 <h2>Conformance</h2>
142 <p>All diagrams, examples, and notes in this specification are
143 non-normative, as are all sections explicitly marked non-normative.
144 Everything else in this specification is normative.
146 <p>The key words "MUST", "MUST NOT", "REQUIRED", <!--"SHALL", "SHALL
147 NOT",--> "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and
148 "OPTIONAL" in the normative parts of this document are to be
149 interpreted as described in RFC2119. For readability, these words do
150 not appear in all uppercase letters in this specification.
151 <span data-anolis-ref>RFC2119</span>
153 <p>Requirements phrased in the imperative as part of algorithms
154 (such as "strip any leading space characters" or "return false and
155 terminate these steps") are to be interpreted with the meaning of the
156 key word ("must", "should", "may", etc) used in introducing the
157 algorithm.
159 <p>Conformance requirements phrased as algorithms or specific steps
160 may be implemented in any manner, so long as the end result is
161 equivalent. (In particular, the algorithms defined in this
162 specification are intended to be easy to follow, and not intended to
163 be performant.)
165 <p id="hardwareLimitations">User agents may impose
166 implementation-specific limits on otherwise unconstrained inputs,
167 e.g. to prevent denial of service attacks, to guard against running
168 out of memory, or to work around platform-specific limitations.
170 <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.
172 <p>Unless otherwise stated, string comparisons are done in a
173 <span data-anolis-spec=dom>case-sensitive</span> manner.
175 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
177 <h2 id="terminology">Terminology</h2>
179 <p>This specification employs certain terminology from the following documents:
180 <cite>DOM4</cite>,
181 <cite>HTML</cite>,
182 <cite>Associating Style Sheets with XML documents</cite>
183 and
184 <cite>XML</cite>
185 <span data-anolis-ref>DOM</span>
186 <span data-anolis-ref>HTML</span>
187 <span data-anolis-ref>XMLSS</span>
188 <span data-anolis-ref>XML</span>.
190 <p>When this specification talks about object
191 <code><var>A</var></code> where <code><var>A</var></code> is actually an interface, it generally means an object implementing interface
192 <code><var>A</var></code>.</p>
194 <p>The term <dfn id="whitespace">whitespace</dfn> is used as defined in <span data-anolis-ref>CSS</span>.
196 <p>The terms <dfn id="set">set</dfn> and <dfn id="clear">clear</dfn> to refer to the <code>true</code> and
197 <code>false</code> values of binary flags or variables, respectively. These terms are also used as verbs in which case they refer to
198 mutating some value to make it <code>true</code> or <code>false</code>, respectively.</p>
200 <!-- ........................................................................................................................ -->
201 <!-- ........................................................................................................................ -->
203 <h3>Common Serializing Idioms</h3>
205 <p>To <dfn>escape a character</dfn> means to create a string of
206 "<code>\</code>" (U+005C), followed by the character.</p>
208 <p>To <dfn>escape a character as code point</dfn> means to create a
209 string of "<code>\</code>" (U+005C), followed by the Unicode code point as
210 the smallest possible number of hexadecimal digits in the range 0-9 a-f
211 (U+0030 to U+0039 and U+0061 to U+0066) to represent the code point in
212 base 16, followed by a single SPACE (U+0020).</p>
214 <p>To <dfn>serialize an identifier</dfn> means to create a string represented
215 by the concatenation of, for each character of the identifier:</p>
217 <ul>
218 <li>If the character is NULL (U+0000), then <span data-anolis-spec=dom title=concept-throw>throw</span> an
219 <code data-anolis-spec=dom>InvalidCharacterError</code> exception and terminate these steps.</li>
220 <li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or
221 [\7f-\9f] (U+007F to U+009F), then the character
222 <span title="escape a character as code point">escaped as code point</span>.</li>
223 <li>If the character is the first character and is in the range [0-9]
224 (U+0030 to U+0039), then the character
225 <span title="escape a character as code point">escaped as code point</span>.</li>
226 <li>If the character is the second character and is in the range [0-9]
227 (U+0030 to U+0039) and the first character is a "<code>-</code>"
228 (U+002D), then the character
229 <span title="escape a character as code point">escaped as code point</span>.</li>
230 <li>If the character is the second character and is "<code>-</code>"
231 (U+002D) and the first character is "<code>-</code>" as well, then the
232 <span title="escape a character">escaped</span> character.</li>
233 <li>If the character is not handled by one of the above rules and is
234 greater than or equal to U+0080, is "<code>-</code>" (U+002D) or
235 "<code>_</code>" (U+005F), or is in one of the ranges [0-9] (U+0030 to
236 U+0039), [A-Z] (U+0041 to U+005A), or [a-z] (U+0061 to U+007A), then the character
237 itself.</li>
238 <li>Otherwise, the <span title="escape a character">escaped</span>
239 character.</li>
240 </ul>
242 <p>To <dfn>serialize a string</dfn> means to create a string represented
243 by '<code>"</code>' (U+0022), followed by the result of applying the rules
244 below to each character of the given string, followed by
245 '<code>"</code>' (U+0022):</p>
247 <ul>
248 <li>If the character is NULL (U+0000), then <span data-anolis-spec=dom title=concept-throw>throw</span> an
249 <code data-anolis-spec=dom>InvalidCharacterError</code> exception and terminate these steps.</li>
250 <li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or [\7f-\9f] (U+007F to
251 U+009F), the character <span title="escape a character as code point">escaped as code point</span>.</li>
252 <li>If the character is '<code>"</code>' (U+0022) or '<code>\</code>'
253 (U+005C), the <span title="escape a character">escaped</span> character.</li>
254 <li>Otherwise, the character itself.</li>
255 </ul>
257 <p class="note">"<code>'</code>" (U+0027) is not escaped because strings
258 are always serialized with '<code>"</code>' (U+0022).</p>
260 <p>To <dfn>serialize a URL</dfn> means to create a string represented by
261 "<code>url(</code>", followed by the
262 <span title="serialize a string">string escaped</span> value of the given
263 string, followed by "<code>)</code>".</p>
265 <p>To <dfn>serialize a comma-separated list</dfn> concatenate all items of
266 the list in list order while separating them by "<code>, </code>", i.e.,
267 COMMA (U+002C) followed by a single SPACE (U+0020).</p>
269 <p>To <dfn>serialize a whitespace-separated list</dfn> concatenate all
270 items of the list in list order while separating them by "<code> </code>", i.e.,
271 a single SPACE (U+0020).</p>
273 <p class="note">When serializing a list according to the above rules,
274 extraneous whitespace is not inserted prior to the first item or subsequent to
275 the last item. Unless otherwise specified, an empty list is serialized as the
276 empty string.</p>
278 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
280 <h2>Media Queries</h2>
282 <p>Media queries are defined by the Media Queries specification. This
283 section defines various concepts around media queries, including their API
284 and serialization form.</p>
286 <!-- XXX ref -->
288 <!-- ........................................................................................................................ -->
289 <!-- ........................................................................................................................ -->
291 <h3>Parsing Media Queries</h3>
293 <p>To
294 <dfn id="parse-a-media-query-list">parse a media query list</dfn> for a
295 given string <var>s</var> into a media query list is defined in
296 the Media Queries specification. Return the list of one or more media
297 queries that the algorithm defined there gives.</p> <!-- XXX ref -->
299 <p class="note">A media query that ends up being "ignored" will turn
300 into "<code>not all</code>".</p>
302 <p>To
303 <dfn id="parse-a-media-query">parse a media query</dfn> for a given string
304 <var>s</var> means to follow the
305 <span>parse a media query list</span> steps and return <code>null</code> if more
306 than one media query is returned or a media query if a
307 single media query is returned.</p>
309 <p class="note">Again, a media query that ends up being "ignored" will
310 turn into "<code>not all</code>".</p>
312 <!-- ........................................................................................................................ -->
314 <h3>Serializing Media Queries</h3>
316 <p>To
317 <dfn id="serialize-a-media-query-list">serialize a media query list</dfn>
318 run these steps:</p>
320 <ol>
321 <li><p>If the media query list is empty return the empty string and
322 terminate these steps.</p></li>
324 <li><p><span title="serialize a media query">Serialize</span> each
325 media query in the list of media queries, sort them in lexicographical
326 order, and then
327 <span title="serialize a comma-separated list">serialize</span> the
328 list.</p></li>
329 </ol>
331 <p>To
332 <dfn id="serialize-a-media-query">serialize a media query</dfn> let
333 <var>s</var> be the empty string, run the steps below, and
334 finally return <var>s</var>:</p>
336 <ol>
337 <li><p>If the media query is negated append "<code>not</code>", followed
338 by a single SPACE (U+0020), to <var>s</var>.</p></li>
340 <li><p>Let <var>type</var> be the media type of the media query,
341 <span title="serialize an identifier">escaped</span> and
342 <span data-anolis-spec=dom>converted to ASCII lowercase</span>.</p></li>
344 <li><p>If the media query does not contain media features append
345 <var>type</var>, to <var>s</var>,
346 then return <var>s</var> and terminate this algorithm.</p></li>
348 <li><p>If <var>type</var> is not "<code>all</code>" or if the
349 media query is negated append <var>type</var>, followed by a
350 single SPACE (U+0020), followed by "<code>and</code>", followed by a single SPACE
351 (U+0020), to <var>s</var>.</p></li>
353 <li><p>Sort the media features in lexicographical order.</p></li>
355 <li>
356 <p>Then, for each media feature:</p>
358 <ol>
359 <li>Append a "<code>(</code>" (U+0028), followed by the media feature
360 name, <span data-anolis-spec=dom>converted to ASCII lowercase</span>,
361 to <var>s</var>.</p></li>
363 <li><p>If a value is given append a "<code>:</code>" (U+003A), followed
364 by a single SPACE (U+0020), followed by the
365 <span title="serialize a media feature value">serialized media feature value</span>,
366 to <var>s</var>.</p></li>
368 <li><p>Append a "<code>)</code>" (U+0029) to
369 <var>s</var>.</p></li>
371 <li><p>If this is not the last media feature append a single SPACE (U+0020),
372 followed by "<code>and</code>", followed by a single SPACE (U+0020), to
373 <var>s</var>.</p></li>
374 </ol>
375 </li>
376 </ol>
378 <div class="example">
379 <p>Here are some examples of input (first column) and output (second
380 column):</p>
382 <table>
383 <thead>
384 <tr><th>Input<th>Output
385 <tbody>
386 <tr>
387 <td><pre>not screen and (min-WIDTH:5px) AND (max-width:40px)</pre>
388 <td><pre>not screen and (max-width: 40px) and (min-width: 5px)</pre>
389 <tr>
390 <td><pre>all and (color) and (color)</pre>
391 <td><pre>(color)</pre>
392 </table>
393 </div>
396 <!-- ........................................................................................................................ -->
398 <h4>Serializing Media Feature Values</h4>
400 <p class="issue">This should probably be done in terms of mapping it to
401 serializing CSS values as media features are defined in terms of CSS
402 values after all.</p>
404 <p>To <dfn id="serialize-a-media-feature-value">serialize a media feature value</dfn>
405 named <var>v</var> locate <var>v</var> in the first
406 column of the table below and use the serialization format described in
407 the second column:</p>
409 <table>
410 <tr>
411 <th>Media Feature
412 <th>Serialization
413 <tr>
414 <td><code>width</code>
415 <td>...
416 <tr>
417 <td><code>height</code>
418 <td>...
419 <tr>
420 <td><code>device-width</code>
421 <td>...
422 <tr>
423 <td><code>device-height</code>
424 <td>...
425 <tr>
426 <td><code>orientation</code>
427 <td>
428 <p>If the value is `<code>portrait</code>`: "<code>portrait</code>".</p>
429 <p>If the value is `<code>landscape</code>`: "<code>landscape</code>".</p>
430 <tr>
431 <td><code>aspect-ratio</code>
432 <td>...
433 <tr>
434 <td><code>device-aspect-ratio</code>
435 <td>...
436 <tr>
437 <td><code>color</code>
438 <td>...
439 <tr>
440 <td><code>color-index</code>
441 <td>...
442 <tr>
443 <td><code>monochrome</code>
444 <td>...
445 <tr>
446 <td><code>resolution</code>
447 <td>...
448 <tr>
449 <td><code>scan</code>
450 <td>
451 <p>If the value is `<code>progressive</code>`: "<code>progressive</code>".</p>
452 <p>If the value is `<code>interlace</code>`: "<code>interlace</code>".</p>
453 <tr>
454 <td><code>grid</code>
455 <td>...
456 </table>
458 <p>Other specifications can extend this table and vendor-prefixed media
459 features can have custom serialization formats as well.</p>
461 <!-- ........................................................................................................................ -->
462 <!-- ........................................................................................................................ -->
464 <h3>Comparing Media Queries</h3>
466 <p>To
467 <dfn id="compare-media-queries">compare media queries</dfn>
468 <var>m1</var> and <var>m2</var> means to
469 <span title="serialize a media query">serialize</span> them both and
470 return true if they are a
471 <span data-anolis-spec=dom>case-sensitive</span> match and false if they
472 are not.</p>
474 <!-- ........................................................................................................................ -->
475 <!-- ........................................................................................................................ -->
477 <h3>The <code>MediaList</code> Interface</h3>
479 <!--{@idl(MediaList)}-->
481 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
483 <h2>Selectors</h2>
485 <p>Selectors are defined in the Selectors specification. This section
486 mainly defines how to serialize them.</p> <!-- XXX ref -->
488 <!-- XXX ref universal selector etc? some are in <span> some not -->
490 <!-- ........................................................................................................................ -->
491 <!-- ........................................................................................................................ -->
493 <h3>Parsing Selectors</h3>
495 <p>To
496 <dfn id="parse-a-group-of-selectors">parse a group of selectors</dfn>
497 means to parse the value using the <code>selectors_group</code>
498 production defined in the Selectors specification and return either a
499 group of selectors if parsing did not fail or <code>null</code> if parsing did
500 fail.</p> <!-- XXX ref -->
502 <!-- ........................................................................................................................ -->
503 <!-- ........................................................................................................................ -->
505 <h3>Serializing Selectors</h3>
506 <!-- http://dump.testsuite.org/2009/cssom/serializing-selectors.htm -->
508 <p>To
509 <dfn id="serialize-a-group-of-selectors">serialize a group of selectors</dfn>
510 <span title="serialize a selector">serialize</span> each selector in the
511 group of selectors and then
512 <span title="serialize a comma-separated list">serialize</span> the
513 group.</p>
515 <p>To <dfn id="serialize-a-selector">serialize a selector</dfn> let
516 <var>s</var> be the empty string, run the steps below for each
517 part of the chain of the selector, and finally return
518 <var>s</var>:</p>
520 <ol>
521 <li><p>If there is only one <span>simple selector</span> in the
522 <span>sequence of simple selectors</span> which is a
523 <span>universal selector</span>, append the result of
524 <span title="serialize a simple selector">serializing</span> the
525 <span>universal selector</span> to <var>s</var>.</p></li>
527 <li><p>Otherwise, for each <span>simple selector</span> in the
528 <span>sequence of simple selectors</span> that is not a
529 universal selector of which the <span>namespace prefix</span> maps to
530 the null namespace (not in a namespace) or of which the
531 <span>namespace prefix</span> maps to a namespace that is not the
532 <span>default namespace</span>
533 <span title="serialize a simple selector">serialize</span> the
534 <span>simple selector</span> and append the result to
535 <var>s</var>.</p></li>
537 <li><p>If this is not the last part of the chain of the selector append a
538 single SPACE (U+0020), followed by the combinator
539 "<code>></code>",
540 "<code>+</code>", or
541 "<code>~</code>"
542 as appropriate, followed by another single SPACE (U+0020) if the combinator was
543 not whitespace, to <var>s</var>.</p></li>
545 <li><p>If this is the last part of the chain of the selector and there is
546 a pseudo-element, append "<code>::</code>" followed by the name of the
547 pseudo-class, to <var>s</var>.</p></li>
548 </ol>
551 <p>To
552 <dfn id="serialize-a-simple-selector">serialize a simple selector</dfn>
553 let <var>s</var> be the empty string, run the steps below, and
554 finally return <var>s</var>:</p>
556 <dl class="switch">
557 <dt>type selector</dt>
558 <dt>universal selector</dt>
559 <dd>
560 <ol>
561 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
562 not the <span>default namespace</span> and is not the
563 null namespace (not in a namespace) append the
564 <span title="serialize an identifier">escaped</span>
565 <span>namespace prefix</span>, followed by a "<code>|</code>" (U+007C)
566 to <var>s</var>.</p></li>
568 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
569 the null namespace (not in a namespace) append
570 "<code>|</code>" (U+007C) to <var>s</var>.</p></li>
571 <!-- This includes |* -->
573 <li><p>If this is a type selector append the
574 <span title="serialize an identifier">escaped</span> element name to
575 <var>s</var>.</p></li>
577 <li><p>If this is a universal selector append "<code>*</code>" (U+002A)
578 to <var>s</var>.</p></li>
579 </ol>
580 </dd>
582 <dt>attribute selector</dt>
583 <dd>
584 <ol>
585 <li><p>Append "<code>[</code>" (U+005B) to
586 <var>s</var>.</p></li>
588 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
589 not the null namespace (not in a namespace) append the
590 <span title="serialize an identifier">escaped</span>
591 <span>namespace prefix</span>, followed by a "<code>|</code>" (U+007C)
592 to <var>s</var>.</p></li>
594 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
595 the null namespace (not in a namespace) append
596 "<code>|</code>" (U+007C) to <var>s</var>.</p></li>
597 <!-- This includes |* -->
599 <li><p>Append the <span title="serialize an identifier">escaped</span>
600 attribute name to <var>s</var>.</p></li>
602 <li><p>If there is an attribute value specified, append
603 "<code>=</code>",
604 "<code>~=</code>",
605 "<code>|=</code>",
606 "<code>^=</code>",
607 "<code>$=</code>", or
608 "<code>*=</code>"
609 as appropriate (depending on the type of attribute selector), followed
610 by the <span title="serialize a string">string escaped</span>
611 attribute value, to <var>s</var>.</p></li>
613 <li><p>Append "<code>]</code>" (U+005D) to
614 <var>s</vaR>.</p></li>
615 </ol>
616 </dd>
618 <dt>class selector</dt>
619 <dd><p>Append a "<code>.</code>" (U+002E), followed by the
620 <span title="serialize an identifier">escaped</span> class name to
621 <var>s</var>.</p></dd>
623 <dt>ID selector</dt>
624 <dd><p>Append a "<code>#</code>" (U+0023), followed by the
625 <span title="serialize an identifier">escaped</span> ID to
626 <var>s</var>.</p></dd>
628 <dt>pseudo-class</dt>
629 <dd>
630 <p>If the pseudo-class does not accept arguments append
631 "<code>:</code>" (U+003A), followed by the name of the pseudo-class, to
632 <var>s</var>.</p>
634 <p>Otherwise, append "<code>:</code>" (U+003A), followed by the name of
635 the pseudo-class, followed by "<code>(</code>" (U+0028), followed by the
636 value of the pseudo-class argument determined as per below, followed by
637 "<code>)</code>" (U+0029), to <var>s</var>.</p>
639 <dl class="switch">
640 <dt><code>:lang()</code></dt>
641 <dd><p>The <span title="serialize an identifier">escaped</span>
642 value.</p></dd>
644 <dt><code>:nth-child()</code></dt>
645 <dt><code>:nth-last-child()</code></dt>
646 <dt><code>:nth-of-type()</code></dt>
647 <dt><code>:nth-last-of-type()</code></dt>
648 <dd>
649 <ol>
650 <li><p>If the value is odd let the value be
651 "<code>2n+1</code>".</p></li>
653 <li><p>If the value is even let the value be
654 "<code>2n</code>".</p></li>
656 <li><p>If <var>a</var> is zero let the value be
657 <var>b</var>
658 <span title="serialize a CSS component value">serialized</span> as <integer>.</p></li>
660 <li><p>If <var>a</var> is one or minus one and
661 <var>b</var> is zero let the value be
662 "<code>n</code>" (U+006E).</p></li>
664 <li><p>If <var>a</var> is one or minus one let the value be
665 "<code>n</code>" (U+006E), followed by
666 "<code>+</code>" (U+002B) if <var>b</var> is positive,
667 followed by <var>b</var>
668 <span title="serialize a CSS component value">serialized</span> as <integer>.</p></li>
670 <li><p>If <var>b</var> is zero let the value be
671 <var>a</var>
672 <span title="serialize a CSS component value">serialized</span> as <integer>,
673 followed by "<code>n</code>" (U+006E).</p></li>
675 <li><p>Otherwise let the value be
676 <var>a</var>
677 <span title="serialize a CSS component value">serialized</span> as <integer>,
678 followed by "<code>n</code>" (U+006E), followed by
679 "<code>+</code>" (U+002B) if <var>b</var> is positive,
680 followed by <var>b</var>
681 <span title="serialize a CSS component value">serialized</span> as <integer>.</p></li>
682 </ol>
683 </dd>
685 <dt><code>:not()</code></dt>
686 <dd><p>The result of serializing the value using the rules for
687 <span title="serialize a group of selectors">serializing a group of selectors</span>.</p></dd>
688 </dl>
689 </dd>
690 </dl>
692 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
694 <h2>CSS</h2>
696 <!-- ........................................................................................................................ -->
697 <!-- ........................................................................................................................ -->
699 <h3>CSS Style Sheets</h3>
701 <!-- XXX
702 element inserted into the DOM, style sheet created, element removed from
703 the DOM, what happens to StyleSheet?
704 -->
706 <p>A <dfn id="css-style-sheet">CSS style sheet</dfn> is an abstract concept that
707 represents a style sheet as defined by the CSS specification. In the CSSOM a
708 <span>CSS style sheet</span> is represented as a <code>CSSStyleSheet</code> object. A
709 <span>CSS style sheet</span> has a number of associated state items:</p>
711 <dl>
712 <dt><dfn id="style-sheet-type">style sheet type</dfn></dt>
713 <dd><p>The literal string "<code>text/css</code>".</p></dd>
715 <dt><dfn id="style-sheet-location">style sheet location</dfn></dt>
716 <dd><p>The <span data-anolis-spec=html>URL</span> of the
717 <span>style sheet</span> or <code>null</code> if the <span>style sheet</span> was
718 embedded.</p></dd>
720 <dt><dfn id="style-sheet-parent">style sheet parent</dfn></dt>
721 <dd><p>The <span>style sheet</span> that is the parent of the
722 <span>style sheet</span> or <code>null</code> if there is no associated parent.</p></dd>
724 <dt><dfn id="style-sheet-owner-node">style sheet owner node</dfn></dt>
725 <dd><p>The DOM node associated with the <span>style sheet</span> or
726 <code>null</code> if there is no associated DOM node.</p></dd>
728 <dt><dfn id="style-sheet-owner-css-rule">style sheet owner CSS rule</dfn></dt>
729 <dd><p>The <span>CSS rule</span> in the <span>style sheet parent</span>
730 that caused the inclusion of the <span>style sheet</span> or <code>null</code> if
731 there is no associated rule.</p></dd>
733 <dt><dfn id="style-sheet-media">style sheet media</dfn></dt>
734 <dd>
735 <p>The <code>MediaList</code> object associated with the
736 <span>style sheet</span>.</p>
738 <p>If this property is set to a string run the
739 <span>create a <code>MediaList</code> object</span> steps for that
740 string and associate the returned object with the
741 <span>style sheet</span>.</p>
742 </dd>
744 <dt><dfn id="style-sheet-title">style sheet title</dfn></dt>
745 <dd>
746 <p>The title of the <span>style sheet</span> or <code>null</code> if no title
747 is specified or is the empty string, in which case the title is referred to
748 as an empty title.</p>
750 <div class="example">
751 <p>In the following, the <span>style sheet title</span> is non-empty
752 for the first style sheet, but is empty for the second and third style sheets.</p>
753 <pre><style title="papaya whip">
754 body { background: #ffefd5; }
755 </style></pre>
756 <pre><style title="">
757 body { background: orange; }
758 </style></pre>
759 <pre><style>
760 body { background: brown; }
761 </style></pre>
762 </div>
763 </dd>
765 <dt><dfn id="style-sheet-alternate-flag">style sheet alternate flag</dfn></dt>
766 <dd>
767 <p>Either set or clear. Clear by default.</p>
769 <div class="example">
770 <p>The following <span title="style sheet">style sheets</span> have
771 their <span>style sheet alternate flag</span> set:</p>
773 <pre><?xml-stylesheet alternate="yes" title="x" href="data:text/css,…"?></pre>
775 <pre><link rel="alternate stylesheet" title="x" href="data:text/css,…"></pre>
776 </div>
777 </dd>
779 <dt><dfn id="style-sheet-disabled-flag">style sheet disabled flag</dfn></dt>
780 <dd>
781 <p>Either set or clear. Clear by default.</p>
783 <p class="note">Even when clear it does not necessarily mean that the
784 <span>style sheet</span> is actually used for rendering.</p>
785 </dd>
788 <dt><dfn id="style-sheet-css-rules">style sheet CSS rules</dfn></dt>
789 <dd><p>The <span title="CSS rule">CSS rules</span> associated with the
790 <span>style sheet</span>.</p></dd>
791 </dl>
793 <p>When you are to <span>create a style sheet</span> the above properties,
794 with the exception of <span>style sheet type</span> and
795 <span>style sheet CSS rules</span>, are to be set to
796 their proper values.</p>
798 <!-- same-origin restrictions -->
800 <!-- ........................................................................................................................ -->
802 <h4>The <code>StyleSheet</code> Interface</h4>
804 <!--{@idl(StyleSheet)}-->
806 <!-- ........................................................................................................................ -->
808 <h4>The <code>CSSStyleSheet</code> Interface</h4>
810 <!--{@idl(CSSStyleSheet)}-->
812 <!-- ........................................................................................................................ -->
813 <!-- ........................................................................................................................ -->
815 <h3>Style Sheet Collections</h3>
817 <p>Below various new concepts are defined that are associated with each
818 <code data-anolis-spec=dom>Document</code> object.</p>
820 <p>Each <code data-anolis-spec=dom>Document</code> has an associated list of zero or more
821 <span title="style sheet">style sheets</span>, named the
822 <dfn id="document-style-sheets">document style sheets</dfn>. This is
823 an ordered list that contains all
824 <span title="style sheet">style sheets</span> associated with the
825 <code data-anolis-spec=dom>Document</code>, in
826 <span data-anolis-spec=dom title=concept-tree-order>tree order</span>, with
827 <span title="style sheet">style sheets</span> created from HTTP
828 <code title="http-link">Link</code> headers first, if any, in header
829 order.</p>
831 <p>To <dfn id="create-a-style-sheet">create a style sheet</dfn>, run these
832 steps:</p>
834 <ol>
835 <li><p>Create a new <span>style sheet</span> object and set its
836 properties as specified.</p></li>
838 <li><p>Then run the <span>add a style sheet</span> steps for the newly
839 created <span>style sheet</span>.</p></li>
840 </ol>
842 <p>To <dfn id="add-a-style-sheet">add a style sheet</dfn>, run these
843 steps:</p>
845 <ol>
846 <li><p>Add the <span>style sheet</span> to the list of
847 <span>document style sheets</span> at the appropriate location. The
848 remainder of these steps deal with the
849 <span>style sheet disabled flag</span>.</p></li>
851 <li><p>If the <span>style sheet disabled flag</span> is set, terminate
852 these steps.</p></li>
854 <li><p>If the <span>style sheet title</span> is non-empty, the
855 <span>style sheet alternate flag</span> is clear, and
856 <span>preferred style sheet set name</span> is the empty string
857 <span>change the preferred style sheet set name</span> to the
858 <span>style sheet title</span>.</p></li>
860 <li>
861 <p>If any of the following is true clear the
862 <span>style sheet disabled flag</span> and terminate these steps:
864 <ul>
865 <li><p>The <span>style sheet title</span> is empty.</p></li>
866 <li><p>The <span>last style sheet set name</span> is <code>null</code> and the
867 <span>style sheet title</span> is a
868 <span data-anolis-spec=dom>case-sensitive</span> match
869 for the <span>preferred style sheet set name</span>.</p></li>
870 <li><p>The <span>style sheet title</span> is a
871 <span data-anolis-spec=dom>case-sensitive</span> match for the
872 <span>last style sheet set name</span>.</p></li>
873 </ul>
874 </li>
876 <li><p>Set the <span>style sheet disabled flag</span>.</li>
877 </ol>
879 <p>A <dfn id="persistent-style-sheet">persistent style sheet</dfn> is a
880 <span>style sheet</span> from the <span>document style sheets</span>
881 whose <span>style sheet title</span> is the empty string and whose
882 <span>style sheet alternate flag</span> is clear.</p>
884 <p>A <dfn id="style-sheet-set">style sheet set</dfn> is an ordered
885 collection of one or more <span title="style sheet">style sheets</span>
886 from the <span>document style sheets</span> which have an identical
887 <span>style sheet title</span> that is not the empty string.</p>
889 <p>A <dfn id="style-sheet-set-name">style sheet set name</dfn> is the
890 <span>style sheet title</span> the <span>style sheet set</span> has in
891 common.</p>
893 <p>An <dfn id="enabled-style-sheet-set">enabled style sheet set</dfn> is a
894 <span>style sheet set</span> of which each <span>style sheet</span> has
895 its <span>style sheet disabled flag</span> clear.</p>
897 <p>To <dfn id="enable-a-style-sheet-set">enable a style sheet set</dfn>
898 with name <var>name</var>, run these steps:</p>
900 <ol>
901 <li><p>If <var>name</var> is the empty string, set the
902 <span>style sheet disabled flag</span> for each <span>style sheet</span>
903 that is in a <span>style sheet set</span> and terminate these steps.</li>
905 <li><p>Clear the <span>style sheet disabled flag</span> for each
906 <span>style sheet</span> in a <span>style sheet set</span> whose
907 <span>style sheet set name</span> is a
908 <span data-anolis-spec=dom>case-sensitive</span> match for
909 <var>name</var> and set it for all other
910 <span title="style sheet">style sheets</span> in a
911 <span>style sheet set</span>.</p></li>
912 </ol>
914 <p>To <dfn id="select-a-style-sheet-set">select a style sheet set</dfn>
915 with name <var>name</var>, run these steps:</p>
917 <ol>
918 <li><p><span>Enable a style sheet set</span> with name
919 <var>name</var>.</p></li>
921 <li><p>Set <span>last style sheet set name</span> to
922 <var>name</var>.</p></li>
923 </ol>
925 <p>A <dfn id="last-style-sheet-set-name">last style sheet set name</dfn>
926 is a concept to determine what <span>style sheet set</span> was last
927 <span title="select a style sheet set">selected</span>. Initially its
928 value is <code>null</code>.</p>
930 <p>A
931 <dfn id="preferred-style-sheet-set-name">preferred style sheet set name</dfn>
932 is a concept to determine which
933 <span title="style sheet">style sheets</span> need to have their
934 <span>style sheet disabled flag</span> clear. Initially its value
935 is the empty string.
937 <p>To
938 <dfn id="change-the-preferred-style-sheet-set-name">change the preferred style sheet set name</dfn>
939 with name <var>name</var>, run these steps:</p>
941 <ol>
942 <li><p>Let <var>current</var> be the <span>preferred style sheet set name</span>.</p></li>
944 <li><p>Set <span>preferred style sheet set name</span> to
945 <var>name</var>.</p></li>
947 <li><p>If <var>name</var> is not a
948 <span data-anolis-spec=dom>case-sensitive</span> match for
949 <var>current</var> and
950 <span>last style sheet set name</span> is <code>null</code>
951 <span>enable a style sheet set</span> with name
952 <var>name</var>.</p></li>
953 </ol>
955 <!-- XXX ought to define "applied"
957 thoughts:
958 depends on disabled flag, alternate flag, media queries, sheesh
959 -->
961 <!-- ........................................................................................................................ -->
963 <h4>The HTTP <code>Default-Style</code> Header</h4>
965 <p>The HTTP <code title="http-default-style">Default-Style</code> header
966 can be used to set the <span>preferred style sheet set name</span>
967 influencing which <span>style sheet set</span> is (initially) the
968 <span>enabled style sheet set</span>.</p>
970 <p>For each HTTP <code title="http-default-style">Default-Style</code>
971 header, in header order, the user agent must
972 <span>change the preferred style sheet set name</span> with name being the
973 value of the header.</p>
975 <!-- ........................................................................................................................ -->
977 <h4>The <code>StyleSheetList</code> Sequence</h4>
979 <!--{@idl(StyleSheetList)}-->
981 <!-- ........................................................................................................................ -->
983 <h4>Extensions to the <code>Document</code> Interface</h4>
985 <!--{@idl(Document)}-->
987 <!-- ........................................................................................................................ -->
989 <h4>Interaction with the User Interface</h4>
991 <p>The user interface of Web browsers that support style sheets
992 should list the style sheet titles given in the
993 <code title="dom-Document-styleSheetSets">styleSheetSets</code> list,
994 showing the
995 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
996 as the selected style sheet set, leaving none selected if it is
997 <code>null</code> or the empty string, and selecting an extra option
998 "Basic Page Style" (or similar) if it is the empty string and the
999 <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
1000 is the empty string as well.</p>
1002 <p>Selecting a style sheet from this list should
1003 use the <span>select a style sheet set</span> set of steps. This
1004 (by definition) affects the
1005 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
1006 attribute.</p>
1008 <h5>Persisting the selected style sheet set</h5>
1010 <p>If a user agent persist the selected style sheet set, they should use
1011 the value of the
1012 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
1013 attribute, or if that is <code>null</code>, the
1014 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
1015 attribute, when leaving the page (or at some other time) to determine the
1016 set name to store. If that is <code>null</code> then the style sheet set should not be
1017 persisted.</p>
1019 <p>When re-setting the style sheet set to the persisted value (which can
1020 happen at any time, typically at the first time the style sheets are
1021 needed for styling the document, after the <code><head></code> of
1022 the document has been parsed, after any scripts that are not dependent on
1023 computed style have executed), the style sheet set
1024 should be set by using the
1025 <span>select a style sheet set</span> set of steps as if the user had
1026 selected the set manually.</p>
1028 <p class="note">This specification does not give any suggestions on
1029 how user agents should decide to persist the style sheet set or whether or
1030 how to persist the selected set across pages.</p>
1032 <!-- XXX this UI section suggests we may want to introduce a few more
1033 idioms -->
1035 <!-- ........................................................................................................................ -->
1037 <h4>Examples</h4>
1039 <div class="example">
1040 <p>Thus, in the following HTML snippet:</p>
1042 <pre><link rel="alternate stylesheet" title="foo" href="a">
1043 <link rel="alternate stylesheet" title="bar" href="b">
1044 <script>
1045 document.selectedStyleSheetSet = 'foo';
1046 document.styleSheets[1].disabled = false;
1047 </script>
1048 <link rel="alternate stylesheet" title="foo" href="c">
1049 <link rel="alternate stylesheet" title="bar" href="d"></pre>
1051 <p>...the style sheets that end up enabled are style sheets "a", "b",
1052 and "c", the
1053 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
1054 attribute would return <code>null</code>,
1055 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
1056 would return "foo", and
1057 <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
1058 would return the empty string.</p>
1060 <p>Similarly, in the following HTML snippet:</p>
1062 <pre><link rel="alternate stylesheet" title="foo" href="a">
1063 <link rel="alternate stylesheet" title="bar" href="b">
1064 <script>
1065 var before = document.preferredStyleSheetSet;
1066 document.styleSheets[1].disabled = false;
1067 </script>
1068 <link rel="stylesheet" title="foo" href="c">
1069 <link rel="alternate stylesheet" title="bar" href="d">
1070 <script>
1071 var after = document.preferredStyleSheetSet;
1072 </script></pre>
1074 <p>...the "before" variable will be equal to the empty string, the
1075 "after" variable will be equal to "foo", and style sheets "a" and "c"
1076 will be enabled. This is the case even though the first script block
1077 sets style sheet "b" to be enabled, because upon parsing the
1078 following <code><link></code> element, the
1079 <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
1080 is set and the
1081 <code title="dom-Document-enableStyleSheetsForSet">enableStyleSheetsForSet()</code>
1082 method is called (since
1083 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
1084 was never set
1085 explicitly, leaving
1086 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code> at
1087 <code>null</code> throughout), which changes which style sheets are enabled and which
1088 are not.</p>
1089 </div>
1091 <!-- ........................................................................................................................ -->
1092 <!-- ........................................................................................................................ -->
1094 <h3>Style Sheet Association</h3>
1096 <p>This section defines the interface a
1097 <span>style sheet owner node</span> of a <span>style sheet</span> has to
1098 implement and defines the requirements for
1099 <span data-anolis-spec=xmlss title="xml-stylesheet processing instruction">xml-stylesheet processing instructions</span>
1100 and HTTP <code title="http-link">Link</code> headers when the link
1101 relation type is an
1102 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
1103 "<code>stylesheet</code>" since nobody else was interested in
1104 defining this.</p>
1106 <p class=note>The editor is in good hope that HTML and SVG will define the
1107 appropriate processing in their respective specifications, in terms of
1108 this specification, in due course.</p>
1111 <!-- ........................................................................................................................ -->
1113 <h4>The <code>LinkStyle</code> Interface</h4>
1115 <!--{@idl(LinkStyle)}-->
1117 <div class="example">
1118 <p>In the following fragment, the first <code>style</code>
1119 element has a <code>sheet</code> attribute that returns a
1120 <code>StyleSheet</code> object representing the style sheet, but for
1121 the second <code>style</code> element, the <code>style</code> attribute returns <code>null</code>,
1122 assuming the user agent supports CSS (<code>text/css</code>), but does
1123 not support the (hypothetical) ExampleSheets (<code>text/example-sheets</code>).</p>
1125 <pre><style type="text/css">
1126 body { background:lime }
1127 </style></pre>
1128 <pre><style type="text/example-sheets">
1129 $(body).background := lime
1130 </style></pre>
1131 </div>
1133 <p class="note">Whether or not the node refers to a style sheet is defined
1134 by the specification that defines the semantics of said node.</p>
1136 <!-- ........................................................................................................................ -->
1138 <h4>Requirements on specifications</h4>
1140 <p>Specifications introducing new ways of associating style sheets through
1141 the DOM should define which nodes implement the
1142 <code>LinkStyle</code> interface. When doing so, they
1143 must also define when a <span>style sheet</span> is
1144 <span title="create a style sheet">created</span>.</p>
1149 <!-- ........................................................................................................................ -->
1151 <h4>Requirements on User Agents Implementing the
1152 <span><code>xml-stylesheet</code> processing instruction</span></h4>
1154 <!-- XXX load/error events, reparse -->
1156 <!--{@idl(ProcessingInstruction)}-->
1158 <!--
1159 <pre class="idl"><span data-anolis-spec=dom>ProcessingInstruction</span> implements <span>LinkStyle</span>;</pre>
1160 -->
1162 <p>For each
1163 <span data-anolis-spec=xmlss><code>xml-stylesheet</code> processing instruction</span>
1164 that is not part of the
1165 <span data-anolis-spec=xml>document type declaration</span> and has an
1166 <code>href</code>
1167 <span data-anolis-spec=xmlss>pseudo-attribute</span> these steps must
1168 (unless otherwise stated) be run:</p>
1170 <ol>
1171 <li><p>Let <var>title</var> be the value of the
1172 <code>title</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> or the empty string if the
1173 <code>title</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> is not specified.</p></li>
1175 <li><p>If there is an <code>alternate</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>
1176 whose value is a <span data-anolis-spec=dom>case-sensitive</span> match
1177 for "<code>yes</code>" and <var>title</var> is the
1178 empty string terminate these steps.</p></li>
1180 <li><p>If there is a <code>type</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> whose
1181 value is not a <span>supported styling language</span> the user agent
1182 may terminate these steps.</p></li>
1184 <li><p><span data-anolis-spec=html title="Resolve a URL">Resolve</span>
1185 the <span data-anolis-spec=html>URL</span> specified by the
1186 <code>href</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> and then
1187 <span data-anolis-spec=html>fetch</span> it.</p></li>
1189 <li>
1190 <p>When the resource is available, the document is in
1191 <span data-anolis-spec=html>quirks mode</span>
1192 and the
1193 <span data-anolis-spec=html title="content-type">Content-Type metadata</span> of
1194 the resource is not a <span>supported styling language</span> change the
1195 <span data-anolis-spec=html title="content-type">Content-Type metadata</span> of the resource
1196 to <code>text/css</code>.</p>
1198 <p class="note">This step might never actually happen, but is included
1199 here in case other specifications change, to keep things consistent.</p>
1200 </li>
1202 <li><p>If the resource is not in a
1203 <span>supported styling language</span> terminate these steps.</p></li>
1205 <li>
1206 <p><span>Create a style sheet</span> with the following properties:</p>
1208 <dl>
1209 <dt><span>style sheet location</span></dt>
1210 <dd><p>The <span data-anolis-spec=html>absolute URL</span> of the
1211 resource.</p></dd>
1213 <dt><span>style sheet parent</span></dt>
1214 <dd><p><code>null</code></p></dd>
1216 <dt><span>style sheet owner node</span></dt>
1217 <dd><p>The node.</p></dd>
1219 <dt><span>style sheet owner CSS rule</span></dt>
1220 <dd><p><code>null</code></p></dd>
1222 <dt><span>style sheet media</span></dt>
1223 <dd><p>The value of the <code>media</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>
1224 if any, or the empty string otherwise.</p></dd>
1226 <dt><span>style sheet title</span></dt>
1227 <dd><p><var>title</var></p></dd>
1229 <dt><span>style sheet alternate flag</span></dt>
1230 <dd><p>Set if the <code>alternate</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>
1231 value is a <span data-anolis-spec=dom>case-sensitive</span> match for
1232 "<code>yes</code>", or clear otherwise.
1233 </dl>
1234 </li>
1235 </ol>
1239 <!-- ........................................................................................................................ -->
1241 <h4>Requirements on User Agents Implementing the HTTP
1242 <code>Link</code> Header</h4>
1244 <!-- XXX ref, one day -->
1246 <!-- XXX deal with media param -->
1248 <p>For each HTTP <code title="http-link">Link</code> header of which one
1249 of the link relation types is an
1250 <span data-anolis-spec=dom>ASCII case-insensitive</span> match
1251 for "<code>stylesheet</code>" these steps
1252 must be run:</p>
1254 <ol>
1255 <li><p>Let <var>title</var> be the value of the first of all the
1256 <code>title</code> and <code>title*</code> parameters.
1257 If there are no such parameters it is the empty string.</p></li>
1259 <li><p>If one of the (other) link relation types is an
1260 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
1261 "<code>alternate</code>" and <var>title</var> is the
1262 empty string terminate these steps.</p></li>
1264 <li><p><span data-anolis-spec=html title="Resolve a URL">Resolve</span>
1265 the specified <span data-anolis-spec=html>URL</span> and
1266 <span data-anolis-spec=html>fetch</span> it.</p></li>
1268 <li><p>When the resource is available, the document is in
1269 <span data-anolis-spec=html>quirks mode</span>
1270 and the <span data-anolis-spec=html title="content-type">Content-Type metadata</span> of
1271 the resource is not a <span>supported styling language</span> change the
1272 <span data-anolis-spec=html title="content-type">Content-Type metadata</span> of the resource
1273 to <code>text/css</code>.</p></li>
1275 <li><p>If the resource is not in a
1276 <span>supported styling language</span> terminate these steps.</p></li>
1278 <li>
1279 <p><span>Create a style sheet</span> with the following properties:</p>
1281 <dl>
1282 <dt><span>style sheet location</span></dt>
1283 <dd><p>The <span data-anolis-spec=html>absolute URL</span> of the
1284 resource.</p></dd>
1286 <dt><span>style sheet owner node</span></dt>
1287 <dd><p><code>null</code></p></dd>
1289 <dt><span>style sheet parent</span></dt>
1290 <dd><p><code>null</code></p></dd>
1292 <dt><span>style sheet owner CSS rule</span></dt>
1293 <dd><p><code>null</code></p></dd>
1295 <dt><span>style sheet media</span></dt>
1296 <dd><p>The value of the first <code>media</code> parameter.</p></dd>
1297 <!-- XXX register media parameter? bah -->
1299 <dt><span>style sheet title</span></dt>
1300 <dd><p><var>title</var></p></dd>
1302 <dt><span>style sheet alternate flag</span></dt>
1303 <dd><p>Set if one of the specified link relation type for this HTTP
1304 <code title="http-link">Link</code> header is an
1305 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
1306 "<code>alternate</code>", or false otherwise.
1307 </dl>
1308 </li>
1309 </ol>
1311 <!-- ........................................................................................................................ -->
1312 <!-- ........................................................................................................................ -->
1314 <h3>CSS Rules</h3>
1316 <p>A <dfn id="rule">CSS rule</dfn> is an abstract concept that
1317 denotes a rule as defined by the CSS specification. A
1318 <span>CSS rule</span> is represented as an object that implements a subclass of
1319 the <code>CSSRule</code> interface, and which has the following
1320 associated state items:</p>
1322 <dl>
1323 <dt><dfn id="rule-type">rule type</dfn></dt>
1324 <dd><p>A non-negative integer associated with a particular type of rule.
1325 This item is initialized when a rule is created and must never change.</p></dd>
1327 <dt><dfn id="rule-text">rule text</dfn></dt>
1328 <dd><p>A text representation of the rule suitable for direct use in a style sheet.
1329 This item is initialized when a rule is created, and may change over the lifetime of the rule.</p></dd>
1331 <dt><dfn id="rule-parent">rule parent</dfn></dt>
1332 <dd><p>An optional reference to another, enclosing <span>CSS rule</span>.
1333 If the rule has an enclosing rule when it is created, then this item is initialized to the enclosing rule; otherwise it is <code>null</code>.
1334 Subsequent to initialization, this item is reset to <code>null</code> if the rule becomes non-enclosed. Once reset to <code>null</code>, it must never change.</p></dd>
1336 <dt><dfn id="rule-style-sheet">rule parent style sheet</dfn></dt>
1337 <dd><p>An optional reference to an associated <span>CSS style sheet</span>.
1338 This item is initialized to reference an associated style sheet when the rule is created. Subsequent to initialization, this item
1339 is reset to <code>null</code> if the rule becomes disassociated from its initial style sheet. Once reset to <code>null</code>, it must never change.</p></dd>
1340 </dl>
1342 <p>In addition to the above state, each <span>CSS rule</span> may be associated
1343 with other state in accordance with its <span>rule type</span>.</p>
1345 <p>To <dfn>parse a CSS rule</dfn> ...</p>
1347 <p class="issue">Should a rule be instantiated in OM if there is a parse error? To
1348 what extent should original (but non-valid) CSS text be captured in cssText?</p>
1350 <p>To <dfn>serialize a CSS rule</dfn>, perform one of the following in accordance with the <span title="rule type">rule's type</span>:</p>
1352 <dl class="switch">
1353 <dt><code>CSSStyleRule</code></dt>
1354 <dd>
1355 <p>The result of concatenating the following:</p>
1356 <ol>
1357 <li>The result of performing <span>serialize a group of selectors</span> on the rule's associated selectors.</li>
1358 <li>The string "<code> { </code>", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B),
1359 followed by a single SPACE (U+0020).</li>
1360 <li>The result of performing <span>serialize a CSS declaration block</span> on the rule's associated declarations.</li>
1361 <li>If the rule is associated with one or more declarations, the string "<code> </code>", i.e., a single SPACE (U+0020).</li>
1362 <li>The string "<code>}</code>", RIGHT CURLY BRACKET (U+007D).
1363 </ol>
1364 </dd>
1366 <dt><code>CSSCharsetRule</code></dt>
1367 <dd>
1368 <p>The result of concatenating the following:</p>
1369 <ol>
1370 <li>The string "<code>@charset</code>" followed by a single SPACE (U+0020).</li>
1371 <li>The result of performing <span>serialize a string</span> on the <span data-anolis-spec=html>preferred MIME name</span> of the rule's encoding.</li>
1372 <li>The string "<code>;</code>", i.e., SEMICOLON (U+003B).
1373 </ol>
1374 <div class="example">
1375 <pre>@charset "UTF-8";</pre>
1376 </div>
1377 </dd>
1379 <dt><code>CSSImportRule</code></dt>
1380 <dd>
1381 <p>The result of concatenating the following:</p>
1382 <ol>
1383 <li>The string "<code>@import</code>" followed by a single SPACE (U+0020).</li>
1384 <li>The result of performing <span>serialize a URL</span> on the rule's location.</li>
1385 <li>If the rule's associated media list is not empty, a single SPACE (U+0020) followed by the
1386 result of performing <span>serialize a media query list</span> on the media list.
1387 <li>The string "<code>;</code>", i.e., SEMICOLON (U+003B).
1388 </ol>
1389 <div class="example">
1390 <pre>@import url("import.css");</pre>
1391 <pre>@import url("print.css") print;</pre>
1392 </div>
1393 </dd>
1395 <dt><code>CSSMediaRule</code></dt>
1396 <dd><p class="issue">...</p></dd>
1398 <dt><code>CSSFontFaceRule</code></dt>
1399 <dd><p class="issue">...</p></dd>
1401 <dt><code>CSSPageRule</code></dt>
1402 <dd><p class="issue">...</p></dd>
1404 <dt><code>CSSNamespaceRule</code></dt>
1405 <dd><p>The literal string "<code>@namespace</code>", followed by a single SPACE
1406 (U+0020), followed by the
1407 <span title="serialize an identifier">identifier escaped</span> value of the
1408 <code title="dom-CSSNamespaceRule-prefix">prefix</code> attribute (if
1409 any), followed by a single SPACE (U+0020) if there is a prefix, followed by the
1410 <span title="serialize a URL">URL escaped</span> value of the
1411 <code title="dom-CSSNamespaceRule-namespaceURI">namespaceURI</code>
1412 attribute, followed the character "<code>;</code>" (U+003B).</p></dd>
1413 </dl>
1415 <!-- ........................................................................................................................ -->
1417 <h4>The <code>CSSRuleList</code> Sequence</h4>
1419 <!--{@idl(CSSRuleList)}-->
1421 <!-- ........................................................................................................................ -->
1423 <h4>The <code>CSSRule</code> Interface</h4>
1425 <!--{@idl(CSSRule)}-->
1427 <!-- ........................................................................................................................ -->
1429 <h4>The <code>CSSStyleRule</code> Interface</h4>
1431 <!--{@idl(CSSStyleRule)}-->
1433 <!-- ........................................................................................................................ -->
1435 <h4>The <code>CSSCharsetRule</code> Interface</h4>
1437 <!--{@idl(CSSCharsetRule)}-->
1439 <!-- ........................................................................................................................ -->
1441 <h4>The <code>CSSImportRule</code> Interface</h4>
1443 <!--{@idl(CSSImportRule)}-->
1445 <!-- ........................................................................................................................ -->
1447 <h4>The <code>CSSMediaRule</code> Interface</h4>
1449 <!--{@idl(CSSMediaRule)}-->
1451 <!-- ........................................................................................................................ -->
1453 <h4>The <code>CSSFontFaceRule</code> Interface</h4>
1455 <!--{@idl(CSSFontFaceRule)}-->
1457 <!-- ........................................................................................................................ -->
1459 <h4>The <code>CSSPageRule</code> Interface</h4>
1461 <!--{@idl(CSSPageRule)}-->
1463 <!-- ........................................................................................................................ -->
1465 <h4>The <code>CSSNamespaceRule</code> Interface</h4>
1467 <!--{@idl(CSSNamespaceRule)}-->
1469 <!-- ........................................................................................................................ -->
1470 <!-- ........................................................................................................................ -->
1472 <h3>CSS Declaration Blocks</h3>
1474 <p>A <dfn>CSS declaration block</dfn> is an ordered collection of CSS
1475 properties with their associated values, also named CSS declarations. In
1476 the DOM a <span>CSS declaration block</span> is a
1477 <code>CSSStyleDeclaration</code> object. A
1478 <span>CSS declaration block</span> has two associated properties:</p>
1480 <dl>
1481 <dt><dfn>CSS declaration block readonly flag</dfn></dt>
1482 <dd><p>Clear if the object can be manipulated. Set if it can not be
1483 manipulated. Unless otherwise stated it is clear.</p></dd>
1485 <dt><dfn>CSS declaration block declarations</dfn></dt>
1486 <dd><p>The CSS declarations associated with the object.</p></dd>
1487 </dl>
1489 <p class="note">The <span>CSS declaration block declarations</span> are
1490 ordered. This matters for the
1491 <code title="dom-CSSStyleDeclaration-item">item()</code> method.</p>
1493 <p>To <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn> ...</p>
1495 <p class="issue">What should be captured in the cssText of a declaration block which fails
1496 to parse?</p>
1498 <p>To <dfn id="serialize-a-css-declaration-block">serialize a CSS declaration block</dfn>
1499 represented by a <code>CSSStyleDeclarations</code> instance named <var>d</var>,
1500 let <var>s</var> be the empty string, then run the steps below:</p>
1502 <ol>
1503 <li><p>If <code><var>d</var>.length</code> is zero (0), then return <var>s</var>.</p></li>
1504 <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>
1505 <ol>
1506 <li><p>Let <var>n</var> be the value returned by <code><var>d</var>.item(<var>i</var>)</code>.</p></li>
1507 <li><p>Let <var>v</var> be the value returned by <code><var>d</var>.getPropertyValue(<var>n</var>)</code>.</p></li>
1508 <li><p>If <var>v</var> is the empty string, then continue.</p></li>
1509 <li><p>Otherwise (<var>v</var> is non-empty), perform the following sub-steps:</p>
1510 <ol>
1511 <li><p>If <var>s</var> is not empty, then append a single SPACE (U+0020) to <var>s</var>.</p></li>
1512 <li><p>Append <var>n</var> to <var>s</var>.</p></li>
1513 <li><p>Append COLON (U+003A) followed by a single SPACE (U+0020), i.e., "<code>: </code>", to <var>s</var>.</p></li>
1514 <li><p>Append <var>v</var> to <var>s</var>.</p></li>
1515 </ol>
1516 </li>
1517 <li><p>Let <var>p</var> be the value returned by <code><var>d</var>.getPropertyPriority(<var>n</var>)</code>.</p></li>
1518 <li><p>If <var>p</var> is not the empty string, then perform the following sub-steps:</p>
1519 <ol>
1520 <li><p>Append a single SPACE (U+0020) followed by EXCLAMATION MARK (U+0021), i.e., "<code> !</code>", to <var>s</var>.</p></li>
1521 <li><p>Append <var>p</var> to <var>s</var>.</p></li>
1522 </ol>
1523 </li>
1524 <li><p>Append SEMICOLON (U+003B), i.e., "<code>;</code>", to <var>s</var>.</p></li>
1525 </ol>
1526 </li>
1527 <li><p>Return <var>s</var>.</p></li>
1528 </ol>
1530 <p class="note">The serialization of an empty CSS declaration block is the empty string.</p>
1532 <p class="note">The serialization of a non-empty CSS declaration block does not include any surrounding whitespace, i.e., no whitepsace appears
1533 before the first property name and no whitespace appears after the final semicolon delimiter that follows the last property value.</p>
1535 <!-- ........................................................................................................................ -->
1537 <h4>The <code>CSSStyleDeclaration</code> Interface</h4>
1539 <!--{@idl(CSSStyleDeclaration)}-->
1541 <hr>
1543 <p>For the table below, the IDL attribute in the first column
1544 must return the result of invoking
1545 <code title="dom-CSSStyleDeclaration-getPropertyValue">getPropertyValue()</code>
1546 with as argument the CSS property given in the second column on the same
1547 row.</p>
1549 <p>Similarly for the table below, setting the IDL attribute in the
1550 first column must invoke
1551 <code title="dom-CSSStyleDeclaration-setProperty">setProperty()</code>
1552 with as first argument the CSS property given in the second column on the
1553 same row, as second argument the given value, and no third argument. Any
1554 exceptions thrown must be re-thrown.</p>
1556 <p class="issue">Restore the entries for the following table or resurrect
1557 CSS2Properties (or similar) or define in general terms using prose or ...</p>
1559 <table>
1560 <thead>
1561 <tr>
1562 <th>IDL attribute
1563 <th>CSS property
1564 <tbody>
1565 <!--CSSOM-DECLARATIONTABLE-->
1566 </table>
1568 <!--
1569 <h4>CSS Properties</h4>
1571 <p>The DOM attribute name of a CSS property can be found by using the
1572 following algorithm:</p>
1574 <ol>
1575 <li>Let <var>r</var> be the CSS property to be
1576 converted.</li>
1578 <li>Uppercase the first character after every U+002D (<code>-</code>) in
1579 <var>r</var>.</li>
1581 <li>Remove every U+002D (<code>-</code>) in <var>r</var>.</li>
1583 <li>Return <var>r</var>.</li>
1584 </ol>
1586 <p class="note">This means that
1587 <code>-<var>vendor</var>-<var>property</var></code>
1588 becomes
1589 <code><var><strong>V</strong>endor</var><var><strong>P</strong>roperty</var></code>
1590 for instance.</p>
1591 -->
1593 <!-- ........................................................................................................................ -->
1594 <!-- ........................................................................................................................ -->
1596 <h3>CSS Values</h3>
1598 <!-- ........................................................................................................................ -->
1600 <h4>Parsing CSS Values</h4>
1602 <p>To <dfn id="parse-a-css-value">parse a CSS value</dfn> for a given
1603 <var>property</var> means to a parse the given value according to
1604 the definition of the property that is an
1605 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
1606 <var>property</var> in the CSS specification. If the given value
1607 is <span>ignored</span> return <code>null</code>. Otherwise return the CSS value for
1608 the given <var>property</var>.</p>
1610 <p class="note">"<code>!important</code>" declarations are not
1611 part of the property value space and will therefore cause
1612 <span>parse a CSS value</span> to return <code>null</code>.</p>
1615 <!-- ........................................................................................................................ -->
1617 <h4>Serializing CSS Values</h4>
1619 <!-- based on http://damowmow.com/playground/canon.txt -->
1621 <p>To <dfn id="serialize-a-css-value">serialize a CSS value</dfn> follow
1622 these rules:</p>
1624 <ul>
1625 <li><p><span title="Serialize a CSS component value">Serialize</span> any
1626 CSS component values in the value.</p></li>
1628 <li><p>Where multiple CSS component values can appear in any order
1629 without changing the meaning of the value (typically represented by a
1630 double bar <code>||</code> in the value syntax), use the order as given
1631 in the syntax.</p></li>
1632 <!-- <code><border-width> <border-style> <color></code>
1633 for <code>border</code> -->
1635 <li>
1636 <p>Where CSS component values of the value can be omitted without
1637 changing the meaning of the value (e.g. initial values in shorthand
1638 properties), omit them. If this would remove all the values, then
1639 include the first allowed value.</p>
1641 <p class="example">E.g. <code>margin: 20px 20px</code> becomes
1642 <code>margin: 20px</code>.</p>
1644 <p class="example">E.g. the value <code>0</code> for the
1645 '<code>border</code>' property.</p>
1646 </li>
1648 <li><p>If the value of a shorthand property is requested and it cannot be
1649 computed because the properties associated with the shorthand have values
1650 that cannot be represented by the shorthand the serialization is the
1651 empty string.</p></li>
1653 <li><p>If a value has a <span>whitespace</span>-separated list of
1654 CSS component values,
1655 <span title="serialize a whitespace-separated list">serialize</span> the
1656 value as a whitespace-separated list.</p></li>
1658 <li><p>If a value has a comma-separated list of
1659 CSS component values,
1660 <span title="serialize a comma-separated list">serialize</span> the
1661 value as a comma-separated list.</p></li>
1662 </ul>
1665 <p>To
1666 <dfn id="serialize-a-css-value-component">serialize a CSS component value</dfn>
1667 depends on the component, as follows:</p>
1669 <dl class="switch">
1670 <dt>keyword</dt>
1671 <dd><p>The keyword
1672 <span data-anolis-spec=dom>converted to ASCII lowercase</span>.</p></dd>
1674 <dt><angle></dt>
1675 <dd><p>The number of degrees serialized as per <number> followed by
1676 the literal string "<code>deg</code>".</p></dd>
1678 <dt><color></dt>
1679 <dd>
1680 <p>If <color> is a component of a resolved or computed value, then
1681 return the color using the <code>rgb()</code> or <code>rgba()</code> functional
1682 notation as follows:</p>
1683 <ol>
1684 <li>If the alpha component of the color is equal to one, then return the serialization of the
1685 <code>rgb()</code> functional equivalent of the opaque color.</li>
1686 <li>If the alpha component of the color is not equal to one, then return the serialization of the
1687 <code>rgba()</code> functional equivalent of the non-opaque color.</li>
1688 </ol>
1689 <p>The serialization of the <code>rgb()</code> functional equivalent is the concatenation of the following:</p>
1690 <ol>
1691 <li>The string "<code>rgb(</code>".</li>
1692 <li>The shortest base-ten integer serialization of the color's red component.</li>
1693 <li>The string "<code>, </code>".</li>
1694 <li>The shortest base-ten serialization of the color's green component.</li>
1695 <li>The string "<code>, </code>".</li>
1696 <li>The shortest base-ten serialization of the color's blue component.</li>
1697 <li>The string "<code>)</code>".</li>
1698 </ol>
1699 <p>The serialization of the <code>rgba()</code> functional equivalent is the concatenation of the following:</p>
1700 <ol>
1701 <li>The string "<code>rgba(</code>".</li>
1702 <li>The shortest base-ten serialization of the color's red component.</li>
1703 <li>The string "<code>, </code>".</li>
1704 <li>The shortest base-ten serialization of the color's green component.</li>
1705 <li>The string "<code>, </code>".</li>
1706 <li>The shortest base-ten serialization of the color's blue component.</li>
1707 <li>The string "<code>, </code>".</li>
1708 <li>The shortest serialization of the <number> that denotes the color's alpha component.</li>
1709 <li>The string "<code>)</code>".</li>
1710 </ol>
1712 <p>In the above rules, the string "<code>, </code>" denotes a COMMA (U+002C) followed by a single SPACE (U+0020).</p>
1714 <p>If <color> is a component of a specified value, then
1715 return the color as follows:</p>
1716 <ol>
1717 <li>If the color was explicitly specified by the author, then return the original, author specified color value.</li>
1718 <li>Otherwise, return the value that would be returned if the color were a component of a computed value.</li>
1719 </ol>
1720 <p class="issue">Should author specified values be normalized for case? Or should original case be preserved?</p>
1721 </dd>
1722 <!--
1723 <dt>It is a system color</dt>
1725 <dd>See below (you use the representation given in the specification that
1726 defines the keyword).</dd>
1728 <dt>Alpha component is equal to 1.0</dt>
1730 <dd>The color is an uppercase six-digit hexadecimal value, prefixed with a
1731 <code>#</code> character (U+0023 NUMBER SIGN), with the first two digits
1732 representing the red component, the next two digits representing the green
1733 component, and the last two digits representing the blue component, the
1734 digits being in the range 0-9 A-F (U+0030 to U+0039 and U+0041 to
1735 U+0046).</dd>
1737 <dt>Alpha component is less than 1.0</dt>
1739 <dd>The color is in the CSS <code>rgba()</code> functional-notation format:
1740 the literal string <code>rgba</code> (U+0072 U+0067 U+0062 U+0061) followed
1741 by a U+0028 LEFT PARENTHESIS, a <span>color component integer</span>
1742 representing the red component, a <span>color component separator</span>, a
1743 <span>color component integer</span> for the green component, a <span>color
1744 component separator</span>, a <span>color component integer</span> for the
1745 blue component, another <span>color component separator</span> a U+0030
1746 DIGIT ZERO, a U+002E FULL STOP (representing the decimal point), one or
1747 more digits in the range 0-9 (U+0030 to U+0039) representing the fractional
1748 part of the alpha value, and finally a U+0029 RIGHT PARENTHESIS.</dd>
1750 <dt>The keyword <code>transparent</code> is used</dt>
1752 <dd>The color is <code>rgba(0, 0, 0, 0)</code>.</dd>
1753 -->
1755 <dt><counter></dt>
1756 <dd>
1757 <p>The concatenation of:</p>
1758 <ol>
1759 <li><p>If <counter> has three CSS component values the string
1760 "<code>counters(</code>".</p></li>
1761 <li><p>If <counter> has two CSS component values the string
1762 "<code>counter(</code>".</p></li>
1763 <li><p>The result of
1764 <span title="serialize a comma-separated list">serializing</span> the
1765 <span title="serialize a CSS component value">serialized</span>
1766 CSS component values belonging to <counter> as list while omitting
1767 the last CSS component value if it is 'decimal'.</p></li>
1768 <li><p>"<code>)</code>" (U+0029).</p></li>
1769 </ol>
1770 </dd>
1772 <dt><frequency></dt>
1773 <dd><p>The frequency in hertz serialized as per <number> followed by
1774 the literal string "<code>hz</code>".</dd>
1776 <dt><identifier></dt>
1777 <dd><p>The identifier
1778 <span title="serialize an identifier">escaped</span>.</p></dd>
1780 <dt><integer></dt>
1781 <dd><p>A base-ten integer using digits 0-9 (U+0030 to U+0039) in the
1782 shortest form possible, preceded by "<code>-</code>" (U+002D) if it is
1783 negative.</p></dd>
1785 <dt><length></dt>
1786 <dd>
1787 <p>A length of zero is represented by the literal string
1788 "<code>0px</code>".</p>
1790 <p>Absolute lengths: the number of millimeters serialized as per
1791 <number> followed by the literal string "<code>mm</code>".</p>
1792 <p class="issue">Rumor has it absolute lengths will become relative
1793 lengths. Centimeters would be compatible with <resolution>...</p>
1795 <p>Relative lengths: the <number> component serialized as per
1796 <number> followed by the unit in its canonical form as defined in its
1797 respective specification.</p>
1798 </dd>
1800 <dt><number></dt>
1801 <dd><p class="issue">Browsers seem to use ToString(), but that might give a
1802 significand which according to some is teh evil (and also currently does
1803 not parse correctly).</p></dd>
1805 <dt><percentage></dt>
1806 <dd><p>The <number> component serialized as per <number> followed
1807 by the literal string "<code>%</code>" (U+0025).</p></dd>
1809 <dt><resolution></dt>
1810 <dd><p>The resolution in dots per centimeter serialized as per
1811 <number> followed by the literal string "<code>dpcm</code>".</dd>
1813 <dt><shape></dt>
1814 <dd><p>The string "<code>rect(</code>", followed by the result
1815 of <span title="serialize a comma-separated list">serializing</span> the
1816 <span title="serialize a CSS component value">serialized</span>
1817 CSS component values belonging to <shape> as list, followed by
1818 "<code>)</code>" (U+0029).</p></dd>
1820 <dt><string></dt>
1821 <dt><family-name></dt>
1822 <dt><specific-voice></dt>
1823 <dd><p>The string
1824 <span title="serialize a string">string escaped</span>.</p></dd>
1826 <dt><time></dt>
1827 <dd><p>The time in seconds serialized as per <number> followed by
1828 the literal string "<code>s</code>".</dd>
1830 <dt><uri></dt>
1831 <dd><p>The <span data-anolis-spec=html>absolute URL</span>
1832 <span title="serialize a URL">URL escaped</span>.</p></dd>
1833 </dl>
1835 <p>
1836 <absolute-size>,
1837 <border-width>,
1838 <border-style>,
1839 <bottom>,
1840 <generic-family>,
1841 <generic-voice>,
1842 <left>,
1843 <margin-width>,
1844 <padding-width>,
1845 <relative-size>,
1846 <right>, and
1847 <top>,
1848 are considered macros by this specification. They all represent instances
1849 of components outlined above.</p>
1851 <p class="issue">One idea is that we can remove this section somewhere in
1852 the CSS3/CSS4 timeline by moving the above definitions to the drafts that
1853 define the CSS components.</p>
1856 <h5>Examples</h5>
1858 <p>Here are some examples of before and after results on specified values.
1859 The before column could be what the author wrote in a style sheet, while
1860 the after column shows what querying the DOM would return.</p>
1862 <div class="example">
1863 <table>
1864 <thead>
1865 <tr><th>Before<th>After
1866 <tbody>
1867 <tr><td><code>background: none</code><td><code>background: rgba(0, 0, 0, 0)</code>
1868 <tr><td><code>outline: none</code><td><code>outline: invert</code>
1869 <tr><td><code>border: none</code><td><code>border: medium</code>
1870 <tr><td><code>list-style: none</code><td><code>list-style: disc</code>
1871 <tr><td><code>margin: 0 1px 1px 1px</code><td><code>margin: 0px 1px 1px</code>
1872 <tr><td><code>azimuth: behind left</code><td><code>azimuth: 220deg</code>
1873 <tr><td><code>font-family: a, 'b"', serif</code><td><code>font-family: "a", "b\"", serif</code>
1874 <tr><td><code>content: url('h)i') '\[\]'</code><td><code>content: url("h)i") "[]"</code>
1875 <tr><td><code>azimuth: leftwards</code><td><code>azimuth: leftwards</code>
1876 <tr><td><code>color: rgb(18, 52, 86)</code><td><code>color: #123456</code>
1877 <tr><td><code>color: rgba(000001, 0, 0, 1)</code><td><code>color: #000000</code>
1878 </table>
1880 <p class="issue">Some of these need to be updated per the new rules.</p>
1881 </div>
1883 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
1885 <h2>DOM Access to CSS Declaration Blocks</h2>
1887 <!-- ........................................................................................................................ -->
1888 <!-- ........................................................................................................................ -->
1890 <h3>The <code>ElementCSSInlineStyle</code> Interface</h3>
1892 <!--{@idl(ElementCSSInlineStyle)}-->
1894 <!-- ........................................................................................................................ -->
1895 <!-- ........................................................................................................................ -->
1897 <h3>Extensions to the <code>Window</code> Interface</h3>
1899 <!--{@idl(Window)}-->
1901 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
1903 <h2>Resolved Values</h2>
1905 <p><code title="dom-Window-getComputedStyle">getComputedStyle()</code> was
1906 historically defined to return the "computed value" of an element or
1907 pseudo-element. However, the concept of "computed value" changed between
1908 revisions of CSS while the implementation of
1909 <code title="dom-Window-getComputedStyle">getComputedStyle()</code> had to
1910 remain the same for compatibility with deployed scripts. To address this
1911 issue this specification introduces the concept of a
1912 <dfn>resolved value</dfn>.</p>
1914 <p>The <span>resolved value</span> for a given property can be determined
1915 as follows:</p>
1917 <dl class="switch">
1918 <!--
1919 We want to treat shorthand properties like any other value basically.
1921 <dt>'<code>background</code>'
1922 <dt>'<code>border</code>'
1923 <dt>'<code>border-collapse</code>'
1924 <dt>'<code>border-color</code>'
1925 <dt>'<code>border-spacing</code>'
1926 <dt>'<code>border-style</code>'
1927 <dt>'<code>border-top</code>'
1928 <dt>'<code>border-right</code>'
1929 <dt>'<code>border-bottom</code>'
1930 <dt>'<code>border-left</code>'
1931 <dt>'<code>border-width</code>'
1932 <dt>'<code>font</code>'
1933 <dt>'<code>list-style</code>'
1934 <dt>'<code>margin</code>'
1935 <dt>'<code>outline</code>'
1936 <!- - overflow is not - ->
1937 <dt>'<code>padding</code>'
1938 <dt>'<code>pause</code>'
1939 <dd>
1940 <p>There is no <span>resolved value</span>.</p>
1941 </dd>
1942 -->
1944 <dt>'<code>line-height</code>'</dt>
1945 <dd><p>The <span>resolved value</span> is the used value.</p></dd>
1947 <dt>'<code>height</code>'</dt>
1948 <dt>'<code>margin</code>'</dt>
1949 <dt>'<code>margin-bottom</code>'</dt>
1950 <dt>'<code>margin-left</code>'</dt>
1951 <dt>'<code>margin-right</code>'</dt>
1952 <dt>'<code>margin-top</code>'</dt>
1953 <dt>'<code>padding</code>'</dt>
1954 <dt>'<code>padding-bottom</code>'</dt>
1955 <dt>'<code>padding-left</code>'</dt>
1956 <dt>'<code>padding-right</code>'</dt>
1957 <dt>'<code>padding-top</code>'</dt>
1958 <dt>'<code>width</code>'</dt>
1959 <dd><p>If the property applies to the element or pseudo-element and the
1960 <span>resolved value</span> of the '<code>display</code>' property is not
1961 <code>none</code>, the <span>resolved value</span> is the
1962 <span>used value</span>. Otherwise the <span>resolved value</span> is the
1963 computed value.</p></dd>
1965 <dt>'<code>bottom</code>'</dt>
1966 <dt>'<code>left</code>'</dt>
1967 <dt>'<code>right</code>'</dt>
1968 <dt>'<code>top</code>'</dt>
1969 <dd><p>If the property applies to a positioned element and the
1970 <span>resolved value</span> of the '<code>display</code>' property is not
1971 <code>none</code>, the <span>resolved value</span> is the
1972 <span>used value</span>. Otherwise the <span>resolved value</span> is the
1973 computed value.</p></dd>
1975 <dt>Any other property</dt>
1976 <dd><p>The <span>resolved value</span> is the computed value.</p></dd>
1977 </dl>
1979 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
1981 <h2 id="iana-considerations">IANA Considerations</h2>
1983 <!-- ........................................................................................................................ -->
1984 <!-- ........................................................................................................................ -->
1986 <h3><dfn title="http-default-style"><code>Default-Style</code></dfn></h3>
1988 <p>This section describes a header field for registration in the Permanent
1989 Message Header Field Registry.
1990 <!--<a href="XXX">[RFC3864]</a>--></p>
1992 <dl>
1993 <dt>Header field name</dt>
1994 <dd>Default-Style</dd>
1995 <dt>Applicable protocol</dt>
1996 <dd>http</dd>
1997 <dt>Status</dt>
1998 <dd>standard</dd>
1999 <dt>Author/Change controller</dt>
2000 <dd>W3C</dd>
2001 <dt>Specification document(s)</dt>
2002 <dd>This document is the relevant specification.</dd>
2003 <dt>Related information</dt>
2004 <dd>None.</dd>
2005 </dl>
2007 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
2009 <h2 class=no-num>References</h2>
2011 <!-- ........................................................................................................................ -->
2012 <!-- ........................................................................................................................ -->
2014 <h3 class=no-num>Normative references</h3>
2015 <div id=anolis-references-normative></div>
2017 <!-- ........................................................................................................................ -->
2018 <!-- ........................................................................................................................ -->
2020 <h3 class=no-num>Informative references</h3>
2021 <div id=anolis-references-informative></div>
2023 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
2025 <h2 class="no-num" id="changes">Change History</h2>
2027 <p>This section documents the primary technical changes of CSSOM related functionality, with a focus on changes to API signatures.</p>
2029 <h3 class="no-num" id="changes-from-dom2">Changes From DOM-2 Style</h3>
2031 <ul>
2032 <li><p>Remove definition of <code>CSSRule.UNKNOWN_RULE</code>, reserving its value (0) to prevent future reuse.</p></li>
2033 <li><p>Remove definition of <code>DOMImplementationCSS</code> interface.</p></li>
2034 </ul>
2036 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
2038 <h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
2040 <p>The editors would like to thank
2042 Alexey Feldgendler,
2043 Björn Höhrmann,
2044 Boris Zbasky,
2045 Brian Kardell,
2046 Christian Krebs,
2047 Daniel Glazman,
2048 David Baron,
2049 <i>fantasai</i>,
2050 Hallvord R. M. Steen,
2051 Ian Hickson,
2052 John Daggett,
2053 Lachlan Hunt,
2054 Morten Stenshorne,
2055 Philip Taylor,
2056 Robert O'Callahan,
2057 Sjoerd Visscher,
2058 Simon Pieters,
2059 Sylvain Galineau,
2060 Tarquin Wilton-Jones, and
2061 Zack Weinberg
2063 for contributing to this specification.</p>
2065 <p>Additional thanks to Ian Hickson for writing the
2066 initial version of the alternative style sheets API and canonicalization
2067 (now serialization) rules for CSS values.</p>
2069 <!-- XXX NOTES
2071 <style type=text/css;charset=utf-8> does create a StyleSheet in Firefox
2072 and Opera, but does not create a StyleSheet in IE. I prefer IE.
2074 <style type=TEXT/CSS> sets the style sheet type to text/css in Firefox and
2075 TEXT/CSS in Opera and IE. I prefer Firefox.
2077 <style> sets the style sheet location to the document location Firefox,
2078 the empty string in IE, and null in Opera. I prefer Opera
2080 <style media="x"> invokes .sheet.media.mediaText = "x"
2082 <style> does not "have" a title
2084 .cascadedStyle that returns less keywords than currentStyle, no inherit,
2085 etc.
2087 Markup style: http://krijnhoetmer.nl/irc-logs/whatwg/20100204#l-529
2088 -->
2089 </body>
2090 </html>
