cssom/cssom-source@f2b03be2c8d5
cssom/cssom-source
Mon, 22 Apr 2013 12:09:10 +0200
- author
- Simon Pieters <simonp@opera.com>
- date
- Mon, 22 Apr 2013 12:09:10 +0200
- changeset 7972
- f2b03be2c8d5
- parent 7971
- abdd9e2238b6
- child 7974
- 8aa80407ee99
- permissions
- -rwxr-xr-x
[cssom] CSSStyleDeclaration properties need [TreatNullAs=EmptyString]; specify cssFloat
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="https://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="https://dvcs.w3.org/hg/csswg/raw-file/tip/cssom/Overview.html">https://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> (<a href="https://www.w3.org/Bugs/Public/buglist.cgi?component=CSSOM&product=CSS&resolution=---">open bugs</a>) <script async="" src="https://w3c-test.org/resources.whatwg.org/file-bug.js"></script></dd>
31 <dd class=dontpublish><a href="irc://irc.w3.org:6665/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="https://dvcs.w3.org/hg/csswg/raw-file/tip/cssom/Overview.html">https://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>
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 <p>The terms <dfn id="set">set</dfn> and <dfn id="clear">clear</dfn> to refer to the <code>true</code> and
194 <code>false</code> values of binary flags or variables, respectively. These terms are also used as verbs in which case they refer to
195 mutating some value to make it <code>true</code> or <code>false</code>, respectively.</p>
197 <!-- ........................................................................................................................ -->
198 <!-- ........................................................................................................................ -->
200 <h3>Common Serializing Idioms</h3>
202 <p>To <dfn>escape a character</dfn> means to create a string of
203 "<code>\</code>" (U+005C), followed by the character.</p>
205 <p>To <dfn>escape a character as code point</dfn> means to create a
206 string of "<code>\</code>" (U+005C), followed by the Unicode code point as
207 the smallest possible number of hexadecimal digits in the range 0-9 a-f
208 (U+0030 to U+0039 and U+0061 to U+0066) to represent the code point in
209 base 16, followed by a single SPACE (U+0020).</p>
211 <p>To <dfn>serialize an identifier</dfn> means to create a string represented
212 by the concatenation of, for each character of the identifier:</p>
214 <ul>
215 <li>If the character is NULL (U+0000), then <span data-anolis-spec=dom title=concept-throw>throw</span> an
216 <code data-anolis-spec=dom>InvalidCharacterError</code> exception and terminate these steps.</li>
217 <li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or
218 [\7f-\9f] (U+007F to U+009F), then the character
219 <span title="escape a character as code point">escaped as code point</span>.</li>
220 <li>If the character is the first character and is in the range [0-9]
221 (U+0030 to U+0039), 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 second character and is in the range [0-9]
224 (U+0030 to U+0039) and the first character is a "<code>-</code>"
225 (U+002D), then the character
226 <span title="escape a character as code point">escaped as code point</span>.</li>
227 <li>If the character is the second character and is "<code>-</code>"
228 (U+002D) and the first character is "<code>-</code>" as well, then the
229 <span title="escape a character">escaped</span> character.</li>
230 <li>If the character is not handled by one of the above rules and is
231 greater than or equal to U+0080, is "<code>-</code>" (U+002D) or
232 "<code>_</code>" (U+005F), or is in one of the ranges [0-9] (U+0030 to
233 U+0039), [A-Z] (U+0041 to U+005A), or [a-z] (U+0061 to U+007A), then the character
234 itself.</li>
235 <li>Otherwise, the <span title="escape a character">escaped</span>
236 character.</li>
237 </ul>
239 <p>To <dfn>serialize a string</dfn> means to create a string represented
240 by '<code>"</code>' (U+0022), followed by the result of applying the rules
241 below to each character of the given string, followed by
242 '<code>"</code>' (U+0022):</p>
244 <ul>
245 <li>If the character is NULL (U+0000), then <span data-anolis-spec=dom title=concept-throw>throw</span> an
246 <code data-anolis-spec=dom>InvalidCharacterError</code> exception and terminate these steps.</li>
247 <li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or [\7f-\9f] (U+007F to
248 U+009F), the character <span title="escape a character as code point">escaped as code point</span>.</li>
249 <li>If the character is '<code>"</code>' (U+0022) or '<code>\</code>'
250 (U+005C), the <span title="escape a character">escaped</span> character.</li>
251 <li>Otherwise, the character itself.</li>
252 </ul>
254 <p class="note">"<code>'</code>" (U+0027) is not escaped because strings
255 are always serialized with '<code>"</code>' (U+0022).</p>
257 <p>To <dfn>serialize a URL</dfn> means to create a string represented by
258 "<code>url(</code>", followed by the
259 <span title="serialize a string">string escaped</span> value of the given
260 string, followed by "<code>)</code>".</p>
262 <p>To <dfn>serialize a comma-separated list</dfn> concatenate all items of
263 the list in list order while separating them by "<code>, </code>", i.e.,
264 COMMA (U+002C) followed by a single SPACE (U+0020).</p>
266 <p>To <dfn>serialize a whitespace-separated list</dfn> concatenate all
267 items of the list in list order while separating them by "<code> </code>", i.e.,
268 a single SPACE (U+0020).</p>
270 <p class="note">When serializing a list according to the above rules,
271 extraneous whitespace is not inserted prior to the first item or subsequent to
272 the last item. Unless otherwise specified, an empty list is serialized as the
273 empty string.</p>
275 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
277 <h2>Media Queries</h2>
279 <p>Media queries are defined by the Media Queries specification. This
280 section defines various concepts around media queries, including their API
281 and serialization form.</p>
283 <!-- XXX ref -->
285 <!-- ........................................................................................................................ -->
286 <!-- ........................................................................................................................ -->
288 <h3>Parsing Media Queries</h3>
290 <p>To
291 <dfn id="parse-a-media-query-list">parse a media query list</dfn> for a
292 given string <var>s</var> into a media query list is defined in
293 the Media Queries specification. Return the list of one or more media
294 queries that the algorithm defined there gives.</p> <!-- XXX ref -->
296 <p class="note">A media query that ends up being "ignored" will turn
297 into "<code>not all</code>".</p>
299 <p>To
300 <dfn id="parse-a-media-query">parse a media query</dfn> for a given string
301 <var>s</var> means to follow the
302 <span>parse a media query list</span> steps and return <code>null</code> if more
303 than one media query is returned or a media query if a
304 single media query is returned.</p>
306 <p class="note">Again, a media query that ends up being "ignored" will
307 turn into "<code>not all</code>".</p>
309 <!-- ........................................................................................................................ -->
311 <h3>Serializing Media Queries</h3>
313 <p>To
314 <dfn id="serialize-a-media-query-list">serialize a media query list</dfn>
315 run these steps:</p>
317 <ol>
318 <li><p>If the media query list is empty return the empty string and
319 terminate these steps.</p></li>
321 <li><p><span title="serialize a media query">Serialize</span> each
322 media query in the list of media queries, sort them in lexicographical
323 order, and then
324 <span title="serialize a comma-separated list">serialize</span> the
325 list.</p></li>
326 </ol>
328 <p>To
329 <dfn id="serialize-a-media-query">serialize a media query</dfn> let
330 <var>s</var> be the empty string, run the steps below, and
331 finally return <var>s</var>:</p>
333 <ol>
334 <li><p>If the media query is negated append "<code>not</code>", followed
335 by a single SPACE (U+0020), to <var>s</var>.</p></li>
337 <li><p>Let <var>type</var> be the media type of the media query,
338 <span title="serialize an identifier">escaped</span> and
339 <span data-anolis-spec=dom>converted to ASCII lowercase</span>.</p></li>
341 <li><p>If the media query does not contain media features append
342 <var>type</var>, to <var>s</var>,
343 then return <var>s</var> and terminate this algorithm.</p></li>
345 <li><p>If <var>type</var> is not "<code>all</code>" or if the
346 media query is negated append <var>type</var>, followed by a
347 single SPACE (U+0020), followed by "<code>and</code>", followed by a single SPACE
348 (U+0020), to <var>s</var>.</p></li>
350 <li><p>Sort the media features in lexicographical order.</p></li>
352 <li>
353 <p>Then, for each media feature:</p>
355 <ol>
356 <li>Append a "<code>(</code>" (U+0028), followed by the media feature
357 name, <span data-anolis-spec=dom>converted to ASCII lowercase</span>,
358 to <var>s</var>.</p></li>
360 <li><p>If a value is given append a "<code>:</code>" (U+003A), followed
361 by a single SPACE (U+0020), followed by the
362 <span title="serialize a media feature value">serialized media feature value</span>,
363 to <var>s</var>.</p></li>
365 <li><p>Append a "<code>)</code>" (U+0029) to
366 <var>s</var>.</p></li>
368 <li><p>If this is not the last media feature append a single SPACE (U+0020),
369 followed by "<code>and</code>", followed by a single SPACE (U+0020), to
370 <var>s</var>.</p></li>
371 </ol>
372 </li>
373 </ol>
375 <div class="example">
376 <p>Here are some examples of input (first column) and output (second
377 column):</p>
379 <table>
380 <thead>
381 <tr><th>Input<th>Output
382 <tbody>
383 <tr>
384 <td><pre>not screen and (min-WIDTH:5px) AND (max-width:40px)</pre>
385 <td><pre>not screen and (max-width: 40px) and (min-width: 5px)</pre>
386 <tr>
387 <td><pre>all and (color) and (color)</pre>
388 <td><pre>(color)</pre>
389 </table>
390 </div>
393 <!-- ........................................................................................................................ -->
395 <h4>Serializing Media Feature Values</h4>
397 <p class="issue">This should probably be done in terms of mapping it to
398 serializing CSS values as media features are defined in terms of CSS
399 values after all.</p>
401 <p>To <dfn id="serialize-a-media-feature-value">serialize a media feature value</dfn>
402 named <var>v</var> locate <var>v</var> in the first
403 column of the table below and use the serialization format described in
404 the second column:</p>
406 <table>
407 <tr>
408 <th>Media Feature
409 <th>Serialization
410 <tr>
411 <td><code>width</code>
412 <td>...
413 <tr>
414 <td><code>height</code>
415 <td>...
416 <tr>
417 <td><code>device-width</code>
418 <td>...
419 <tr>
420 <td><code>device-height</code>
421 <td>...
422 <tr>
423 <td><code>orientation</code>
424 <td>
425 <p>If the value is `<code>portrait</code>`: "<code>portrait</code>".</p>
426 <p>If the value is `<code>landscape</code>`: "<code>landscape</code>".</p>
427 <tr>
428 <td><code>aspect-ratio</code>
429 <td>...
430 <tr>
431 <td><code>device-aspect-ratio</code>
432 <td>...
433 <tr>
434 <td><code>color</code>
435 <td>...
436 <tr>
437 <td><code>color-index</code>
438 <td>...
439 <tr>
440 <td><code>monochrome</code>
441 <td>...
442 <tr>
443 <td><code>resolution</code>
444 <td>...
445 <tr>
446 <td><code>scan</code>
447 <td>
448 <p>If the value is `<code>progressive</code>`: "<code>progressive</code>".</p>
449 <p>If the value is `<code>interlace</code>`: "<code>interlace</code>".</p>
450 <tr>
451 <td><code>grid</code>
452 <td>...
453 </table>
455 <p>Other specifications can extend this table and vendor-prefixed media
456 features can have custom serialization formats as well.</p>
458 <!-- ........................................................................................................................ -->
459 <!-- ........................................................................................................................ -->
461 <h3>Comparing Media Queries</h3>
463 <p>To
464 <dfn id="compare-media-queries">compare media queries</dfn>
465 <var>m1</var> and <var>m2</var> means to
466 <span title="serialize a media query">serialize</span> them both and
467 return true if they are a
468 <span data-anolis-spec=dom>case-sensitive</span> match and false if they
469 are not.</p>
471 <!-- ........................................................................................................................ -->
472 <!-- ........................................................................................................................ -->
474 <h3>The <code>MediaList</code> Interface</h3>
476 <!--{@idl(MediaList)}-->
478 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
480 <h2>Selectors</h2>
482 <p>Selectors are defined in the Selectors specification. This section
483 mainly defines how to serialize them.</p> <!-- XXX ref -->
485 <!-- XXX ref universal selector etc? some are in <span> some not -->
487 <!-- ........................................................................................................................ -->
488 <!-- ........................................................................................................................ -->
490 <h3>Parsing Selectors</h3>
492 <p>To
493 <dfn id="parse-a-group-of-selectors">parse a group of selectors</dfn>
494 means to parse the value using the <code>selectors_group</code>
495 production defined in the Selectors specification and return either a
496 group of selectors if parsing did not fail or <code>null</code> if parsing did
497 fail.</p> <!-- XXX ref -->
499 <!-- ........................................................................................................................ -->
500 <!-- ........................................................................................................................ -->
502 <h3>Serializing Selectors</h3>
503 <!-- http://dump.testsuite.org/2009/cssom/serializing-selectors.htm -->
505 <p>To
506 <dfn id="serialize-a-group-of-selectors">serialize a group of selectors</dfn>
507 <span title="serialize a selector">serialize</span> each selector in the
508 group of selectors and then
509 <span title="serialize a comma-separated list">serialize</span> the
510 group.</p>
512 <p>To <dfn id="serialize-a-selector">serialize a selector</dfn> let
513 <var>s</var> be the empty string, run the steps below for each
514 part of the chain of the selector, and finally return
515 <var>s</var>:</p>
517 <ol>
518 <li><p>If there is only one <span>simple selector</span> in the
519 <span>sequence of simple selectors</span> which is a
520 <span>universal selector</span>, append the result of
521 <span title="serialize a simple selector">serializing</span> the
522 <span>universal selector</span> to <var>s</var>.</p></li>
524 <li><p>Otherwise, for each <span>simple selector</span> in the
525 <span>sequence of simple selectors</span> that is not a
526 universal selector of which the <span>namespace prefix</span> maps to
527 the null namespace (not in a namespace) or of which the
528 <span>namespace prefix</span> maps to a namespace that is not the
529 <span>default namespace</span>
530 <span title="serialize a simple selector">serialize</span> the
531 <span>simple selector</span> and append the result to
532 <var>s</var>.</p></li>
534 <li><p>If this is not the last part of the chain of the selector append a
535 single SPACE (U+0020), followed by the combinator
536 "<code>></code>",
537 "<code>+</code>", or
538 "<code>~</code>"
539 as appropriate, followed by another single SPACE (U+0020) if the combinator was
540 not whitespace, to <var>s</var>.</p></li>
542 <li><p>If this is the last part of the chain of the selector and there is
543 a pseudo-element, append "<code>::</code>" followed by the name of the
544 pseudo-class, to <var>s</var>.</p></li>
545 </ol>
548 <p>To
549 <dfn id="serialize-a-simple-selector">serialize a simple selector</dfn>
550 let <var>s</var> be the empty string, run the steps below, and
551 finally return <var>s</var>:</p>
553 <dl class="switch">
554 <dt>type selector</dt>
555 <dt>universal selector</dt>
556 <dd>
557 <ol>
558 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
559 not the <span>default namespace</span> and is not the
560 null namespace (not in a namespace) append the
561 <span title="serialize an identifier">escaped</span>
562 <span>namespace prefix</span>, followed by a "<code>|</code>" (U+007C)
563 to <var>s</var>.</p></li>
565 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
566 the null namespace (not in a namespace) append
567 "<code>|</code>" (U+007C) to <var>s</var>.</p></li>
568 <!-- This includes |* -->
570 <li><p>If this is a type selector append the
571 <span title="serialize an identifier">escaped</span> element name to
572 <var>s</var>.</p></li>
574 <li><p>If this is a universal selector append "<code>*</code>" (U+002A)
575 to <var>s</var>.</p></li>
576 </ol>
577 </dd>
579 <dt>attribute selector</dt>
580 <dd>
581 <ol>
582 <li><p>Append "<code>[</code>" (U+005B) to
583 <var>s</var>.</p></li>
585 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
586 not the null namespace (not in a namespace) append the
587 <span title="serialize an identifier">escaped</span>
588 <span>namespace prefix</span>, followed by a "<code>|</code>" (U+007C)
589 to <var>s</var>.</p></li>
591 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
592 the null namespace (not in a namespace) append
593 "<code>|</code>" (U+007C) to <var>s</var>.</p></li>
594 <!-- This includes |* -->
596 <li><p>Append the <span title="serialize an identifier">escaped</span>
597 attribute name to <var>s</var>.</p></li>
599 <li><p>If there is an attribute value specified, append
600 "<code>=</code>",
601 "<code>~=</code>",
602 "<code>|=</code>",
603 "<code>^=</code>",
604 "<code>$=</code>", or
605 "<code>*=</code>"
606 as appropriate (depending on the type of attribute selector), followed
607 by the <span title="serialize a string">string escaped</span>
608 attribute value, to <var>s</var>.</p></li>
610 <li><p>Append "<code>]</code>" (U+005D) to
611 <var>s</vaR>.</p></li>
612 </ol>
613 </dd>
615 <dt>class selector</dt>
616 <dd><p>Append a "<code>.</code>" (U+002E), followed by the
617 <span title="serialize an identifier">escaped</span> class name to
618 <var>s</var>.</p></dd>
620 <dt>ID selector</dt>
621 <dd><p>Append a "<code>#</code>" (U+0023), followed by the
622 <span title="serialize an identifier">escaped</span> ID to
623 <var>s</var>.</p></dd>
625 <dt>pseudo-class</dt>
626 <dd>
627 <p>If the pseudo-class does not accept arguments append
628 "<code>:</code>" (U+003A), followed by the name of the pseudo-class, to
629 <var>s</var>.</p>
631 <p>Otherwise, append "<code>:</code>" (U+003A), followed by the name of
632 the pseudo-class, followed by "<code>(</code>" (U+0028), followed by the
633 value of the pseudo-class argument determined as per below, followed by
634 "<code>)</code>" (U+0029), to <var>s</var>.</p>
636 <dl class="switch">
637 <dt><code>:lang()</code></dt>
638 <dd><p>The <span title="serialize an identifier">escaped</span>
639 value.</p></dd>
641 <dt><code>:nth-child()</code></dt>
642 <dt><code>:nth-last-child()</code></dt>
643 <dt><code>:nth-of-type()</code></dt>
644 <dt><code>:nth-last-of-type()</code></dt>
645 <dd>
646 <ol>
647 <li><p>If the value is odd let the value be
648 "<code>2n+1</code>".</p></li>
650 <li><p>If the value is even let the value be
651 "<code>2n</code>".</p></li>
653 <li><p>If <var>a</var> is zero let the value be
654 <var>b</var>
655 <span title="serialize a CSS component value">serialized</span> as <integer>.</p></li>
657 <li><p>If <var>a</var> is one or minus one and
658 <var>b</var> is zero let the value be
659 "<code>n</code>" (U+006E).</p></li>
661 <li><p>If <var>a</var> is one or minus one let the value be
662 "<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>
667 <li><p>If <var>b</var> is zero let the value be
668 <var>a</var>
669 <span title="serialize a CSS component value">serialized</span> as <integer>,
670 followed by "<code>n</code>" (U+006E).</p></li>
672 <li><p>Otherwise let the value be
673 <var>a</var>
674 <span title="serialize a CSS component value">serialized</span> as <integer>,
675 followed by "<code>n</code>" (U+006E), followed by
676 "<code>+</code>" (U+002B) if <var>b</var> is positive,
677 followed by <var>b</var>
678 <span title="serialize a CSS component value">serialized</span> as <integer>.</p></li>
679 </ol>
680 </dd>
682 <dt><code>:not()</code></dt>
683 <dd><p>The result of serializing the value using the rules for
684 <span title="serialize a group of selectors">serializing a group of selectors</span>.</p></dd>
685 </dl>
686 </dd>
687 </dl>
689 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
691 <h2>CSS</h2>
693 <!-- ........................................................................................................................ -->
694 <!-- ........................................................................................................................ -->
696 <h3>CSS Style Sheets</h3>
698 <!-- XXX
699 element inserted into the DOM, style sheet created, element removed from
700 the DOM, what happens to StyleSheet?
701 -->
703 <p>A <dfn id="css-style-sheet">CSS style sheet</dfn> is an abstract concept that
704 represents a style sheet as defined by the CSS specification. In the CSSOM a
705 <span>CSS style sheet</span> is represented as a <code>CSSStyleSheet</code> object. A
706 <span>CSS style sheet</span> has a number of associated state items:</p>
708 <dl>
709 <dt><dfn id="style-sheet-type">style sheet type</dfn></dt>
710 <dd><p>The literal string "<code>text/css</code>".</p></dd>
712 <dt><dfn id="style-sheet-location">style sheet location</dfn></dt>
713 <dd><p>The <span data-anolis-spec=html>URL</span> of the
714 <span>style sheet</span> or <code>null</code> if the <span>style sheet</span> was
715 embedded.</p></dd>
717 <dt><dfn id="style-sheet-parent">style sheet parent</dfn></dt>
718 <dd><p>The <span>style sheet</span> that is the parent of the
719 <span>style sheet</span> or <code>null</code> if there is no associated parent.</p></dd>
721 <dt><dfn id="style-sheet-owner-node">style sheet owner node</dfn></dt>
722 <dd><p>The DOM node associated with the <span>style sheet</span> or
723 <code>null</code> if there is no associated DOM node.</p></dd>
725 <dt><dfn id="style-sheet-owner-css-rule">style sheet owner CSS rule</dfn></dt>
726 <dd><p>The <span>CSS rule</span> in the <span>style sheet parent</span>
727 that caused the inclusion of the <span>style sheet</span> or <code>null</code> if
728 there is no associated rule.</p></dd>
730 <dt><dfn id="style-sheet-media">style sheet media</dfn></dt>
731 <dd>
732 <p>The <code>MediaList</code> object associated with the
733 <span>style sheet</span>.</p>
735 <p>If this property is set to a string run the
736 <span>create a <code>MediaList</code> object</span> steps for that
737 string and associate the returned object with the
738 <span>style sheet</span>.</p>
739 </dd>
741 <dt><dfn id="style-sheet-title">style sheet title</dfn></dt>
742 <dd>
743 <p>The title of the <span>style sheet</span> or <code>null</code> if no title
744 is specified or is the empty string, in which case the title is referred to
745 as an empty title.</p>
747 <div class="example">
748 <p>In the following, the <span>style sheet title</span> is non-empty
749 for the first style sheet, but is empty for the second and third style sheets.</p>
750 <pre><style title="papaya whip">
751 body { background: #ffefd5; }
752 </style></pre>
753 <pre><style title="">
754 body { background: orange; }
755 </style></pre>
756 <pre><style>
757 body { background: brown; }
758 </style></pre>
759 </div>
760 </dd>
762 <dt><dfn id="style-sheet-alternate-flag">style sheet alternate flag</dfn></dt>
763 <dd>
764 <p>Either set or clear. Clear by default.</p>
766 <div class="example">
767 <p>The following <span title="style sheet">style sheets</span> have
768 their <span>style sheet alternate flag</span> set:</p>
770 <pre><?xml-stylesheet alternate="yes" title="x" href="data:text/css,…"?></pre>
772 <pre><link rel="alternate stylesheet" title="x" href="data:text/css,…"></pre>
773 </div>
774 </dd>
776 <dt><dfn id="style-sheet-disabled-flag">style sheet disabled flag</dfn></dt>
777 <dd>
778 <p>Either set or clear. Clear by default.</p>
780 <p class="note">Even when clear it does not necessarily mean that the
781 <span>style sheet</span> is actually used for rendering.</p>
782 </dd>
785 <dt><dfn id="style-sheet-css-rules">style sheet CSS rules</dfn></dt>
786 <dd><p>The <span title="CSS rule">CSS rules</span> associated with the
787 <span>style sheet</span>.</p></dd>
788 </dl>
790 <p>When you are to <span>create a style sheet</span> the above properties,
791 with the exception of <span>style sheet type</span> and
792 <span>style sheet CSS rules</span>, are to be set to
793 their proper values.</p>
795 <!-- same-origin restrictions -->
797 <!-- ........................................................................................................................ -->
799 <h4>The <code>StyleSheet</code> Interface</h4>
801 <!--{@idl(StyleSheet)}-->
803 <!-- ........................................................................................................................ -->
805 <h4>The <code>CSSStyleSheet</code> Interface</h4>
807 <!--{@idl(CSSStyleSheet)}-->
809 <!-- ........................................................................................................................ -->
810 <!-- ........................................................................................................................ -->
812 <h3>Style Sheet Collections</h3>
814 <p>Below various new concepts are defined that are associated with each
815 <code data-anolis-spec=dom>Document</code> object.</p>
817 <p>Each <code data-anolis-spec=dom>Document</code> has an associated list of zero or more
818 <span title="style sheet">style sheets</span>, named the
819 <dfn id="document-style-sheets">document style sheets</dfn>. This is
820 an ordered list that contains all
821 <span title="style sheet">style sheets</span> associated with the
822 <code data-anolis-spec=dom>Document</code>, in
823 <span data-anolis-spec=dom title=concept-tree-order>tree order</span>, with
824 <span title="style sheet">style sheets</span> created from HTTP
825 <code title="http-link">Link</code> headers first, if any, in header
826 order.</p>
828 <p>To <dfn id="create-a-style-sheet">create a style sheet</dfn>, run these
829 steps:</p>
831 <ol>
832 <li><p>Create a new <span>style sheet</span> object and set its
833 properties as specified.</p></li>
835 <li><p>Then run the <span>add a style sheet</span> steps for the newly
836 created <span>style sheet</span>.</p></li>
837 </ol>
839 <p>To <dfn id="add-a-style-sheet">add a style sheet</dfn>, run these
840 steps:</p>
842 <ol>
843 <li><p>Add the <span>style sheet</span> to the list of
844 <span>document style sheets</span> at the appropriate location. The
845 remainder of these steps deal with the
846 <span>style sheet disabled flag</span>.</p></li>
848 <li><p>If the <span>style sheet disabled flag</span> is set, terminate
849 these steps.</p></li>
851 <li><p>If the <span>style sheet title</span> is non-empty, the
852 <span>style sheet alternate flag</span> is clear, and
853 <span>preferred style sheet set name</span> is the empty string
854 <span>change the preferred style sheet set name</span> to the
855 <span>style sheet title</span>.</p></li>
857 <li>
858 <p>If any of the following is true clear the
859 <span>style sheet disabled flag</span> and terminate these steps:
861 <ul>
862 <li><p>The <span>style sheet title</span> is empty.</p></li>
863 <li><p>The <span>last style sheet set name</span> is <code>null</code> and the
864 <span>style sheet title</span> is a
865 <span data-anolis-spec=dom>case-sensitive</span> match
866 for the <span>preferred style sheet set name</span>.</p></li>
867 <li><p>The <span>style sheet title</span> is a
868 <span data-anolis-spec=dom>case-sensitive</span> match for the
869 <span>last style sheet set name</span>.</p></li>
870 </ul>
871 </li>
873 <li><p>Set the <span>style sheet disabled flag</span>.</li>
874 </ol>
876 <p>A <dfn id="persistent-style-sheet">persistent style sheet</dfn> is a
877 <span>style sheet</span> from the <span>document style sheets</span>
878 whose <span>style sheet title</span> is the empty string and whose
879 <span>style sheet alternate flag</span> is clear.</p>
881 <p>A <dfn id="style-sheet-set">style sheet set</dfn> is an ordered
882 collection of one or more <span title="style sheet">style sheets</span>
883 from the <span>document style sheets</span> which have an identical
884 <span>style sheet title</span> that is not the empty string.</p>
886 <p>A <dfn id="style-sheet-set-name">style sheet set name</dfn> is the
887 <span>style sheet title</span> the <span>style sheet set</span> has in
888 common.</p>
890 <p>An <dfn id="enabled-style-sheet-set">enabled style sheet set</dfn> is a
891 <span>style sheet set</span> of which each <span>style sheet</span> has
892 its <span>style sheet disabled flag</span> clear.</p>
894 <p>To <dfn id="enable-a-style-sheet-set">enable a style sheet set</dfn>
895 with name <var>name</var>, run these steps:</p>
897 <ol>
898 <li><p>If <var>name</var> is the empty string, set the
899 <span>style sheet disabled flag</span> for each <span>style sheet</span>
900 that is in a <span>style sheet set</span> and terminate these steps.</li>
902 <li><p>Clear the <span>style sheet disabled flag</span> for each
903 <span>style sheet</span> in a <span>style sheet set</span> whose
904 <span>style sheet set name</span> is a
905 <span data-anolis-spec=dom>case-sensitive</span> match for
906 <var>name</var> and set it for all other
907 <span title="style sheet">style sheets</span> in a
908 <span>style sheet set</span>.</p></li>
909 </ol>
911 <p>To <dfn id="select-a-style-sheet-set">select a style sheet set</dfn>
912 with name <var>name</var>, run these steps:</p>
914 <ol>
915 <li><p><span>Enable a style sheet set</span> with name
916 <var>name</var>.</p></li>
918 <li><p>Set <span>last style sheet set name</span> to
919 <var>name</var>.</p></li>
920 </ol>
922 <p>A <dfn id="last-style-sheet-set-name">last style sheet set name</dfn>
923 is a concept to determine what <span>style sheet set</span> was last
924 <span title="select a style sheet set">selected</span>. Initially its
925 value is <code>null</code>.</p>
927 <p>A
928 <dfn id="preferred-style-sheet-set-name">preferred style sheet set name</dfn>
929 is a concept to determine which
930 <span title="style sheet">style sheets</span> need to have their
931 <span>style sheet disabled flag</span> clear. Initially its value
932 is the empty string.
934 <p>To
935 <dfn id="change-the-preferred-style-sheet-set-name">change the preferred style sheet set name</dfn>
936 with name <var>name</var>, run these steps:</p>
938 <ol>
939 <li><p>Let <var>current</var> be the <span>preferred style sheet set name</span>.</p></li>
941 <li><p>Set <span>preferred style sheet set name</span> to
942 <var>name</var>.</p></li>
944 <li><p>If <var>name</var> is not a
945 <span data-anolis-spec=dom>case-sensitive</span> match for
946 <var>current</var> and
947 <span>last style sheet set name</span> is <code>null</code>
948 <span>enable a style sheet set</span> with name
949 <var>name</var>.</p></li>
950 </ol>
952 <!-- XXX ought to define "applied"
954 thoughts:
955 depends on disabled flag, alternate flag, media queries, sheesh
956 -->
958 <!-- ........................................................................................................................ -->
960 <h4>The HTTP <code>Default-Style</code> Header</h4>
962 <p>The HTTP <code title="http-default-style">Default-Style</code> header
963 can be used to set the <span>preferred style sheet set name</span>
964 influencing which <span>style sheet set</span> is (initially) the
965 <span>enabled style sheet set</span>.</p>
967 <p>For each HTTP <code title="http-default-style">Default-Style</code>
968 header, in header order, the user agent must
969 <span>change the preferred style sheet set name</span> with name being the
970 value of the header.</p>
972 <!-- ........................................................................................................................ -->
974 <h4>The <code>StyleSheetList</code> Sequence</h4>
976 <!--{@idl(StyleSheetList)}-->
978 <!-- ........................................................................................................................ -->
980 <h4>Extensions to the <code>Document</code> Interface</h4>
982 <!--{@idl(Document)}-->
984 <!-- ........................................................................................................................ -->
986 <h4>Interaction with the User Interface</h4>
988 <p>The user interface of Web browsers that support style sheets
989 should list the style sheet titles given in the
990 <code title="dom-Document-styleSheetSets">styleSheetSets</code> list,
991 showing the
992 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
993 as the selected style sheet set, leaving none selected if it is
994 <code>null</code> or the empty string, and selecting an extra option
995 "Basic Page Style" (or similar) if it is the empty string and the
996 <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
997 is the empty string as well.</p>
999 <p>Selecting a style sheet from this list should
1000 use the <span>select a style sheet set</span> set of steps. This
1001 (by definition) affects the
1002 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
1003 attribute.</p>
1005 <h5>Persisting the selected style sheet set</h5>
1007 <p>If a user agent persist the selected style sheet set, they should use
1008 the value of the
1009 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
1010 attribute, or if that is <code>null</code>, the
1011 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
1012 attribute, when leaving the page (or at some other time) to determine the
1013 set name to store. If that is <code>null</code> then the style sheet set should not be
1014 persisted.</p>
1016 <p>When re-setting the style sheet set to the persisted value (which can
1017 happen at any time, typically at the first time the style sheets are
1018 needed for styling the document, after the <code><head></code> of
1019 the document has been parsed, after any scripts that are not dependent on
1020 computed style have executed), the style sheet set
1021 should be set by using the
1022 <span>select a style sheet set</span> set of steps as if the user had
1023 selected the set manually.</p>
1025 <p class="note">This specification does not give any suggestions on
1026 how user agents should decide to persist the style sheet set or whether or
1027 how to persist the selected set across pages.</p>
1029 <!-- XXX this UI section suggests we may want to introduce a few more
1030 idioms -->
1032 <!-- ........................................................................................................................ -->
1034 <h4>Examples</h4>
1036 <div class="example">
1037 <p>Thus, in the following HTML snippet:</p>
1039 <pre><link rel="alternate stylesheet" title="foo" href="a">
1040 <link rel="alternate stylesheet" title="bar" href="b">
1041 <script>
1042 document.selectedStyleSheetSet = 'foo';
1043 document.styleSheets[1].disabled = false;
1044 </script>
1045 <link rel="alternate stylesheet" title="foo" href="c">
1046 <link rel="alternate stylesheet" title="bar" href="d"></pre>
1048 <p>...the style sheets that end up enabled are style sheets "a", "b",
1049 and "c", the
1050 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
1051 attribute would return <code>null</code>,
1052 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
1053 would return "foo", and
1054 <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
1055 would return the empty string.</p>
1057 <p>Similarly, in the following HTML snippet:</p>
1059 <pre><link rel="alternate stylesheet" title="foo" href="a">
1060 <link rel="alternate stylesheet" title="bar" href="b">
1061 <script>
1062 var before = document.preferredStyleSheetSet;
1063 document.styleSheets[1].disabled = false;
1064 </script>
1065 <link rel="stylesheet" title="foo" href="c">
1066 <link rel="alternate stylesheet" title="bar" href="d">
1067 <script>
1068 var after = document.preferredStyleSheetSet;
1069 </script></pre>
1071 <p>...the "before" variable will be equal to the empty string, the
1072 "after" variable will be equal to "foo", and style sheets "a" and "c"
1073 will be enabled. This is the case even though the first script block
1074 sets style sheet "b" to be enabled, because upon parsing the
1075 following <code><link></code> element, the
1076 <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
1077 is set and the
1078 <code title="dom-Document-enableStyleSheetsForSet">enableStyleSheetsForSet()</code>
1079 method is called (since
1080 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
1081 was never set
1082 explicitly, leaving
1083 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code> at
1084 <code>null</code> throughout), which changes which style sheets are enabled and which
1085 are not.</p>
1086 </div>
1088 <!-- ........................................................................................................................ -->
1089 <!-- ........................................................................................................................ -->
1091 <h3>Style Sheet Association</h3>
1093 <p>This section defines the interface a
1094 <span>style sheet owner node</span> of a <span>style sheet</span> has to
1095 implement and defines the requirements for
1096 <span data-anolis-spec=xmlss title="xml-stylesheet processing instruction">xml-stylesheet processing instructions</span>
1097 and HTTP <code title="http-link">Link</code> headers when the link
1098 relation type is an
1099 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
1100 "<code>stylesheet</code>" since nobody else was interested in
1101 defining this.</p>
1103 <p class=note>The editor is in good hope that HTML and SVG will define the
1104 appropriate processing in their respective specifications, in terms of
1105 this specification, in due course.</p>
1108 <!-- ........................................................................................................................ -->
1110 <h4>The <code>LinkStyle</code> Interface</h4>
1112 <!--{@idl(LinkStyle)}-->
1114 <div class="example">
1115 <p>In the following fragment, the first <code>style</code>
1116 element has a <code>sheet</code> attribute that returns a
1117 <code>StyleSheet</code> object representing the style sheet, but for
1118 the second <code>style</code> element, the <code>style</code> attribute returns <code>null</code>,
1119 assuming the user agent supports CSS (<code>text/css</code>), but does
1120 not support the (hypothetical) ExampleSheets (<code>text/example-sheets</code>).</p>
1122 <pre><style type="text/css">
1123 body { background:lime }
1124 </style></pre>
1125 <pre><style type="text/example-sheets">
1126 $(body).background := lime
1127 </style></pre>
1128 </div>
1130 <p class="note">Whether or not the node refers to a style sheet is defined
1131 by the specification that defines the semantics of said node.</p>
1133 <!-- ........................................................................................................................ -->
1135 <h4>Requirements on specifications</h4>
1137 <p>Specifications introducing new ways of associating style sheets through
1138 the DOM should define which nodes implement the
1139 <code>LinkStyle</code> interface. When doing so, they
1140 must also define when a <span>style sheet</span> is
1141 <span title="create a style sheet">created</span>.</p>
1146 <!-- ........................................................................................................................ -->
1148 <h4>Requirements on User Agents Implementing the
1149 <span><code>xml-stylesheet</code> processing instruction</span></h4>
1151 <!-- XXX load/error events, reparse -->
1153 <!--{@idl(ProcessingInstruction)}-->
1155 <!--
1156 <pre class="idl"><span data-anolis-spec=dom>ProcessingInstruction</span> implements <span>LinkStyle</span>;</pre>
1157 -->
1159 <p>For each
1160 <span data-anolis-spec=xmlss><code>xml-stylesheet</code> processing instruction</span>
1161 that is not part of the
1162 <span data-anolis-spec=xml>document type declaration</span> and has an
1163 <code>href</code>
1164 <span data-anolis-spec=xmlss>pseudo-attribute</span> these steps must
1165 (unless otherwise stated) be run:</p>
1167 <ol>
1168 <li><p>Let <var>title</var> be the value of the
1169 <code>title</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> or the empty string if the
1170 <code>title</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> is not specified.</p></li>
1172 <li><p>If there is an <code>alternate</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>
1173 whose value is a <span data-anolis-spec=dom>case-sensitive</span> match
1174 for "<code>yes</code>" and <var>title</var> is the
1175 empty string terminate these steps.</p></li>
1177 <li><p>If there is a <code>type</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> whose
1178 value is not a <span>supported styling language</span> the user agent
1179 may terminate these steps.</p></li>
1181 <li><p><span data-anolis-spec=html title="Resolve a URL">Resolve</span>
1182 the <span data-anolis-spec=html>URL</span> specified by the
1183 <code>href</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> and then
1184 <span data-anolis-spec=html>fetch</span> it.</p></li>
1186 <li>
1187 <p>When the resource is available, the document is in
1188 <span data-anolis-spec=html>quirks mode</span>
1189 and the
1190 <span data-anolis-spec=html title="content-type">Content-Type metadata</span> of
1191 the resource is not a <span>supported styling language</span> change the
1192 <span data-anolis-spec=html title="content-type">Content-Type metadata</span> of the resource
1193 to <code>text/css</code>.</p>
1195 <p class="note">This step might never actually happen, but is included
1196 here in case other specifications change, to keep things consistent.</p>
1197 </li>
1199 <li><p>If the resource is not in a
1200 <span>supported styling language</span> terminate these steps.</p></li>
1202 <li>
1203 <p><span>Create a style sheet</span> with the following properties:</p>
1205 <dl>
1206 <dt><span>style sheet location</span></dt>
1207 <dd><p>The <span data-anolis-spec=html>absolute URL</span> of the
1208 resource.</p></dd>
1210 <dt><span>style sheet parent</span></dt>
1211 <dd><p><code>null</code></p></dd>
1213 <dt><span>style sheet owner node</span></dt>
1214 <dd><p>The node.</p></dd>
1216 <dt><span>style sheet owner CSS rule</span></dt>
1217 <dd><p><code>null</code></p></dd>
1219 <dt><span>style sheet media</span></dt>
1220 <dd><p>The value of the <code>media</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>
1221 if any, or the empty string otherwise.</p></dd>
1223 <dt><span>style sheet title</span></dt>
1224 <dd><p><var>title</var></p></dd>
1226 <dt><span>style sheet alternate flag</span></dt>
1227 <dd><p>Set if the <code>alternate</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>
1228 value is a <span data-anolis-spec=dom>case-sensitive</span> match for
1229 "<code>yes</code>", or clear otherwise.
1230 </dl>
1231 </li>
1232 </ol>
1236 <!-- ........................................................................................................................ -->
1238 <h4>Requirements on User Agents Implementing the HTTP
1239 <code>Link</code> Header</h4>
1241 <!-- XXX ref, one day -->
1243 <!-- XXX deal with media param -->
1245 <p>For each HTTP <code title="http-link">Link</code> header of which one
1246 of the link relation types is an
1247 <span data-anolis-spec=dom>ASCII case-insensitive</span> match
1248 for "<code>stylesheet</code>" these steps
1249 must be run:</p>
1251 <ol>
1252 <li><p>Let <var>title</var> be the value of the first of all the
1253 <code>title</code> and <code>title*</code> parameters.
1254 If there are no such parameters it is the empty string.</p></li>
1256 <li><p>If one of the (other) link relation types is an
1257 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
1258 "<code>alternate</code>" and <var>title</var> is the
1259 empty string terminate these steps.</p></li>
1261 <li><p><span data-anolis-spec=html title="Resolve a URL">Resolve</span>
1262 the specified <span data-anolis-spec=html>URL</span> and
1263 <span data-anolis-spec=html>fetch</span> it.</p></li>
1265 <li><p>When the resource is available, the document is in
1266 <span data-anolis-spec=html>quirks mode</span>
1267 and the <span data-anolis-spec=html title="content-type">Content-Type metadata</span> of
1268 the resource is not a <span>supported styling language</span> change the
1269 <span data-anolis-spec=html title="content-type">Content-Type metadata</span> of the resource
1270 to <code>text/css</code>.</p></li>
1272 <li><p>If the resource is not in a
1273 <span>supported styling language</span> terminate these steps.</p></li>
1275 <li>
1276 <p><span>Create a style sheet</span> with the following properties:</p>
1278 <dl>
1279 <dt><span>style sheet location</span></dt>
1280 <dd><p>The <span data-anolis-spec=html>absolute URL</span> of the
1281 resource.</p></dd>
1283 <dt><span>style sheet owner node</span></dt>
1284 <dd><p><code>null</code></p></dd>
1286 <dt><span>style sheet parent</span></dt>
1287 <dd><p><code>null</code></p></dd>
1289 <dt><span>style sheet owner CSS rule</span></dt>
1290 <dd><p><code>null</code></p></dd>
1292 <dt><span>style sheet media</span></dt>
1293 <dd><p>The value of the first <code>media</code> parameter.</p></dd>
1294 <!-- XXX register media parameter? bah -->
1296 <dt><span>style sheet title</span></dt>
1297 <dd><p><var>title</var></p></dd>
1299 <dt><span>style sheet alternate flag</span></dt>
1300 <dd><p>Set if one of the specified link relation type for this HTTP
1301 <code title="http-link">Link</code> header is an
1302 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
1303 "<code>alternate</code>", or false otherwise.
1304 </dl>
1305 </li>
1306 </ol>
1308 <!-- ........................................................................................................................ -->
1309 <!-- ........................................................................................................................ -->
1311 <h3>CSS Rules</h3>
1313 <p>A <dfn id="rule">CSS rule</dfn> is an abstract concept that
1314 denotes a rule as defined by the CSS specification. A
1315 <span>CSS rule</span> is represented as an object that implements a subclass of
1316 the <code>CSSRule</code> interface, and which has the following
1317 associated state items:</p>
1319 <dl>
1320 <dt><dfn id="rule-type">rule type</dfn></dt>
1321 <dd><p>A non-negative integer associated with a particular type of rule.
1322 This item is initialized when a rule is created and must never change.</p></dd>
1324 <dt><dfn id="rule-text">rule text</dfn></dt>
1325 <dd><p>A text representation of the rule suitable for direct use in a style sheet.
1326 This item is initialized when a rule is created, and may change over the lifetime of the rule.</p></dd>
1328 <dt><dfn id="rule-parent">rule parent</dfn></dt>
1329 <dd><p>An optional reference to another, enclosing <span>CSS rule</span>.
1330 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>.
1331 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>
1333 <dt><dfn id="rule-style-sheet">rule parent style sheet</dfn></dt>
1334 <dd><p>An optional reference to an associated <span>CSS style sheet</span>.
1335 This item is initialized to reference an associated style sheet when the rule is created. Subsequent to initialization, this item
1336 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>
1337 </dl>
1339 <p>In addition to the above state, each <span>CSS rule</span> may be associated
1340 with other state in accordance with its <span>rule type</span>.</p>
1342 <p>To <dfn>parse a CSS rule</dfn> ...</p>
1344 <p class="issue">Should a rule be instantiated in OM if there is a parse error? To
1345 what extent should original (but non-valid) CSS text be captured in cssText?</p>
1347 <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>
1349 <dl class="switch">
1350 <dt><code>CSSStyleRule</code></dt>
1351 <dd>
1352 <p>The result of concatenating the following:</p>
1353 <ol>
1354 <li>The result of performing <span>serialize a group of selectors</span> on the rule's associated selectors.</li>
1355 <li>The string "<code> { </code>", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B),
1356 followed by a single SPACE (U+0020).</li>
1357 <li>The result of performing <span>serialize a CSS declaration block</span> on the rule's associated declarations.</li>
1358 <li>If the rule is associated with one or more declarations, the string "<code> </code>", i.e., a single SPACE (U+0020).</li>
1359 <li>The string "<code>}</code>", RIGHT CURLY BRACKET (U+007D).
1360 </ol>
1361 </dd>
1363 <dt><code>CSSCharsetRule</code></dt>
1364 <dd>
1365 <p>The result of concatenating the following:</p>
1366 <ol>
1367 <li>The string "<code>@charset</code>" followed by a single SPACE (U+0020).</li>
1368 <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>
1369 <li>The string "<code>;</code>", i.e., SEMICOLON (U+003B).
1370 </ol>
1371 <div class="example">
1372 <pre>@charset "UTF-8";</pre>
1373 </div>
1374 </dd>
1376 <dt><code>CSSImportRule</code></dt>
1377 <dd>
1378 <p>The result of concatenating the following:</p>
1379 <ol>
1380 <li>The string "<code>@import</code>" followed by a single SPACE (U+0020).</li>
1381 <li>The result of performing <span>serialize a URL</span> on the rule's location.</li>
1382 <li>If the rule's associated media list is not empty, a single SPACE (U+0020) followed by the
1383 result of performing <span>serialize a media query list</span> on the media list.
1384 <li>The string "<code>;</code>", i.e., SEMICOLON (U+003B).
1385 </ol>
1386 <div class="example">
1387 <pre>@import url("import.css");</pre>
1388 <pre>@import url("print.css") print;</pre>
1389 </div>
1390 </dd>
1392 <dt><code>CSSMediaRule</code></dt>
1393 <dd><p class="issue">...</p></dd>
1395 <dt><code>CSSFontFaceRule</code></dt>
1396 <dd><p class="issue">...</p></dd>
1398 <dt><code>CSSPageRule</code></dt>
1399 <dd><p class="issue">...</p></dd>
1401 <dt><code>CSSNamespaceRule</code></dt>
1402 <dd><p>The literal string "<code>@namespace</code>", followed by a single SPACE
1403 (U+0020), followed by the
1404 <span title="serialize an identifier">identifier escaped</span> value of the
1405 <code title="dom-CSSNamespaceRule-prefix">prefix</code> attribute (if
1406 any), followed by a single SPACE (U+0020) if there is a prefix, followed by the
1407 <span title="serialize a URL">URL escaped</span> value of the
1408 <code title="dom-CSSNamespaceRule-namespaceURI">namespaceURI</code>
1409 attribute, followed the character "<code>;</code>" (U+003B).</p></dd>
1410 </dl>
1412 <!-- ........................................................................................................................ -->
1414 <h4>The <code>CSSRuleList</code> Sequence</h4>
1416 <!--{@idl(CSSRuleList)}-->
1418 <!-- ........................................................................................................................ -->
1420 <h4>The <code>CSSRule</code> Interface</h4>
1422 <!--{@idl(CSSRule)}-->
1424 <!-- ........................................................................................................................ -->
1426 <h4>The <code>CSSStyleRule</code> Interface</h4>
1428 <!--{@idl(CSSStyleRule)}-->
1430 <!-- ........................................................................................................................ -->
1432 <h4>The <code>CSSCharsetRule</code> Interface</h4>
1434 <!--{@idl(CSSCharsetRule)}-->
1436 <!-- ........................................................................................................................ -->
1438 <h4>The <code>CSSImportRule</code> Interface</h4>
1440 <!--{@idl(CSSImportRule)}-->
1442 <!-- ........................................................................................................................ -->
1444 <h4>The <code>CSSMediaRule</code> Interface</h4>
1446 <!--{@idl(CSSMediaRule)}-->
1448 <!-- ........................................................................................................................ -->
1450 <h4>The <code>CSSFontFaceRule</code> Interface</h4>
1452 <!--{@idl(CSSFontFaceRule)}-->
1454 <!-- ........................................................................................................................ -->
1456 <h4>The <code>CSSPageRule</code> Interface</h4>
1458 <!--{@idl(CSSPageRule)}-->
1460 <!-- ........................................................................................................................ -->
1462 <h4>The <code>CSSNamespaceRule</code> Interface</h4>
1464 <!--{@idl(CSSNamespaceRule)}-->
1466 <!-- ........................................................................................................................ -->
1467 <!-- ........................................................................................................................ -->
1469 <h3>CSS Declaration Blocks</h3>
1471 <p>A <dfn>CSS declaration block</dfn> is an ordered collection of CSS
1472 properties with their associated values, also named CSS declarations. In
1473 the DOM a <span>CSS declaration block</span> is a
1474 <code>CSSStyleDeclaration</code> object. A
1475 <span>CSS declaration block</span> has two associated properties:</p>
1477 <dl>
1478 <dt><dfn>CSS declaration block readonly flag</dfn></dt>
1479 <dd><p>Clear if the object can be manipulated. Set if it can not be
1480 manipulated. Unless otherwise stated it is clear.</p></dd>
1482 <dt><dfn>CSS declaration block declarations</dfn></dt>
1483 <dd><p>The CSS declarations associated with the object.</p></dd>
1484 </dl>
1486 <p class="note">The <span>CSS declaration block declarations</span> are
1487 ordered. This matters for the
1488 <code title="dom-CSSStyleDeclaration-item">item()</code> method.</p>
1490 <p>To <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn> ...</p>
1492 <p class="issue">What should be captured in the cssText of a declaration block which fails
1493 to parse?</p>
1495 <p>To <dfn id="serialize-a-css-declaration-block">serialize a CSS declaration block</dfn>
1496 represented by a <code>CSSStyleDeclarations</code> instance named <var>d</var>,
1497 let <var>s</var> be the empty string, then run the steps below:</p>
1499 <ol>
1500 <li><p>If <code><var>d</var>.length</code> is zero (0), then return <var>s</var>.</p></li>
1501 <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>
1502 <ol>
1503 <li><p>Let <var>n</var> be the value returned by <code><var>d</var>.item(<var>i</var>)</code>.</p></li>
1504 <li><p>Let <var>v</var> be the value returned by <code><var>d</var>.getPropertyValue(<var>n</var>)</code>.</p></li>
1505 <li><p>If <var>v</var> is the empty string, then continue.</p></li>
1506 <li><p>Otherwise (<var>v</var> is non-empty), perform the following sub-steps:</p>
1507 <ol>
1508 <li><p>If <var>s</var> is not empty, then append a single SPACE (U+0020) to <var>s</var>.</p></li>
1509 <li><p>Append <var>n</var> to <var>s</var>.</p></li>
1510 <li><p>Append COLON (U+003A) followed by a single SPACE (U+0020), i.e., "<code>: </code>", to <var>s</var>.</p></li>
1511 <li><p>Append <var>v</var> to <var>s</var>.</p></li>
1512 </ol>
1513 </li>
1514 <li><p>Let <var>p</var> be the value returned by <code><var>d</var>.getPropertyPriority(<var>n</var>)</code>.</p></li>
1515 <li><p>If <var>p</var> is not the empty string, then perform the following sub-steps:</p>
1516 <ol>
1517 <li><p>Append a single SPACE (U+0020) followed by EXCLAMATION MARK (U+0021), i.e., "<code> !</code>", to <var>s</var>.</p></li>
1518 <li><p>Append <var>p</var> to <var>s</var>.</p></li>
1519 </ol>
1520 </li>
1521 <li><p>Append SEMICOLON (U+003B), i.e., "<code>;</code>", to <var>s</var>.</p></li>
1522 </ol>
1523 </li>
1524 <li><p>Return <var>s</var>.</p></li>
1525 </ol>
1527 <p class="note">The serialization of an empty CSS declaration block is the empty string.</p>
1529 <p class="note">The serialization of a non-empty CSS declaration block does not include any surrounding whitespace, i.e., no whitepsace appears
1530 before the first property name and no whitespace appears after the final semicolon delimiter that follows the last property value.</p>
1532 <!-- ........................................................................................................................ -->
1534 <h4>The <code>CSSStyleDeclaration</code> Interface</h4>
1536 <!--{@idl(CSSStyleDeclaration)}-->
1538 <p>If the user agent supports the 'float' CSS property, the following partial interface
1539 applies.
1541 <pre class=idl>partial interface CSSStyleDeclaration {
1542 [TreatNullAs=EmptyString] attribute DOMString cssFloat;
1543 };</pre>
1545 <p>The <code><dfn title=dom-CSSStyleDeclaration-cssFloat>cssFloat</dfn></code>
1546 attribute, on getting, must return the result of invoking
1547 <code title=dom-CSSStyleDeclaration-getPropertyValue>getPropertyValue()</code> with
1548 "float" as argument. On setting, the attribute must invoke
1549 <code title=dom-CSSStyleDeclaration-setPropertyValue>setPropertyValue()</code> with
1550 "float" as first argument, as second argument the given value, and no third argument.
1551 Any exceptions thrown must be re-thrown.
1553 <p>For each CSS property <var>property</var> that the user agent supports, except for
1554 the 'float' property, the following partial interface applies where <var>attribute</var>
1555 is obtained by running the <span>CSS property to IDL attribute</span> algorithm for
1556 <var>property</var>.
1558 <pre class=idl>partial interface CSSStyleDeclaration {
1559 [TreatNullAs=EmptyString] attribute DOMString <var>attribute</var>;
1560 };</pre>
1562 <p>Getting the <var>attribute</var> attribute must return the result of invoking
1563 <code title=dom-CSSStyleDeclaration-getPropertyValue>getPropertyValue()</code> with as
1564 argument the result of running the <span>IDL attribute to CSS property</span>
1565 algorithm for <var>attribute</var>.</p>
1567 <p>Setting the <var>attribute</var> attribute must invoke
1568 <code title=dom-CSSStyleDeclaration-setPropertyValue>setPropertyValue()</code> with as
1569 first argument the result of running the <span>IDL attribute to CSS property</span>
1570 algorithm for <var>attribute</var>, as second argument the given value, and no third argument. Any
1571 exceptions thrown must be re-thrown.</p>
1573 <p>The <dfn>CSS property to IDL attribute</dfn> algorithm for <var>property</var> is as
1574 follows:</p>
1576 <ol>
1577 <li><p>Let <var>output</var> be the empty string.
1579 <li><p>Let <var>uppercase next</var> be unset.
1581 <li><p>For each character <var>c</var> in <var>property</var>:
1583 <ol>
1584 <li><p>If <var>c</var> is "<code title>-</code>" (U+002D), let <var>uppercase next</var> be set.
1586 <li><p>Otherwise, if <var>uppercase next</var> is set, let <var>uppercase next</var> be unset and append <var>c</var> <span data-anolis-spec=dom>converted to ASCII uppercase</span> to <var>output</var>.
1588 <li><p>Otherwise, append <var>c</var> to <var>output</var>.
1589 </ol>
1591 <li><p>Return <var>output</var>.
1592 </ol>
1594 <p>The <dfn>IDL attribute to CSS property</dfn> algorithm for <var>attribute</var> is as
1595 follows:</p>
1597 <ol>
1598 <li><p>Let <var>output</var> be the empty string.
1600 <li><p>For each character <var>c</var> in <var>attribute</var>:
1602 <ol>
1603 <li><p>If <var>c</var> is in the range U+0041 to U+005A (ASCII uppercase), append "<code title>-</code>" (U+002D) followed by <var>c</var> <span data-anolis-spec=dom>converted to ASCII lowercase</span> to <var>output</var>.
1605 <li><p>Otherwise, append <var>c</var> to <var>output</var>.
1606 </ol>
1608 <li><p>Return <var>output</var>.
1609 </ol>
1612 <!--
1613 <hr>
1615 <p>For the table below, the IDL attribute in the first column
1616 must return the result of invoking
1617 <code title="dom-CSSStyleDeclaration-getPropertyValue">getPropertyValue()</code>
1618 with as argument the CSS property given in the second column on the same
1619 row.</p>
1621 <p>Similarly for the table below, setting the IDL attribute in the
1622 first column must invoke
1623 <code title="dom-CSSStyleDeclaration-setProperty">setProperty()</code>
1624 with as first argument the CSS property given in the second column on the
1625 same row, as second argument the given value, and no third argument. Any
1626 exceptions thrown must be re-thrown.</p>
1628 <p class="issue">Restore the entries for the following table or resurrect
1629 CSS2Properties (or similar) or define in general terms using prose or ...</p>
1631 <table>
1632 <thead>
1633 <tr>
1634 <th>IDL attribute
1635 <th>CSS property
1636 <tbody>
1637 <!- -CSSOM-DECLARATIONTABLE- ->
1638 </table>
1639 -->
1640 <!--
1641 <h4>CSS Properties</h4>
1643 <p>The DOM attribute name of a CSS property can be found by using the
1644 following algorithm:</p>
1646 <ol>
1647 <li>Let <var>r</var> be the CSS property to be
1648 converted.</li>
1650 <li>Uppercase the first character after every U+002D (<code>-</code>) in
1651 <var>r</var>.</li>
1653 <li>Remove every U+002D (<code>-</code>) in <var>r</var>.</li>
1655 <li>Return <var>r</var>.</li>
1656 </ol>
1658 <p class="note">This means that
1659 <code>-<var>vendor</var>-<var>property</var></code>
1660 becomes
1661 <code><var><strong>V</strong>endor</var><var><strong>P</strong>roperty</var></code>
1662 for instance.</p>
1663 -->
1665 <!-- ........................................................................................................................ -->
1666 <!-- ........................................................................................................................ -->
1668 <h3>CSS Values</h3>
1670 <!-- ........................................................................................................................ -->
1672 <h4>Parsing CSS Values</h4>
1674 <p>To <dfn id="parse-a-css-value">parse a CSS value</dfn> for a given
1675 <var>property</var> means to a parse the given value according to
1676 the definition of the property that is an
1677 <span data-anolis-spec=dom>ASCII case-insensitive</span> match for
1678 <var>property</var> in the CSS specification. If the given value
1679 is <span>ignored</span> return <code>null</code>. Otherwise return the CSS value for
1680 the given <var>property</var>.</p>
1682 <p class="note">"<code>!important</code>" declarations are not
1683 part of the property value space and will therefore cause
1684 <span>parse a CSS value</span> to return <code>null</code>.</p>
1687 <!-- ........................................................................................................................ -->
1689 <h4>Serializing CSS Values</h4>
1691 <!-- based on http://damowmow.com/playground/canon.txt -->
1693 <p>To <dfn id="serialize-a-css-value">serialize a CSS value</dfn> follow
1694 these rules:</p>
1696 <ul>
1697 <li><p><span title="Serialize a CSS component value">Serialize</span> any
1698 CSS component values in the value.</p></li>
1700 <li><p>Where multiple CSS component values can appear in any order
1701 without changing the meaning of the value (typically represented by a
1702 double bar <code>||</code> in the value syntax), use the order as given
1703 in the syntax.</p></li>
1704 <!-- <code><border-width> <border-style> <color></code>
1705 for <code>border</code> -->
1707 <li>
1708 <p>Where CSS component values of the value can be omitted without
1709 changing the meaning of the value (e.g. initial values in shorthand
1710 properties), omit them. If this would remove all the values, then
1711 include the first allowed value.</p>
1713 <p class="example">E.g. <code>margin: 20px 20px</code> becomes
1714 <code>margin: 20px</code>.</p>
1716 <p class="example">E.g. the value <code>0</code> for the
1717 '<code>border</code>' property.</p>
1718 </li>
1720 <li><p>If the value of a shorthand property is requested and it cannot be
1721 computed because the properties associated with the shorthand have values
1722 that cannot be represented by the shorthand the serialization is the
1723 empty string.</p></li>
1725 <li><p>If a value has a <span>whitespace</span>-separated list of
1726 CSS component values,
1727 <span title="serialize a whitespace-separated list">serialize</span> the
1728 value as a whitespace-separated list.</p></li>
1730 <li><p>If a value has a comma-separated list of
1731 CSS component values,
1732 <span title="serialize a comma-separated list">serialize</span> the
1733 value as a comma-separated list.</p></li>
1734 </ul>
1737 <p>To
1738 <dfn id="serialize-a-css-value-component">serialize a CSS component value</dfn>
1739 depends on the component, as follows:</p>
1741 <dl class="switch">
1742 <dt>keyword</dt>
1743 <dd><p>The keyword
1744 <span data-anolis-spec=dom>converted to ASCII lowercase</span>.</p></dd>
1746 <dt><angle></dt>
1747 <dd><p>The number of degrees serialized as per <number> followed by
1748 the literal string "<code>deg</code>".</p></dd>
1750 <dt><color></dt>
1751 <dd>
1752 <p>If <color> is a component of a resolved or computed value, then
1753 return the color using the <code>rgb()</code> or <code>rgba()</code> functional
1754 notation as follows:</p>
1755 <ol>
1756 <li>If the alpha component of the color is equal to one, then return the serialization of the
1757 <code>rgb()</code> functional equivalent of the opaque color.</li>
1758 <li>If the alpha component of the color is not equal to one, then return the serialization of the
1759 <code>rgba()</code> functional equivalent of the non-opaque color.</li>
1760 </ol>
1761 <p>The serialization of the <code>rgb()</code> functional equivalent is the concatenation of the following:</p>
1762 <ol>
1763 <li>The string "<code>rgb(</code>".</li>
1764 <li>The shortest base-ten integer serialization of the color's red component.</li>
1765 <li>The string "<code>, </code>".</li>
1766 <li>The shortest base-ten serialization of the color's green component.</li>
1767 <li>The string "<code>, </code>".</li>
1768 <li>The shortest base-ten serialization of the color's blue component.</li>
1769 <li>The string "<code>)</code>".</li>
1770 </ol>
1771 <p>The serialization of the <code>rgba()</code> functional equivalent is the concatenation of the following:</p>
1772 <ol>
1773 <li>The string "<code>rgba(</code>".</li>
1774 <li>The shortest base-ten serialization of the color's red component.</li>
1775 <li>The string "<code>, </code>".</li>
1776 <li>The shortest base-ten serialization of the color's green component.</li>
1777 <li>The string "<code>, </code>".</li>
1778 <li>The shortest base-ten serialization of the color's blue component.</li>
1779 <li>The string "<code>, </code>".</li>
1780 <li>The shortest serialization of the <number> that denotes the color's alpha component.</li>
1781 <li>The string "<code>)</code>".</li>
1782 </ol>
1784 <p>In the above rules, the string "<code>, </code>" denotes a COMMA (U+002C) followed by a single SPACE (U+0020).</p>
1786 <p>If <color> is a component of a specified value, then
1787 return the color as follows:</p>
1788 <ol>
1789 <li>If the color was explicitly specified by the author, then return the original, author specified color value.</li>
1790 <li>Otherwise, return the value that would be returned if the color were a component of a computed value.</li>
1791 </ol>
1792 <p class="issue">Should author specified values be normalized for case? Or should original case be preserved?</p>
1793 </dd>
1794 <!--
1795 <dt>It is a system color</dt>
1797 <dd>See below (you use the representation given in the specification that
1798 defines the keyword).</dd>
1800 <dt>Alpha component is equal to 1.0</dt>
1802 <dd>The color is an uppercase six-digit hexadecimal value, prefixed with a
1803 <code>#</code> character (U+0023 NUMBER SIGN), with the first two digits
1804 representing the red component, the next two digits representing the green
1805 component, and the last two digits representing the blue component, the
1806 digits being in the range 0-9 A-F (U+0030 to U+0039 and U+0041 to
1807 U+0046).</dd>
1809 <dt>Alpha component is less than 1.0</dt>
1811 <dd>The color is in the CSS <code>rgba()</code> functional-notation format:
1812 the literal string <code>rgba</code> (U+0072 U+0067 U+0062 U+0061) followed
1813 by a U+0028 LEFT PARENTHESIS, a <span>color component integer</span>
1814 representing the red component, a <span>color component separator</span>, a
1815 <span>color component integer</span> for the green component, a <span>color
1816 component separator</span>, a <span>color component integer</span> for the
1817 blue component, another <span>color component separator</span> a U+0030
1818 DIGIT ZERO, a U+002E FULL STOP (representing the decimal point), one or
1819 more digits in the range 0-9 (U+0030 to U+0039) representing the fractional
1820 part of the alpha value, and finally a U+0029 RIGHT PARENTHESIS.</dd>
1822 <dt>The keyword <code>transparent</code> is used</dt>
1824 <dd>The color is <code>rgba(0, 0, 0, 0)</code>.</dd>
1825 -->
1827 <dt><counter></dt>
1828 <dd>
1829 <p>The concatenation of:</p>
1830 <ol>
1831 <li><p>If <counter> has three CSS component values the string
1832 "<code>counters(</code>".</p></li>
1833 <li><p>If <counter> has two CSS component values the string
1834 "<code>counter(</code>".</p></li>
1835 <li><p>The result of
1836 <span title="serialize a comma-separated list">serializing</span> the
1837 <span title="serialize a CSS component value">serialized</span>
1838 CSS component values belonging to <counter> as list while omitting
1839 the last CSS component value if it is 'decimal'.</p></li>
1840 <li><p>"<code>)</code>" (U+0029).</p></li>
1841 </ol>
1842 </dd>
1844 <dt><frequency></dt>
1845 <dd><p>The frequency in hertz serialized as per <number> followed by
1846 the literal string "<code>hz</code>".</dd>
1848 <dt><identifier></dt>
1849 <dd><p>The identifier
1850 <span title="serialize an identifier">escaped</span>.</p></dd>
1852 <dt><integer></dt>
1853 <dd><p>A base-ten integer using digits 0-9 (U+0030 to U+0039) in the
1854 shortest form possible, preceded by "<code>-</code>" (U+002D) if it is
1855 negative.</p></dd>
1857 <dt><length></dt>
1858 <dd>
1859 <p>A length of zero is represented by the literal string
1860 "<code>0px</code>".</p>
1862 <p>Absolute lengths: the number of millimeters serialized as per
1863 <number> followed by the literal string "<code>mm</code>".</p>
1864 <p class="issue">Rumor has it absolute lengths will become relative
1865 lengths. Centimeters would be compatible with <resolution>...</p>
1867 <p>Relative lengths: the <number> component serialized as per
1868 <number> followed by the unit in its canonical form as defined in its
1869 respective specification.</p>
1870 </dd>
1872 <dt><number></dt>
1873 <dd><p class="issue">Browsers seem to use ToString(), but that might give a
1874 significand which according to some is teh evil (and also currently does
1875 not parse correctly).</p></dd>
1877 <dt><percentage></dt>
1878 <dd><p>The <number> component serialized as per <number> followed
1879 by the literal string "<code>%</code>" (U+0025).</p></dd>
1881 <dt><resolution></dt>
1882 <dd><p>The resolution in dots per centimeter serialized as per
1883 <number> followed by the literal string "<code>dpcm</code>".</dd>
1885 <dt><shape></dt>
1886 <dd><p>The string "<code>rect(</code>", followed by the result
1887 of <span title="serialize a comma-separated list">serializing</span> the
1888 <span title="serialize a CSS component value">serialized</span>
1889 CSS component values belonging to <shape> as list, followed by
1890 "<code>)</code>" (U+0029).</p></dd>
1892 <dt><string></dt>
1893 <dt><family-name></dt>
1894 <dt><specific-voice></dt>
1895 <dd><p>The string
1896 <span title="serialize a string">string escaped</span>.</p></dd>
1898 <dt><time></dt>
1899 <dd><p>The time in seconds serialized as per <number> followed by
1900 the literal string "<code>s</code>".</dd>
1902 <dt><uri></dt>
1903 <dd><p>The <span data-anolis-spec=html>absolute URL</span>
1904 <span title="serialize a URL">URL escaped</span>.</p></dd>
1905 </dl>
1907 <p>
1908 <absolute-size>,
1909 <border-width>,
1910 <border-style>,
1911 <bottom>,
1912 <generic-family>,
1913 <generic-voice>,
1914 <left>,
1915 <margin-width>,
1916 <padding-width>,
1917 <relative-size>,
1918 <right>, and
1919 <top>,
1920 are considered macros by this specification. They all represent instances
1921 of components outlined above.</p>
1923 <p class="issue">One idea is that we can remove this section somewhere in
1924 the CSS3/CSS4 timeline by moving the above definitions to the drafts that
1925 define the CSS components.</p>
1928 <h5>Examples</h5>
1930 <p>Here are some examples of before and after results on specified values.
1931 The before column could be what the author wrote in a style sheet, while
1932 the after column shows what querying the DOM would return.</p>
1934 <div class="example">
1935 <table>
1936 <thead>
1937 <tr><th>Before<th>After
1938 <tbody>
1939 <tr><td><code>background: none</code><td><code>background: rgba(0, 0, 0, 0)</code>
1940 <tr><td><code>outline: none</code><td><code>outline: invert</code>
1941 <tr><td><code>border: none</code><td><code>border: medium</code>
1942 <tr><td><code>list-style: none</code><td><code>list-style: disc</code>
1943 <tr><td><code>margin: 0 1px 1px 1px</code><td><code>margin: 0px 1px 1px</code>
1944 <tr><td><code>azimuth: behind left</code><td><code>azimuth: 220deg</code>
1945 <tr><td><code>font-family: a, 'b"', serif</code><td><code>font-family: "a", "b\"", serif</code>
1946 <tr><td><code>content: url('h)i') '\[\]'</code><td><code>content: url("h)i") "[]"</code>
1947 <tr><td><code>azimuth: leftwards</code><td><code>azimuth: leftwards</code>
1948 <tr><td><code>color: rgb(18, 52, 86)</code><td><code>color: #123456</code>
1949 <tr><td><code>color: rgba(000001, 0, 0, 1)</code><td><code>color: #000000</code>
1950 </table>
1952 <p class="issue">Some of these need to be updated per the new rules.</p>
1953 </div>
1955 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
1957 <h2>DOM Access to CSS Declaration Blocks</h2>
1959 <!-- ........................................................................................................................ -->
1960 <!-- ........................................................................................................................ -->
1962 <h3>The <code>ElementCSSInlineStyle</code> Interface</h3>
1964 <!--{@idl(ElementCSSInlineStyle)}-->
1966 <!-- ........................................................................................................................ -->
1967 <!-- ........................................................................................................................ -->
1969 <h3>Extensions to the <code>Window</code> Interface</h3>
1971 <!--{@idl(Window)}-->
1973 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
1975 <h2>Resolved Values</h2>
1977 <p><code title="dom-Window-getComputedStyle">getComputedStyle()</code> was
1978 historically defined to return the "computed value" of an element or
1979 pseudo-element. However, the concept of "computed value" changed between
1980 revisions of CSS while the implementation of
1981 <code title="dom-Window-getComputedStyle">getComputedStyle()</code> had to
1982 remain the same for compatibility with deployed scripts. To address this
1983 issue this specification introduces the concept of a
1984 <dfn>resolved value</dfn>.</p>
1986 <p>The <span>resolved value</span> for a given property can be determined
1987 as follows:</p>
1989 <dl class="switch">
1990 <!--
1991 We want to treat shorthand properties like any other value basically.
1993 <dt>'<code>background</code>'
1994 <dt>'<code>border</code>'
1995 <dt>'<code>border-collapse</code>'
1996 <dt>'<code>border-color</code>'
1997 <dt>'<code>border-spacing</code>'
1998 <dt>'<code>border-style</code>'
1999 <dt>'<code>border-top</code>'
2000 <dt>'<code>border-right</code>'
2001 <dt>'<code>border-bottom</code>'
2002 <dt>'<code>border-left</code>'
2003 <dt>'<code>border-width</code>'
2004 <dt>'<code>font</code>'
2005 <dt>'<code>list-style</code>'
2006 <dt>'<code>margin</code>'
2007 <dt>'<code>outline</code>'
2008 <!- - overflow is not - ->
2009 <dt>'<code>padding</code>'
2010 <dt>'<code>pause</code>'
2011 <dd>
2012 <p>There is no <span>resolved value</span>.</p>
2013 </dd>
2014 -->
2016 <dt>'<code>line-height</code>'</dt>
2017 <dd><p>The <span>resolved value</span> is the used value.</p></dd>
2019 <dt>'<code>height</code>'</dt>
2020 <dt>'<code>margin</code>'</dt>
2021 <dt>'<code>margin-bottom</code>'</dt>
2022 <dt>'<code>margin-left</code>'</dt>
2023 <dt>'<code>margin-right</code>'</dt>
2024 <dt>'<code>margin-top</code>'</dt>
2025 <dt>'<code>padding</code>'</dt>
2026 <dt>'<code>padding-bottom</code>'</dt>
2027 <dt>'<code>padding-left</code>'</dt>
2028 <dt>'<code>padding-right</code>'</dt>
2029 <dt>'<code>padding-top</code>'</dt>
2030 <dt>'<code>width</code>'</dt>
2031 <dd><p>If the property applies to the element or pseudo-element and the
2032 <span>resolved value</span> of the '<code>display</code>' property is not
2033 <code>none</code>, the <span>resolved value</span> is the
2034 <span>used value</span>. Otherwise the <span>resolved value</span> is the
2035 computed value.</p></dd>
2037 <dt>'<code>bottom</code>'</dt>
2038 <dt>'<code>left</code>'</dt>
2039 <dt>'<code>right</code>'</dt>
2040 <dt>'<code>top</code>'</dt>
2041 <dd><p>If the property applies to a positioned element and the
2042 <span>resolved value</span> of the '<code>display</code>' property is not
2043 <code>none</code>, the <span>resolved value</span> is the
2044 <span>used value</span>. Otherwise the <span>resolved value</span> is the
2045 computed value.</p></dd>
2047 <dt>Any other property</dt>
2048 <dd><p>The <span>resolved value</span> is the computed value.</p></dd>
2049 </dl>
2051 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
2053 <h2 id="iana-considerations">IANA Considerations</h2>
2055 <!-- ........................................................................................................................ -->
2056 <!-- ........................................................................................................................ -->
2058 <h3><dfn title="http-default-style"><code>Default-Style</code></dfn></h3>
2060 <p>This section describes a header field for registration in the Permanent
2061 Message Header Field Registry.
2062 <!--<a href="XXX">[RFC3864]</a>--></p>
2064 <dl>
2065 <dt>Header field name</dt>
2066 <dd>Default-Style</dd>
2067 <dt>Applicable protocol</dt>
2068 <dd>http</dd>
2069 <dt>Status</dt>
2070 <dd>standard</dd>
2071 <dt>Author/Change controller</dt>
2072 <dd>W3C</dd>
2073 <dt>Specification document(s)</dt>
2074 <dd>This document is the relevant specification.</dd>
2075 <dt>Related information</dt>
2076 <dd>None.</dd>
2077 </dl>
2079 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
2081 <h2 class=no-num>References</h2>
2083 <!-- ........................................................................................................................ -->
2084 <!-- ........................................................................................................................ -->
2086 <h3 class=no-num>Normative references</h3>
2087 <div id=anolis-references-normative></div>
2089 <!-- ........................................................................................................................ -->
2090 <!-- ........................................................................................................................ -->
2092 <h3 class=no-num>Informative references</h3>
2093 <div id=anolis-references-informative></div>
2095 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
2097 <h2 class="no-num" id="changes">Change History</h2>
2099 <p>This section documents the primary technical changes of CSSOM related functionality, with a focus on changes to API signatures.</p>
2101 <h3 class="no-num" id="changes-from-dom2">Changes From DOM-2 Style</h3>
2103 <ul>
2104 <li><p>Remove definition of <code>CSSRule.UNKNOWN_RULE</code>, reserving its value (0) to prevent future reuse.</p></li>
2105 <li><p>Remove definition of <code>DOMImplementationCSS</code> interface.</p></li>
2106 </ul>
2108 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
2110 <h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
2112 <p>The editors would like to thank
2114 Alexey Feldgendler,
2115 Björn Höhrmann,
2116 Boris Zbasky,
2117 Brian Kardell,
2118 Christian Krebs,
2119 Daniel Glazman,
2120 David Baron,
2121 <i>fantasai</i>,
2122 Hallvord R. M. Steen,
2123 Ian Hickson,
2124 John Daggett,
2125 Lachlan Hunt,
2126 Morten Stenshorne,
2127 Philip Taylor,
2128 Robert O'Callahan,
2129 Sjoerd Visscher,
2130 Simon Pieters,
2131 Sylvain Galineau,
2132 Tarquin Wilton-Jones, and
2133 Zack Weinberg
2135 for contributing to this specification.</p>
2137 <p>Additional thanks to Ian Hickson for writing the
2138 initial version of the alternative style sheets API and canonicalization
2139 (now serialization) rules for CSS values.</p>
2141 <!-- XXX NOTES
2143 <style type=text/css;charset=utf-8> does create a StyleSheet in Firefox
2144 and Opera, but does not create a StyleSheet in IE. I prefer IE.
2146 <style type=TEXT/CSS> sets the style sheet type to text/css in Firefox and
2147 TEXT/CSS in Opera and IE. I prefer Firefox.
2149 <style> sets the style sheet location to the document location Firefox,
2150 the empty string in IE, and null in Opera. I prefer Opera
2152 <style media="x"> invokes .sheet.media.mediaText = "x"
2154 <style> does not "have" a title
2156 .cascadedStyle that returns less keywords than currentStyle, no inherit,
2157 etc.
2159 Markup style: http://krijnhoetmer.nl/irc-logs/whatwg/20100204#l-529
2160 -->
2161 </body>
2162 </html>
