cssom/Overview.html@f2b03be2c8d5
cssom/Overview.html
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
- -rw-r--r--
[cssom] CSSStyleDeclaration properties need [TreatNullAs=EmptyString]; specify cssFloat
1 <!DOCTYPE html><html lang="en-US"><head>
2 <meta charset="utf-8">
3 <title>CSS Object Model (CSSOM)</title>
4 <link href="cssom.css" rel="stylesheet">
5 <link href="https://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet">
6 </head>
7 <body class="draft">
8 <div class="head">
10 <!--begin-logo-->
11 <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72"></a></p>
12 <!--end-logo-->
14 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
15 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
17 <h1 id="cssom">CSS Object Model (CSSOM)</h1>
19 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
21 <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 22 April 2013</h2>
23 <dl>
25 <dt>This Version:</dt>
26 <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>
27 <dt class="dontpublish">Participate:</dt>
28 <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>
29 <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>
30 <dd class="dontpublish"><a href="irc://irc.w3.org:6665/css">IRC: #css on W3C</a></dd>
32 <dt class="dontpublish">Previous Version:</dt>
33 <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>
34 <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>
36 <dt>Editors:</dt>
37 <dd><a href="http://www.w3.org/wiki/User:Gadams">Glenn Adams</a>
38 (<a href="http://www.cox.com/">Cox Communications, Inc.</a>)
39 <<a href="mailto:glenn.adams@cox.com">glenn.adams@cox.com</a>></dd>
40 <dd><a>Simon Pieters</a>
41 (<a href="http://www.opera.com/">Opera Software ASA</a>)
42 <<a href="mailto:simponp@opera.com">simonp@opera.com</a>></dd>
44 <dt>Previous Editor:</dt>
45 <dd><a href="http://annevankesteren.nl/">Anne van Kesteren</a>
46 (<a href="http://www.opera.com/">Opera Software ASA</a>)
47 <<a href="mailto:annevk@opera.com">annevk@opera.com</a>></dd>
48 </dl>
51 <!--begin-copyright-->
52 <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p>
53 <!--end-copyright-->
55 </div>
57 <hr class="top">
59 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
61 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
63 <p>CSSOM defines APIs (including generic parsing and serialization rules)
64 for Media Queries, Selectors, and of course CSS itself.</p>
66 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
68 <h2 class="no-num no-toc" id="sotd">Status of this Document</h2>
70 <p>This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment.
71 Its publication here does not imply endorsement of its contents by W3C or by the CSS Working Group. Don't cite
72 this document other than as work in progress.</p>
74 <p class="note">Implementers should note well that this specification is an ongoing effort to sort out
75 what has been widely implemented and deployed from <a href="#refsDOM2STYLE">[DOM2STYLE]</a> as well as common extensions thereto, some details
76 of which are currently interoperable and others which are not currently interoperable. As this specification moves
77 forward, it is hoped that these differences will be resolved and an unambiguous and adequate consensus-based
78 specification will emerge.</p>
80 <p><em>This section describes the status of this document at the time of
81 its publication. Other documents may supersede this document. A list of
82 current W3C publications and the latest revision of this technical report
83 can be found in the
84 <a href="http://www.w3.org/TR/">W3C technical reports index at http://www.w3.org/TR/.</a></em>
86 <p class="dontpublish">This is the 22 April 2013 Editor's Draft of CSSOM. Please send comments to
87 <a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a>
88 (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
89 with <samp>[cssom]</samp> at the start of the subject line.
91 <p>This document was produced by a group operating under the
92 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>.
93 W3C maintains a
94 <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a>
95 made in connection with the deliverables of the group; that page also
96 includes instructions for disclosing a patent. An individual who has
97 actual knowledge of a patent which the individual believes contains
98 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a>
99 must disclose the information in accordance with
100 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>.</p>
102 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
104 <h2 class="no-num no-toc" id="toc">Table of Contents</h2>
107 <!--begin-toc-->
108 <ol class="toc">
109 <li><a href="#introduction"><span class="secno">1 </span>Introduction</a></li>
110 <li><a href="#conformance"><span class="secno">2 </span>Conformance</a></li>
111 <li><a href="#terminology"><span class="secno">3 </span>Terminology</a>
112 <ol class="toc">
113 <li><a href="#common-serializing-idioms"><span class="secno">3.1 </span>Common Serializing Idioms</a></ol></li>
114 <li><a href="#media-queries"><span class="secno">4 </span>Media Queries</a>
115 <ol class="toc">
116 <li><a href="#parsing-media-queries"><span class="secno">4.1 </span>Parsing Media Queries</a></li>
117 <li><a href="#serializing-media-queries"><span class="secno">4.2 </span>Serializing Media Queries</a>
118 <ol class="toc">
119 <li><a href="#serializing-media-feature-values"><span class="secno">4.2.1 </span>Serializing Media Feature Values</a></ol></li>
120 <li><a href="#comparing-media-queries"><span class="secno">4.3 </span>Comparing Media Queries</a></li>
121 <li><a href="#the-medialist-interface"><span class="secno">4.4 </span>The <code>MediaList</code> Interface</a></ol></li>
122 <li><a href="#selectors"><span class="secno">5 </span>Selectors</a>
123 <ol class="toc">
124 <li><a href="#parsing-selectors"><span class="secno">5.1 </span>Parsing Selectors</a></li>
125 <li><a href="#serializing-selectors"><span class="secno">5.2 </span>Serializing Selectors</a></ol></li>
126 <li><a href="#css"><span class="secno">6 </span>CSS</a>
127 <ol class="toc">
128 <li><a href="#css-style-sheets"><span class="secno">6.1 </span>CSS Style Sheets</a>
129 <ol class="toc">
130 <li><a href="#the-stylesheet-interface"><span class="secno">6.1.1 </span>The <code>StyleSheet</code> Interface</a></li>
131 <li><a href="#the-cssstylesheet-interface"><span class="secno">6.1.2 </span>The <code>CSSStyleSheet</code> Interface</a></ol></li>
132 <li><a href="#style-sheet-collections"><span class="secno">6.2 </span>Style Sheet Collections</a>
133 <ol class="toc">
134 <li><a href="#the-http-default-style-header"><span class="secno">6.2.1 </span>The HTTP <code>Default-Style</code> Header</a></li>
135 <li><a href="#the-stylesheetlist-sequence"><span class="secno">6.2.2 </span>The <code>StyleSheetList</code> Sequence</a></li>
136 <li><a href="#extensions-to-the-document-interface"><span class="secno">6.2.3 </span>Extensions to the <code>Document</code> Interface</a></li>
137 <li><a href="#interaction-with-the-user-interface"><span class="secno">6.2.4 </span>Interaction with the User Interface</a>
138 <ol class="toc">
139 <li><a href="#persisting-the-selected-style-sheet-set"><span class="secno">6.2.4.1 </span>Persisting the selected style sheet set</a></ol></li>
140 <li><a href="#examples"><span class="secno">6.2.5 </span>Examples</a></ol></li>
141 <li><a href="#style-sheet-association"><span class="secno">6.3 </span>Style Sheet Association</a>
142 <ol class="toc">
143 <li><a href="#the-linkstyle-interface"><span class="secno">6.3.1 </span>The <code>LinkStyle</code> Interface</a></li>
144 <li><a href="#requirements-on-specifications"><span class="secno">6.3.2 </span>Requirements on specifications</a></li>
145 <li><a href="#requirements-on-user-agents-implementing-the-xml-stylesheet-processing-instruction"><span class="secno">6.3.3 </span>Requirements on User Agents Implementing the
146 <span><code>xml-stylesheet</code> processing instruction</span></a></li>
147 <li><a href="#requirements-on-user-agents-implementing-the-http-link-header"><span class="secno">6.3.4 </span>Requirements on User Agents Implementing the HTTP
148 <code>Link</code> Header</a></ol></li>
149 <li><a href="#css-rules"><span class="secno">6.4 </span>CSS Rules</a>
150 <ol class="toc">
151 <li><a href="#the-cssrulelist-sequence"><span class="secno">6.4.1 </span>The <code>CSSRuleList</code> Sequence</a></li>
152 <li><a href="#the-cssrule-interface"><span class="secno">6.4.2 </span>The <code>CSSRule</code> Interface</a></li>
153 <li><a href="#the-cssstylerule-interface"><span class="secno">6.4.3 </span>The <code>CSSStyleRule</code> Interface</a></li>
154 <li><a href="#the-csscharsetrule-interface"><span class="secno">6.4.4 </span>The <code>CSSCharsetRule</code> Interface</a></li>
155 <li><a href="#the-cssimportrule-interface"><span class="secno">6.4.5 </span>The <code>CSSImportRule</code> Interface</a></li>
156 <li><a href="#the-cssmediarule-interface"><span class="secno">6.4.6 </span>The <code>CSSMediaRule</code> Interface</a></li>
157 <li><a href="#the-cssfontfacerule-interface"><span class="secno">6.4.7 </span>The <code>CSSFontFaceRule</code> Interface</a></li>
158 <li><a href="#the-csspagerule-interface"><span class="secno">6.4.8 </span>The <code>CSSPageRule</code> Interface</a></li>
159 <li><a href="#the-cssnamespacerule-interface"><span class="secno">6.4.9 </span>The <code>CSSNamespaceRule</code> Interface</a></ol></li>
160 <li><a href="#css-declaration-blocks"><span class="secno">6.5 </span>CSS Declaration Blocks</a>
161 <ol class="toc">
162 <li><a href="#the-cssstyledeclaration-interface"><span class="secno">6.5.1 </span>The <code>CSSStyleDeclaration</code> Interface</a></ol></li>
163 <li><a href="#css-values"><span class="secno">6.6 </span>CSS Values</a>
164 <ol class="toc">
165 <li><a href="#parsing-css-values"><span class="secno">6.6.1 </span>Parsing CSS Values</a></li>
166 <li><a href="#serializing-css-values"><span class="secno">6.6.2 </span>Serializing CSS Values</a>
167 <ol class="toc">
168 <li><a href="#examples-0"><span class="secno">6.6.2.1 </span>Examples</a></ol></ol></ol></li>
169 <li><a href="#dom-access-to-css-declaration-blocks"><span class="secno">7 </span>DOM Access to CSS Declaration Blocks</a>
170 <ol class="toc">
171 <li><a href="#the-elementcssinlinestyle-interface"><span class="secno">7.1 </span>The <code>ElementCSSInlineStyle</code> Interface</a></li>
172 <li><a href="#extensions-to-the-window-interface"><span class="secno">7.2 </span>Extensions to the <code>Window</code> Interface</a></ol></li>
173 <li><a href="#resolved-values"><span class="secno">8 </span>Resolved Values</a></li>
174 <li><a href="#iana-considerations"><span class="secno">9 </span>IANA Considerations</a>
175 <ol class="toc">
176 <li><a href="#default-style"><span class="secno">9.1 </span><code>Default-Style</code></a></ol></li>
177 <li><a class="no-num" href="#references">References</a>
178 <ol class="toc">
179 <li><a class="no-num" href="#normative-references">Normative references</a></li>
180 <li><a class="no-num" href="#informative-references">Informative references</a></ol></li>
181 <li><a class="no-num" href="#changes">Change History</a>
182 <ol class="toc">
183 <li><a class="no-num" href="#changes-from-dom2">Changes From DOM-2 Style</a></ol></li>
184 <li><a class="no-num" href="#acknowledgments">Acknowledgments</a></ol>
185 <!--end-toc-->
187 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
189 <h2 id="introduction"><span class="secno">1 </span>Introduction</h2>
191 <p>This document formally specifies the core features of the CSS Object Model (CSSOM). Other documents in the CSSOM family of specifications
192 as well as other CSS related specifications define extensions to these core features.</p>
194 <p>The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to
195 and manipulation of style related state information and processes.</p>
197 <p>The features defined below are fundamentally based on prior specifications of the W3C DOM Working Group, primarily
198 <a href="#refsDOM2STYLE">[DOM2STYLE]</a>. The purposes of the present document are (1) to improve on that prior work by providing
199 more technical specificity (so as to improve testability and interoperability), (2) to deprecate or remove certain less-widely implemented
200 features no longer considered to be essential in this context, and (3) to newly specify certain extensions that have been
201 or expected to be widely implemented.</p>
203 <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>
205 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
207 <h2 id="conformance"><span class="secno">2 </span>Conformance</h2>
209 <p>All diagrams, examples, and notes in this specification are
210 non-normative, as are all sections explicitly marked non-normative.
211 Everything else in this specification is normative.
213 <p>The key words "MUST", "MUST NOT", "REQUIRED", <!--"SHALL", "SHALL
214 NOT",--> "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and
215 "OPTIONAL" in the normative parts of this document are to be
216 interpreted as described in RFC2119. For readability, these words do
217 not appear in all uppercase letters in this specification.
218 <a href="#refsRFC2119">[RFC2119]</a>
220 <p>Requirements phrased in the imperative as part of algorithms
221 (such as "strip any leading space characters" or "return false and
222 terminate these steps") are to be interpreted with the meaning of the
223 key word ("must", "should", "may", etc) used in introducing the
224 algorithm.
226 <p>Conformance requirements phrased as algorithms or specific steps
227 may be implemented in any manner, so long as the end result is
228 equivalent. (In particular, the algorithms defined in this
229 specification are intended to be easy to follow, and not intended to
230 be performant.)
232 <p id="hardwareLimitations">User agents may impose
233 implementation-specific limits on otherwise unconstrained inputs,
234 e.g. to prevent denial of service attacks, to guard against running
235 out of memory, or to work around platform-specific limitations.
237 <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.
239 <p>Unless otherwise stated, string comparisons are done in a
240 <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> manner.
242 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
244 <h2 id="terminology"><span class="secno">3 </span>Terminology</h2>
246 <p>This specification employs certain terminology from the following documents:
247 <cite>DOM4</cite>,
248 <cite>HTML</cite>,
249 <cite>Associating Style Sheets with XML documents</cite>
250 and
251 <cite>XML</cite>
252 <a href="#refsDOM">[DOM]</a>
253 <a href="#refsHTML">[HTML]</a>
254 <a href="#refsXMLSS">[XMLSS]</a>
255 <a href="#refsXML">[XML]</a>.
257 <p>When this specification talks about object
258 <code><var>A</var></code> where <code><var>A</var></code> is actually an interface, it generally means an object implementing interface
259 <code><var>A</var></code>.</p>
261 <p>The term <dfn id="whitespace">whitespace</dfn> is used as defined in <a href="#refsCSS">[CSS]</a>.
263 <p>The terms <dfn id="set">set</dfn> and <dfn id="clear">clear</dfn> to refer to the <code>true</code> and
264 <code>false</code> values of binary flags or variables, respectively. These terms are also used as verbs in which case they refer to
265 mutating some value to make it <code>true</code> or <code>false</code>, respectively.</p>
267 <!-- ........................................................................................................................ -->
268 <!-- ........................................................................................................................ -->
270 <h3 id="common-serializing-idioms"><span class="secno">3.1 </span>Common Serializing Idioms</h3>
272 <p>To <dfn id="escape-a-character">escape a character</dfn> means to create a string of
273 "<code>\</code>" (U+005C), followed by the character.</p>
275 <p>To <dfn id="escape-a-character-as-code-point">escape a character as code point</dfn> means to create a
276 string of "<code>\</code>" (U+005C), followed by the Unicode code point as
277 the smallest possible number of hexadecimal digits in the range 0-9 a-f
278 (U+0030 to U+0039 and U+0061 to U+0066) to represent the code point in
279 base 16, followed by a single SPACE (U+0020).</p>
281 <p>To <dfn id="serialize-an-identifier">serialize an identifier</dfn> means to create a string represented
282 by the concatenation of, for each character of the identifier:</p>
284 <ul>
285 <li>If the character is NULL (U+0000), then <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> an
286 <code class="external"><a href="http://dom.spec.whatwg.org/#invalidcharactererror">InvalidCharacterError</a></code> exception and terminate these steps.</li>
287 <li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or
288 [\7f-\9f] (U+007F to U+009F), then the character
289 <a href="#escape-a-character-as-code-point" title="escape a character as code point">escaped as code point</a>.</li>
290 <li>If the character is the first character and is in the range [0-9]
291 (U+0030 to U+0039), then the character
292 <a href="#escape-a-character-as-code-point" title="escape a character as code point">escaped as code point</a>.</li>
293 <li>If the character is the second character and is in the range [0-9]
294 (U+0030 to U+0039) and the first character is a "<code>-</code>"
295 (U+002D), then the character
296 <a href="#escape-a-character-as-code-point" title="escape a character as code point">escaped as code point</a>.</li>
297 <li>If the character is the second character and is "<code>-</code>"
298 (U+002D) and the first character is "<code>-</code>" as well, then the
299 <a href="#escape-a-character" title="escape a character">escaped</a> character.</li>
300 <li>If the character is not handled by one of the above rules and is
301 greater than or equal to U+0080, is "<code>-</code>" (U+002D) or
302 "<code>_</code>" (U+005F), or is in one of the ranges [0-9] (U+0030 to
303 U+0039), [A-Z] (U+0041 to U+005A), or [a-z] (U+0061 to U+007A), then the character
304 itself.</li>
305 <li>Otherwise, the <a href="#escape-a-character" title="escape a character">escaped</a>
306 character.</li>
307 </ul>
309 <p>To <dfn id="serialize-a-string">serialize a string</dfn> means to create a string represented
310 by '<code>"</code>' (U+0022), followed by the result of applying the rules
311 below to each character of the given string, followed by
312 '<code>"</code>' (U+0022):</p>
314 <ul>
315 <li>If the character is NULL (U+0000), then <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> an
316 <code class="external"><a href="http://dom.spec.whatwg.org/#invalidcharactererror">InvalidCharacterError</a></code> exception and terminate these steps.</li>
317 <li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or [\7f-\9f] (U+007F to
318 U+009F), the character <a href="#escape-a-character-as-code-point" title="escape a character as code point">escaped as code point</a>.</li>
319 <li>If the character is '<code>"</code>' (U+0022) or '<code>\</code>'
320 (U+005C), the <a href="#escape-a-character" title="escape a character">escaped</a> character.</li>
321 <li>Otherwise, the character itself.</li>
322 </ul>
324 <p class="note">"<code>'</code>" (U+0027) is not escaped because strings
325 are always serialized with '<code>"</code>' (U+0022).</p>
327 <p>To <dfn id="serialize-a-url">serialize a URL</dfn> means to create a string represented by
328 "<code>url(</code>", followed by the
329 <a href="#serialize-a-string" title="serialize a string">string escaped</a> value of the given
330 string, followed by "<code>)</code>".</p>
332 <p>To <dfn id="serialize-a-comma-separated-list">serialize a comma-separated list</dfn> concatenate all items of
333 the list in list order while separating them by "<code>, </code>", i.e.,
334 COMMA (U+002C) followed by a single SPACE (U+0020).</p>
336 <p>To <dfn id="serialize-a-whitespace-separated-list">serialize a whitespace-separated list</dfn> concatenate all
337 items of the list in list order while separating them by "<code> </code>", i.e.,
338 a single SPACE (U+0020).</p>
340 <p class="note">When serializing a list according to the above rules,
341 extraneous whitespace is not inserted prior to the first item or subsequent to
342 the last item. Unless otherwise specified, an empty list is serialized as the
343 empty string.</p>
345 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
347 <h2 id="media-queries"><span class="secno">4 </span>Media Queries</h2>
349 <p>Media queries are defined by the Media Queries specification. This
350 section defines various concepts around media queries, including their API
351 and serialization form.</p>
353 <!-- XXX ref -->
355 <!-- ........................................................................................................................ -->
356 <!-- ........................................................................................................................ -->
358 <h3 id="parsing-media-queries"><span class="secno">4.1 </span>Parsing Media Queries</h3>
360 <p>To
361 <dfn id="parse-a-media-query-list">parse a media query list</dfn> for a
362 given string <var>s</var> into a media query list is defined in
363 the Media Queries specification. Return the list of one or more media
364 queries that the algorithm defined there gives.</p> <!-- XXX ref -->
366 <p class="note">A media query that ends up being "ignored" will turn
367 into "<code>not all</code>".</p>
369 <p>To
370 <dfn id="parse-a-media-query">parse a media query</dfn> for a given string
371 <var>s</var> means to follow the
372 <a href="#parse-a-media-query-list">parse a media query list</a> steps and return <code>null</code> if more
373 than one media query is returned or a media query if a
374 single media query is returned.</p>
376 <p class="note">Again, a media query that ends up being "ignored" will
377 turn into "<code>not all</code>".</p>
379 <!-- ........................................................................................................................ -->
381 <h3 id="serializing-media-queries"><span class="secno">4.2 </span>Serializing Media Queries</h3>
383 <p>To
384 <dfn id="serialize-a-media-query-list">serialize a media query list</dfn>
385 run these steps:</p>
387 <ol>
388 <li><p>If the media query list is empty return the empty string and
389 terminate these steps.</li>
391 <li><p><a href="#serialize-a-media-query" title="serialize a media query">Serialize</a> each
392 media query in the list of media queries, sort them in lexicographical
393 order, and then
394 <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serialize</a> the
395 list.</li>
396 </ol>
398 <p>To
399 <dfn id="serialize-a-media-query">serialize a media query</dfn> let
400 <var>s</var> be the empty string, run the steps below, and
401 finally return <var>s</var>:</p>
403 <ol>
404 <li><p>If the media query is negated append "<code>not</code>", followed
405 by a single SPACE (U+0020), to <var>s</var>.</li>
407 <li><p>Let <var>type</var> be the media type of the media query,
408 <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a> and
409 <a class="external" href="http://dom.spec.whatwg.org/#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.</li>
411 <li><p>If the media query does not contain media features append
412 <var>type</var>, to <var>s</var>,
413 then return <var>s</var> and terminate this algorithm.</li>
415 <li><p>If <var>type</var> is not "<code>all</code>" or if the
416 media query is negated append <var>type</var>, followed by a
417 single SPACE (U+0020), followed by "<code>and</code>", followed by a single SPACE
418 (U+0020), to <var>s</var>.</li>
420 <li><p>Sort the media features in lexicographical order.</li>
422 <li>
423 <p>Then, for each media feature:</p>
425 <ol>
426 <li>Append a "<code>(</code>" (U+0028), followed by the media feature
427 name, <a class="external" href="http://dom.spec.whatwg.org/#converted-to-ascii-lowercase">converted to ASCII lowercase</a>,
428 to <var>s</var>.<p></li>
430 <li><p>If a value is given append a "<code>:</code>" (U+003A), followed
431 by a single SPACE (U+0020), followed by the
432 <a href="#serialize-a-media-feature-value" title="serialize a media feature value">serialized media feature value</a>,
433 to <var>s</var>.</li>
435 <li><p>Append a "<code>)</code>" (U+0029) to
436 <var>s</var>.</li>
438 <li><p>If this is not the last media feature append a single SPACE (U+0020),
439 followed by "<code>and</code>", followed by a single SPACE (U+0020), to
440 <var>s</var>.</li>
441 </ol>
442 </li>
443 </ol>
445 <div class="example">
446 <p>Here are some examples of input (first column) and output (second
447 column):</p>
449 <table>
450 <thead>
451 <tr><th>Input<th>Output
452 <tbody>
453 <tr>
454 <td><pre>not screen and (min-WIDTH:5px) AND (max-width:40px)</pre>
455 <td><pre>not screen and (max-width: 40px) and (min-width: 5px)</pre>
456 <tr>
457 <td><pre>all and (color) and (color)</pre>
458 <td><pre>(color)</pre>
459 </table>
460 </div>
463 <!-- ........................................................................................................................ -->
465 <h4 id="serializing-media-feature-values"><span class="secno">4.2.1 </span>Serializing Media Feature Values</h4>
467 <p class="issue">This should probably be done in terms of mapping it to
468 serializing CSS values as media features are defined in terms of CSS
469 values after all.</p>
471 <p>To <dfn id="serialize-a-media-feature-value">serialize a media feature value</dfn>
472 named <var>v</var> locate <var>v</var> in the first
473 column of the table below and use the serialization format described in
474 the second column:</p>
476 <table>
477 <tr>
478 <th>Media Feature
479 <th>Serialization
480 <tr>
481 <td><code>width</code>
482 <td>...
483 <tr>
484 <td><code>height</code>
485 <td>...
486 <tr>
487 <td><code>device-width</code>
488 <td>...
489 <tr>
490 <td><code>device-height</code>
491 <td>...
492 <tr>
493 <td><code>orientation</code>
494 <td>
495 <p>If the value is `<code>portrait</code>`: "<code>portrait</code>".</p>
496 <p>If the value is `<code>landscape</code>`: "<code>landscape</code>".</p>
497 <tr>
498 <td><code>aspect-ratio</code>
499 <td>...
500 <tr>
501 <td><code>device-aspect-ratio</code>
502 <td>...
503 <tr>
504 <td><code>color</code>
505 <td>...
506 <tr>
507 <td><code>color-index</code>
508 <td>...
509 <tr>
510 <td><code>monochrome</code>
511 <td>...
512 <tr>
513 <td><code>resolution</code>
514 <td>...
515 <tr>
516 <td><code>scan</code>
517 <td>
518 <p>If the value is `<code>progressive</code>`: "<code>progressive</code>".</p>
519 <p>If the value is `<code>interlace</code>`: "<code>interlace</code>".</p>
520 <tr>
521 <td><code>grid</code>
522 <td>...
523 </table>
525 <p>Other specifications can extend this table and vendor-prefixed media
526 features can have custom serialization formats as well.</p>
528 <!-- ........................................................................................................................ -->
529 <!-- ........................................................................................................................ -->
531 <h3 id="comparing-media-queries"><span class="secno">4.3 </span>Comparing Media Queries</h3>
533 <p>To
534 <dfn id="compare-media-queries">compare media queries</dfn>
535 <var>m1</var> and <var>m2</var> means to
536 <a href="#serialize-a-media-query" title="serialize a media query">serialize</a> them both and
537 return true if they are a
538 <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match and false if they
539 are not.</p>
541 <!-- ........................................................................................................................ -->
542 <!-- ........................................................................................................................ -->
544 <h3 id="the-medialist-interface"><span class="secno">4.4 </span>The <code>MediaList</code> Interface</h3>
546 <p>An object that implements the <a class="idlType" href="#widl-def-MediaList"><code>MediaList</code></a> interface has an associated <dfn id="collection-of-media-queries">collection of media queries</dfn>.</p>
547 <pre class="idl"><span class="idlInterface" id="widl-def-MediaList">[Constructor(DOMString text)]
548 interface <span class="idlInterfaceID">MediaList</span> {
549 <span class="idlAttribute"> stringifier attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-MediaList-mediaText">mediaText</a></span>;</span>
550 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>unsigned long</a></span> <span class="idlAttrName"><a href="#widl-MediaList-length">length</a></span>;</span>
551 <span class="idlMethod"> <span class="idlMethType"><a>DOMString</a></span> <span class="idlMethName"><a href="#widl-MediaList-item-DOMString-unsigned-long-index">item</a></span> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>);</span>
552 <span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-MediaList-appendMedium-void-DOMString-medium">appendMedium</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">medium</span></span>);</span>
553 <span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-MediaList-deleteMedium-void-DOMString-medium">deleteMedium</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">medium</span></span>);</span>
554 };</span></pre>
555 <dl class="constructors">
556 <dt class="constructor" id="widl-MediaList-DOMString-text">
557 <code>MediaList</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">text</span></span>)</dt>
558 <dd>
559 <p>To <dfn id="create-a-medialist-object">create a <code>MediaList</code> object</dfn> from a string <var>text</var>, run these steps:</p> <ol> <li><p>Create a new <code>MediaList</code> object.</li> <li><p>Set its <span title="dom-MediaList-mediaText">mediaText</span> attribute to <var>text</var>.</li> <li><p>Return the newly created <code><code>MediaList</code></code> object.</li> </ol></dd>
560 </dl>
561 <dl class="attributes">
562 <dt class="attribute" id="widl-MediaList-mediaText">
563 <code>mediaText</code> of type <span class="idlAttrType"><a>DOMString</a></span></dt>
564 <dd>
565 <p>The <code>mediaText</code> attribute must return a <a href="#serialize-a-media-query-list" title="serialize a media query list">serialization</a> of the <a href="#collection-of-media-queries">collection of media queries</a>.</p> <p>Setting the <code>mediaText</code> attribute must run these steps: <ol> <li><p>Empty the <a href="#collection-of-media-queries">collection of media queries</a>.</li> <li><p>If the given value is the empty string terminate these steps.</li> <li><p>Append all the media queries as a result of <a href="#parse-a-media-query-list" title="parse a media query list">parsing</a> the given value to the <a href="#collection-of-media-queries">collection of media queries</a>.</li> </ol></dd>
566 <dt class="attribute" id="widl-MediaList-length">
567 <code>length</code> of type <span class="idlAttrType"><a>unsigned long</a></span>, readonly</dt>
568 <dd>
569 <p>The <code>length</code> attribute must return the number of media queries in the <a href="#collection-of-media-queries">collection of media queries</a>.</dd>
570 </dl>
571 <dl class="methods">
572 <dt class="method" id="widl-MediaList-item-DOMString-unsigned-long-index">
573 <code>item</code> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>), returns <span class="idlMethType"><a>DOMString</a></span></dt>
574 <dd>
575 <p>The <code>item</code> method must return the media query in the <a href="#collection-of-media-queries">collection of media queries</a> given by <var>index</var>, or <code>null</code>, if <var>index</var> is greater than or equal to the number of media queries in the <a href="#collection-of-media-queries">collection of media queries</a>.</dd>
576 <dt class="method" id="widl-MediaList-appendMedium-void-DOMString-medium">
577 <code>appendMedium</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">medium</span></span>), returns <span class="idlMethType"><a>void</a></span></dt>
578 <dd>
579 <p>The <code>appendMedium</code> method must run these steps:</p> <ol> <li><p>Let <var>m</var> be the result of <a href="#parse-a-media-query" title="parse a media query">parsing</a> the given value.</li> <li><p>If <var>m</var> is <code>null</code> terminate these steps.</li> <li><p>If <a href="#compare-media-queries" title="compare media queries">comparing</a> <var>m</var> with any of the media queries in the <a href="#collection-of-media-queries">collection of media queries</a> returns true terminate these steps.</li> <li><p>Append <var>m</var> to the <a href="#collection-of-media-queries">collection of media queries</a>.</li> </ol></dd>
580 <dt class="method" id="widl-MediaList-deleteMedium-void-DOMString-medium">
581 <code>deleteMedium</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">medium</span></span>), returns <span class="idlMethType"><a>void</a></span></dt>
582 <dd>
583 <p>The <code>deleteMedium</code> method must run these steps:</p> <ol> <li><p>Let <var>m</var> be the result of <a href="#parse-a-media-query" title="parse a media query">parsing</a> the given value.</li> <li><p>If <var>m</var> is <code>null</code> terminate these steps.</li> <li><p>Remove any media query from the <a href="#collection-of-media-queries">collection of media queries</a> for which <a href="#compare-media-queries" title="compare media queries">comparing</a> the media query with <var>m</var> returns true.</li> </ol></dd>
584 </dl>
587 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
589 <h2 id="selectors"><span class="secno">5 </span>Selectors</h2>
591 <p>Selectors are defined in the Selectors specification. This section
592 mainly defines how to serialize them.</p> <!-- XXX ref -->
594 <!-- XXX ref universal selector etc? some are in <span> some not -->
596 <!-- ........................................................................................................................ -->
597 <!-- ........................................................................................................................ -->
599 <h3 id="parsing-selectors"><span class="secno">5.1 </span>Parsing Selectors</h3>
601 <p>To
602 <dfn id="parse-a-group-of-selectors">parse a group of selectors</dfn>
603 means to parse the value using the <code>selectors_group</code>
604 production defined in the Selectors specification and return either a
605 group of selectors if parsing did not fail or <code>null</code> if parsing did
606 fail.</p> <!-- XXX ref -->
608 <!-- ........................................................................................................................ -->
609 <!-- ........................................................................................................................ -->
611 <h3 id="serializing-selectors"><span class="secno">5.2 </span>Serializing Selectors</h3>
612 <!-- http://dump.testsuite.org/2009/cssom/serializing-selectors.htm -->
614 <p>To
615 <dfn id="serialize-a-group-of-selectors">serialize a group of selectors</dfn>
616 <a href="#serialize-a-selector" title="serialize a selector">serialize</a> each selector in the
617 group of selectors and then
618 <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serialize</a> the
619 group.</p>
621 <p>To <dfn id="serialize-a-selector">serialize a selector</dfn> let
622 <var>s</var> be the empty string, run the steps below for each
623 part of the chain of the selector, and finally return
624 <var>s</var>:</p>
626 <ol>
627 <li><p>If there is only one <span>simple selector</span> in the
628 <span>sequence of simple selectors</span> which is a
629 <span>universal selector</span>, append the result of
630 <a href="#serialize-a-simple-selector" title="serialize a simple selector">serializing</a> the
631 <span>universal selector</span> to <var>s</var>.</li>
633 <li><p>Otherwise, for each <span>simple selector</span> in the
634 <span>sequence of simple selectors</span> that is not a
635 universal selector of which the <span>namespace prefix</span> maps to
636 the null namespace (not in a namespace) or of which the
637 <span>namespace prefix</span> maps to a namespace that is not the
638 <span>default namespace</span>
639 <a href="#serialize-a-simple-selector" title="serialize a simple selector">serialize</a> the
640 <span>simple selector</span> and append the result to
641 <var>s</var>.</li>
643 <li><p>If this is not the last part of the chain of the selector append a
644 single SPACE (U+0020), followed by the combinator
645 "<code>></code>",
646 "<code>+</code>", or
647 "<code>~</code>"
648 as appropriate, followed by another single SPACE (U+0020) if the combinator was
649 not whitespace, to <var>s</var>.</li>
651 <li><p>If this is the last part of the chain of the selector and there is
652 a pseudo-element, append "<code>::</code>" followed by the name of the
653 pseudo-class, to <var>s</var>.</li>
654 </ol>
657 <p>To
658 <dfn id="serialize-a-simple-selector">serialize a simple selector</dfn>
659 let <var>s</var> be the empty string, run the steps below, and
660 finally return <var>s</var>:</p>
662 <dl class="switch">
663 <dt>type selector</dt>
664 <dt>universal selector</dt>
665 <dd>
666 <ol>
667 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
668 not the <span>default namespace</span> and is not the
669 null namespace (not in a namespace) append the
670 <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>
671 <span>namespace prefix</span>, followed by a "<code>|</code>" (U+007C)
672 to <var>s</var>.</li>
674 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
675 the null namespace (not in a namespace) append
676 "<code>|</code>" (U+007C) to <var>s</var>.</li>
677 <!-- This includes |* -->
679 <li><p>If this is a type selector append the
680 <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a> element name to
681 <var>s</var>.</li>
683 <li><p>If this is a universal selector append "<code>*</code>" (U+002A)
684 to <var>s</var>.</li>
685 </ol>
686 </dd>
688 <dt>attribute selector</dt>
689 <dd>
690 <ol>
691 <li><p>Append "<code>[</code>" (U+005B) to
692 <var>s</var>.</li>
694 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
695 not the null namespace (not in a namespace) append the
696 <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>
697 <span>namespace prefix</span>, followed by a "<code>|</code>" (U+007C)
698 to <var>s</var>.</li>
700 <li><p>If the <span>namespace prefix</span> maps to a namespace that is
701 the null namespace (not in a namespace) append
702 "<code>|</code>" (U+007C) to <var>s</var>.</li>
703 <!-- This includes |* -->
705 <li><p>Append the <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>
706 attribute name to <var>s</var>.</li>
708 <li><p>If there is an attribute value specified, append
709 "<code>=</code>",
710 "<code>~=</code>",
711 "<code>|=</code>",
712 "<code>^=</code>",
713 "<code>$=</code>", or
714 "<code>*=</code>"
715 as appropriate (depending on the type of attribute selector), followed
716 by the <a href="#serialize-a-string" title="serialize a string">string escaped</a>
717 attribute value, to <var>s</var>.</li>
719 <li><p>Append "<code>]</code>" (U+005D) to
720 <var>s</var>.</li>
721 </ol>
722 </dd>
724 <dt>class selector</dt>
725 <dd><p>Append a "<code>.</code>" (U+002E), followed by the
726 <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a> class name to
727 <var>s</var>.</dd>
729 <dt>ID selector</dt>
730 <dd><p>Append a "<code>#</code>" (U+0023), followed by the
731 <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a> ID to
732 <var>s</var>.</dd>
734 <dt>pseudo-class</dt>
735 <dd>
736 <p>If the pseudo-class does not accept arguments append
737 "<code>:</code>" (U+003A), followed by the name of the pseudo-class, to
738 <var>s</var>.</p>
740 <p>Otherwise, append "<code>:</code>" (U+003A), followed by the name of
741 the pseudo-class, followed by "<code>(</code>" (U+0028), followed by the
742 value of the pseudo-class argument determined as per below, followed by
743 "<code>)</code>" (U+0029), to <var>s</var>.</p>
745 <dl class="switch">
746 <dt><code>:lang()</code></dt>
747 <dd><p>The <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>
748 value.</dd>
750 <dt><code>:nth-child()</code></dt>
751 <dt><code>:nth-last-child()</code></dt>
752 <dt><code>:nth-of-type()</code></dt>
753 <dt><code>:nth-last-of-type()</code></dt>
754 <dd>
755 <ol>
756 <li><p>If the value is odd let the value be
757 "<code>2n+1</code>".</li>
759 <li><p>If the value is even let the value be
760 "<code>2n</code>".</li>
762 <li><p>If <var>a</var> is zero let the value be
763 <var>b</var>
764 <a href="#serialize-a-css-value-component" title="serialize a CSS component value">serialized</a> as <integer>.</li>
766 <li><p>If <var>a</var> is one or minus one and
767 <var>b</var> is zero let the value be
768 "<code>n</code>" (U+006E).</li>
770 <li><p>If <var>a</var> is one or minus one let the value be
771 "<code>n</code>" (U+006E), followed by
772 "<code>+</code>" (U+002B) if <var>b</var> is positive,
773 followed by <var>b</var>
774 <a href="#serialize-a-css-value-component" title="serialize a CSS component value">serialized</a> as <integer>.</li>
776 <li><p>If <var>b</var> is zero let the value be
777 <var>a</var>
778 <a href="#serialize-a-css-value-component" title="serialize a CSS component value">serialized</a> as <integer>,
779 followed by "<code>n</code>" (U+006E).</li>
781 <li><p>Otherwise let the value be
782 <var>a</var>
783 <a href="#serialize-a-css-value-component" title="serialize a CSS component value">serialized</a> as <integer>,
784 followed by "<code>n</code>" (U+006E), followed by
785 "<code>+</code>" (U+002B) if <var>b</var> is positive,
786 followed by <var>b</var>
787 <a href="#serialize-a-css-value-component" title="serialize a CSS component value">serialized</a> as <integer>.</li>
788 </ol>
789 </dd>
791 <dt><code>:not()</code></dt>
792 <dd><p>The result of serializing the value using the rules for
793 <a href="#serialize-a-group-of-selectors" title="serialize a group of selectors">serializing a group of selectors</a>.</dd>
794 </dl>
795 </dd>
796 </dl>
798 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
800 <h2 id="css"><span class="secno">6 </span>CSS</h2>
802 <!-- ........................................................................................................................ -->
803 <!-- ........................................................................................................................ -->
805 <h3 id="css-style-sheets"><span class="secno">6.1 </span>CSS Style Sheets</h3>
807 <!-- XXX
808 element inserted into the DOM, style sheet created, element removed from
809 the DOM, what happens to StyleSheet?
810 -->
812 <p>A <dfn id="css-style-sheet">CSS style sheet</dfn> is an abstract concept that
813 represents a style sheet as defined by the CSS specification. In the CSSOM a
814 <a href="#css-style-sheet">CSS style sheet</a> is represented as a <code>CSSStyleSheet</code> object. A
815 <a href="#css-style-sheet">CSS style sheet</a> has a number of associated state items:</p>
817 <dl>
818 <dt><dfn id="style-sheet-type">style sheet type</dfn></dt>
819 <dd><p>The literal string "<code>text/css</code>".</dd>
821 <dt><dfn id="style-sheet-location">style sheet location</dfn></dt>
822 <dd><p>The <a class="external" href="http://dev.w3.org/html5/spec/single-page.html#url">URL</a> of the
823 <span>style sheet</span> or <code>null</code> if the <span>style sheet</span> was
824 embedded.</dd>
826 <dt><dfn id="style-sheet-parent">style sheet parent</dfn></dt>
827 <dd><p>The <span>style sheet</span> that is the parent of the
828 <span>style sheet</span> or <code>null</code> if there is no associated parent.</dd>
830 <dt><dfn id="style-sheet-owner-node">style sheet owner node</dfn></dt>
831 <dd><p>The DOM node associated with the <span>style sheet</span> or
832 <code>null</code> if there is no associated DOM node.</dd>
834 <dt><dfn id="style-sheet-owner-css-rule">style sheet owner CSS rule</dfn></dt>
835 <dd><p>The <a href="#rule">CSS rule</a> in the <a href="#style-sheet-parent">style sheet parent</a>
836 that caused the inclusion of the <span>style sheet</span> or <code>null</code> if
837 there is no associated rule.</dd>
839 <dt><dfn id="style-sheet-media">style sheet media</dfn></dt>
840 <dd>
841 <p>The <code>MediaList</code> object associated with the
842 <span>style sheet</span>.</p>
844 <p>If this property is set to a string run the
845 <a href="#create-a-medialist-object">create a <code>MediaList</code> object</a> steps for that
846 string and associate the returned object with the
847 <span>style sheet</span>.</p>
848 </dd>
850 <dt><dfn id="style-sheet-title">style sheet title</dfn></dt>
851 <dd>
852 <p>The title of the <span>style sheet</span> or <code>null</code> if no title
853 is specified or is the empty string, in which case the title is referred to
854 as an empty title.</p>
856 <div class="example">
857 <p>In the following, the <a href="#style-sheet-title">style sheet title</a> is non-empty
858 for the first style sheet, but is empty for the second and third style sheets.</p>
859 <pre><style title="papaya whip">
860 body { background: #ffefd5; }
861 </style></pre>
862 <pre><style title="">
863 body { background: orange; }
864 </style></pre>
865 <pre><style>
866 body { background: brown; }
867 </style></pre>
868 </div>
869 </dd>
871 <dt><dfn id="style-sheet-alternate-flag">style sheet alternate flag</dfn></dt>
872 <dd>
873 <p>Either set or clear. Clear by default.</p>
875 <div class="example">
876 <p>The following <span title="style sheet">style sheets</span> have
877 their <a href="#style-sheet-alternate-flag">style sheet alternate flag</a> set:</p>
879 <pre><?xml-stylesheet alternate="yes" title="x" href="data:text/css,…"?></pre>
881 <pre><link rel="alternate stylesheet" title="x" href="data:text/css,…"></pre>
882 </div>
883 </dd>
885 <dt><dfn id="style-sheet-disabled-flag">style sheet disabled flag</dfn></dt>
886 <dd>
887 <p>Either set or clear. Clear by default.</p>
889 <p class="note">Even when clear it does not necessarily mean that the
890 <span>style sheet</span> is actually used for rendering.</p>
891 </dd>
894 <dt><dfn id="style-sheet-css-rules">style sheet CSS rules</dfn></dt>
895 <dd><p>The <a href="#rule" title="CSS rule">CSS rules</a> associated with the
896 <span>style sheet</span>.</dd>
897 </dl>
899 <p>When you are to <a href="#create-a-style-sheet">create a style sheet</a> the above properties,
900 with the exception of <a href="#style-sheet-type">style sheet type</a> and
901 <a href="#style-sheet-css-rules">style sheet CSS rules</a>, are to be set to
902 their proper values.</p>
904 <!-- same-origin restrictions -->
906 <!-- ........................................................................................................................ -->
908 <h4 id="the-stylesheet-interface"><span class="secno">6.1.1 </span>The <code>StyleSheet</code> Interface</h4>
910 <p>The <code>StyleSheet</code> interface represents an abstract, base style sheet.</p>
911 <pre class="idl"><span class="idlInterface" id="widl-def-StyleSheet">interface <span class="idlInterfaceID">StyleSheet</span> {
912 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-StyleSheet-type">type</a></span>;</span>
913 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a>?</span> <span class="idlAttrName"><a href="#widl-StyleSheet-href">href</a></span>;</span>
914 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>Node</a></span> <span class="idlAttrName"><a href="#widl-StyleSheet-ownerNode">ownerNode</a></span>;</span>
915 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>StyleSheet</a>?</span> <span class="idlAttrName"><a href="#widl-StyleSheet-parentStyleSheet">parentStyleSheet</a></span>;</span>
916 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a>?</span> <span class="idlAttrName"><a href="#widl-StyleSheet-title">title</a></span>;</span>
917 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>MediaList</a></span> <span class="idlAttrName"><a href="#widl-StyleSheet-media">media</a></span>;</span>
918 <span class="idlAttribute"> attribute <span class="idlAttrType"><a>boolean</a></span> <span class="idlAttrName"><a href="#widl-StyleSheet-disabled">disabled</a></span>;</span>
919 };</span></pre>
920 <dl class="attributes">
921 <dt class="attribute" id="widl-StyleSheet-type">
922 <code>type</code> of type <span class="idlAttrType"><a>DOMString</a></span>, readonly</dt>
923 <dd>
924 <p>The <code>type</code> attribute must return the <a href="#style-sheet-type">style sheet type</a>.</dd>
925 <dt class="attribute" id="widl-StyleSheet-href">
926 <code>href</code> of type <span class="idlAttrType"><a>DOMString</a>?</span>, readonly</dt>
927 <dd>
928 <p>The <code>href</code> attribute must return the <a href="#style-sheet-location">style sheet location</a> or <code>null</code> if none.</p> <p class="issue">What should the default value be if not known or specified upon creation? an empty string or <code>null</code>?</dd>
929 <dt class="attribute" id="widl-StyleSheet-ownerNode">
930 <code>ownerNode</code> of type <span class="idlAttrType"><a>Node</a></span>, readonly</dt>
931 <dd>
932 <p>The <code>ownerNode</code> attribute must return the <a href="#style-sheet-owner-node">style sheet owner node</a>.</p> <p class="issue">Should <code>ownerNode</code> be nullable?</dd>
933 <dt class="attribute" id="widl-StyleSheet-parentStyleSheet">
934 <code>parentStyleSheet</code> of type <span class="idlAttrType"><a>StyleSheet</a>?</span>, readonly</dt>
935 <dd>
936 <p>The <code>parentStyleSheet</code> attribute must return the <a href="#style-sheet-parent">style sheet parent</a> or <code>null</code> if there is none.</dd>
937 <dt class="attribute" id="widl-StyleSheet-title">
938 <code>title</code> of type <span class="idlAttrType"><a>DOMString</a>?</span>, readonly</dt>
939 <dd>
940 <p>The <code>title</code> attribute must return the <a href="#style-sheet-title">style sheet title</a> or <code>null</code> if none.</p> <p class="issue">What should the default value be if not known or specified upon creation? an empty string or <code>null</code>?</dd>
941 <dt class="attribute" id="widl-StyleSheet-media">
942 <code>media</code> of type <span class="idlAttrType"><a>MediaList</a></span>, readonly</dt>
943 <dd>
944 <p>The <code>media</code> attribute must return the <a href="#style-sheet-media">style sheet media</a>.</p> <p class="issue">Should <code>media</code> be nullable?</p> <p class="issue">Need to define a setter that implements the semantics of setting this attribute to a string representing a MediaList.</dd>
945 <dt class="attribute" id="widl-StyleSheet-disabled">
946 <code>disabled</code> of type <span class="idlAttrType"><a>boolean</a></span></dt>
947 <dd>
948 <p>The <code>disabled</code> attribute must return true if the <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> is set, or false otherwise.</p> <p>Setting the <code>disabled</code> attribute must set the <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> if the new value is true, or unset the <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> otherwise.</dd>
949 </dl>
952 <!-- ........................................................................................................................ -->
954 <h4 id="the-cssstylesheet-interface"><span class="secno">6.1.2 </span>The <code>CSSStyleSheet</code> Interface</h4>
956 <p>The <code>CSSStyleSheet</code> interface represents a CSS <span>style sheet</span> rule.</p>
957 <pre class="idl"><span class="idlInterface" id="widl-def-CSSStyleSheet">interface <span class="idlInterfaceID">CSSStyleSheet</span> : <span class="idlSuperclass"><a class="idlType" href="#widl-def-StyleSheet"><code>StyleSheet</code></a></span> {
958 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSRule</a>?</span> <span class="idlAttrName"><a href="#widl-CSSStyleSheet-ownerRule">ownerRule</a></span>;</span>
959 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSRuleList</a></span> <span class="idlAttrName"><a href="#widl-CSSStyleSheet-cssRules">cssRules</a></span>;</span>
960 <span class="idlMethod"> <span class="idlMethType"><a>unsigned long</a></span> <span class="idlMethName"><a href="#widl-CSSStyleSheet-insertRule-unsigned-long-DOMString-rule-unsigned-long-index">insertRule</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">rule</span></span>, <span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>);</span>
961 <span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-CSSStyleSheet-deleteRule-void-unsigned-long-index">deleteRule</a></span> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>);</span>
962 };</span></pre>
963 <dl class="attributes">
964 <dt class="attribute" id="widl-CSSStyleSheet-ownerRule">
965 <code>ownerRule</code> of type <span class="idlAttrType"><a>CSSRule</a>?</span>, readonly</dt>
966 <dd>
967 <p>The <code>ownerRule</code> attribute must return the <a href="#style-sheet-owner-css-rule">style sheet owner CSS rule</a> or <code>null</code> if none. If a value other than <code>null</code> is ever returned, than that same value must always be returned on each get access.</dd>
968 <dt class="attribute" id="widl-CSSStyleSheet-cssRules">
969 <code>cssRules</code> of type <span class="idlAttrType"><a>CSSRuleList</a></span>, readonly</dt>
970 <dd>
971 <p>The <code>cssRules</code> attribute must return a read-only, live <code>CSSRuleList</code> object representing the <a href="#style-sheet-css-rules">style sheet CSS rules</a>. The same object must be returned on each get access.</p> <p class="note">Even though the returned <code>CSSRuleList</code> object is read-only (from the perspective of client-authored script), it may nevertheless change over time due to its liveness status. For example, invoking the <code>insertRule</code> or <code>deleteRule</code> operation may result in mutations reflected in the returned object.</dd>
972 </dl>
973 <dl class="methods">
974 <dt class="method" id="widl-CSSStyleSheet-insertRule-unsigned-long-DOMString-rule-unsigned-long-index">
975 <code>insertRule</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">rule</span></span>, <span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>), returns <span class="idlMethType"><a>unsigned long</a></span></dt>
976 <dd>
977 <p>The <code>insertRule</code> operation performs <dfn id="insert-a-css-rule">insert a CSS rule</dfn> <var>rule</var> as follows:</p> <ol> <li><p>Set <var>newRule</var> to the results of performing <a href="#parse-a-css-rule">parse a CSS rule</a> on argument <var>rule</var>, <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throwing</a> a "<code class="external"><a href="http://dom.spec.whatwg.org/#syntaxerror">SyntaxError</a></code>" exception if a parse error occurs.</li> <li><p>Set <var>N</var> to <code>cssLength.length</code>.</li> <li><p>If argument <var>index</var> is greater than <var>N</var>, then <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> an "<code class="external"><a href="http://dom.spec.whatwg.org/#indexsizeerror">IndexSizeError</a></code>" exception.</li> <li><p>If the rule <var>newRule</var> cannot be inserted into the specified <var>index</var> due to constraints specified by <a href="#refsCSS">[CSS]</a>, then <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> a "<code class="external"><a href="http://dom.spec.whatwg.org/#hierarchyrequesterror">HierarchyRequestError</a></code>" exception.</p> <p class="note">For example, a CSS style sheet cannot contain more than one <code>@charset</code> rule, which, if present, must be the first rule.</li> <li><p>Set <var>newRule</var><code>.parentStyleSheet</code> to <code>this</code> (i.e., this <code>CSSStyleSheet</code> instance object).</li> <li><p>Insert rule <var>newRule</var> into <code>cssRules</code> at the zero-indexed position <var>index</var>.<p></li> <li><p>Return <var>index</var>.</li> </ol> <p class="note">If a new rule is inserted, then any rule previously located at position <var>index</var> through <var>N</var> minus 1 is shifted to position <var>index</var> plus 1 through <var>N</var>, In addition, <code>cssRules.length</code> is (internally) incremented.</p> <p class="issue">DOM-2 CSS specifies that a <code>NO_MODIFICATION_ALLOWED_ERR</code> exception is thrown if the style sheet is read-only. Are there any read-only style sheets?</dd>
978 <dt class="method" id="widl-CSSStyleSheet-deleteRule-void-unsigned-long-index">
979 <code>deleteRule</code> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>), returns <span class="idlMethType"><a>void</a></span></dt>
980 <dd>
981 <p>The <code>deleteRule</code> operation performs <dfn id="remove-a-css-rule">remove a CSS rule</dfn> as follows:</p> <ol> <li><p>Set <var>N</var> to <code>cssLength.length</code>.</li> <li><p>If argument <var>index</var> is greater than or equal to <var>N</var>, then <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> an "<code class="external"><a href="http://dom.spec.whatwg.org/#indexsizeerror">IndexSizeError</a></code>" exception.</li> <li><p>Set <var>oldRule</var> to <code>cssRules.prototype.item(<var>index</var>)</code>.</li> <li><p>Set <var>oldRule</var><code>.parentStyleSheet</code> to <code>null</code>.</li> <li><p>Remove rule <var>oldRule</var> from <code>cssRules</code> at the zero-indexed position <var>index</var>.<p></li> </ol> <p class="note">If an existing rule is deleted, then any rule previously located at position <var>index</var> plus 1 through <var>N</var> minus 1 is shifted to position <var>index</var> through <var>N</var> minus 2, In addition, <code>cssRules.length</code> is (internally) decremented.</dd>
982 </dl>
985 <!-- ........................................................................................................................ -->
986 <!-- ........................................................................................................................ -->
988 <h3 id="style-sheet-collections"><span class="secno">6.2 </span>Style Sheet Collections</h3>
990 <p>Below various new concepts are defined that are associated with each
991 <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> object.</p>
993 <p>Each <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> has an associated list of zero or more
994 <span title="style sheet">style sheets</span>, named the
995 <dfn id="document-style-sheets">document style sheets</dfn>. This is
996 an ordered list that contains all
997 <span title="style sheet">style sheets</span> associated with the
998 <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code>, in
999 <a class="external" href="http://dom.spec.whatwg.org/#concept-tree-order" title="concept-tree-order">tree order</a>, with
1000 <span title="style sheet">style sheets</span> created from HTTP
1001 <code title="http-link">Link</code> headers first, if any, in header
1002 order.</p>
1004 <p>To <dfn id="create-a-style-sheet">create a style sheet</dfn>, run these
1005 steps:</p>
1007 <ol>
1008 <li><p>Create a new <span>style sheet</span> object and set its
1009 properties as specified.</li>
1011 <li><p>Then run the <a href="#add-a-style-sheet">add a style sheet</a> steps for the newly
1012 created <span>style sheet</span>.</li>
1013 </ol>
1015 <p>To <dfn id="add-a-style-sheet">add a style sheet</dfn>, run these
1016 steps:</p>
1018 <ol>
1019 <li><p>Add the <span>style sheet</span> to the list of
1020 <a href="#document-style-sheets">document style sheets</a> at the appropriate location. The
1021 remainder of these steps deal with the
1022 <a href="#style-sheet-disabled-flag">style sheet disabled flag</a>.</li>
1024 <li><p>If the <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> is set, terminate
1025 these steps.</li>
1027 <li><p>If the <a href="#style-sheet-title">style sheet title</a> is non-empty, the
1028 <a href="#style-sheet-alternate-flag">style sheet alternate flag</a> is clear, and
1029 <a href="#preferred-style-sheet-set-name">preferred style sheet set name</a> is the empty string
1030 <a href="#change-the-preferred-style-sheet-set-name">change the preferred style sheet set name</a> to the
1031 <a href="#style-sheet-title">style sheet title</a>.</li>
1033 <li>
1034 <p>If any of the following is true clear the
1035 <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> and terminate these steps:
1037 <ul>
1038 <li><p>The <a href="#style-sheet-title">style sheet title</a> is empty.</li>
1039 <li><p>The <a href="#last-style-sheet-set-name">last style sheet set name</a> is <code>null</code> and the
1040 <a href="#style-sheet-title">style sheet title</a> is a
1041 <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match
1042 for the <a href="#preferred-style-sheet-set-name">preferred style sheet set name</a>.</li>
1043 <li><p>The <a href="#style-sheet-title">style sheet title</a> is a
1044 <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for the
1045 <a href="#last-style-sheet-set-name">last style sheet set name</a>.</li>
1046 </ul>
1047 </li>
1049 <li><p>Set the <a href="#style-sheet-disabled-flag">style sheet disabled flag</a>.</li>
1050 </ol>
1052 <p>A <dfn id="persistent-style-sheet">persistent style sheet</dfn> is a
1053 <span>style sheet</span> from the <a href="#document-style-sheets">document style sheets</a>
1054 whose <a href="#style-sheet-title">style sheet title</a> is the empty string and whose
1055 <a href="#style-sheet-alternate-flag">style sheet alternate flag</a> is clear.</p>
1057 <p>A <dfn id="style-sheet-set">style sheet set</dfn> is an ordered
1058 collection of one or more <span title="style sheet">style sheets</span>
1059 from the <a href="#document-style-sheets">document style sheets</a> which have an identical
1060 <a href="#style-sheet-title">style sheet title</a> that is not the empty string.</p>
1062 <p>A <dfn id="style-sheet-set-name">style sheet set name</dfn> is the
1063 <a href="#style-sheet-title">style sheet title</a> the <a href="#style-sheet-set">style sheet set</a> has in
1064 common.</p>
1066 <p>An <dfn id="enabled-style-sheet-set">enabled style sheet set</dfn> is a
1067 <a href="#style-sheet-set">style sheet set</a> of which each <span>style sheet</span> has
1068 its <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> clear.</p>
1070 <p>To <dfn id="enable-a-style-sheet-set">enable a style sheet set</dfn>
1071 with name <var>name</var>, run these steps:</p>
1073 <ol>
1074 <li><p>If <var>name</var> is the empty string, set the
1075 <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> for each <span>style sheet</span>
1076 that is in a <a href="#style-sheet-set">style sheet set</a> and terminate these steps.</li>
1078 <li><p>Clear the <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> for each
1079 <span>style sheet</span> in a <a href="#style-sheet-set">style sheet set</a> whose
1080 <a href="#style-sheet-set-name">style sheet set name</a> is a
1081 <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for
1082 <var>name</var> and set it for all other
1083 <span title="style sheet">style sheets</span> in a
1084 <a href="#style-sheet-set">style sheet set</a>.</li>
1085 </ol>
1087 <p>To <dfn id="select-a-style-sheet-set">select a style sheet set</dfn>
1088 with name <var>name</var>, run these steps:</p>
1090 <ol>
1091 <li><p><a href="#enable-a-style-sheet-set">Enable a style sheet set</a> with name
1092 <var>name</var>.</li>
1094 <li><p>Set <a href="#last-style-sheet-set-name">last style sheet set name</a> to
1095 <var>name</var>.</li>
1096 </ol>
1098 <p>A <dfn id="last-style-sheet-set-name">last style sheet set name</dfn>
1099 is a concept to determine what <a href="#style-sheet-set">style sheet set</a> was last
1100 <a href="#select-a-style-sheet-set" title="select a style sheet set">selected</a>. Initially its
1101 value is <code>null</code>.</p>
1103 <p>A
1104 <dfn id="preferred-style-sheet-set-name">preferred style sheet set name</dfn>
1105 is a concept to determine which
1106 <span title="style sheet">style sheets</span> need to have their
1107 <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> clear. Initially its value
1108 is the empty string.
1110 <p>To
1111 <dfn id="change-the-preferred-style-sheet-set-name">change the preferred style sheet set name</dfn>
1112 with name <var>name</var>, run these steps:</p>
1114 <ol>
1115 <li><p>Let <var>current</var> be the <a href="#preferred-style-sheet-set-name">preferred style sheet set name</a>.</li>
1117 <li><p>Set <a href="#preferred-style-sheet-set-name">preferred style sheet set name</a> to
1118 <var>name</var>.</li>
1120 <li><p>If <var>name</var> is not a
1121 <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for
1122 <var>current</var> and
1123 <a href="#last-style-sheet-set-name">last style sheet set name</a> is <code>null</code>
1124 <a href="#enable-a-style-sheet-set">enable a style sheet set</a> with name
1125 <var>name</var>.</li>
1126 </ol>
1128 <!-- XXX ought to define "applied"
1130 thoughts:
1131 depends on disabled flag, alternate flag, media queries, sheesh
1132 -->
1134 <!-- ........................................................................................................................ -->
1136 <h4 id="the-http-default-style-header"><span class="secno">6.2.1 </span>The HTTP <code>Default-Style</code> Header</h4>
1138 <p>The HTTP <code title="http-default-style"><a href="#default-style">Default-Style</a></code> header
1139 can be used to set the <a href="#preferred-style-sheet-set-name">preferred style sheet set name</a>
1140 influencing which <a href="#style-sheet-set">style sheet set</a> is (initially) the
1141 <a href="#enabled-style-sheet-set">enabled style sheet set</a>.</p>
1143 <p>For each HTTP <code title="http-default-style"><a href="#default-style">Default-Style</a></code>
1144 header, in header order, the user agent must
1145 <a href="#change-the-preferred-style-sheet-set-name">change the preferred style sheet set name</a> with name being the
1146 value of the header.</p>
1148 <!-- ........................................................................................................................ -->
1150 <h4 id="the-stylesheetlist-sequence"><span class="secno">6.2.2 </span>The <code>StyleSheetList</code> Sequence</h4>
1152 <p>The <code>StyleSheetList</code> sequence represents an ordered collection of <span title="style sheets">style sheets</span>.</p>
1153 <pre class="idl">[[TBD - TYPEDEF]]
1154 </pre>
1157 <!-- ........................................................................................................................ -->
1159 <h4 id="extensions-to-the-document-interface"><span class="secno">6.2.3 </span>Extensions to the <code>Document</code> Interface</h4>
1162 <pre class="idl"><span class="idlInterface" id="widl-def-Document">partial interface <span class="idlInterfaceID">Document</span> {
1163 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>StyleSheetList</a></span> <span class="idlAttrName"><a href="#widl-Document-styleSheets">styleSheets</a></span>;</span>
1164 <span class="idlAttribute"> attribute <span class="idlAttrType"><a>DOMString</a>?</span> <span class="idlAttrName"><a href="#widl-Document-selectedStyleSheetSet">selectedStyleSheetSet</a></span>;</span>
1165 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a>?</span> <span class="idlAttrName"><a href="#widl-Document-lastStyleSheetSet">lastStyleSheetSet</a></span>;</span>
1166 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a>?</span> <span class="idlAttrName"><a href="#widl-Document-preferredStyleSheetSet">preferredStyleSheetSet</a></span>;</span>
1167 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMStringList</a></span> <span class="idlAttrName"><a href="#widl-Document-styleSheetSets">styleSheetSets</a></span>;</span>
1168 <span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-Document-enableStyleSheetsForSet-void-DOMString-name">enableStyleSheetsForSet</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a>?</span> <span class="idlParamName">name</span></span>);</span>
1169 };</span></pre>
1170 <dl class="attributes">
1171 <dt class="attribute" id="widl-Document-styleSheets">
1172 <code>styleSheets</code> of type <span class="idlAttrType"><a>StyleSheetList</a></span>, readonly</dt>
1173 <dd>
1174 <p>The <code>styleSheets</code> attribute must return a <code>StyleSheetList</code> sequence representing the <a href="#document-style-sheets">document style sheets</a>.</p> <p class="note">Because of historical IDL limitations the <code>styleSheets</code> attribute used to be on a separate interface, <code>DocumentStyle</code>.</dd>
1175 <dt class="attribute" id="widl-Document-selectedStyleSheetSet">
1176 <code>selectedStyleSheetSet</code> of type <span class="idlAttrType"><a>DOMString</a>?</span></dt>
1177 <dd>
1178 <p>The <code>selectedStyleSheetSet</code> attribute must, on getting, must run these steps:</p> <ol> <li><p>If there is a single <a href="#enabled-style-sheet-set">enabled style sheet set</a> and no other <a href="#document-style-sheets">document style sheets</a> with a non-empty <a href="#style-sheet-title">style sheet title</a> have the <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> unset, return the <a href="#style-sheet-set-name">style sheet set name</a> of the <a href="#enabled-style-sheet-set">enabled style sheet set</a> and terminate these steps.</li> <li><p>Otherwise, if <span title="style sheet">style sheets</span> from different <a href="#style-sheet-set" title="style sheet set">style sheet sets</a> have their <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> unset, return <code>null</code> and terminate these steps.</li> <li> <p>Otherwise, return the empty string.</p> <p class="note">At this point either all <span title="style sheet">style sheets</span> with a non-empty <a href="#style-sheet-title">style sheet title</a> have the <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> set, or there are no such <span title="style sheet">style sheets</span>.</p> </li> </ol> <p>On setting the <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code> attribute these steps must be run:</p> <ol> <li><p>If the value is <code>null</code> terminate this set of steps.</li> <li><p>Otherwise, <a href="#select-a-style-sheet-set">select a style sheet set</a> with as name the value passed.</li> </ol> <p>From the DOM's perspective, all views have the same <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>. If a user agent supports multiple views with different selected alternative style sheets, then this attribute (and the <code>StyleSheet</code> interface's <code title="dom-StyleSheet-disabled">disabled</code> attribute) must return and set the value for the default view.</dd>
1179 <dt class="attribute" id="widl-Document-lastStyleSheetSet">
1180 <code>lastStyleSheetSet</code> of type <span class="idlAttrType"><a>DOMString</a>?</span>, readonly</dt>
1181 <dd>
1182 <p>The <code>lastStyleSheetSet</code> attribute must return the <a href="#last-style-sheet-set-name">last style sheet set name</a>.</p> <p class="note">This attribute is initially <code>null</code>.</dd>
1183 <dt class="attribute" id="widl-Document-preferredStyleSheetSet">
1184 <code>preferredStyleSheetSet</code> of type <span class="idlAttrType"><a>DOMString</a>?</span>, readonly</dt>
1185 <dd>
1186 <p>The <code>preferredStyleSheetSet</code> attribute must return the <a href="#preferred-style-sheet-set-name">preferred style sheet set name</a>.</p> <p class="note">Unlike <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>, this attribute is initially the empty string.</dd>
1187 <dt class="attribute" id="widl-Document-styleSheetSets">
1188 <code>styleSheetSets</code> of type <span class="idlAttrType"><a>DOMStringList</a></span>, readonly</dt>
1189 <dd>
1190 <p>The <code>styleSheetSets</code> attribute must return a list of the <a href="#style-sheet-set-name" title="style sheet set name">style sheet set names</a> of the <a href="#style-sheet-set" title="style sheet set">style sheet sets</a>, in order of the <a href="#document-style-sheets">document style sheets</a>.</dd>
1191 </dl>
1192 <dl class="methods">
1193 <dt class="method" id="widl-Document-enableStyleSheetsForSet-void-DOMString-name">
1194 <code>enableStyleSheetsForSet</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a>?</span> <span class="idlParamName">name</span></span>), returns <span class="idlMethType"><a>void</a></span></dt>
1195 <dd>
1196 <p>The <code>enableStyleSheetsForSet</code> operation must, when invoked, run these steps:</p> <ol> <li><p>If <var>name</var> is <code>null</code> terminate these steps.</li> <li><p><a href="#enable-a-style-sheet-set">Enable a style sheet set</a> with name <var>name</var>.</li> </ol> <p class="note"><span title="Style sheet">Style sheets</span> with an empty <a href="#style-sheet-title">style sheet title</a> are never affected by this method. This method does not change the values of the <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code> or <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code> attributes.</dd>
1197 </dl>
1200 <!-- ........................................................................................................................ -->
1202 <h4 id="interaction-with-the-user-interface"><span class="secno">6.2.4 </span>Interaction with the User Interface</h4>
1204 <p>The user interface of Web browsers that support style sheets
1205 should list the style sheet titles given in the
1206 <code title="dom-Document-styleSheetSets">styleSheetSets</code> list,
1207 showing the
1208 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
1209 as the selected style sheet set, leaving none selected if it is
1210 <code>null</code> or the empty string, and selecting an extra option
1211 "Basic Page Style" (or similar) if it is the empty string and the
1212 <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
1213 is the empty string as well.</p>
1215 <p>Selecting a style sheet from this list should
1216 use the <a href="#select-a-style-sheet-set">select a style sheet set</a> set of steps. This
1217 (by definition) affects the
1218 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
1219 attribute.</p>
1221 <h5 id="persisting-the-selected-style-sheet-set"><span class="secno">6.2.4.1 </span>Persisting the selected style sheet set</h5>
1223 <p>If a user agent persist the selected style sheet set, they should use
1224 the value of the
1225 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
1226 attribute, or if that is <code>null</code>, the
1227 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
1228 attribute, when leaving the page (or at some other time) to determine the
1229 set name to store. If that is <code>null</code> then the style sheet set should not be
1230 persisted.</p>
1232 <p>When re-setting the style sheet set to the persisted value (which can
1233 happen at any time, typically at the first time the style sheets are
1234 needed for styling the document, after the <code><head></code> of
1235 the document has been parsed, after any scripts that are not dependent on
1236 computed style have executed), the style sheet set
1237 should be set by using the
1238 <a href="#select-a-style-sheet-set">select a style sheet set</a> set of steps as if the user had
1239 selected the set manually.</p>
1241 <p class="note">This specification does not give any suggestions on
1242 how user agents should decide to persist the style sheet set or whether or
1243 how to persist the selected set across pages.</p>
1245 <!-- XXX this UI section suggests we may want to introduce a few more
1246 idioms -->
1248 <!-- ........................................................................................................................ -->
1250 <h4 id="examples"><span class="secno">6.2.5 </span>Examples</h4>
1252 <div class="example">
1253 <p>Thus, in the following HTML snippet:</p>
1255 <pre><link rel="alternate stylesheet" title="foo" href="a">
1256 <link rel="alternate stylesheet" title="bar" href="b">
1257 <script>
1258 document.selectedStyleSheetSet = 'foo';
1259 document.styleSheets[1].disabled = false;
1260 </script>
1261 <link rel="alternate stylesheet" title="foo" href="c">
1262 <link rel="alternate stylesheet" title="bar" href="d"></pre>
1264 <p>...the style sheets that end up enabled are style sheets "a", "b",
1265 and "c", the
1266 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
1267 attribute would return <code>null</code>,
1268 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>
1269 would return "foo", and
1270 <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
1271 would return the empty string.</p>
1273 <p>Similarly, in the following HTML snippet:</p>
1275 <pre><link rel="alternate stylesheet" title="foo" href="a">
1276 <link rel="alternate stylesheet" title="bar" href="b">
1277 <script>
1278 var before = document.preferredStyleSheetSet;
1279 document.styleSheets[1].disabled = false;
1280 </script>
1281 <link rel="stylesheet" title="foo" href="c">
1282 <link rel="alternate stylesheet" title="bar" href="d">
1283 <script>
1284 var after = document.preferredStyleSheetSet;
1285 </script></pre>
1287 <p>...the "before" variable will be equal to the empty string, the
1288 "after" variable will be equal to "foo", and style sheets "a" and "c"
1289 will be enabled. This is the case even though the first script block
1290 sets style sheet "b" to be enabled, because upon parsing the
1291 following <code><link></code> element, the
1292 <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>
1293 is set and the
1294 <code title="dom-Document-enableStyleSheetsForSet">enableStyleSheetsForSet()</code>
1295 method is called (since
1296 <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>
1297 was never set
1298 explicitly, leaving
1299 <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code> at
1300 <code>null</code> throughout), which changes which style sheets are enabled and which
1301 are not.</p>
1302 </div>
1304 <!-- ........................................................................................................................ -->
1305 <!-- ........................................................................................................................ -->
1307 <h3 id="style-sheet-association"><span class="secno">6.3 </span>Style Sheet Association</h3>
1309 <p>This section defines the interface a
1310 <a href="#style-sheet-owner-node">style sheet owner node</a> of a <span>style sheet</span> has to
1311 implement and defines the requirements for
1312 <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-xml-stylesheet" title="xml-stylesheet processing instruction">xml-stylesheet processing instructions</a>
1313 and HTTP <code title="http-link">Link</code> headers when the link
1314 relation type is an
1315 <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for
1316 "<code>stylesheet</code>" since nobody else was interested in
1317 defining this.</p>
1319 <p class="note">The editor is in good hope that HTML and SVG will define the
1320 appropriate processing in their respective specifications, in terms of
1321 this specification, in due course.</p>
1324 <!-- ........................................................................................................................ -->
1326 <h4 id="the-linkstyle-interface"><span class="secno">6.3.1 </span>The <code>LinkStyle</code> Interface</h4>
1328 <p>The <dfn id="associated-style-sheet">associated style sheet</dfn> of a node is the <span>style sheet</span> in the list of <a href="#document-style-sheets">document style sheets</a> of which the <a href="#style-sheet-owner-node">style sheet owner node</a> implements the <code>LinkStyle</code> interface.</p>
1329 <pre class="idl"><span class="idlInterface" id="widl-def-LinkStyle">[NoInterfaceObject]
1330 interface <span class="idlInterfaceID">LinkStyle</span> {
1331 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>StyleSheet</a>?</span> <span class="idlAttrName"><a href="#widl-LinkStyle-sheet">sheet</a></span>;</span>
1332 };</span></pre>
1333 <dl class="attributes">
1334 <dt class="attribute" id="widl-LinkStyle-sheet">
1335 <code>sheet</code> of type <span class="idlAttrType"><a>StyleSheet</a>?</span>, readonly</dt>
1336 <dd>
1337 <p>The <code>sheet</code> attribute must return the <a href="#associated-style-sheet">associated style sheet</a> for the node or <code>null</code> if there is no <a href="#associated-style-sheet">associated style sheet</a>.</dd>
1338 </dl>
1341 <div class="example">
1342 <p>In the following fragment, the first <code>style</code>
1343 element has a <code>sheet</code> attribute that returns a
1344 <code>StyleSheet</code> object representing the style sheet, but for
1345 the second <code>style</code> element, the <code>style</code> attribute returns <code>null</code>,
1346 assuming the user agent supports CSS (<code>text/css</code>), but does
1347 not support the (hypothetical) ExampleSheets (<code>text/example-sheets</code>).</p>
1349 <pre><style type="text/css">
1350 body { background:lime }
1351 </style></pre>
1352 <pre><style type="text/example-sheets">
1353 $(body).background := lime
1354 </style></pre>
1355 </div>
1357 <p class="note">Whether or not the node refers to a style sheet is defined
1358 by the specification that defines the semantics of said node.</p>
1360 <!-- ........................................................................................................................ -->
1362 <h4 id="requirements-on-specifications"><span class="secno">6.3.2 </span>Requirements on specifications</h4>
1364 <p>Specifications introducing new ways of associating style sheets through
1365 the DOM should define which nodes implement the
1366 <code>LinkStyle</code> interface. When doing so, they
1367 must also define when a <span>style sheet</span> is
1368 <a href="#create-a-style-sheet" title="create a style sheet">created</a>.</p>
1373 <!-- ........................................................................................................................ -->
1375 <h4 id="requirements-on-user-agents-implementing-the-xml-stylesheet-processing-instruction"><span class="secno">6.3.3 </span>Requirements on User Agents Implementing the
1376 <span><code>xml-stylesheet</code> processing instruction</span></h4>
1378 <!-- XXX load/error events, reparse -->
1381 <pre class="idl">[[TBD - IMPLEMENTS]]
1382 </pre>
1385 <!--
1386 <pre class="idl"><span data-anolis-spec=dom>ProcessingInstruction</span> implements <span>LinkStyle</span>;</pre>
1387 -->
1389 <p>For each
1390 <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-xml-stylesheet"><code>xml-stylesheet</code> processing instruction</a>
1391 that is not part of the
1392 <a class="external" href="http://www.w3.org/TR/xml/#dt-doctype">document type declaration</a> and has an
1393 <code>href</code>
1394 <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a> these steps must
1395 (unless otherwise stated) be run:</p>
1397 <ol>
1398 <li><p>Let <var>title</var> be the value of the
1399 <code>title</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a> or the empty string if the
1400 <code>title</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a> is not specified.</li>
1402 <li><p>If there is an <code>alternate</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a>
1403 whose value is a <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match
1404 for "<code>yes</code>" and <var>title</var> is the
1405 empty string terminate these steps.</li>
1407 <li><p>If there is a <code>type</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a> whose
1408 value is not a <span>supported styling language</span> the user agent
1409 may terminate these steps.</li>
1411 <li><p><a class="external" href="http://dev.w3.org/html5/spec/single-page.html#resolve-a-url" title="Resolve a URL">Resolve</a>
1412 the <a class="external" href="http://dev.w3.org/html5/spec/single-page.html#url">URL</a> specified by the
1413 <code>href</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a> and then
1414 <a class="external" href="http://dev.w3.org/html5/spec/single-page.html#fetch">fetch</a> it.</li>
1416 <li>
1417 <p>When the resource is available, the document is in
1418 <a class="external" href="http://dev.w3.org/html5/spec/single-page.html#quirks-mode">quirks mode</a>
1419 and the
1420 <a class="external" href="http://dev.w3.org/html5/spec/single-page.html#content-type" title="content-type">Content-Type metadata</a> of
1421 the resource is not a <span>supported styling language</span> change the
1422 <a class="external" href="http://dev.w3.org/html5/spec/single-page.html#content-type" title="content-type">Content-Type metadata</a> of the resource
1423 to <code>text/css</code>.</p>
1425 <p class="note">This step might never actually happen, but is included
1426 here in case other specifications change, to keep things consistent.</p>
1427 </li>
1429 <li><p>If the resource is not in a
1430 <span>supported styling language</span> terminate these steps.</li>
1432 <li>
1433 <p><a href="#create-a-style-sheet">Create a style sheet</a> with the following properties:</p>
1435 <dl>
1436 <dt><a href="#style-sheet-location">style sheet location</a></dt>
1437 <dd><p>The <a class="external" href="http://dev.w3.org/html5/spec/single-page.html#absolute-url">absolute URL</a> of the
1438 resource.</dd>
1440 <dt><a href="#style-sheet-parent">style sheet parent</a></dt>
1441 <dd><p><code>null</code></dd>
1443 <dt><a href="#style-sheet-owner-node">style sheet owner node</a></dt>
1444 <dd><p>The node.</dd>
1446 <dt><a href="#style-sheet-owner-css-rule">style sheet owner CSS rule</a></dt>
1447 <dd><p><code>null</code></dd>
1449 <dt><a href="#style-sheet-media">style sheet media</a></dt>
1450 <dd><p>The value of the <code>media</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a>
1451 if any, or the empty string otherwise.</dd>
1453 <dt><a href="#style-sheet-title">style sheet title</a></dt>
1454 <dd><p><var>title</var></dd>
1456 <dt><a href="#style-sheet-alternate-flag">style sheet alternate flag</a></dt>
1457 <dd><p>Set if the <code>alternate</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a>
1458 value is a <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for
1459 "<code>yes</code>", or clear otherwise.
1460 </dl>
1461 </li>
1462 </ol>
1466 <!-- ........................................................................................................................ -->
1468 <h4 id="requirements-on-user-agents-implementing-the-http-link-header"><span class="secno">6.3.4 </span>Requirements on User Agents Implementing the HTTP
1469 <code>Link</code> Header</h4>
1471 <!-- XXX ref, one day -->
1473 <!-- XXX deal with media param -->
1475 <p>For each HTTP <code title="http-link">Link</code> header of which one
1476 of the link relation types is an
1477 <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match
1478 for "<code>stylesheet</code>" these steps
1479 must be run:</p>
1481 <ol>
1482 <li><p>Let <var>title</var> be the value of the first of all the
1483 <code>title</code> and <code>title*</code> parameters.
1484 If there are no such parameters it is the empty string.</li>
1486 <li><p>If one of the (other) link relation types is an
1487 <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for
1488 "<code>alternate</code>" and <var>title</var> is the
1489 empty string terminate these steps.</li>
1491 <li><p><a class="external" href="http://dev.w3.org/html5/spec/single-page.html#resolve-a-url" title="Resolve a URL">Resolve</a>
1492 the specified <a class="external" href="http://dev.w3.org/html5/spec/single-page.html#url">URL</a> and
1493 <a class="external" href="http://dev.w3.org/html5/spec/single-page.html#fetch">fetch</a> it.</li>
1495 <li><p>When the resource is available, the document is in
1496 <a class="external" href="http://dev.w3.org/html5/spec/single-page.html#quirks-mode">quirks mode</a>
1497 and the <a class="external" href="http://dev.w3.org/html5/spec/single-page.html#content-type" title="content-type">Content-Type metadata</a> of
1498 the resource is not a <span>supported styling language</span> change the
1499 <a class="external" href="http://dev.w3.org/html5/spec/single-page.html#content-type" title="content-type">Content-Type metadata</a> of the resource
1500 to <code>text/css</code>.</li>
1502 <li><p>If the resource is not in a
1503 <span>supported styling language</span> terminate these steps.</li>
1505 <li>
1506 <p><a href="#create-a-style-sheet">Create a style sheet</a> with the following properties:</p>
1508 <dl>
1509 <dt><a href="#style-sheet-location">style sheet location</a></dt>
1510 <dd><p>The <a class="external" href="http://dev.w3.org/html5/spec/single-page.html#absolute-url">absolute URL</a> of the
1511 resource.</dd>
1513 <dt><a href="#style-sheet-owner-node">style sheet owner node</a></dt>
1514 <dd><p><code>null</code></dd>
1516 <dt><a href="#style-sheet-parent">style sheet parent</a></dt>
1517 <dd><p><code>null</code></dd>
1519 <dt><a href="#style-sheet-owner-css-rule">style sheet owner CSS rule</a></dt>
1520 <dd><p><code>null</code></dd>
1522 <dt><a href="#style-sheet-media">style sheet media</a></dt>
1523 <dd><p>The value of the first <code>media</code> parameter.</dd>
1524 <!-- XXX register media parameter? bah -->
1526 <dt><a href="#style-sheet-title">style sheet title</a></dt>
1527 <dd><p><var>title</var></dd>
1529 <dt><a href="#style-sheet-alternate-flag">style sheet alternate flag</a></dt>
1530 <dd><p>Set if one of the specified link relation type for this HTTP
1531 <code title="http-link">Link</code> header is an
1532 <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for
1533 "<code>alternate</code>", or false otherwise.
1534 </dl>
1535 </li>
1536 </ol>
1538 <!-- ........................................................................................................................ -->
1539 <!-- ........................................................................................................................ -->
1541 <h3 id="css-rules"><span class="secno">6.4 </span>CSS Rules</h3>
1543 <p>A <dfn id="rule">CSS rule</dfn> is an abstract concept that
1544 denotes a rule as defined by the CSS specification. A
1545 <a href="#rule">CSS rule</a> is represented as an object that implements a subclass of
1546 the <code>CSSRule</code> interface, and which has the following
1547 associated state items:</p>
1549 <dl>
1550 <dt><dfn id="rule-type">rule type</dfn></dt>
1551 <dd><p>A non-negative integer associated with a particular type of rule.
1552 This item is initialized when a rule is created and must never change.</dd>
1554 <dt><dfn id="rule-text">rule text</dfn></dt>
1555 <dd><p>A text representation of the rule suitable for direct use in a style sheet.
1556 This item is initialized when a rule is created, and may change over the lifetime of the rule.</dd>
1558 <dt><dfn id="rule-parent">rule parent</dfn></dt>
1559 <dd><p>An optional reference to another, enclosing <a href="#rule">CSS rule</a>.
1560 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>.
1561 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.</dd>
1563 <dt><dfn id="rule-style-sheet">rule parent style sheet</dfn></dt>
1564 <dd><p>An optional reference to an associated <a href="#css-style-sheet">CSS style sheet</a>.
1565 This item is initialized to reference an associated style sheet when the rule is created. Subsequent to initialization, this item
1566 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.</dd>
1567 </dl>
1569 <p>In addition to the above state, each <a href="#rule">CSS rule</a> may be associated
1570 with other state in accordance with its <a href="#rule-type">rule type</a>.</p>
1572 <p>To <dfn id="parse-a-css-rule">parse a CSS rule</dfn> ...</p>
1574 <p class="issue">Should a rule be instantiated in OM if there is a parse error? To
1575 what extent should original (but non-valid) CSS text be captured in cssText?</p>
1577 <p>To <dfn id="serialize-a-css-rule">serialize a CSS rule</dfn>, perform one of the following in accordance with the <a href="#rule-type" title="rule type">rule's type</a>:</p>
1579 <dl class="switch">
1580 <dt><code>CSSStyleRule</code></dt>
1581 <dd>
1582 <p>The result of concatenating the following:</p>
1583 <ol>
1584 <li>The result of performing <a href="#serialize-a-group-of-selectors">serialize a group of selectors</a> on the rule's associated selectors.</li>
1585 <li>The string "<code> { </code>", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B),
1586 followed by a single SPACE (U+0020).</li>
1587 <li>The result of performing <a href="#serialize-a-css-declaration-block">serialize a CSS declaration block</a> on the rule's associated declarations.</li>
1588 <li>If the rule is associated with one or more declarations, the string "<code> </code>", i.e., a single SPACE (U+0020).</li>
1589 <li>The string "<code>}</code>", RIGHT CURLY BRACKET (U+007D).
1590 </ol>
1591 </dd>
1593 <dt><code>CSSCharsetRule</code></dt>
1594 <dd>
1595 <p>The result of concatenating the following:</p>
1596 <ol>
1597 <li>The string "<code>@charset</code>" followed by a single SPACE (U+0020).</li>
1598 <li>The result of performing <a href="#serialize-a-string">serialize a string</a> on the <a class="external" href="http://dev.w3.org/html5/spec/single-page.html#preferred-mime-name">preferred MIME name</a> of the rule's encoding.</li>
1599 <li>The string "<code>;</code>", i.e., SEMICOLON (U+003B).
1600 </ol>
1601 <div class="example">
1602 <pre>@charset "UTF-8";</pre>
1603 </div>
1604 </dd>
1606 <dt><code>CSSImportRule</code></dt>
1607 <dd>
1608 <p>The result of concatenating the following:</p>
1609 <ol>
1610 <li>The string "<code>@import</code>" followed by a single SPACE (U+0020).</li>
1611 <li>The result of performing <a href="#serialize-a-url">serialize a URL</a> on the rule's location.</li>
1612 <li>If the rule's associated media list is not empty, a single SPACE (U+0020) followed by the
1613 result of performing <a href="#serialize-a-media-query-list">serialize a media query list</a> on the media list.
1614 <li>The string "<code>;</code>", i.e., SEMICOLON (U+003B).
1615 </ol>
1616 <div class="example">
1617 <pre>@import url("import.css");</pre>
1618 <pre>@import url("print.css") print;</pre>
1619 </div>
1620 </dd>
1622 <dt><code>CSSMediaRule</code></dt>
1623 <dd><p class="issue">...</dd>
1625 <dt><code>CSSFontFaceRule</code></dt>
1626 <dd><p class="issue">...</dd>
1628 <dt><code>CSSPageRule</code></dt>
1629 <dd><p class="issue">...</dd>
1631 <dt><code>CSSNamespaceRule</code></dt>
1632 <dd><p>The literal string "<code>@namespace</code>", followed by a single SPACE
1633 (U+0020), followed by the
1634 <a href="#serialize-an-identifier" title="serialize an identifier">identifier escaped</a> value of the
1635 <code title="dom-CSSNamespaceRule-prefix">prefix</code> attribute (if
1636 any), followed by a single SPACE (U+0020) if there is a prefix, followed by the
1637 <a href="#serialize-a-url" title="serialize a URL">URL escaped</a> value of the
1638 <code title="dom-CSSNamespaceRule-namespaceURI">namespaceURI</code>
1639 attribute, followed the character "<code>;</code>" (U+003B).</dd>
1640 </dl>
1642 <!-- ........................................................................................................................ -->
1644 <h4 id="the-cssrulelist-sequence"><span class="secno">6.4.1 </span>The <code>CSSRuleList</code> Sequence</h4>
1646 <p>The <code>CSSRuleList</code> sequence represents an ordered collection of CSS style rules.</p>
1647 <pre class="idl">[[TBD - TYPEDEF]]
1648 </pre>
1651 <!-- ........................................................................................................................ -->
1653 <h4 id="the-cssrule-interface"><span class="secno">6.4.2 </span>The <code>CSSRule</code> Interface</h4>
1655 <p>The <code>CSSRule</code> interface represents an abstract, base CSS style rule. Each distinct CSS style rule type is represented by a distinct interface that inherits from this interface.</p>
1656 <pre class="idl"><span class="idlInterface" id="widl-def-CSSRule">interface <span class="idlInterfaceID">CSSRule</span> {
1657 <span class="idlConst"> const <span class="idlConstType"><a>unsigned short</a></span> <span class="idlConstName"><a href="#widl-CSSRule-STYLE_RULE">STYLE_RULE</a></span> = <span class="idlConstValue">1</span>;</span>
1658 <span class="idlConst"> const <span class="idlConstType"><a>unsigned short</a></span> <span class="idlConstName"><a href="#widl-CSSRule-CHARSET_RULE">CHARSET_RULE</a></span> = <span class="idlConstValue">2</span>;</span>
1659 <span class="idlConst"> const <span class="idlConstType"><a>unsigned short</a></span> <span class="idlConstName"><a href="#widl-CSSRule-IMPORT_RULE">IMPORT_RULE</a></span> = <span class="idlConstValue">3</span>;</span>
1660 <span class="idlConst"> const <span class="idlConstType"><a>unsigned short</a></span> <span class="idlConstName"><a href="#widl-CSSRule-MEDIA_RULE">MEDIA_RULE</a></span> = <span class="idlConstValue">4</span>;</span>
1661 <span class="idlConst"> const <span class="idlConstType"><a>unsigned short</a></span> <span class="idlConstName"><a href="#widl-CSSRule-FONT_FACE_RULE">FONT_FACE_RULE</a></span> = <span class="idlConstValue">5</span>;</span>
1662 <span class="idlConst"> const <span class="idlConstType"><a>unsigned short</a></span> <span class="idlConstName"><a href="#widl-CSSRule-PAGE_RULE">PAGE_RULE</a></span> = <span class="idlConstValue">6</span>;</span>
1663 <span class="idlConst"> const <span class="idlConstType"><a>unsigned short</a></span> <span class="idlConstName"><a href="#widl-CSSRule-NAMESPACE_RULE">NAMESPACE_RULE</a></span> = <span class="idlConstValue">10</span>;</span>
1664 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>unsigned short</a></span> <span class="idlAttrName"><a href="#widl-CSSRule-type">type</a></span>;</span>
1665 <span class="idlAttribute"> attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-CSSRule-cssText">cssText</a></span>;</span>
1666 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSRule</a>?</span> <span class="idlAttrName"><a href="#widl-CSSRule-parentRule">parentRule</a></span>;</span>
1667 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSStyleSheet</a>?</span> <span class="idlAttrName"><a href="#widl-CSSRule-parentStyleSheet">parentStyleSheet</a></span>;</span>
1668 };</span></pre>
1669 <dl class="constants">
1670 <dt class="constant" id="widl-CSSRule-STYLE_RULE">
1671 <code>STYLE_RULE</code> of type <span class="idlConstType"><a>unsigned short</a></span>, with value 1</dt>
1672 <dd>
1673 <p>When the value of the <code>type</code> attribute is <code>STYLE_RULE</code>, then the object that implements this interface must implement the <code>CSSStyleRule</code> interface.</dd>
1674 <dt class="constant" id="widl-CSSRule-CHARSET_RULE">
1675 <code>CHARSET_RULE</code> of type <span class="idlConstType"><a>unsigned short</a></span>, with value 2</dt>
1676 <dd>
1677 <p>When the value of the <code>type</code> attribute is <code>CHARSET_RULE</code>, then the object that implements this interface must implement the <code>CSSCharsetRule</code> interface.</dd>
1678 <dt class="constant" id="widl-CSSRule-IMPORT_RULE">
1679 <code>IMPORT_RULE</code> of type <span class="idlConstType"><a>unsigned short</a></span>, with value 3</dt>
1680 <dd>
1681 <p>When the value of the <code>type</code> attribute is <code>IMPORT_RULE</code>, then the object that implements this interface must implement the <code>CSSImportRule</code> interface.</dd>
1682 <dt class="constant" id="widl-CSSRule-MEDIA_RULE">
1683 <code>MEDIA_RULE</code> of type <span class="idlConstType"><a>unsigned short</a></span>, with value 4</dt>
1684 <dd>
1685 <p>When the value of the <code>type</code> attribute is <code>MEDIA_RULE</code>, then the object that implements this interface must implement the <code>CSSMediaRule</code> interface.</dd>
1686 <dt class="constant" id="widl-CSSRule-FONT_FACE_RULE">
1687 <code>FONT_FACE_RULE</code> of type <span class="idlConstType"><a>unsigned short</a></span>, with value 5</dt>
1688 <dd>
1689 <p>When the value of the <code>type</code> attribute is <code>FONT_FACE_RULE</code>, then the object that implements this interface must implement the <code>CSSFontFaceRule</code> interface.</dd>
1690 <dt class="constant" id="widl-CSSRule-PAGE_RULE">
1691 <code>PAGE_RULE</code> of type <span class="idlConstType"><a>unsigned short</a></span>, with value 6</dt>
1692 <dd>
1693 <p>When the value of the <code>type</code> attribute is <code>PAGE_RULE</code>, then the object that implements this interface must implement the <code>CSSPageRule</code> interface.</dd>
1694 <dt class="constant" id="widl-CSSRule-NAMESPACE_RULE">
1695 <code>NAMESPACE_RULE</code> of type <span class="idlConstType"><a>unsigned short</a></span>, with value 10</dt>
1696 <dd>
1697 <p>When the value of the <code>type</code> attribute is <code>NAMESPACE_RULE</code>, then the object that implements this interface must implement the <code>CSSNamespaceRule</code> interface.</dd>
1698 </dl>
1699 <dl class="attributes">
1700 <dt class="attribute" id="widl-CSSRule-type">
1701 <code>type</code> of type <span class="idlAttrType"><a>unsigned short</a></span>, readonly</dt>
1702 <dd>
1703 <p>The <code>type</code> attribute must return one of the following values: <code>STYLE_RULE</code>, <code>IMPORT_RULE</code>, <code>MEDIA_RULE</code>, <code>FONT_FACE_RULE</code>, <code>PAGE_RULE</code>, <code>NAMESPACE_RULE</code>, or a registered extension value. </p> <p>The value 0, formerly known as <code>UNKNOWN_RULE</code>, is made obsolete by this specification. This value will not be re-allocated in the future and shall remain reserved.</p> <p class="note">Constants for new and proprietary rule types are coordinated on the <a href="http://wiki.csswg.org/spec/cssom-constants">CSSOM Constants</a> wiki page.</dd>
1704 <dt class="attribute" id="widl-CSSRule-cssText">
1705 <code>cssText</code> of type <span class="idlAttrType"><a>DOMString</a></span></dt>
1706 <dd>
1707 <p>The <code>cssText</code> attribute must return a <a href="#serialize-a-css-rule" title="serialize a CSS rule">serialization</a> of the <a href="#rule">CSS rule</a>.</p> <p>On setting the <code>cssText</code> attribute these steps must be run:</p> <ol> <li><p><a href="#parse-a-css-rule" title="Parse a CSS rule">Parse</a> the value.</li> <li><p>If parsing failed terminate this algorithm.</li> <li><p>If the <code title="dom-CSSRule-type">type</code> of the new object does not match the <code title="dom-CSSRule-type">type</code> of the current object <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> an '<code class="external"><a href="http://dom.spec.whatwg.org/#invalidmodificationerror">InvalidModificationError</a></code>' exception.</li> <li><p>Replace the current object with the new object.</li> </ol></dd>
1708 <dt class="attribute" id="widl-CSSRule-parentRule">
1709 <code>parentRule</code> of type <span class="idlAttrType"><a>CSSRule</a>?</span>, readonly</dt>
1710 <dd>
1711 <p>The <code>parentRule</code> attribute must return the nearest enclosing rule of the current rule or <code>null</code> if there is none. If a value other than <code>null</code> is ever returned, than that same value must always be returned on each get access.</p> <p class="note">For example, <code>@media</code> can enclose a rule, in which case <code>ownerRule</code> would be non-null; in cases where there is no enclosing rule, <code>ownerRule</code> will be <code>null</code>.</dd>
1712 <dt class="attribute" id="widl-CSSRule-parentStyleSheet">
1713 <code>parentStyleSheet</code> of type <span class="idlAttrType"><a>CSSStyleSheet</a>?</span>, readonly</dt>
1714 <dd>
1715 <p>The <code>parentStyleSheet</code> attribute must return the <code>CSSStyleSheet</code> object that contains the the current rule or <code>null</code> if there is none.</p> <p class="note">The only circumstance where <code>null</code> is returned is in the case that <code>CSSStyleSheet.prototype.deleteRule</code> has been invoked to <a href="#remove-a-css-rule">remove a CSS rule</a> from a CSS style sheet, in which case its <code>parentStyleSheet</code> property will have been set to <code>null</code>.</p> <p class="note">Removing an <code>Node</code> that implements the <code>LinkStyle</code> interface from a <code>Document</code> instance does not (by itself) cause the <code>CSSStyleSheet</code> referenced by a <code>CSSRule</code> to be unreachable; that is, as long as there exists a reachable reference to a <code>CSSRule</code> object, then its <code>parentStyleSheet</code> property remains viable if it has not been previously removed from the style sheet by using the <code>deleteRule</code> operation.</dd>
1716 </dl>
1719 <!-- ........................................................................................................................ -->
1721 <h4 id="the-cssstylerule-interface"><span class="secno">6.4.3 </span>The <code>CSSStyleRule</code> Interface</h4>
1723 <p>The <code>CSSStyleRule</code> interface represents a rule set.</p>
1724 <pre class="idl"><span class="idlInterface" id="widl-def-CSSStyleRule">interface <span class="idlInterfaceID">CSSStyleRule</span> : <span class="idlSuperclass"><a class="idlType" href="#widl-def-CSSRule"><code>CSSRule</code></a></span> {
1725 <span class="idlAttribute"> attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-CSSStyleRule-selectorText">selectorText</a></span>;</span>
1726 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSStyleDeclaration</a></span> <span class="idlAttrName"><a href="#widl-CSSStyleRule-style">style</a></span>;</span>
1727 };</span></pre>
1728 <dl class="attributes">
1729 <dt class="attribute" id="widl-CSSStyleRule-selectorText">
1730 <code>selectorText</code> of type <span class="idlAttrType"><a>DOMString</a></span></dt>
1731 <dd>
1732 <p>The <code>selectorText</code> attribute, on getting, must return the result of <a href="#serialize-a-group-of-selectors" title="serialize a group of selectors">serializing</a> the associated <span>group of selectors</span>.</p> <p>On setting the <code>selectorText</code> attribute these steps must be run:</p> <ol> <li><p>Run the <a href="#parse-a-group-of-selectors">parse a group of selectors</a> algorithm on the given value.</li> <li><p>If the algorithm returns a non-null value replace the associated <span>group of selectors</span> with the returned value.</li> <li><p>Otherwise, if the algorithm returns a <code>null</code> value, do nothing.</li> </ol></dd>
1733 <dt class="attribute" id="widl-CSSStyleRule-style">
1734 <code>style</code> of type <span class="idlAttrType"><a>CSSStyleDeclaration</a></span>, readonly</dt>
1735 <dd>
1736 <p>The <code>style</code> attribute must return a <code>CSSStyleDeclaration</code> object for the rule set.</dd>
1737 </dl>
1740 <!-- ........................................................................................................................ -->
1742 <h4 id="the-csscharsetrule-interface"><span class="secno">6.4.4 </span>The <code>CSSCharsetRule</code> Interface</h4>
1746 <!-- ........................................................................................................................ -->
1748 <h4 id="the-cssimportrule-interface"><span class="secno">6.4.5 </span>The <code>CSSImportRule</code> Interface</h4>
1750 <p>The <code>CSSImportRule</code> interface represents an <code>@import</code> rule.</p>
1751 <pre class="idl"><span class="idlInterface" id="widl-def-CSSImportRule">interface <span class="idlInterfaceID">CSSImportRule</span> : <span class="idlSuperclass"><a class="idlType" href="#widl-def-CSSRule"><code>CSSRule</code></a></span> {
1752 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-CSSImportRule-href">href</a></span>;</span>
1753 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>MediaList</a></span> <span class="idlAttrName"><a href="#widl-CSSImportRule-media">media</a></span>;</span>
1754 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSStyleSheet</a></span> <span class="idlAttrName"><a href="#widl-CSSImportRule-styleSheet">styleSheet</a></span>;</span>
1755 };</span></pre>
1756 <dl class="attributes">
1757 <dt class="attribute" id="widl-CSSImportRule-href">
1758 <code>href</code> of type <span class="idlAttrType"><a>DOMString</a></span>, readonly</dt>
1759 <dd>
1760 <p>The <code>href</code> attribute must return the <span>URL</span> specified by the <code>@import</code> rule.</p> <p class="note">To get the resolved <span>URL</span> use the <code title="dom-StyleSheet-href">href</code> attribute of the associated <span>style sheet</span>.</dd>
1761 <dt class="attribute" id="widl-CSSImportRule-media">
1762 <code>media</code> of type <span class="idlAttrType"><a>MediaList</a></span>, readonly</dt>
1763 <dd>
1764 <p>The <code>media</code> attribute must return the value of the <code title="dom-StyleSheet-media">media</code> attribute of the associated <span>style sheet</span>.</dd>
1765 <dt class="attribute" id="widl-CSSImportRule-styleSheet">
1766 <code>styleSheet</code> of type <span class="idlAttrType"><a>CSSStyleSheet</a></span>, readonly</dt>
1767 <dd>
1768 <p>The <code>styleSheet</code> attribute must return the associated <span>style sheet</span>.</p> <p class="note">If loading of the style sheet fails its <code title="dom-CSSStyleSheet-cssRules">cssRules</code> list is simply empty, i.e., an <code>@import</code> rule always has an associated <span>style sheet</span>.</dd>
1769 </dl>
1772 <!-- ........................................................................................................................ -->
1774 <h4 id="the-cssmediarule-interface"><span class="secno">6.4.6 </span>The <code>CSSMediaRule</code> Interface</h4>
1776 <p>The <code>CSSMediaRule</code> interface represents a <code>@media</code> rule.</p>
1777 <pre class="idl"><span class="idlInterface" id="widl-def-CSSMediaRule">interface <span class="idlInterfaceID">CSSMediaRule</span> : <span class="idlSuperclass"><a class="idlType" href="#widl-def-CSSRule"><code>CSSRule</code></a></span> {
1778 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>MediaList</a></span> <span class="idlAttrName"><a href="#widl-CSSMediaRule-media">media</a></span>;</span>
1779 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSRuleList</a></span> <span class="idlAttrName"><a href="#widl-CSSMediaRule-cssRules">cssRules</a></span>;</span>
1780 <span class="idlMethod"> <span class="idlMethType"><a>unsigned long</a></span> <span class="idlMethName"><a href="#widl-CSSMediaRule-insertRule-unsigned-long-DOMString-rule-unsigned-long-index">insertRule</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">rule</span></span>, <span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>);</span>
1781 <span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-CSSMediaRule-deleteRule-void-unsigned-long-index">deleteRule</a></span> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>);</span>
1782 };</span></pre>
1783 <dl class="attributes">
1784 <dt class="attribute" id="widl-CSSMediaRule-media">
1785 <code>media</code> of type <span class="idlAttrType"><a>MediaList</a></span>, readonly</dt>
1786 <dd>
1787 <p>The <code>media</code> attribute must return a <code>MediaList</code> object for the list of media queries specified with the <code>@media</code> rule.</dd>
1788 <dt class="attribute" id="widl-CSSMediaRule-cssRules">
1789 <code>cssRules</code> of type <span class="idlAttrType"><a>CSSRuleList</a></span>, readonly</dt>
1790 <dd>
1791 <p>The <code>cssRules</code> attribute must return a <code>CSSRuleList</code> object for the list of CSS rules specified with the <code>@media</code> rule.</dd>
1792 </dl>
1793 <dl class="methods">
1794 <dt class="method" id="widl-CSSMediaRule-insertRule-unsigned-long-DOMString-rule-unsigned-long-index">
1795 <code>insertRule</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">rule</span></span>, <span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>), returns <span class="idlMethType"><a>unsigned long</a></span></dt>
1796 <dd>
1797 <p>The <code>insertRule</code> operation must <a href="#insert-a-css-rule">insert a CSS rule</a> <var>rule</var> into the CSS rule list returned by <code title="dom-CSSMediaRule-cssRules">cssRules</code> at <var>index</var>.</dd>
1798 <dt class="method" id="widl-CSSMediaRule-deleteRule-void-unsigned-long-index">
1799 <code>deleteRule</code> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>), returns <span class="idlMethType"><a>void</a></span></dt>
1800 <dd>
1801 <p>The <code>deleteRule</code> operation must <a href="#remove-a-css-rule">remove a CSS rule</a> from the CSS rule list returned by <code title="dom-CSSMediaRule-cssRules">cssRules</code> at <var>index</var>.</dd>
1802 </dl>
1805 <!-- ........................................................................................................................ -->
1807 <h4 id="the-cssfontfacerule-interface"><span class="secno">6.4.7 </span>The <code>CSSFontFaceRule</code> Interface</h4>
1809 <p>The <code>CSSFontFaceRule</code> interface represents a <code>@font-face</code> rule.</p>
1810 <pre class="idl"><span class="idlInterface" id="widl-def-CSSFontFaceRule">interface <span class="idlInterfaceID">CSSFontFaceRule</span> : <span class="idlSuperclass"><a class="idlType" href="#widl-def-CSSRule"><code>CSSRule</code></a></span> {
1811 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSStyleDeclaration</a></span> <span class="idlAttrName"><a href="#widl-CSSFontFaceRule-style">style</a></span>;</span>
1812 };</span></pre>
1813 <dl class="attributes">
1814 <dt class="attribute" id="widl-CSSFontFaceRule-style">
1815 <code>style</code> of type <span class="idlAttrType"><a>CSSStyleDeclaration</a></span>, readonly</dt>
1816 <dd>
1817 <p>The <code>style</code> attribute must return a <code>CSSStyleDeclaration</code> block that contains the property declarations specified within the <code>@font-face</code> rule.</dd>
1818 </dl>
1821 <!-- ........................................................................................................................ -->
1823 <h4 id="the-csspagerule-interface"><span class="secno">6.4.8 </span>The <code>CSSPageRule</code> Interface</h4>
1825 <p>The <code>CSSPageRule</code> interface represents a <code>@page</code> rule.</p> <p class="note">Need to define the rules for <dfn id="parse-a-css-page-selector">parse a CSS page selector</dfn> and <dfn id="serialize-a-css-page-selector">serialize a CSS page selector</dfn>.</p>
1826 <pre class="idl"><span class="idlInterface" id="widl-def-CSSPageRule">interface <span class="idlInterfaceID">CSSPageRule</span> : <span class="idlSuperclass"><a class="idlType" href="#widl-def-CSSRule"><code>CSSRule</code></a></span> {
1827 <span class="idlAttribute"> attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-CSSPageRule-selectorText">selectorText</a></span>;</span>
1828 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSStyleDeclaration</a></span> <span class="idlAttrName"><a href="#widl-CSSPageRule-style">style</a></span>;</span>
1829 };</span></pre>
1830 <dl class="attributes">
1831 <dt class="attribute" id="widl-CSSPageRule-selectorText">
1832 <code>selectorText</code> of type <span class="idlAttrType"><a>DOMString</a></span></dt>
1833 <dd>
1834 <p>The <code>selectorText</code> attribute, on getting, must return the result of <a href="#serialize-a-css-page-selector" title="serialize a CSS page selector">serializing</a> the associated <span>CSS page selector</span>.</p> <p>On setting the <code>selectorText</code> attribute these steps must be run:</p> <ol> <li><p>Run the <a href="#parse-a-css-page-selector">parse a CSS page selector</a> algorithm on the given value.</li> <li><p>If the algorithm returns a non-null value replace the associated <span>CSS page selector</span> with the returned value.</li> <li><p>Otherwise, if the algorithm returns a <code>null</code> value, do nothing.</li> </ol></dd>
1835 <dt class="attribute" id="widl-CSSPageRule-style">
1836 <code>style</code> of type <span class="idlAttrType"><a>CSSStyleDeclaration</a></span>, readonly</dt>
1837 <dd>
1838 <p>The <code>style</code> attribute must return a <code>CSSStyleDeclaration</code> for the <code>@page</code> rule.</dd>
1839 </dl>
1842 <!-- ........................................................................................................................ -->
1844 <h4 id="the-cssnamespacerule-interface"><span class="secno">6.4.9 </span>The <code>CSSNamespaceRule</code> Interface</h4>
1846 <p>The <code>CSSNamespaceRule</code> interface represents a <code>@namespace</code> rule.</p>
1847 <pre class="idl"><span class="idlInterface" id="widl-def-CSSNamespaceRule">interface <span class="idlInterfaceID">CSSNamespaceRule</span> : <span class="idlSuperclass"><a class="idlType" href="#widl-def-CSSRule"><code>CSSRule</code></a></span> {
1848 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-CSSNamespaceRule-namespaceURI">namespaceURI</a></span>;</span>
1849 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a>?</span> <span class="idlAttrName"><a href="#widl-CSSNamespaceRule-prefix">prefix</a></span>;</span>
1850 };</span></pre>
1851 <dl class="attributes">
1852 <dt class="attribute" id="widl-CSSNamespaceRule-namespaceURI">
1853 <code>namespaceURI</code> of type <span class="idlAttrType"><a>DOMString</a></span>, readonly</dt>
1854 <dd>
1855 <p>The <code>namespaceURI</code> attribute must return the namespace of the <code>@namespace</code> rule.</dd>
1856 <dt class="attribute" id="widl-CSSNamespaceRule-prefix">
1857 <code>prefix</code> of type <span class="idlAttrType"><a>DOMString</a>?</span>, readonly</dt>
1858 <dd>
1859 <p>The <code>prefix</code> attribute must return the prefix of the <code>@namespace</code> rule or the empty string if there is no prefix.</dd>
1860 </dl>
1863 <!-- ........................................................................................................................ -->
1864 <!-- ........................................................................................................................ -->
1866 <h3 id="css-declaration-blocks"><span class="secno">6.5 </span>CSS Declaration Blocks</h3>
1868 <p>A <dfn id="css-declaration-block">CSS declaration block</dfn> is an ordered collection of CSS
1869 properties with their associated values, also named CSS declarations. In
1870 the DOM a <a href="#css-declaration-block">CSS declaration block</a> is a
1871 <code>CSSStyleDeclaration</code> object. A
1872 <a href="#css-declaration-block">CSS declaration block</a> has two associated properties:</p>
1874 <dl>
1875 <dt><dfn id="css-declaration-block-readonly-flag">CSS declaration block readonly flag</dfn></dt>
1876 <dd><p>Clear if the object can be manipulated. Set if it can not be
1877 manipulated. Unless otherwise stated it is clear.</dd>
1879 <dt><dfn id="css-declaration-block-declarations">CSS declaration block declarations</dfn></dt>
1880 <dd><p>The CSS declarations associated with the object.</dd>
1881 </dl>
1883 <p class="note">The <a href="#css-declaration-block-declarations">CSS declaration block declarations</a> are
1884 ordered. This matters for the
1885 <code title="dom-CSSStyleDeclaration-item">item()</code> method.</p>
1887 <p>To <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn> ...</p>
1889 <p class="issue">What should be captured in the cssText of a declaration block which fails
1890 to parse?</p>
1892 <p>To <dfn id="serialize-a-css-declaration-block">serialize a CSS declaration block</dfn>
1893 represented by a <code>CSSStyleDeclarations</code> instance named <var>d</var>,
1894 let <var>s</var> be the empty string, then run the steps below:</p>
1896 <ol>
1897 <li><p>If <code><var>d</var>.length</code> is zero (0), then return <var>s</var>.</li>
1898 <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>
1899 <ol>
1900 <li><p>Let <var>n</var> be the value returned by <code><var>d</var>.item(<var>i</var>)</code>.</li>
1901 <li><p>Let <var>v</var> be the value returned by <code><var>d</var>.getPropertyValue(<var>n</var>)</code>.</li>
1902 <li><p>If <var>v</var> is the empty string, then continue.</li>
1903 <li><p>Otherwise (<var>v</var> is non-empty), perform the following sub-steps:</p>
1904 <ol>
1905 <li><p>If <var>s</var> is not empty, then append a single SPACE (U+0020) to <var>s</var>.</li>
1906 <li><p>Append <var>n</var> to <var>s</var>.</li>
1907 <li><p>Append COLON (U+003A) followed by a single SPACE (U+0020), i.e., "<code>: </code>", to <var>s</var>.</li>
1908 <li><p>Append <var>v</var> to <var>s</var>.</li>
1909 </ol>
1910 </li>
1911 <li><p>Let <var>p</var> be the value returned by <code><var>d</var>.getPropertyPriority(<var>n</var>)</code>.</li>
1912 <li><p>If <var>p</var> is not the empty string, then perform the following sub-steps:</p>
1913 <ol>
1914 <li><p>Append a single SPACE (U+0020) followed by EXCLAMATION MARK (U+0021), i.e., "<code> !</code>", to <var>s</var>.</li>
1915 <li><p>Append <var>p</var> to <var>s</var>.</li>
1916 </ol>
1917 </li>
1918 <li><p>Append SEMICOLON (U+003B), i.e., "<code>;</code>", to <var>s</var>.</li>
1919 </ol>
1920 </li>
1921 <li><p>Return <var>s</var>.</li>
1922 </ol>
1924 <p class="note">The serialization of an empty CSS declaration block is the empty string.</p>
1926 <p class="note">The serialization of a non-empty CSS declaration block does not include any surrounding whitespace, i.e., no whitepsace appears
1927 before the first property name and no whitespace appears after the final semicolon delimiter that follows the last property value.</p>
1929 <!-- ........................................................................................................................ -->
1931 <h4 id="the-cssstyledeclaration-interface"><span class="secno">6.5.1 </span>The <code>CSSStyleDeclaration</code> Interface</h4>
1933 <p>The <code>CSSStyleDeclaration</code> interface represents a <a href="#css-declaration-block">CSS declaration block</a>, including its underlying state, where this underlying state depends upon the source of the <code>CSSStyleDeclaration</code> instance.</p>
1934 <pre class="idl"><span class="idlInterface" id="widl-def-CSSStyleDeclaration">interface <span class="idlInterfaceID">CSSStyleDeclaration</span> {
1935 <span class="idlAttribute"> attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-CSSStyleDeclaration-cssText">cssText</a></span>;</span>
1936 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>unsigned long</a></span> <span class="idlAttrName"><a href="#widl-CSSStyleDeclaration-length">length</a></span>;</span>
1937 <span class="idlMethod"> <span class="idlMethType"><a>DOMString</a></span> <span class="idlMethName"><a href="#widl-CSSStyleDeclaration-item-DOMString-unsigned-long-index">item</a></span> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>);</span>
1938 <span class="idlMethod"> <span class="idlMethType"><a>DOMString</a></span> <span class="idlMethName"><a href="#widl-CSSStyleDeclaration-getPropertyValue-DOMString-DOMString-property">getPropertyValue</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">property</span></span>);</span>
1939 <span class="idlMethod"> <span class="idlMethType"><a>DOMString</a></span> <span class="idlMethName"><a href="#widl-CSSStyleDeclaration-getPropertyPriority-DOMString-DOMString-property">getPropertyPriority</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">property</span></span>);</span>
1940 <span class="idlMethod"> <span class="idlMethType"><a>void</a></span> <span class="idlMethName"><a href="#widl-CSSStyleDeclaration-setProperty-void-DOMString-property-DOMString-value-DOMString-priority">setProperty</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">property</span></span>, <span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">value</span></span>, <span class="idlParam">optional <span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">priority</span></span>);</span>
1941 <span class="idlMethod"> <span class="idlMethType"><a>DOMString</a></span> <span class="idlMethName"><a href="#widl-CSSStyleDeclaration-removeProperty-DOMString-DOMString-property">removeProperty</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">property</span></span>);</span>
1942 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSRule</a>?</span> <span class="idlAttrName"><a href="#widl-CSSStyleDeclaration-parentRule">parentRule</a></span>;</span>
1943 };</span></pre>
1944 <dl class="attributes">
1945 <dt class="attribute" id="widl-CSSStyleDeclaration-cssText">
1946 <code>cssText</code> of type <span class="idlAttrType"><a>DOMString</a></span></dt>
1947 <dd>
1948 <p>The <code>cssText</code> attribute must return the result of <a href="#serialize-a-css-declaration-block" title="serialize a CSS declaration block">serializing</a> the <a href="#css-declaration-block-declarations">CSS declaration block declarations</a>.</p> <p>Setting the <code>cssText</code> attribute must run these steps: <ol> <li><p>If the <a href="#css-declaration-block-readonly-flag">CSS declaration block readonly flag</a> is set, <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> a <code class="external"><a href="http://dom.spec.whatwg.org/#nomodificationallowederror">NoModificationAllowedError</a></code> exception and terminate these steps.</li> <li><p>Empty the <a href="#css-declaration-block-declarations">CSS declaration block declarations</a>.</li> <li><p><a href="#parse-a-css-declaration-block" title="Parse a CSS declaration block">Parse</a> the given value and, if the return value is not <code>null</code>, insert it into the <a href="#css-declaration-block-declarations">CSS declaration block declarations</a>.</li> </ol></dd>
1949 <dt class="attribute" id="widl-CSSStyleDeclaration-length">
1950 <code>length</code> of type <span class="idlAttrType"><a>unsigned long</a></span>, readonly</dt>
1951 <dd>
1952 <p>The <code>length</code> attribute must return the number of declarations in the <span>collection of CSS declarations</span>.</dd>
1953 <dt class="attribute" id="widl-CSSStyleDeclaration-parentRule">
1954 <code>parentRule</code> of type <span class="idlAttrType"><a>CSSRule</a>?</span>, readonly</dt>
1955 <dd>
1956 <p>The <code>parentRule</code> attribute must return the <code>CSSrule</code> object the <code>CSSStyleDeclaration</code> is object is associated with or <code>null</code> if it is not associated with a <code>CSSrule</code> object.</dd>
1957 </dl>
1958 <dl class="methods">
1959 <dt class="method" id="widl-CSSStyleDeclaration-item-DOMString-unsigned-long-index">
1960 <code>item</code> (<span class="idlParam"><span class="idlParamType"><a>unsigned long</a></span> <span class="idlParamName">index</span></span>), returns <span class="idlMethType"><a>DOMString</a></span></dt>
1961 <dd>
1962 <p>The <code>item</code> operation must return the name of the property at position <var>index</var>.</dd>
1963 <dt class="method" id="widl-CSSStyleDeclaration-getPropertyValue-DOMString-DOMString-property">
1964 <code>getPropertyValue</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">property</span></span>), returns <span class="idlMethType"><a>DOMString</a></span></dt>
1965 <dd>
1966 <p>The <code>getPropertyValue</code> operation must ...</dd>
1967 <dt class="method" id="widl-CSSStyleDeclaration-getPropertyPriority-DOMString-DOMString-property">
1968 <code>getPropertyPriority</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">property</span></span>), returns <span class="idlMethType"><a>DOMString</a></span></dt>
1969 <dd>
1970 <p>The <code>getPropertyPriority</code> operation, when invoked, if <var>property</var> is an <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for a property that has a priority user agents must return the canonical priority of that property as given in the syntax definition. Otherwise, the empty string must be returned.</p> <p class="example">E.g. for <code>background-color:lime !IMPORTANT</code> the return value would be '<code>important</code>'.</dd>
1971 <dt class="method" id="widl-CSSStyleDeclaration-setProperty-void-DOMString-property-DOMString-value-DOMString-priority">
1972 <code>setProperty</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">property</span></span>, <span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">value</span></span>, <span class="idlParam">optional <span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">priority</span></span>), returns <span class="idlMethType"><a>void</a></span></dt>
1973 <dd>
1974 <p>The <code>setProperty</code> operation must run these steps:</p> <ol> <li><p>If the <a href="#css-declaration-block-readonly-flag">CSS declaration block readonly flag</a> is set, <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> an '<code class="external"><a href="http://dom.spec.whatwg.org/#nomodificationallowederror">NoModificationAllowedError</a></code>' and terminate these steps.</li> <li><p>If <var>property</var> is not an <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for a supported property, terminate this algorithm.</li> <li><p>If <var>value</var> is the empty string, invoke <code title="dom-CSSStyleDeclaration-removeProperty">removeProperty()</code> with <var>property</var> as argument and terminate this algorithm.</li> <li><p>If the <var>priority</var> argument has been omitted let <var>priority</var> be the empty string.</li> <li><p>If <var>priority</var> is neither a valid priority nor the empty string terminate this algorithm.</li> <li> <p>If <a href="#parse-a-css-value" title="parse a CSS value">parsing the <var>value</var></a> returns <code>null</code> terminate this algorithm. <p class="note"><var>value</var> can not include '<code>!important</code>'.</p> </li> <li><p>Finally, set <var>property</var> to <var>value</var> with priority <var>priority</var> when <var>priority</var> is not the empty string. Otherwise set <var>property</var> to <var>value</var>.</li> </ol></dd>
1975 <dt class="method" id="widl-CSSStyleDeclaration-removeProperty-DOMString-DOMString-property">
1976 <code>removeProperty</code> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">property</span></span>), returns <span class="idlMethType"><a>DOMString</a></span></dt>
1977 <dd>
1978 <p>The <code>removeProperty</code> operation must run these steps:</p> <ol> <li><p>If the <a href="#css-declaration-block-readonly-flag">CSS declaration block readonly flag</a> is set, <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> a '<code class="external"><a href="http://dom.spec.whatwg.org/#nomodificationallowederror">NoModificationAllowedError</a></code>' and terminate these steps.</li> <li><p>If <var>property</var> is an <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for a property of a declaration in the <span>collection of CSS declarations</span> remove the declaration.</li> </ol></dd>
1979 </dl>
1982 <p>If the user agent supports the 'float' CSS property, the following partial interface
1983 applies.
1985 <pre class="idl">partial interface CSSStyleDeclaration {
1986 [TreatNullAs=EmptyString] attribute DOMString cssFloat;
1987 };</pre>
1989 <p>The <code><dfn id="dom-cssstyledeclaration-cssfloat" title="dom-CSSStyleDeclaration-cssFloat">cssFloat</dfn></code>
1990 attribute, on getting, must return the result of invoking
1991 <code title="dom-CSSStyleDeclaration-getPropertyValue">getPropertyValue()</code> with
1992 "float" as argument. On setting, the attribute must invoke
1993 <code title="dom-CSSStyleDeclaration-setPropertyValue">setPropertyValue()</code> with
1994 "float" as first argument, as second argument the given value, and no third argument.
1995 Any exceptions thrown must be re-thrown.
1997 <p>For each CSS property <var>property</var> that the user agent supports, except for
1998 the 'float' property, the following partial interface applies where <var>attribute</var>
1999 is obtained by running the <a href="#css-property-to-idl-attribute">CSS property to IDL attribute</a> algorithm for
2000 <var>property</var>.
2002 <pre class="idl">partial interface CSSStyleDeclaration {
2003 [TreatNullAs=EmptyString] attribute DOMString <var>attribute</var>;
2004 };</pre>
2006 <p>Getting the <var>attribute</var> attribute must return the result of invoking
2007 <code title="dom-CSSStyleDeclaration-getPropertyValue">getPropertyValue()</code> with as
2008 argument the result of running the <a href="#idl-attribute-to-css-property">IDL attribute to CSS property</a>
2009 algorithm for <var>attribute</var>.</p>
2011 <p>Setting the <var>attribute</var> attribute must invoke
2012 <code title="dom-CSSStyleDeclaration-setPropertyValue">setPropertyValue()</code> with as
2013 first argument the result of running the <a href="#idl-attribute-to-css-property">IDL attribute to CSS property</a>
2014 algorithm for <var>attribute</var>, as second argument the given value, and no third argument. Any
2015 exceptions thrown must be re-thrown.</p>
2017 <p>The <dfn id="css-property-to-idl-attribute">CSS property to IDL attribute</dfn> algorithm for <var>property</var> is as
2018 follows:</p>
2020 <ol>
2021 <li><p>Let <var>output</var> be the empty string.
2023 <li><p>Let <var>uppercase next</var> be unset.
2025 <li><p>For each character <var>c</var> in <var>property</var>:
2027 <ol>
2028 <li><p>If <var>c</var> is "<code title="">-</code>" (U+002D), let <var>uppercase next</var> be set.
2030 <li><p>Otherwise, if <var>uppercase next</var> is set, let <var>uppercase next</var> be unset and append <var>c</var> <a class="external" href="http://dom.spec.whatwg.org/#converted-to-ascii-uppercase">converted to ASCII uppercase</a> to <var>output</var>.
2032 <li><p>Otherwise, append <var>c</var> to <var>output</var>.
2033 </ol>
2035 <li><p>Return <var>output</var>.
2036 </ol>
2038 <p>The <dfn id="idl-attribute-to-css-property">IDL attribute to CSS property</dfn> algorithm for <var>attribute</var> is as
2039 follows:</p>
2041 <ol>
2042 <li><p>Let <var>output</var> be the empty string.
2044 <li><p>For each character <var>c</var> in <var>attribute</var>:
2046 <ol>
2047 <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> <a class="external" href="http://dom.spec.whatwg.org/#converted-to-ascii-lowercase">converted to ASCII lowercase</a> to <var>output</var>.
2049 <li><p>Otherwise, append <var>c</var> to <var>output</var>.
2050 </ol>
2052 <li><p>Return <var>output</var>.
2053 </ol>
2056 <!--
2057 <hr>
2059 <p>For the table below, the IDL attribute in the first column
2060 must return the result of invoking
2061 <code title="dom-CSSStyleDeclaration-getPropertyValue">getPropertyValue()</code>
2062 with as argument the CSS property given in the second column on the same
2063 row.</p>
2065 <p>Similarly for the table below, setting the IDL attribute in the
2066 first column must invoke
2067 <code title="dom-CSSStyleDeclaration-setProperty">setProperty()</code>
2068 with as first argument the CSS property given in the second column on the
2069 same row, as second argument the given value, and no third argument. Any
2070 exceptions thrown must be re-thrown.</p>
2072 <p class="issue">Restore the entries for the following table or resurrect
2073 CSS2Properties (or similar) or define in general terms using prose or ...</p>
2075 <table>
2076 <thead>
2077 <tr>
2078 <th>IDL attribute
2079 <th>CSS property
2080 <tbody>
2081 <!- -CSSOM-DECLARATIONTABLE- ->
2082 </table>
2083 -->
2084 <!--
2085 <h4>CSS Properties</h4>
2087 <p>The DOM attribute name of a CSS property can be found by using the
2088 following algorithm:</p>
2090 <ol>
2091 <li>Let <var>r</var> be the CSS property to be
2092 converted.</li>
2094 <li>Uppercase the first character after every U+002D (<code>-</code>) in
2095 <var>r</var>.</li>
2097 <li>Remove every U+002D (<code>-</code>) in <var>r</var>.</li>
2099 <li>Return <var>r</var>.</li>
2100 </ol>
2102 <p class="note">This means that
2103 <code>-<var>vendor</var>-<var>property</var></code>
2104 becomes
2105 <code><var><strong>V</strong>endor</var><var><strong>P</strong>roperty</var></code>
2106 for instance.</p>
2107 -->
2109 <!-- ........................................................................................................................ -->
2110 <!-- ........................................................................................................................ -->
2112 <h3 id="css-values"><span class="secno">6.6 </span>CSS Values</h3>
2114 <!-- ........................................................................................................................ -->
2116 <h4 id="parsing-css-values"><span class="secno">6.6.1 </span>Parsing CSS Values</h4>
2118 <p>To <dfn id="parse-a-css-value">parse a CSS value</dfn> for a given
2119 <var>property</var> means to a parse the given value according to
2120 the definition of the property that is an
2121 <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for
2122 <var>property</var> in the CSS specification. If the given value
2123 is <span>ignored</span> return <code>null</code>. Otherwise return the CSS value for
2124 the given <var>property</var>.</p>
2126 <p class="note">"<code>!important</code>" declarations are not
2127 part of the property value space and will therefore cause
2128 <a href="#parse-a-css-value">parse a CSS value</a> to return <code>null</code>.</p>
2131 <!-- ........................................................................................................................ -->
2133 <h4 id="serializing-css-values"><span class="secno">6.6.2 </span>Serializing CSS Values</h4>
2135 <!-- based on http://damowmow.com/playground/canon.txt -->
2137 <p>To <dfn id="serialize-a-css-value">serialize a CSS value</dfn> follow
2138 these rules:</p>
2140 <ul>
2141 <li><p><a href="#serialize-a-css-value-component" title="Serialize a CSS component value">Serialize</a> any
2142 CSS component values in the value.</li>
2144 <li><p>Where multiple CSS component values can appear in any order
2145 without changing the meaning of the value (typically represented by a
2146 double bar <code>||</code> in the value syntax), use the order as given
2147 in the syntax.</li>
2148 <!-- <code><border-width> <border-style> <color></code>
2149 for <code>border</code> -->
2151 <li>
2152 <p>Where CSS component values of the value can be omitted without
2153 changing the meaning of the value (e.g. initial values in shorthand
2154 properties), omit them. If this would remove all the values, then
2155 include the first allowed value.</p>
2157 <p class="example">E.g. <code>margin: 20px 20px</code> becomes
2158 <code>margin: 20px</code>.</p>
2160 <p class="example">E.g. the value <code>0</code> for the
2161 '<code>border</code>' property.</p>
2162 </li>
2164 <li><p>If the value of a shorthand property is requested and it cannot be
2165 computed because the properties associated with the shorthand have values
2166 that cannot be represented by the shorthand the serialization is the
2167 empty string.</li>
2169 <li><p>If a value has a <a href="#whitespace">whitespace</a>-separated list of
2170 CSS component values,
2171 <a href="#serialize-a-whitespace-separated-list" title="serialize a whitespace-separated list">serialize</a> the
2172 value as a whitespace-separated list.</li>
2174 <li><p>If a value has a comma-separated list of
2175 CSS component values,
2176 <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serialize</a> the
2177 value as a comma-separated list.</li>
2178 </ul>
2181 <p>To
2182 <dfn id="serialize-a-css-value-component">serialize a CSS component value</dfn>
2183 depends on the component, as follows:</p>
2185 <dl class="switch">
2186 <dt>keyword</dt>
2187 <dd><p>The keyword
2188 <a class="external" href="http://dom.spec.whatwg.org/#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.</dd>
2190 <dt><angle></dt>
2191 <dd><p>The number of degrees serialized as per <number> followed by
2192 the literal string "<code>deg</code>".</dd>
2194 <dt><color></dt>
2195 <dd>
2196 <p>If <color> is a component of a resolved or computed value, then
2197 return the color using the <code>rgb()</code> or <code>rgba()</code> functional
2198 notation as follows:</p>
2199 <ol>
2200 <li>If the alpha component of the color is equal to one, then return the serialization of the
2201 <code>rgb()</code> functional equivalent of the opaque color.</li>
2202 <li>If the alpha component of the color is not equal to one, then return the serialization of the
2203 <code>rgba()</code> functional equivalent of the non-opaque color.</li>
2204 </ol>
2205 <p>The serialization of the <code>rgb()</code> functional equivalent is the concatenation of the following:</p>
2206 <ol>
2207 <li>The string "<code>rgb(</code>".</li>
2208 <li>The shortest base-ten integer serialization of the color's red component.</li>
2209 <li>The string "<code>, </code>".</li>
2210 <li>The shortest base-ten serialization of the color's green component.</li>
2211 <li>The string "<code>, </code>".</li>
2212 <li>The shortest base-ten serialization of the color's blue component.</li>
2213 <li>The string "<code>)</code>".</li>
2214 </ol>
2215 <p>The serialization of the <code>rgba()</code> functional equivalent is the concatenation of the following:</p>
2216 <ol>
2217 <li>The string "<code>rgba(</code>".</li>
2218 <li>The shortest base-ten serialization of the color's red component.</li>
2219 <li>The string "<code>, </code>".</li>
2220 <li>The shortest base-ten serialization of the color's green component.</li>
2221 <li>The string "<code>, </code>".</li>
2222 <li>The shortest base-ten serialization of the color's blue component.</li>
2223 <li>The string "<code>, </code>".</li>
2224 <li>The shortest serialization of the <number> that denotes the color's alpha component.</li>
2225 <li>The string "<code>)</code>".</li>
2226 </ol>
2228 <p>In the above rules, the string "<code>, </code>" denotes a COMMA (U+002C) followed by a single SPACE (U+0020).</p>
2230 <p>If <color> is a component of a specified value, then
2231 return the color as follows:</p>
2232 <ol>
2233 <li>If the color was explicitly specified by the author, then return the original, author specified color value.</li>
2234 <li>Otherwise, return the value that would be returned if the color were a component of a computed value.</li>
2235 </ol>
2236 <p class="issue">Should author specified values be normalized for case? Or should original case be preserved?</p>
2237 </dd>
2238 <!--
2239 <dt>It is a system color</dt>
2241 <dd>See below (you use the representation given in the specification that
2242 defines the keyword).</dd>
2244 <dt>Alpha component is equal to 1.0</dt>
2246 <dd>The color is an uppercase six-digit hexadecimal value, prefixed with a
2247 <code>#</code> character (U+0023 NUMBER SIGN), with the first two digits
2248 representing the red component, the next two digits representing the green
2249 component, and the last two digits representing the blue component, the
2250 digits being in the range 0-9 A-F (U+0030 to U+0039 and U+0041 to
2251 U+0046).</dd>
2253 <dt>Alpha component is less than 1.0</dt>
2255 <dd>The color is in the CSS <code>rgba()</code> functional-notation format:
2256 the literal string <code>rgba</code> (U+0072 U+0067 U+0062 U+0061) followed
2257 by a U+0028 LEFT PARENTHESIS, a <span>color component integer</span>
2258 representing the red component, a <span>color component separator</span>, a
2259 <span>color component integer</span> for the green component, a <span>color
2260 component separator</span>, a <span>color component integer</span> for the
2261 blue component, another <span>color component separator</span> a U+0030
2262 DIGIT ZERO, a U+002E FULL STOP (representing the decimal point), one or
2263 more digits in the range 0-9 (U+0030 to U+0039) representing the fractional
2264 part of the alpha value, and finally a U+0029 RIGHT PARENTHESIS.</dd>
2266 <dt>The keyword <code>transparent</code> is used</dt>
2268 <dd>The color is <code>rgba(0, 0, 0, 0)</code>.</dd>
2269 -->
2271 <dt><counter></dt>
2272 <dd>
2273 <p>The concatenation of:</p>
2274 <ol>
2275 <li><p>If <counter> has three CSS component values the string
2276 "<code>counters(</code>".</li>
2277 <li><p>If <counter> has two CSS component values the string
2278 "<code>counter(</code>".</li>
2279 <li><p>The result of
2280 <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serializing</a> the
2281 <a href="#serialize-a-css-value-component" title="serialize a CSS component value">serialized</a>
2282 CSS component values belonging to <counter> as list while omitting
2283 the last CSS component value if it is 'decimal'.</li>
2284 <li><p>"<code>)</code>" (U+0029).</li>
2285 </ol>
2286 </dd>
2288 <dt><frequency></dt>
2289 <dd><p>The frequency in hertz serialized as per <number> followed by
2290 the literal string "<code>hz</code>".</dd>
2292 <dt><identifier></dt>
2293 <dd><p>The identifier
2294 <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>.</dd>
2296 <dt><integer></dt>
2297 <dd><p>A base-ten integer using digits 0-9 (U+0030 to U+0039) in the
2298 shortest form possible, preceded by "<code>-</code>" (U+002D) if it is
2299 negative.</dd>
2301 <dt><length></dt>
2302 <dd>
2303 <p>A length of zero is represented by the literal string
2304 "<code>0px</code>".</p>
2306 <p>Absolute lengths: the number of millimeters serialized as per
2307 <number> followed by the literal string "<code>mm</code>".</p>
2308 <p class="issue">Rumor has it absolute lengths will become relative
2309 lengths. Centimeters would be compatible with <resolution>...</p>
2311 <p>Relative lengths: the <number> component serialized as per
2312 <number> followed by the unit in its canonical form as defined in its
2313 respective specification.</p>
2314 </dd>
2316 <dt><number></dt>
2317 <dd><p class="issue">Browsers seem to use ToString(), but that might give a
2318 significand which according to some is teh evil (and also currently does
2319 not parse correctly).</dd>
2321 <dt><percentage></dt>
2322 <dd><p>The <number> component serialized as per <number> followed
2323 by the literal string "<code>%</code>" (U+0025).</dd>
2325 <dt><resolution></dt>
2326 <dd><p>The resolution in dots per centimeter serialized as per
2327 <number> followed by the literal string "<code>dpcm</code>".</dd>
2329 <dt><shape></dt>
2330 <dd><p>The string "<code>rect(</code>", followed by the result
2331 of <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serializing</a> the
2332 <a href="#serialize-a-css-value-component" title="serialize a CSS component value">serialized</a>
2333 CSS component values belonging to <shape> as list, followed by
2334 "<code>)</code>" (U+0029).</dd>
2336 <dt><string></dt>
2337 <dt><family-name></dt>
2338 <dt><specific-voice></dt>
2339 <dd><p>The string
2340 <a href="#serialize-a-string" title="serialize a string">string escaped</a>.</dd>
2342 <dt><time></dt>
2343 <dd><p>The time in seconds serialized as per <number> followed by
2344 the literal string "<code>s</code>".</dd>
2346 <dt><uri></dt>
2347 <dd><p>The <a class="external" href="http://dev.w3.org/html5/spec/single-page.html#absolute-url">absolute URL</a>
2348 <a href="#serialize-a-url" title="serialize a URL">URL escaped</a>.</dd>
2349 </dl>
2351 <p>
2352 <absolute-size>,
2353 <border-width>,
2354 <border-style>,
2355 <bottom>,
2356 <generic-family>,
2357 <generic-voice>,
2358 <left>,
2359 <margin-width>,
2360 <padding-width>,
2361 <relative-size>,
2362 <right>, and
2363 <top>,
2364 are considered macros by this specification. They all represent instances
2365 of components outlined above.</p>
2367 <p class="issue">One idea is that we can remove this section somewhere in
2368 the CSS3/CSS4 timeline by moving the above definitions to the drafts that
2369 define the CSS components.</p>
2372 <h5 id="examples-0"><span class="secno">6.6.2.1 </span>Examples</h5>
2374 <p>Here are some examples of before and after results on specified values.
2375 The before column could be what the author wrote in a style sheet, while
2376 the after column shows what querying the DOM would return.</p>
2378 <div class="example">
2379 <table>
2380 <thead>
2381 <tr><th>Before<th>After
2382 <tbody>
2383 <tr><td><code>background: none</code><td><code>background: rgba(0, 0, 0, 0)</code>
2384 <tr><td><code>outline: none</code><td><code>outline: invert</code>
2385 <tr><td><code>border: none</code><td><code>border: medium</code>
2386 <tr><td><code>list-style: none</code><td><code>list-style: disc</code>
2387 <tr><td><code>margin: 0 1px 1px 1px</code><td><code>margin: 0px 1px 1px</code>
2388 <tr><td><code>azimuth: behind left</code><td><code>azimuth: 220deg</code>
2389 <tr><td><code>font-family: a, 'b"', serif</code><td><code>font-family: "a", "b\"", serif</code>
2390 <tr><td><code>content: url('h)i') '\[\]'</code><td><code>content: url("h)i") "[]"</code>
2391 <tr><td><code>azimuth: leftwards</code><td><code>azimuth: leftwards</code>
2392 <tr><td><code>color: rgb(18, 52, 86)</code><td><code>color: #123456</code>
2393 <tr><td><code>color: rgba(000001, 0, 0, 1)</code><td><code>color: #000000</code>
2394 </table>
2396 <p class="issue">Some of these need to be updated per the new rules.</p>
2397 </div>
2399 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
2401 <h2 id="dom-access-to-css-declaration-blocks"><span class="secno">7 </span>DOM Access to CSS Declaration Blocks</h2>
2403 <!-- ........................................................................................................................ -->
2404 <!-- ........................................................................................................................ -->
2406 <h3 id="the-elementcssinlinestyle-interface"><span class="secno">7.1 </span>The <code>ElementCSSInlineStyle</code> Interface</h3>
2408 The <code>ElementCSSInlineStyle</code> interface is implemented by <code>Element</code> objects in order to provide access to inline style properties.
2409 <pre class="idl"><span class="idlInterface" id="widl-def-ElementCSSInlineStyle">[NoInterfaceObject]
2410 interface <span class="idlInterfaceID">ElementCSSInlineStyle</span> {
2411 <span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>CSSStyleDeclaration</a></span> <span class="idlAttrName"><a href="#widl-ElementCSSInlineStyle-style">style</a></span>;</span>
2412 };</span></pre>
2413 <dl class="attributes">
2414 <dt class="attribute" id="widl-ElementCSSInlineStyle-style">
2415 <code>style</code> of type <span class="idlAttrType"><a>CSSStyleDeclaration</a></span>, readonly</dt>
2416 <dd>
2417 The <code>style</code> attribute must return a mutable <code>CSSStyleDeclaration</code> object that represents the inline style properties of the associated <code>Element</code> instance.</dd>
2418 </dl>
2421 <!-- ........................................................................................................................ -->
2422 <!-- ........................................................................................................................ -->
2424 <h3 id="extensions-to-the-window-interface"><span class="secno">7.2 </span>Extensions to the <code>Window</code> Interface</h3>
2427 <pre class="idl"><span class="idlInterface" id="widl-def-Window">partial interface <span class="idlInterfaceID">Window</span> {
2428 <span class="idlMethod"> <span class="idlMethType"><a>CSSStyleDeclaration</a></span> <span class="idlMethName"><a href="#widl-Window-getComputedStyle-CSSStyleDeclaration-Element-elt">getComputedStyle</a></span> (<span class="idlParam"><span class="idlParamType"><a>Element</a></span> <span class="idlParamName">elt</span></span>);</span>
2429 <span class="idlMethod"> <span class="idlMethType"><a>CSSStyleDeclaration</a></span> <span class="idlMethName"><a href="#widl-Window-getComputedStyle-CSSStyleDeclaration-Element-elt-DOMString-pseudoElt">getComputedStyle</a></span> (<span class="idlParam"><span class="idlParamType"><a>Element</a></span> <span class="idlParamName">elt</span></span>, <span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">pseudoElt</span></span>);</span>
2430 };</span></pre>
2431 <dl class="methods">
2432 <dt class="method" id="widl-Window-getComputedStyle-CSSStyleDeclaration-Element-elt">
2433 <code>getComputedStyle</code> (<span class="idlParam"><span class="idlParamType"><a>Element</a></span> <span class="idlParamName">elt</span></span>), returns <span class="idlMethType"><a>CSSStyleDeclaration</a></span></dt>
2434 <dt class="method" id="widl-Window-getComputedStyle-CSSStyleDeclaration-Element-elt-DOMString-pseudoElt">
2435 <code>getComputedStyle</code> (<span class="idlParam"><span class="idlParamType"><a>Element</a></span> <span class="idlParamName">elt</span></span>, <span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">pseudoElt</span></span>), returns <span class="idlMethType"><a>CSSStyleDeclaration</a></span></dt>
2436 <dd>
2437 <p>The <code>getComputedStyle</code> operation must run these steps:</p> <ol> <li><p>Let <var>doc</var> be the <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> associated with the <code class="external"><a href="http://dev.w3.org/html5/spec/single-page.html#window">Window</a></code> object on which the method was invoked.</li> <li><p>Let <var>obj</var> be <var>elt</var>.</li> <li><p>If <var>pseudoElt</var> is as an <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for either '<code>:before</code>' or '<code>::before</code>' let <var>obj</var> be the '::before' pseudo-element of <var>elt</var>.</li> <li><p>If <var>pseudoElt</var> is as an <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for either '<code>:after</code>' or '<code>::after</code>' let <var>obj</var> be the '::after' pseudo-element of <var>elt</var>.</li> <li> <p>Return a <a href="#css-declaration-block">CSS declaration block</a> with the <a href="#css-declaration-block-readonly-flag">CSS declaration block readonly flag</a> set and the <a href="#css-declaration-block-declarations">CSS declaration block declarations</a> set to all properties the user agent supports with as value the <a href="#resolved-value">resolved value</a> computed for <var>obj</var> using the style rules associated with <var>doc</var>.</p> <p class="note">This means that even if <var>obj</var> is in a different document (e.g. one fetched via <code>XMLHttpRequest</code>) it will still use the style rules associated with the document that is associated with the global object on which <code title="dom-Window-getComputedStyle">getComputedStyle()</code> was invoked to compute the <a href="#css-declaration-block">CSS declaration block</a>.</p> </li> </ol> <p class="note">Because of historical IDL limitations the <code>getComputedStyle</code> operation used to be on a separate interface, <code>ViewCSS</code>.</dd>
2438 </dl>
2441 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
2443 <h2 id="resolved-values"><span class="secno">8 </span>Resolved Values</h2>
2445 <p><code title="dom-Window-getComputedStyle">getComputedStyle()</code> was
2446 historically defined to return the "computed value" of an element or
2447 pseudo-element. However, the concept of "computed value" changed between
2448 revisions of CSS while the implementation of
2449 <code title="dom-Window-getComputedStyle">getComputedStyle()</code> had to
2450 remain the same for compatibility with deployed scripts. To address this
2451 issue this specification introduces the concept of a
2452 <dfn id="resolved-value">resolved value</dfn>.</p>
2454 <p>The <a href="#resolved-value">resolved value</a> for a given property can be determined
2455 as follows:</p>
2457 <dl class="switch">
2458 <!--
2459 We want to treat shorthand properties like any other value basically.
2461 <dt>'<code>background</code>'
2462 <dt>'<code>border</code>'
2463 <dt>'<code>border-collapse</code>'
2464 <dt>'<code>border-color</code>'
2465 <dt>'<code>border-spacing</code>'
2466 <dt>'<code>border-style</code>'
2467 <dt>'<code>border-top</code>'
2468 <dt>'<code>border-right</code>'
2469 <dt>'<code>border-bottom</code>'
2470 <dt>'<code>border-left</code>'
2471 <dt>'<code>border-width</code>'
2472 <dt>'<code>font</code>'
2473 <dt>'<code>list-style</code>'
2474 <dt>'<code>margin</code>'
2475 <dt>'<code>outline</code>'
2476 <!- - overflow is not - ->
2477 <dt>'<code>padding</code>'
2478 <dt>'<code>pause</code>'
2479 <dd>
2480 <p>There is no <span>resolved value</span>.</p>
2481 </dd>
2482 -->
2484 <dt>'<code>line-height</code>'</dt>
2485 <dd><p>The <a href="#resolved-value">resolved value</a> is the used value.</dd>
2487 <dt>'<code>height</code>'</dt>
2488 <dt>'<code>margin</code>'</dt>
2489 <dt>'<code>margin-bottom</code>'</dt>
2490 <dt>'<code>margin-left</code>'</dt>
2491 <dt>'<code>margin-right</code>'</dt>
2492 <dt>'<code>margin-top</code>'</dt>
2493 <dt>'<code>padding</code>'</dt>
2494 <dt>'<code>padding-bottom</code>'</dt>
2495 <dt>'<code>padding-left</code>'</dt>
2496 <dt>'<code>padding-right</code>'</dt>
2497 <dt>'<code>padding-top</code>'</dt>
2498 <dt>'<code>width</code>'</dt>
2499 <dd><p>If the property applies to the element or pseudo-element and the
2500 <a href="#resolved-value">resolved value</a> of the '<code>display</code>' property is not
2501 <code>none</code>, the <a href="#resolved-value">resolved value</a> is the
2502 <span>used value</span>. Otherwise the <a href="#resolved-value">resolved value</a> is the
2503 computed value.</dd>
2505 <dt>'<code>bottom</code>'</dt>
2506 <dt>'<code>left</code>'</dt>
2507 <dt>'<code>right</code>'</dt>
2508 <dt>'<code>top</code>'</dt>
2509 <dd><p>If the property applies to a positioned element and the
2510 <a href="#resolved-value">resolved value</a> of the '<code>display</code>' property is not
2511 <code>none</code>, the <a href="#resolved-value">resolved value</a> is the
2512 <span>used value</span>. Otherwise the <a href="#resolved-value">resolved value</a> is the
2513 computed value.</dd>
2515 <dt>Any other property</dt>
2516 <dd><p>The <a href="#resolved-value">resolved value</a> is the computed value.</dd>
2517 </dl>
2519 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
2521 <h2 id="iana-considerations"><span class="secno">9 </span>IANA Considerations</h2>
2523 <!-- ........................................................................................................................ -->
2524 <!-- ........................................................................................................................ -->
2526 <h3 id="default-style"><span class="secno">9.1 </span><dfn title="http-default-style"><code>Default-Style</code></dfn></h3>
2528 <p>This section describes a header field for registration in the Permanent
2529 Message Header Field Registry.
2530 <!--<a href="XXX">[RFC3864]</a>--></p>
2532 <dl>
2533 <dt>Header field name</dt>
2534 <dd>Default-Style</dd>
2535 <dt>Applicable protocol</dt>
2536 <dd>http</dd>
2537 <dt>Status</dt>
2538 <dd>standard</dd>
2539 <dt>Author/Change controller</dt>
2540 <dd>W3C</dd>
2541 <dt>Specification document(s)</dt>
2542 <dd>This document is the relevant specification.</dd>
2543 <dt>Related information</dt>
2544 <dd>None.</dd>
2545 </dl>
2547 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
2549 <h2 class="no-num" id="references">References</h2>
2551 <!-- ........................................................................................................................ -->
2552 <!-- ........................................................................................................................ -->
2554 <h3 class="no-num" id="normative-references">Normative references</h3>
2555 <div id="anolis-references-normative"><dl><dt id="refsCSS">[CSS]
2556 <dd><cite><a href="http://www.w3.org/TR/CSS2/">CSS</a></cite>, Bert Bos, Tantek Çelik, Ian Hickson et al.. W3C.
2558 <dt id="refsDOM">[DOM]
2559 <dd><cite><a href="http://dom.spec.whatwg.org/">DOM</a></cite>, Anne van Kesteren, Aryeh Gregor and Ms2ger. WHATWG.
2561 <dt id="refsDOM2STYLE">[DOM2STYLE]
2562 <dd><cite><a href="http://www.w3.org/TR/DOM-Level-2-Style/">Document Object Model (DOM) Level 2 Style Specification</a></cite>, Chris Wilson, Philippe Le Hégaret and Vidur Apparao. W3C.
2564 <dt id="refsHTML">[HTML]
2565 <dd><cite><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML</a></cite>, Ian Hickson. WHATWG.
2567 <dt id="refsRFC2119">[RFC2119]
2568 <dd><cite><a href="http://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a></cite>, Scott Bradner. IETF.
2570 <dt id="refsXML">[XML]
2571 <dd><cite><a href="http://www.w3.org/TR/xml/">Extensible Markup Language</a></cite>, Tim Bray, Jean Paoli, C. M. Sperberg-McQueen et al.. W3C.
2573 <dt id="refsXMLSS">[XMLSS]
2574 <dd><cite><a href="http://www.w3.org/TR/xml-stylesheet/">Associating Style Sheets with XML documents 1.0 (Second Edition)</a></cite>, James Clark, Simon Pieters and Henry S. Thompson. W3C.
2576 </dl></div>
2578 <!-- ........................................................................................................................ -->
2579 <!-- ........................................................................................................................ -->
2581 <h3 class="no-num" id="informative-references">Informative references</h3>
2582 <div id="anolis-references-informative"></div>
2584 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
2586 <h2 class="no-num" id="changes">Change History</h2>
2588 <p>This section documents the primary technical changes of CSSOM related functionality, with a focus on changes to API signatures.</p>
2590 <h3 class="no-num" id="changes-from-dom2">Changes From DOM-2 Style</h3>
2592 <ul>
2593 <li><p>Remove definition of <code>CSSRule.UNKNOWN_RULE</code>, reserving its value (0) to prevent future reuse.</li>
2594 <li><p>Remove definition of <code>DOMImplementationCSS</code> interface.</li>
2595 </ul>
2597 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
2599 <h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
2601 <p>The editors would like to thank
2603 Alexey Feldgendler,
2604 Björn Höhrmann,
2605 Boris Zbasky,
2606 Brian Kardell,
2607 Christian Krebs,
2608 Daniel Glazman,
2609 David Baron,
2610 <i>fantasai</i>,
2611 Hallvord R. M. Steen,
2612 Ian Hickson,
2613 John Daggett,
2614 Lachlan Hunt,
2615 Morten Stenshorne,
2616 Philip Taylor,
2617 Robert O'Callahan,
2618 Sjoerd Visscher,
2619 Simon Pieters,
2620 Sylvain Galineau,
2621 Tarquin Wilton-Jones, and
2622 Zack Weinberg
2624 for contributing to this specification.</p>
2626 <p>Additional thanks to Ian Hickson for writing the
2627 initial version of the alternative style sheets API and canonicalization
2628 (now serialization) rules for CSS values.</p>
2630 <!-- XXX NOTES
2632 <style type=text/css;charset=utf-8> does create a StyleSheet in Firefox
2633 and Opera, but does not create a StyleSheet in IE. I prefer IE.
2635 <style type=TEXT/CSS> sets the style sheet type to text/css in Firefox and
2636 TEXT/CSS in Opera and IE. I prefer Firefox.
2638 <style> sets the style sheet location to the document location Firefox,
2639 the empty string in IE, and null in Opera. I prefer Opera
2641 <style media="x"> invokes .sheet.media.mediaText = "x"
2643 <style> does not "have" a title
2645 .cascadedStyle that returns less keywords than currentStyle, no inherit,
2646 etc.
2648 Markup style: http://krijnhoetmer.nl/irc-logs/whatwg/20100204#l-529
2649 -->
