cssom/Overview.html@b3a214e224d7
cssom/Overview.html
Fri, 07 Jun 2013 14:43:47 +0200
- author
- Simon Pieters <simonp@opera.com>
- date
- Fri, 07 Jun 2013 14:43:47 +0200
- changeset 8372
- b3a214e224d7
- parent 8371
- ca20cc414744
- child 8373
- 37cd62aced08
- permissions
- -rw-r--r--
[cssom] Disallow reading and modifying of cross-origin sheets. Integrate with URL and Fetch specs for xml-stylesheet and Link:. Only expose pre-redirect URL of a sheet.
1 <!DOCTYPE html><html lang="en-US"><head>
2 <meta charset="utf-8">
3 <title>CSS Object Model (CSSOM)</title>
4 <style>
5 .idl { border:solid thin; background:#eee; color:#000; padding:0.5em }
6 .idl :link, .idl :visited { color:inherit; background:transparent }
7 dfn { font-weight:bold; font-style:normal }
8 .example { margin-left:1em; padding-left:1em; border-left:double; color:#222; background:#fcfcfc }
9 .example table code { color:inherit }
10 td, th { padding:.1em }
11 .note { margin-left:2em; color:green; font-style:italic; font-weight:bold }
12 p.note::before { content:"Note: " }
13 .XXX { padding:.5em; border:solid red }
14 p.XXX::before { content:"Issue: " }
15 dl.switch { padding-left:2em }
16 dl.switch > dt { text-indent:-1.5em }
17 dl.switch > dt:before { content:'\21AA'; padding:0 0.5em 0 0; display:inline-block; width:1em; text-align:right; line-height:0.5em }
18 code { color:orangered }
19 code :link, code :visited { color:inherit }
20 span:not(.secno) { border-bottom:solid red }
21 .atrisk::before { position:absolute; left:30px; margin-top:-8px; width:25px; height:25px; padding:0 4px 8px; border:1px solid; content:'At risk';
22 font-size:smaller; background:white; color:gray; border-radius:25px; text-align:center }
23 td { vertical-align:baseline }
24 td, th { border:solid }
25 table { border:hidden; border-collapse:collapse }
26 .propdef { font:inherit; line-height:2.3 }
27 </style>
28 <link href="https://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet">
29 </head>
30 <body class="draft">
32 <div class="head">
34 <!--begin-logo-->
35 <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72"></a></p>
36 <!--end-logo-->
39 <h1>CSS Object Model (CSSOM)</h1>
42 <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 7 June 2013</h2>
44 <dl>
46 <dt>This Version:</dt>
47 <dd class="dontpublish"><a href="http://dev.w3.org/csswg/cssom/">http://dev.w3.org/csswg/cssom/</a></dd>
48 <dt class="dontpublish">Participate:</dt>
49 <dd class="dontpublish"><a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a>
50 (<a href="http://lists.w3.org/Archives/Public/www-style/">archives</a>)</dd>
51 <dd class="dontpublish"><a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?product=CSS&component=CSSOM">File a bug</a>
52 (<a href="https://www.w3.org/Bugs/Public/buglist.cgi?component=CSSOM&product=CSS&resolution=---">open bugs</a>)
53 <script async="" src="https://w3c-test.org/resources.whatwg.org/file-bug.js"></script></dd>
54 <dd class="dontpublish"><a href="irc://irc.w3.org:6665/css">IRC: #css on W3C</a></dd>
56 <dt class="dontpublish">Previous Version:</dt>
57 <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>
58 <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>
60 <dt>Editors:</dt>
61 <dd><a>Simon Pieters</a>
62 (<a href="http://www.opera.com/">Opera Software ASA</a>)
63 <<a href="mailto:simponp@opera.com">simonp@opera.com</a>></dd>
64 <dd><a href="http://www.w3.org/wiki/User:Gadams">Glenn Adams</a>
65 (<a href="http://www.cox.com/">Cox Communications, Inc.</a>)
66 <<a href="mailto:glenn.adams@cox.com">glenn.adams@cox.com</a>></dd>
68 <dt>Previous Editor:</dt>
69 <dd><a href="http://annevankesteren.nl/">Anne van Kesteren</a>
70 (<a href="http://www.opera.com/">Opera Software ASA</a>)
71 <<a href="mailto:annevk@opera.com">annevk@opera.com</a>></dd>
72 </dl>
75 <!--begin-copyright-->
76 <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>
77 <!--end-copyright-->
79 </div>
81 <hr class="top">
84 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
86 <p>CSSOM defines APIs (including generic parsing and serialization rules)
87 for Media Queries, Selectors, and of course CSS itself.</p>
90 <h2 class="no-num no-toc" id="sotd">Status of This Document</h2>
92 <p>This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment.
93 Its publication here does not imply endorsement of its contents by W3C or by the CSS Working Group. Don't cite
94 this document other than as work in progress.</p>
96 <p class="note">Implementers should note well that this specification is an ongoing effort to sort out
97 what has been widely implemented and deployed from <a class="informative" href="#refsDOM2STYLE">[DOM2STYLE]</a> as well as common extensions thereto, some details
98 of which are currently interoperable and others which are not currently interoperable. As this specification moves
99 forward, it is hoped that these differences will be resolved and an unambiguous and adequate consensus-based
100 specification will emerge.</p>
102 <p><em>This section describes the status of this document at the time of
103 its publication. Other documents may supersede this document. A list of
104 current W3C publications and the latest revision of this technical report
105 can be found in the
106 <a href="http://www.w3.org/TR/">W3C technical reports index at http://www.w3.org/TR/.</a></em>
108 <p class="dontpublish">This is the 7 June 2013 Editor's Draft of CSSOM. Please send comments to
109 <a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a>
110 (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
111 with <samp>[cssom]</samp> at the start of the subject line.
113 <p>This document was produced by a group operating under the
114 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>.
115 W3C maintains a
116 <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a>
117 made in connection with the deliverables of the group; that page also
118 includes instructions for disclosing a patent. An individual who has
119 actual knowledge of a patent which the individual believes contains
120 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a>
121 must disclose the information in accordance with
122 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>.</p>
125 <h2 class="no-num no-toc" id="toc">Table of Contents</h2>
128 <!--begin-toc-->
129 <ol class="toc">
130 <li><a href="#introduction"><span class="secno">1 </span>Introduction</a></li>
131 <li><a href="#conformance"><span class="secno">2 </span>Conformance</a></li>
132 <li><a href="#terminology"><span class="secno">3 </span>Terminology</a>
133 <ol class="toc">
134 <li><a href="#common-serializing-idioms"><span class="secno">3.1 </span>Common Serializing Idioms</a></ol></li>
135 <li><a href="#media-queries"><span class="secno">4 </span>Media Queries</a>
136 <ol class="toc">
137 <li><a href="#parsing-media-queries"><span class="secno">4.1 </span>Parsing Media Queries</a></li>
138 <li><a href="#serializing-media-queries"><span class="secno">4.2 </span>Serializing Media Queries</a>
139 <ol class="toc">
140 <li><a href="#serializing-media-feature-values"><span class="secno">4.2.1 </span>Serializing Media Feature Values</a></ol></li>
141 <li><a href="#comparing-media-queries"><span class="secno">4.3 </span>Comparing Media Queries</a></li>
142 <li><a href="#the-medialist-interface"><span class="secno">4.4 </span>The <code title="">MediaList</code> Interface</a></ol></li>
143 <li><a href="#selectors"><span class="secno">5 </span>Selectors</a>
144 <ol class="toc">
145 <li><a href="#parsing-selectors"><span class="secno">5.1 </span>Parsing Selectors</a></li>
146 <li><a href="#serializing-selectors"><span class="secno">5.2 </span>Serializing Selectors</a></ol></li>
147 <li><a href="#css"><span class="secno">6 </span>CSS</a>
148 <ol class="toc">
149 <li><a href="#css-style-sheets"><span class="secno">6.1 </span>CSS Style Sheets</a>
150 <ol class="toc">
151 <li><a href="#the-stylesheet-interface"><span class="secno">6.1.1 </span>The <code title="">StyleSheet</code> Interface</a></li>
152 <li><a href="#the-cssstylesheet-interface"><span class="secno">6.1.2 </span>The <code title="">CSSStyleSheet</code> Interface</a></ol></li>
153 <li><a href="#css-style-sheet-collections"><span class="secno">6.2 </span>CSS Style Sheet Collections</a>
154 <ol class="toc">
155 <li><a href="#the-http-default-style-header"><span class="secno">6.2.1 </span>The HTTP <code title="">Default-Style</code> Header</a></li>
156 <li><a href="#the-stylesheetlist-interface"><span class="secno">6.2.2 </span>The <code title="">StyleSheetList</code> Interface</a></li>
157 <li><a href="#extensions-to-the-document-interface"><span class="secno">6.2.3 </span>Extensions to the <code title="">Document</code> Interface</a></li>
158 <li><a href="#interaction-with-the-user-interface"><span class="secno">6.2.4 </span>Interaction with the User Interface</a>
159 <ol class="toc">
160 <li><a href="#persisting-the-selected-css-style-sheet-set"><span class="secno">6.2.4.1 </span>Persisting the selected CSS style sheet set</a></ol></li>
161 <li><a href="#examples"><span class="secno">6.2.5 </span>Examples</a></ol></li>
162 <li><a href="#style-sheet-association"><span class="secno">6.3 </span>Style Sheet Association</a>
163 <ol class="toc">
164 <li><a href="#the-linkstyle-interface"><span class="secno">6.3.1 </span>The <code title="">LinkStyle</code> Interface</a></li>
165 <li><a href="#requirements-on-specifications"><span class="secno">6.3.2 </span>Requirements on specifications</a></li>
166 <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 <code title="">xml-stylesheet</code> processing instruction</a></li>
167 <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
168 <code title="">Link</code> Header</a></ol></li>
169 <li><a href="#css-rules"><span class="secno">6.4 </span>CSS Rules</a>
170 <ol class="toc">
171 <li><a href="#the-cssrulelist-interface"><span class="secno">6.4.1 </span>The <code title="">CSSRuleList</code> Interface</a></li>
172 <li><a href="#the-cssrule-interface"><span class="secno">6.4.2 </span>The <code title="">CSSRule</code> Interface</a></li>
173 <li><a href="#the-cssstylerule-interface"><span class="secno">6.4.3 </span>The <code title="">CSSStyleRule</code> Interface</a></li>
174 <li><a href="#the-csscharsetrule-interface"><span class="secno">6.4.4 </span>The <code title="">CSSCharsetRule</code> Interface</a></li>
175 <li><a href="#the-cssimportrule-interface"><span class="secno">6.4.5 </span>The <code title="">CSSImportRule</code> Interface</a></li>
176 <li><a href="#the-cssmediarule-interface"><span class="secno">6.4.6 </span>The <code title="">CSSMediaRule</code> Interface</a></li>
177 <li><a href="#the-cssfontfacerule-interface"><span class="secno">6.4.7 </span>The <code title="">CSSFontFaceRule</code> Interface</a></li>
178 <li><a href="#the-csspagerule-interface"><span class="secno">6.4.8 </span>The <code title="">CSSPageRule</code> Interface</a></li>
179 <li><a href="#the-cssnamespacerule-interface"><span class="secno">6.4.9 </span>The <code title="">CSSNamespaceRule</code> Interface</a></ol></li>
180 <li><a href="#css-declaration-blocks"><span class="secno">6.5 </span>CSS Declaration Blocks</a>
181 <ol class="toc">
182 <li><a href="#the-cssstyledeclaration-interface"><span class="secno">6.5.1 </span>The <code title="">CSSStyleDeclaration</code> Interface</a></ol></li>
183 <li><a href="#css-values"><span class="secno">6.6 </span>CSS Values</a>
184 <ol class="toc">
185 <li><a href="#parsing-css-values"><span class="secno">6.6.1 </span>Parsing CSS Values</a></li>
186 <li><a href="#serializing-css-values"><span class="secno">6.6.2 </span>Serializing CSS Values</a>
187 <ol class="toc">
188 <li><a href="#examples-0"><span class="secno">6.6.2.1 </span>Examples</a></ol></ol></ol></li>
189 <li><a href="#dom-access-to-css-declaration-blocks"><span class="secno">7 </span>DOM Access to CSS Declaration Blocks</a>
190 <ol class="toc">
191 <li><a href="#the-elementcssinlinestyle-interface"><span class="secno">7.1 </span>The <code>ElementCSSInlineStyle</code> Interface</a></li>
192 <li><a href="#extensions-to-the-window-interface"><span class="secno">7.2 </span>Extensions to the <code title="">Window</code> Interface</a></li>
193 <li><a href="#the-getstyleutils-interface"><span class="secno">7.3 </span>The <code title="">GetStyleUtils</code> Interface</a></li>
194 <li><a href="#extensions-to-the-element-interface"><span class="secno">7.4 </span>Extensions to the <code title="">Element</code> Interface</a></li>
195 <li><a href="#the-pseudoelement-interface"><span class="secno">7.5 </span>The <code title="">PseudoElement</code> Interface</a></ol></li>
196 <li><a href="#resolved-values"><span class="secno">8 </span>Resolved Values</a></li>
197 <li><a href="#iana-considerations"><span class="secno">9 </span>IANA Considerations</a>
198 <ol class="toc">
199 <li><a href="#default-style"><span class="secno">9.1 </span><code>Default-Style</code></a></ol></li>
200 <li><a class="no-num" href="#references">References</a></li>
201 <li><a class="no-num" href="#change-history">Change History</a>
202 <ol class="toc">
203 <li><a class="no-num" href="#changes-from-dom-2-style">Changes From DOM-2 Style</a></ol></li>
204 <li><a class="no-num" href="#acknowledgments">Acknowledgments</a></ol>
205 <!--end-toc-->
208 <h2 id="introduction"><span class="secno">1 </span>Introduction</h2>
210 <p>This document formally specifies the core features of the CSS Object Model (CSSOM). Other documents in the CSSOM family of specifications
211 as well as other CSS related specifications define extensions to these core features.</p>
213 <p>The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to
214 and manipulation of style related state information and processes.</p>
216 <p>The features defined below are fundamentally based on prior specifications of the W3C DOM Working Group, primarily
217 <a class="informative" href="#refsDOM2STYLE">[DOM2STYLE]</a>. The purposes of the present document are (1) to improve on that prior work by providing
218 more technical specificity (so as to improve testability and interoperability), (2) to deprecate or remove certain less-widely implemented
219 features no longer considered to be essential in this context, and (3) to newly specify certain extensions that have been
220 or expected to be widely implemented.</p>
222 <p>A full list of the changes to API signatures can be found in <a href="#changes-from-dom-2-style"><cite>Changes from DOM-2 Style</cite></a>.</p>
225 <h2 id="conformance"><span class="secno">2 </span>Conformance</h2>
227 <p>All diagrams, examples, and notes in this specification are
228 non-normative, as are all sections explicitly marked non-normative.
229 Everything else in this specification is normative.
231 <p>The key words "MUST", "MUST NOT", "REQUIRED", <!--"SHALL", "SHALL
232 NOT",--> "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and
233 "OPTIONAL" in the normative parts of this document are to be
234 interpreted as described in RFC2119. For readability, these words do
235 not appear in all uppercase letters in this specification.
236 <a href="#refsRFC2119">[RFC2119]</a>
238 <p>Requirements phrased in the imperative as part of algorithms
239 (such as "strip any leading space characters" or "return false and
240 terminate these steps") are to be interpreted with the meaning of the
241 key word ("must", "should", "may", etc) used in introducing the
242 algorithm.
244 <p>Conformance requirements phrased as algorithms or specific steps
245 may be implemented in any manner, so long as the end result is
246 equivalent. (In particular, the algorithms defined in this
247 specification are intended to be easy to follow, and not intended to
248 be performant.)
250 <p id="hardwareLimitations">User agents may impose
251 implementation-specific limits on otherwise unconstrained inputs,
252 e.g. to prevent denial of service attacks, to guard against running
253 out of memory, or to work around platform-specific limitations.
255 <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
256 e.g. the author can't change the behavior by overriding attributes or methods with custom properties or functions in ECMAScript.
258 <p>Unless otherwise stated, string comparisons are done in a
259 <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> manner.
262 <h2 id="terminology"><span class="secno">3 </span>Terminology</h2>
264 <p>This specification employs certain terminology from the following documents:
265 <cite>DOM</cite>,
266 <cite>HTML</cite>,
267 <cite>URL</cite>,
268 <cite>Fetch</cite>,
269 <cite>Associating Style Sheets with XML documents</cite>
270 and
271 <cite>XML</cite>.
272 <a href="#refsDOM">[DOM]</a>
273 <a href="#refsHTML">[HTML]</a>
274 <a href="#refsURL">[URL]</a>
275 <a href="#refsFETCH">[FETCH]</a>
276 <a href="#refsXMLSS">[XMLSS]</a>
277 <a href="#refsXML">[XML]</a>
279 <p>When this specification talks about object
280 <code><var title="">A</var></code> where <code><var title="">A</var></code> is actually an interface, it generally means an object implementing interface
281 <code><var title="">A</var></code>.</p>
283 <p>The terms <dfn id="whitespace">whitespace</dfn>, <dfn id="ignored">ignored</dfn>, <dfn id="specified-value">specified value</dfn>, <dfn id="computed-value">computed value</dfn> and <dfn id="used-value">used value</dfn> are defined in CSS.
284 <a href="#refsCSS">[CSS]</a>
286 <p>The terms <dfn id="simple-selector">simple selector</dfn>, <dfn id="sequence-of-simple-selectors">sequence of simple selectors</dfn>, <dfn id="universal-selector">universal selector</dfn> and <dfn id="group-of-selectors">group of selectors</dfn> are defined in
287 Selectors. <a href="#refsSELECTORS">[SELECTORS]</a>
289 <p>The terms <dfn id="namespace-prefix">namespace prefix</dfn> and <dfn id="default-namespace">default namespace</dfn> are defined in CSS Namespaces Module. <a href="#refsCSSNAMESPACES">[CSSNAMESPACES]</a>
291 <p>The term <dfn id="list-of-css-page-selectors">list of CSS page selectors</dfn> refers to the comma-separated list of page selectors, as defined in CSS Paged Media Module.
292 <a href="#refsCSSPAGE">[CSSPAGE]</a>
294 <p>The terms <dfn id="set">set</dfn> and <dfn id="clear">clear</dfn> to refer to the true and
295 false values of binary flags or variables, respectively. These terms are also used as verbs in which case they refer to
296 mutating some value to make it true or false, respectively.</p>
298 <p>The term <dfn id="supported-styling-language">supported styling language</dfn> refers to CSS.
300 <p class="note">If another styling language becomes supported in user agents, this specification is expected to be updated as necessary.
302 <p>The terms <dfn id="x::before-pseudo-element">::before pseudo-element</dfn> and <dfn id="x::after-pseudo-element">::after pseudo-element</dfn> refer to the :before and :after pseudo-elements in CSS, except in this
303 specification the pseudo-elements are assumed to exist for all elements even if no box is generated for them. <a href="#refsCSS">[CSS]</a>
305 <h3 id="common-serializing-idioms"><span class="secno">3.1 </span>Common Serializing Idioms</h3>
307 <p>To <dfn id="escape-a-character">escape a character</dfn> means to create a string of
308 "<code title="">\</code>" (U+005C), followed by the character.</p>
310 <p>To <dfn id="escape-a-character-as-code-point">escape a character as code point</dfn> means to create a
311 string of "<code title="">\</code>" (U+005C), followed by the Unicode code point as
312 the smallest possible number of hexadecimal digits in the range 0-9 a-f
313 (U+0030 to U+0039 and U+0061 to U+0066) to represent the code point in
314 base 16, followed by a single SPACE (U+0020).</p>
316 <p>To <dfn id="serialize-an-identifier">serialize an identifier</dfn> means to create a string represented
317 by the concatenation of, for each character of the identifier:</p>
319 <ul>
320 <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
321 <code class="external"><a href="http://dom.spec.whatwg.org/#invalidcharactererror">InvalidCharacterError</a></code> exception and terminate these steps.</li>
322 <li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or
323 [\7f-\9f] (U+007F to U+009F), then the character
324 <a href="#escape-a-character-as-code-point" title="escape a character as code point">escaped as code point</a>.</li>
325 <li>If the character is the first character and is in the range [0-9]
326 (U+0030 to U+0039), then the character
327 <a href="#escape-a-character-as-code-point" title="escape a character as code point">escaped as code point</a>.</li>
328 <li>If the character is the second character and is in the range [0-9]
329 (U+0030 to U+0039) and the first character is a "<code title="">-</code>"
330 (U+002D), then the character
331 <a href="#escape-a-character-as-code-point" title="escape a character as code point">escaped as code point</a>.</li>
332 <li>If the character is the second character and is "<code title="">-</code>"
333 (U+002D) and the first character is "<code title="">-</code>" as well, then the
334 <a href="#escape-a-character" title="escape a character">escaped</a> character.</li>
335 <li>If the character is not handled by one of the above rules and is
336 greater than or equal to U+0080, is "<code title="">-</code>" (U+002D) or
337 "<code title="">_</code>" (U+005F), or is in one of the ranges [0-9] (U+0030 to
338 U+0039), [A-Z] (U+0041 to U+005A), or [a-z] (U+0061 to U+007A), then the character
339 itself.</li>
340 <li>Otherwise, the <a href="#escape-a-character" title="escape a character">escaped</a>
341 character.</li>
342 </ul>
344 <p>To <dfn id="serialize-a-string">serialize a string</dfn> means to create a string represented
345 by '"' (U+0022), followed by the result of applying the rules
346 below to each character of the given string, followed by
347 '"' (U+0022):</p>
349 <ul>
350 <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
351 <code class="external"><a href="http://dom.spec.whatwg.org/#invalidcharactererror">InvalidCharacterError</a></code> exception and terminate these steps.</li>
352 <li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or [\7f-\9f] (U+007F to
353 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>
354 <li>If the character is '"' (U+0022) or "<code title="">\</code>"
355 (U+005C), the <a href="#escape-a-character" title="escape a character">escaped</a> character.</li>
356 <li>Otherwise, the character itself.</li>
357 </ul>
359 <p class="note">"<code title="">'</code>" (U+0027) is not escaped because strings
360 are always serialized with '"' (U+0022).</p>
362 <p>To <dfn id="serialize-a-url">serialize a URL</dfn> means to create a string represented by
363 "<code title="">url(</code>", followed by the
364 <a href="#serialize-a-string" title="serialize a string">string escaped</a> value of the given
365 string, followed by "<code title="">)</code>".</p>
367 <p>To <dfn id="serialize-a-comma-separated-list">serialize a comma-separated list</dfn> concatenate all items of
368 the list in list order while separating them by "<code title="">, </code>", i.e.,
369 COMMA (U+002C) followed by a single SPACE (U+0020).</p>
371 <p>To <dfn id="serialize-a-whitespace-separated-list">serialize a whitespace-separated list</dfn> concatenate all
372 items of the list in list order while separating them by "<code title=""> </code>", i.e.,
373 a single SPACE (U+0020).</p>
375 <p class="note">When serializing a list according to the above rules,
376 extraneous whitespace is not inserted prior to the first item or subsequent to
377 the last item. Unless otherwise specified, an empty list is serialized as the
378 empty string.</p>
381 <h2 id="media-queries"><span class="secno">4 </span>Media Queries</h2>
383 <p>Media queries are defined by the Media Queries specification. This
384 section defines various concepts around media queries, including their API
385 and serialization form.</p>
387 <!-- XXX ref -->
390 <h3 id="parsing-media-queries"><span class="secno">4.1 </span>Parsing Media Queries</h3>
392 <p>To
393 <dfn id="parse-a-media-query-list">parse a media query list</dfn> for a
394 given string <var title="">s</var> into a media query list is defined in
395 the Media Queries specification. Return the list of one or more media
396 queries that the algorithm defined there gives.</p> <!-- XXX ref -->
398 <p class="note">A media query that ends up being "ignored" will turn
399 into "<code title="">not all</code>".</p>
401 <p>To
402 <dfn id="parse-a-media-query">parse a media query</dfn> for a given string
403 <var title="">s</var> means to follow the
404 <a href="#parse-a-media-query-list">parse a media query list</a> steps and return null if more
405 than one media query is returned or a media query if a
406 single media query is returned.</p>
408 <p class="note">Again, a media query that ends up being "ignored" will
409 turn into "<code title="">not all</code>".</p>
412 <h3 id="serializing-media-queries"><span class="secno">4.2 </span>Serializing Media Queries</h3>
414 <p>To
415 <dfn id="serialize-a-media-query-list">serialize a media query list</dfn>
416 run these steps:</p>
418 <ol>
419 <li><p>If the media query list is empty return the empty string and
420 terminate these steps.</li>
422 <li><p><a href="#serialize-a-media-query" title="serialize a media query">Serialize</a> each
423 media query in the list of media queries, sort them in lexicographical
424 order, and then
425 <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serialize</a> the
426 list.</li>
427 </ol>
429 <p>To
430 <dfn id="serialize-a-media-query">serialize a media query</dfn> let
431 <var title="">s</var> be the empty string, run the steps below, and
432 finally return <var title="">s</var>:</p>
434 <ol>
435 <li><p>If the media query is negated append "<code title="">not</code>", followed
436 by a single SPACE (U+0020), to <var title="">s</var>.</li>
438 <li><p>Let <var title="">type</var> be the media type of the media query,
439 <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a> and
440 <a class="external" href="http://dom.spec.whatwg.org/#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.</li>
442 <li><p>If the media query does not contain media features append
443 <var title="">type</var>, to <var title="">s</var>,
444 then return <var title="">s</var> and terminate this algorithm.</li>
446 <li><p>If <var title="">type</var> is not "<code title="">all</code>" or if the
447 media query is negated append <var title="">type</var>, followed by a
448 single SPACE (U+0020), followed by "<code title="">and</code>", followed by a single SPACE
449 (U+0020), to <var title="">s</var>.</li>
451 <li><p>Sort the media features in lexicographical order.</li>
453 <li>
454 <p>Then, for each media feature:</p>
456 <ol>
457 <li><p>Append a "<code title="">(</code>" (U+0028), followed by the media feature
458 name, <a class="external" href="http://dom.spec.whatwg.org/#converted-to-ascii-lowercase">converted to ASCII lowercase</a>,
459 to <var title="">s</var>.</li>
461 <li><p>If a value is given append a "<code title="">:</code>" (U+003A), followed
462 by a single SPACE (U+0020), followed by the
463 <a href="#serialize-a-media-feature-value" title="serialize a media feature value">serialized media feature value</a>,
464 to <var title="">s</var>.</li>
466 <li><p>Append a "<code title="">)</code>" (U+0029) to
467 <var title="">s</var>.</li>
469 <li><p>If this is not the last media feature append a single SPACE (U+0020),
470 followed by "<code title="">and</code>", followed by a single SPACE (U+0020), to
471 <var title="">s</var>.</li>
472 </ol>
473 </li>
474 </ol>
476 <div class="example">
477 <p>Here are some examples of input (first column) and output (second
478 column):</p>
480 <table>
481 <thead>
482 <tr><th>Input<th>Output
483 <tbody>
484 <tr>
485 <td><pre>not screen and (min-WIDTH:5px) AND (max-width:40px)</pre>
486 <td><pre>not screen and (max-width: 40px) and (min-width: 5px)</pre>
487 <tr>
488 <td><pre>all and (color) and (color)</pre>
489 <td><pre>(color)</pre>
490 </table>
491 </div>
495 <h4 id="serializing-media-feature-values"><span class="secno">4.2.1 </span>Serializing Media Feature Values</h4>
497 <p class="XXX">This should probably be done in terms of mapping it to
498 serializing CSS values as media features are defined in terms of CSS
499 values after all.</p>
501 <p>To <dfn id="serialize-a-media-feature-value">serialize a media feature value</dfn>
502 named <var title="">v</var> locate <var title="">v</var> in the first
503 column of the table below and use the serialization format described in
504 the second column:</p>
506 <table>
507 <tr>
508 <th>Media Feature
509 <th>Serialization
510 <tr>
511 <td>'width'
512 <td>...
513 <tr>
514 <td>'height'
515 <td>...
516 <tr>
517 <td>'device-width'
518 <td>...
519 <tr>
520 <td>'device-height'
521 <td>...
522 <tr>
523 <td>'orientation'
524 <td>
525 <p>If the value is 'portrait': "<code title="">portrait</code>".</p>
526 <p>If the value is 'landscape': "<code title="">landscape</code>".</p>
527 <tr>
528 <td>'aspect-ratio'
529 <td>...
530 <tr>
531 <td>'device-aspect-ratio'
532 <td>...
533 <tr>
534 <td>'color'
535 <td>...
536 <tr>
537 <td>'color-index'
538 <td>...
539 <tr>
540 <td>'monochrome'
541 <td>...
542 <tr>
543 <td>'resolution'
544 <td>...
545 <tr>
546 <td>'scan'
547 <td>
548 <p>If the value is 'progressive': "<code title="">progressive</code>".</p>
549 <p>If the value is 'interlace': "<code title="">interlace</code>".</p>
550 <tr>
551 <td>'grid'
552 <td>...
553 </table>
555 <p>Other specifications can extend this table and vendor-prefixed media
556 features can have custom serialization formats as well.</p>
559 <h3 id="comparing-media-queries"><span class="secno">4.3 </span>Comparing Media Queries</h3>
561 <p>To
562 <dfn id="compare-media-queries">compare media queries</dfn>
563 <var title="">m1</var> and <var title="">m2</var> means to
564 <a href="#serialize-a-media-query" title="serialize a media query">serialize</a> them both and
565 return true if they are a
566 <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match and false if they
567 are not.</p>
570 <h3 id="the-medialist-interface"><span class="secno">4.4 </span>The <code title="">MediaList</code> Interface</h3>
572 <!--
573 //
574 // All members defined since DOM-2 Style. The only differences are:
575 //
576 // 1. addition of stringifier qualifier on mediaText
577 // 2. addition of getter qualifier on item
578 // 3. removal of raises(DOMException) from {append,delete}Medium
579 //
580 -->
582 <p>An object that implements the <code><a href="#medialist">MediaList</a></code> interface has an associated <dfn id="collection-of-media-queries">collection of media queries</dfn>.</p>
584 <pre class="idl">[<a href="#dom-medialist" title="dom-MediaList">Constructor</a>(DOMString text)]
585 interface <dfn id="medialist">MediaList</dfn> {
586 stringifier attribute DOMString <a href="#dom-medialist-mediatext" title="dom-MediaList-mediaText">mediaText</a>;
587 readonly attribute unsigned long <a href="#dom-medialist-length" title="dom-MediaList-length">length</a>;
588 getter DOMString <a href="#dom-medialist-item" title="dom-MediaList-item">item</a>(unsigned long index);
589 void <a href="#dom-medialist-appendmedium" title="dom-MediaList-appendMedium">appendMedium</a>(DOMString medium);
590 void <a href="#dom-medialist-deletemedium" title="dom-MediaList-deleteMedium">deleteMedium</a>(DOMString medium);
591 };</pre>
593 <p>The object's <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a> are the numbers in the range zero to one less than the number of media queries
594 in the <a href="#collection-of-media-queries">collection of media queries</a> represented by the collection. If there are no such media queries, then there are no
595 <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a>.
597 <p>When the <dfn id="dom-medialist" title="dom-MediaList"><code>MediaList(<var title="">text</var>)</code></dfn> constructor is invoked, the <a href="#create-a-medialist-object">create a <code>MediaList</code>
598 object</a> steps must be run with the string <var title="">text</var>.</p>
600 <p>To <dfn id="create-a-medialist-object">create a <code>MediaList</code> object</dfn> with a string <var title="">text</var>, run the following steps:
601 <ol>
602 <li><p>Create a new <code><a href="#medialist">MediaList</a></code> object.</li>
603 <li><p>Set its <code title="dom-MediaList-mediaText"><a href="#dom-medialist-mediatext">mediaText</a></code> attribute to <var title="">text</var>.</li>
604 <li><p>Return the newly created <code><a href="#medialist">MediaList</a></code> object.</li>
605 </ol>
607 <p>The <dfn id="dom-medialist-mediatext" title="dom-MediaList-mediaText"><code>mediaText</code></dfn> attribute, on getting, must return a
608 <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>
609 <p>Setting the <code title="dom-MediaList-mediaText"><a href="#dom-medialist-mediatext">mediaText</a></code> attribute must run these steps:
610 <ol>
611 <li><p>Empty the <a href="#collection-of-media-queries">collection of media queries</a>.</li>
612 <li><p>If the given value is the empty string terminate these steps.</li>
613 <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
614 value to the <a href="#collection-of-media-queries">collection of media queries</a>.</li>
615 </ol>
617 <p>The <dfn id="dom-medialist-item" title="dom-MediaList-item"><code>item(<var title="">index</var>)</code></dfn> method must return the media query in the <a href="#collection-of-media-queries">collection of media
618 queries</a> given by <var title="">index</var>, or null, if <var title="">index</var> is greater than or equal to the number of media queries in the
619 <a href="#collection-of-media-queries">collection of media queries</a>.</p>
621 <p>The <dfn id="dom-medialist-length" title="dom-MediaList-length"><code>length</code></dfn> attribute must return the number of media queries in the <a href="#collection-of-media-queries">collection of media
622 queries</a>.</p>
624 <p>The <dfn id="dom-medialist-appendmedium" title="dom-MediaList-appendMedium"><code>appendMedium(<var title="">medium</var>)</code></dfn> method must run these steps:</p>
625 <ol>
626 <li><p>Let <var title="">m</var> be the result of <a href="#parse-a-media-query" title="parse a media query">parsing</a> the given value.</li>
627 <li><p>If <var title="">m</var> is null terminate these steps.</li>
628 <li><p>If <a href="#compare-media-queries" title="compare media queries">comparing</a> <var title="">m</var> with any of the media queries in the
629 <a href="#collection-of-media-queries">collection of media queries</a> returns true terminate these steps.</li>
630 <li><p>Append <var title="">m</var> to the <a href="#collection-of-media-queries">collection of media queries</a>.</li>
631 </ol>
633 <p>The <dfn id="dom-medialist-deletemedium" title="dom-MediaList-deleteMedium"><code>deleteMedium(<var title="">medium</var>)</code></dfn> method must run these steps:</p>
634 <ol>
635 <li><p>Let <var title="">m</var> be the result of <a href="#parse-a-media-query" title="parse a media query">parsing</a> the given value.</li>
636 <li><p>If <var title="">m</var> is null terminate these steps.</li>
637 <li><p>Remove any media query from the <a href="#collection-of-media-queries">collection of media queries</a> for which
638 <a href="#compare-media-queries" title="compare media queries">comparing</a> the media query with <var title="">m</var> returns true.</li>
639 </ol>
641 <h2 id="selectors"><span class="secno">5 </span>Selectors</h2>
643 <p>Selectors are defined in the Selectors specification. This section
644 mainly defines how to serialize them.</p> <!-- XXX ref -->
646 <!-- XXX ref universal selector etc? some are in <span> some not -->
649 <h3 id="parsing-selectors"><span class="secno">5.1 </span>Parsing Selectors</h3>
651 <p>To
652 <dfn id="parse-a-group-of-selectors">parse a group of selectors</dfn>
653 means to parse the value using the <code title="">selectors_group</code>
654 production defined in the Selectors specification and return either a
655 group of selectors if parsing did not fail or null if parsing did
656 fail.</p> <!-- XXX ref -->
659 <h3 id="serializing-selectors"><span class="secno">5.2 </span>Serializing Selectors</h3>
660 <!-- http://dump.testsuite.org/2009/cssom/serializing-selectors.htm -->
662 <p>To
663 <dfn id="serialize-a-group-of-selectors">serialize a group of selectors</dfn>
664 <a href="#serialize-a-selector" title="serialize a selector">serialize</a> each selector in the
665 group of selectors and then
666 <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serialize</a> the
667 group.</p>
669 <p>To <dfn id="serialize-a-selector">serialize a selector</dfn> let
670 <var title="">s</var> be the empty string, run the steps below for each
671 part of the chain of the selector, and finally return
672 <var title="">s</var>:</p>
674 <ol>
675 <li><p>If there is only one <a href="#simple-selector">simple selector</a> in the
676 <a href="#sequence-of-simple-selectors">sequence of simple selectors</a> which is a
677 <a href="#universal-selector">universal selector</a>, append the result of
678 <a href="#serialize-a-simple-selector" title="serialize a simple selector">serializing</a> the
679 <a href="#universal-selector">universal selector</a> to <var title="">s</var>.</li>
681 <li><p>Otherwise, for each <a href="#simple-selector">simple selector</a> in the
682 <a href="#sequence-of-simple-selectors">sequence of simple selectors</a> that is not a
683 universal selector of which the <a href="#namespace-prefix">namespace prefix</a> maps to
684 the null namespace (not in a namespace) or of which the
685 <a href="#namespace-prefix">namespace prefix</a> maps to a namespace that is not the
686 <a href="#default-namespace">default namespace</a>
687 <a href="#serialize-a-simple-selector" title="serialize a simple selector">serialize</a> the
688 <a href="#simple-selector">simple selector</a> and append the result to
689 <var title="">s</var>.</li>
691 <li><p>If this is not the last part of the chain of the selector append a
692 single SPACE (U+0020), followed by the combinator
693 "<code title="">></code>",
694 "<code title="">+</code>", or
695 "<code title="">~</code>"
696 as appropriate, followed by another single SPACE (U+0020) if the combinator was
697 not whitespace, to <var title="">s</var>.</li>
699 <li><p>If this is the last part of the chain of the selector and there is
700 a pseudo-element, append "<code title="">::</code>" followed by the name of the
701 pseudo-class, to <var title="">s</var>.</li>
702 </ol>
705 <p>To
706 <dfn id="serialize-a-simple-selector">serialize a simple selector</dfn>
707 let <var title="">s</var> be the empty string, run the steps below, and
708 finally return <var title="">s</var>:</p>
710 <dl class="switch">
711 <dt>type selector</dt>
712 <dt>universal selector</dt>
713 <dd>
714 <ol>
715 <li><p>If the <a href="#namespace-prefix">namespace prefix</a> maps to a namespace that is
716 not the <a href="#default-namespace">default namespace</a> and is not the
717 null namespace (not in a namespace) append the
718 <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>
719 <a href="#namespace-prefix">namespace prefix</a>, followed by a "<code title="">|</code>" (U+007C)
720 to <var title="">s</var>.</li>
722 <li><p>If the <a href="#namespace-prefix">namespace prefix</a> maps to a namespace that is
723 the null namespace (not in a namespace) append
724 "<code title="">|</code>" (U+007C) to <var title="">s</var>.</li>
725 <!-- This includes |* -->
727 <li><p>If this is a type selector append the
728 <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a> element name to
729 <var title="">s</var>.</li>
731 <li><p>If this is a universal selector append "<code title="">*</code>" (U+002A)
732 to <var title="">s</var>.</li>
733 </ol>
734 </dd>
736 <dt>attribute selector</dt>
737 <dd>
738 <ol>
739 <li><p>Append "<code title="">[</code>" (U+005B) to
740 <var title="">s</var>.</li>
742 <li><p>If the <a href="#namespace-prefix">namespace prefix</a> maps to a namespace that is
743 not the null namespace (not in a namespace) append the
744 <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>
745 <a href="#namespace-prefix">namespace prefix</a>, followed by a "<code title="">|</code>" (U+007C)
746 to <var title="">s</var>.</li>
748 <li><p>If the <a href="#namespace-prefix">namespace prefix</a> maps to a namespace that is
749 the null namespace (not in a namespace) append
750 "<code title="">|</code>" (U+007C) to <var title="">s</var>.</li>
751 <!-- This includes |* -->
753 <li><p>Append the <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>
754 attribute name to <var title="">s</var>.</li>
756 <li><p>If there is an attribute value specified, append
757 "<code title="">=</code>",
758 "<code title="">~=</code>",
759 "<code title="">|=</code>",
760 "<code title="">^=</code>",
761 "<code title="">$=</code>", or
762 "<code title="">*=</code>"
763 as appropriate (depending on the type of attribute selector), followed
764 by the <a href="#serialize-a-string" title="serialize a string">string escaped</a>
765 attribute value, to <var title="">s</var>.</li>
767 <li><p>Append "<code title="">]</code>" (U+005D) to
768 <var title="">s</var>.</li>
769 </ol>
770 </dd>
772 <dt>class selector</dt>
773 <dd><p>Append a "<code title="">.</code>" (U+002E), followed by the
774 <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a> class name to
775 <var title="">s</var>.</dd>
777 <dt>ID selector</dt>
778 <dd><p>Append a "<code title="">#</code>" (U+0023), followed by the
779 <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a> ID to
780 <var title="">s</var>.</dd>
782 <dt>pseudo-class</dt>
783 <dd>
784 <p>If the pseudo-class does not accept arguments append
785 "<code title="">:</code>" (U+003A), followed by the name of the pseudo-class, to
786 <var title="">s</var>.</p>
788 <p>Otherwise, append "<code title="">:</code>" (U+003A), followed by the name of
789 the pseudo-class, followed by "<code title="">(</code>" (U+0028), followed by the
790 value of the pseudo-class argument determined as per below, followed by
791 "<code title="">)</code>" (U+0029), to <var title="">s</var>.</p>
793 <dl class="switch">
794 <dt><code title="">:lang()</code></dt>
795 <dd><p>The <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>
796 value.</dd>
798 <dt><code title="">:nth-child()</code></dt>
799 <dt><code title="">:nth-last-child()</code></dt>
800 <dt><code title="">:nth-of-type()</code></dt>
801 <dt><code title="">:nth-last-of-type()</code></dt>
802 <dd>
803 <ol>
804 <li><p>If the value is odd let the value be
805 "<code title="">2n+1</code>".</li>
807 <li><p>If the value is even let the value be
808 "<code title="">2n</code>".</li>
810 <li><p>If <var title="">a</var> is zero let the value be
811 <var title="">b</var>
812 <a href="#serialize-a-css-component-value" title="serialize a CSS component value">serialized</a> as <integer>.</li>
814 <li><p>If <var title="">a</var> is one or minus one and
815 <var title="">b</var> is zero let the value be
816 "<code title="">n</code>" (U+006E).</li>
818 <li><p>If <var title="">a</var> is one or minus one let the value be
819 "<code title="">n</code>" (U+006E), followed by
820 "<code title="">+</code>" (U+002B) if <var title="">b</var> is positive,
821 followed by <var title="">b</var>
822 <a href="#serialize-a-css-component-value" title="serialize a CSS component value">serialized</a> as <integer>.</li>
824 <li><p>If <var title="">b</var> is zero let the value be
825 <var title="">a</var>
826 <a href="#serialize-a-css-component-value" title="serialize a CSS component value">serialized</a> as <integer>,
827 followed by "<code title="">n</code>" (U+006E).</li>
829 <li><p>Otherwise let the value be
830 <var title="">a</var>
831 <a href="#serialize-a-css-component-value" title="serialize a CSS component value">serialized</a> as <integer>,
832 followed by "<code title="">n</code>" (U+006E), followed by
833 "<code title="">+</code>" (U+002B) if <var title="">b</var> is positive,
834 followed by <var title="">b</var>
835 <a href="#serialize-a-css-component-value" title="serialize a CSS component value">serialized</a> as <integer>.</li>
836 </ol>
837 </dd>
839 <dt><code title="">:not()</code></dt>
840 <dd><p>The result of serializing the value using the rules for
841 <a href="#serialize-a-group-of-selectors" title="serialize a group of selectors">serializing a group of selectors</a>.</dd>
842 </dl>
843 </dd>
844 </dl>
847 <h2 id="css"><span class="secno">6 </span>CSS</h2>
850 <h3 id="css-style-sheets"><span class="secno">6.1 </span>CSS Style Sheets</h3>
852 <!-- XXX
853 element inserted into the DOM, style sheet created, element removed from
854 the DOM, what happens to StyleSheet?
855 -->
857 <p>A <dfn id="css-style-sheet">CSS style sheet</dfn> is an abstract concept that
858 represents a style sheet as defined by the CSS specification. In the CSSOM a
859 <a href="#css-style-sheet">CSS style sheet</a> is represented as a <code><a href="#cssstylesheet">CSSStyleSheet</a></code> object. A
860 <a href="#css-style-sheet">CSS style sheet</a> has a number of associated state items:</p>
862 <dl>
863 <dt><dfn id="concept-css-style-sheet-type" title="concept-css-style-sheet-type">type</dfn></dt>
864 <dd><p>The literal string "<code title="">text/css</code>".</dd>
866 <dt><dfn id="concept-css-style-sheet-location" title="concept-css-style-sheet-location">location</dfn></dt>
867 <dd><p>The <a class="external" href="http://url.spec.whatwg.org/#concept-absolute-url" title="concept-absolute-url">absolute URL</a> of the first request of the
868 <a href="#css-style-sheet">CSS style sheet</a> or null if the <a href="#css-style-sheet">CSS style sheet</a> was
869 embedded.</dd>
871 <dt><dfn id="concept-css-style-sheet-parent" title="concept-css-style-sheet-parent">parent</dfn></dt>
872 <dd><p>The <a href="#css-style-sheet">CSS style sheet</a> that is the parent of the
873 <a href="#css-style-sheet">CSS style sheet</a> or null if there is no associated parent.</dd>
875 <dt><dfn id="concept-css-style-sheet-owner-node" title="concept-css-style-sheet-owner-node">owner node</dfn></dt>
876 <dd><p>The DOM node associated with the <a href="#css-style-sheet">CSS style sheet</a> or
877 null if there is no associated DOM node.</dd>
879 <dt><dfn id="concept-css-style-sheet-owner-css-rule" title="concept-css-style-sheet-owner-css-rule">owner CSS rule</dfn></dt>
880 <dd><p>The <a href="#css-rule">CSS rule</a> in the <a href="#concept-css-style-sheet-parent" title="concept-css-style-sheet-parent">parent</a>
881 that caused the inclusion of the <a href="#css-style-sheet">CSS style sheet</a> or null if
882 there is no associated rule.</dd>
884 <dt><dfn id="concept-css-style-sheet-media" title="concept-css-style-sheet-media">media</dfn></dt>
885 <dd>
886 <p>The <code><a href="#medialist">MediaList</a></code> object associated with the
887 <a href="#css-style-sheet">CSS style sheet</a>.</p>
889 <p>If this property is set to a string run the
890 <a href="#create-a-medialist-object">create a <code>MediaList</code> object</a> steps for that
891 string and associate the returned object with the
892 <a href="#css-style-sheet">CSS style sheet</a>.</p>
893 </dd>
895 <dt><dfn id="concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</dfn></dt>
896 <dd>
897 <p>The title of the <a href="#css-style-sheet">CSS style sheet</a> or null if no title
898 is specified or is the empty string, in which case the title is referred to
899 as an empty title.</p>
901 <div class="example">
902 <p>In the following, the <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> is non-empty
903 for the first style sheet, but is empty for the second and third style sheets.</p>
904 <pre><style title="papaya whip">
905 body { background: #ffefd5; }
906 </style></pre>
907 <pre><style title="">
908 body { background: orange; }
909 </style></pre>
910 <pre><style>
911 body { background: brown; }
912 </style></pre>
913 </div>
914 </dd>
916 <dt><dfn id="concept-css-style-sheet-alternate-flag" title="concept-css-style-sheet-alternate-flag">alternate flag</dfn></dt>
917 <dd>
918 <p>Either set or clear. Clear by default.</p>
920 <div class="example">
921 <p>The following <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> have
922 their <a href="#concept-css-style-sheet-alternate-flag" title="concept-css-style-sheet-alternate-flag">alternate flag</a> set:</p>
924 <pre><?xml-stylesheet alternate="yes" title="x" href="data:text/css,…"?></pre>
926 <pre><link rel="alternate stylesheet" title="x" href="data:text/css,…"></pre>
927 </div>
928 </dd>
930 <dt><dfn id="concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</dfn></dt>
931 <dd>
932 <p>Either set or clear. Clear by default.</p>
934 <p class="note">Even when clear it does not necessarily mean that the
935 <a href="#css-style-sheet">CSS style sheet</a> is actually used for rendering.</p>
936 </dd>
939 <dt><dfn id="concept-css-style-sheet-css-rules" title="concept-css-style-sheet-css-rules">CSS rules</dfn></dt>
940 <dd><p>The <a href="#css-rule" title="CSS rule">CSS rules</a> associated with the
941 <a href="#css-style-sheet">CSS style sheet</a>.</dd>
943 <dt><dfn id="concept-css-style-sheet-origin-clean-flag" title="concept-css-style-sheet-origin-clean-flag">origin-clean flag</dfn>
944 <dd><p>Either set or clear. If it is set, the API allows reading and modifying of the <a href="#concept-css-style-sheet-css-rules" title="concept-css-style-sheet-css-rules">CSS rules</a>.
945 </dl>
947 <p>When you are to <a href="#create-a-css-style-sheet">create a CSS style sheet</a> the above properties,
948 with the exception of <a href="#concept-css-style-sheet-type" title="concept-css-style-sheet-type">type</a> and
949 <a href="#concept-css-style-sheet-css-rules" title="concept-css-style-sheet-css-rules">CSS rules</a>, are to be set to
950 their proper values.</p>
952 <!-- same-origin restrictions -->
955 <h4 id="the-stylesheet-interface"><span class="secno">6.1.1 </span>The <code title="">StyleSheet</code> Interface</h4>
957 <!--
958 //
959 // All members defined since DOM-2 Style. Only difference
960 // is addition of [PutForwards=mediaText], which is presently
961 // not defined in CSSOM draft.
962 //
963 -->
965 <p>The <code><a href="#stylesheet">StyleSheet</a></code> interface represents an abstract, base style sheet.</p>
967 <pre class="idl">interface <dfn id="stylesheet">StyleSheet</dfn> {
968 readonly attribute DOMString <a href="#dom-stylesheet-type" title="dom-StyleSheet-type">type</a>;
969 readonly attribute DOMString? <a href="#dom-stylesheet-href" title="dom-StyleSheet-href">href</a>;
970 readonly attribute (<a class="external" href="http://dom.spec.whatwg.org/#element">Element</a> or <a class="external" href="http://dom.spec.whatwg.org/#processinginstruction">ProcessingInstruction</a>)? <!--
971 --><a href="#dom-stylesheet-ownernode" title="dom-StyleSheet-ownerNode">ownerNode</a>;
972 readonly attribute <a href="#stylesheet">StyleSheet</a>? <a href="#dom-stylesheet-parentstylesheet" title="dom-StyleSheet-parentStyleSheet">parentStyleSheet</a>;
973 readonly attribute DOMString? <a href="#dom-stylesheet-title" title="dom-StyleSheet-title">title</a>;
974 readonly attribute <a href="#medialist">MediaList</a> <a href="#dom-stylesheet-media" title="dom-StyleSheet-media">media</a>;
975 attribute boolean <a href="#dom-stylesheet-disabled" title="dom-StyleSheet-disabled">disabled</a>;
976 };</pre>
978 <p>The <dfn id="dom-stylesheet-type" title="dom-StyleSheet-type"><code>type</code></dfn> attribute must return the <a href="#concept-css-style-sheet-type" title="concept-css-style-sheet-type">type</a>.</p>
980 <p>The <dfn id="dom-stylesheet-href" title="dom-StyleSheet-href"><code>href</code></dfn> attribute must return the <a href="#concept-css-style-sheet-location" title="concept-css-style-sheet-location">location</a> or null if
981 none.</p>
982 <p class="XXX">What should the default value be if not known or specified upon creation? an empty string or null?</p>
984 <p>The <dfn id="dom-stylesheet-ownernode" title="dom-StyleSheet-ownerNode"><code>ownerNode</code></dfn> attribute must return the <a href="#concept-css-style-sheet-owner-node" title="concept-css-style-sheet-owner-node">owner
985 node</a> or null if there is none.</p>
987 <p>The <dfn id="dom-stylesheet-parentstylesheet" title="dom-StyleSheet-parentStyleSheet"><code>parentStyleSheet</code></dfn> attribute must return the
988 <a href="#concept-css-style-sheet-parent" title="concept-css-style-sheet-parent">parent</a> or null if there is none.</p>
990 <p>The <dfn id="dom-stylesheet-title" title="dom-StyleSheet-title"><code>title</code></dfn> attribute must return the <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> or null if
991 none.</p>
992 <p class="XXX">What should the default value be if not known or specified upon creation? an empty string or null?</p>
994 <p>The <dfn id="dom-stylesheet-media" title="dom-StyleSheet-media"><code>media</code></dfn> attribute must return the <a href="#concept-css-style-sheet-media" title="concept-css-style-sheet-media">media</a>.</p>
995 <p class="XXX">Should it be nullable?</p>
996 <p class="XXX">Need to define a setter that implements the semantics of setting this attribute to a string representing a MediaList.</p>
998 <p>The <dfn id="dom-stylesheet-disabled" title="dom-StyleSheet-disabled"><code>disabled</code></dfn> attribute, on getting, must return true if the
999 <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a>
1000 is set, or false otherwise. On setting, the <code title="dom-StyleSheet-disabled"><a href="#dom-stylesheet-disabled">disabled</a></code> attribute must set the
1001 <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> if the new value is true, or unset the
1002 <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> otherwise.</p>
1005 <h4 id="the-cssstylesheet-interface"><span class="secno">6.1.2 </span>The <code title="">CSSStyleSheet</code> Interface</h4>
1007 <!--
1008 //
1009 // All members defined since DOM-2 Style. The only differences are:
1010 //
1011 // 1. removal of raises(DOMException) on {insert,delete}Rule operations.
1012 //
1013 -->
1015 <p>The <code><a href="#cssstylesheet">CSSStyleSheet</a></code> interface represents a CSS <a href="#css-style-sheet">CSS style sheet</a> rule.</p>
1016 <pre class="idl">interface <dfn id="cssstylesheet">CSSStyleSheet</dfn> : <a href="#stylesheet">StyleSheet</a> {
1017 readonly attribute <a href="#cssrule">CSSRule</a>? <a href="#dom-cssstylesheet-ownerrule" title="dom-CSSStyleSheet-ownerRule">ownerRule</a>;
1018 readonly attribute <a href="#cssrulelist">CSSRuleList</a> <a href="#dom-cssstylesheet-cssrules" title="dom-CSSStyleSheet-cssRules">cssRules</a>;
1019 unsigned long <a href="#dom-cssstylesheet-insertrule" title="dom-CSSStyleSheet-insertRule">insertRule</a>(DOMString rule, unsigned long index);
1020 void <a href="#dom-cssstylesheet-deleterule" title="dom-CSSStyleSheet-deleteRule">deleteRule</a>(unsigned long index);
1021 };</pre>
1023 <p>The <dfn id="dom-cssstylesheet-ownerrule" title="dom-CSSStyleSheet-ownerRule"><code>ownerRule</code></dfn> attribute must return the <a href="#concept-css-style-sheet-owner-css-rule" title="concept-css-style-sheet-owner-css-rule">owner
1024 CSS rule</a> or null if none. If a value other than null is ever returned, than that same value must always be returned on each get access.</p>
1026 <p>The <dfn id="dom-cssstylesheet-cssrules" title="dom-CSSStyleSheet-cssRules"><code>cssRules</code></dfn> attribute must follow these steps:
1028 <ol>
1029 <li><p>If the <a href="#concept-css-style-sheet-origin-clean-flag" title="concept-css-style-sheet-origin-clean-flag">origin-clean flag</a> is clear,
1030 <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/#securityerror">SecurityError</a></code> exception.
1031 <li><p>Return a read-only, live <code><a href="#cssrulelist">CSSRuleList</a></code> object representing
1032 the <a href="#concept-css-style-sheet-css-rules" title="concept-css-style-sheet-css-rules">CSS rules</a>. The same object must be returned on each get access.</p>
1033 <p class="note">Even though the returned <code><a href="#cssrulelist">CSSRuleList</a></code> object is read-only (from the perspective of
1034 client-authored script), it can nevertheless change over time due to its liveness status. For example, invoking
1035 the <code title="dom-CSSStyleSheet-insertRule"><a href="#dom-cssstylesheet-insertrule">insertRule()</a></code> or <code title="dom-CSSStyleSheet-deleteRule"><a href="#dom-cssstylesheet-deleterule">deleteRule()</a></code> methods can result in
1036 mutations reflected in the returned object.</p>
1037 </ol>
1039 <p>The <dfn id="dom-cssstylesheet-insertrule" title="dom-CSSStyleSheet-insertRule"><code>insertRule(<var title="">rule</var>, <var title="">index</var>)</code></dfn> method must run the following steps:
1041 <ol>
1042 <li><p>If the <a href="#concept-css-style-sheet-origin-clean-flag" title="concept-css-style-sheet-origin-clean-flag">origin-clean flag</a> is clear,
1043 <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/#securityerror">SecurityError</a></code> exception.
1044 <li><p>Return the result of invoking <a href="#insert-a-css-rule">insert a CSS rule</a> <var title="">rule</var> in the <a href="#concept-css-style-sheet-css-rules" title="concept-css-style-sheet-css-rules">CSS rules</a>
1045 at <var title="">index</var>.
1046 </ol>
1048 <p>The <dfn id="dom-cssstylesheet-deleterule" title="dom-CSSStyleSheet-deleteRule"><code>deleteRule(<var title="">index</var>)</code></dfn> method must run the following steps:
1050 <ol>
1051 <li><p>If the <a href="#concept-css-style-sheet-origin-clean-flag" title="concept-css-style-sheet-origin-clean-flag">origin-clean flag</a> is clear,
1052 <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/#securityerror">SecurityError</a></code> exception.
1053 <li><p><a href="#remove-a-css-rule">Remove a CSS rule</a> in the <a href="#concept-css-style-sheet-css-rules" title="concept-css-style-sheet-css-rules">CSS rules</a> at <var title="">index</var>.
1054 </ol>
1056 <h3 id="css-style-sheet-collections"><span class="secno">6.2 </span>CSS Style Sheet Collections</h3>
1058 <p>Below various new concepts are defined that are associated with each
1059 <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> object.</p>
1061 <p>Each <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> has an associated list of zero or more
1062 <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a>, named the
1063 <dfn id="document-css-style-sheets">document CSS style sheets</dfn>. This is
1064 an ordered list that contains all
1065 <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> associated with the
1066 <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code>, in
1067 <a class="external" href="http://dom.spec.whatwg.org/#concept-tree-order" title="concept-tree-order">tree order</a>, with
1068 <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> created from HTTP
1069 <code title="http-link">Link</code> headers first, if any, in header
1070 order.</p>
1072 <p>To <dfn id="create-a-css-style-sheet">create a CSS style sheet</dfn>, run these
1073 steps:</p>
1075 <ol>
1076 <li><p>Create a new <a href="#css-style-sheet">CSS style sheet</a> object and set its
1077 properties as specified.</li>
1079 <li><p>Then run the <a href="#add-a-css-style-sheet">add a CSS style sheet</a> steps for the newly
1080 created <a href="#css-style-sheet">CSS style sheet</a>.</li>
1081 </ol>
1083 <p>To <dfn id="add-a-css-style-sheet">add a CSS style sheet</dfn>, run these
1084 steps:</p>
1086 <ol>
1087 <li><p>Add the <a href="#css-style-sheet">CSS style sheet</a> to the list of
1088 <a href="#document-css-style-sheets">document CSS style sheets</a> at the appropriate location. The
1089 remainder of these steps deal with the
1090 <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a>.</li>
1092 <li><p>If the <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> is set, terminate
1093 these steps.</li>
1095 <li><p>If the <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> is non-empty, the
1096 <a href="#concept-css-style-sheet-alternate-flag" title="concept-css-style-sheet-alternate-flag">alternate flag</a> is clear, and
1097 <a href="#preferred-css-style-sheet-set-name">preferred CSS style sheet set name</a> is the empty string
1098 <a href="#change-the-preferred-css-style-sheet-set-name">change the preferred CSS style sheet set name</a> to the
1099 <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a>.</li>
1101 <li>
1102 <p>If any of the following is true clear the
1103 <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> and terminate these steps:
1105 <ul>
1106 <li><p>The <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> is empty.</li>
1107 <li><p>The <a href="#last-css-style-sheet-set-name">last CSS style sheet set name</a> is null and the
1108 <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> is a
1109 <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match
1110 for the <a href="#preferred-css-style-sheet-set-name">preferred CSS style sheet set name</a>.</li>
1111 <li><p>The <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> is a
1112 <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for the
1113 <a href="#last-css-style-sheet-set-name">last CSS style sheet set name</a>.</li>
1114 </ul>
1115 </li>
1117 <li><p>Set the <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a>.</li>
1118 </ol>
1120 <p>A <dfn id="persistent-css-style-sheet">persistent CSS style sheet</dfn> is a
1121 <a href="#css-style-sheet">CSS style sheet</a> from the <a href="#document-css-style-sheets">document CSS style sheets</a>
1122 whose <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> is the empty string and whose
1123 <a href="#concept-css-style-sheet-alternate-flag" title="concept-css-style-sheet-alternate-flag">alternate flag</a> is clear.</p>
1125 <p>A <dfn id="css-style-sheet-set">CSS style sheet set</dfn> is an ordered
1126 collection of one or more <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a>
1127 from the <a href="#document-css-style-sheets">document CSS style sheets</a> which have an identical
1128 <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> that is not the empty string.</p>
1130 <p>A <dfn id="css-style-sheet-set-name">CSS style sheet set name</dfn> is the
1131 <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> the <a href="#css-style-sheet-set">CSS style sheet set</a> has in
1132 common.</p>
1134 <p>An <dfn id="enabled-css-style-sheet-set">enabled CSS style sheet set</dfn> is a
1135 <a href="#css-style-sheet-set">CSS style sheet set</a> of which each <a href="#css-style-sheet">CSS style sheet</a> has
1136 its <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> clear.</p>
1138 <p>To <dfn id="enable-a-css-style-sheet-set">enable a CSS style sheet set</dfn>
1139 with name <var title="">name</var>, run these steps:</p>
1141 <ol>
1142 <li><p>If <var title="">name</var> is the empty string, set the
1143 <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> for each <a href="#css-style-sheet">CSS style sheet</a>
1144 that is in a <a href="#css-style-sheet-set">CSS style sheet set</a> and terminate these steps.</li>
1146 <li><p>Clear the <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> for each
1147 <a href="#css-style-sheet">CSS style sheet</a> in a <a href="#css-style-sheet-set">CSS style sheet set</a> whose
1148 <a href="#css-style-sheet-set-name">CSS style sheet set name</a> is a
1149 <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for
1150 <var title="">name</var> and set it for all other
1151 <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> in a
1152 <a href="#css-style-sheet-set">CSS style sheet set</a>.</li>
1153 </ol>
1155 <p>To <dfn id="select-a-css-style-sheet-set">select a CSS style sheet set</dfn>
1156 with name <var title="">name</var>, run these steps:</p>
1158 <ol>
1159 <li><p><a href="#enable-a-css-style-sheet-set">enable a CSS style sheet set</a> with name
1160 <var title="">name</var>.</li>
1162 <li><p>Set <a href="#last-css-style-sheet-set-name">last CSS style sheet set name</a> to
1163 <var title="">name</var>.</li>
1164 </ol>
1166 <p>A <dfn id="last-css-style-sheet-set-name">last CSS style sheet set name</dfn>
1167 is a concept to determine what <a href="#css-style-sheet-set">CSS style sheet set</a> was last
1168 <a href="#select-a-css-style-sheet-set" title="select a CSS style sheet set">selected</a>. Initially its
1169 value is null.</p>
1171 <p>A
1172 <dfn id="preferred-css-style-sheet-set-name">preferred CSS style sheet set name</dfn>
1173 is a concept to determine which
1174 <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> need to have their
1175 <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> clear. Initially its value
1176 is the empty string.
1178 <p>To
1179 <dfn id="change-the-preferred-css-style-sheet-set-name">change the preferred CSS style sheet set name</dfn>
1180 with name <var title="">name</var>, run these steps:</p>
1182 <ol>
1183 <li><p>Let <var title="">current</var> be the <a href="#preferred-css-style-sheet-set-name">preferred CSS style sheet set name</a>.</li>
1185 <li><p>Set <a href="#preferred-css-style-sheet-set-name">preferred CSS style sheet set name</a> to
1186 <var title="">name</var>.</li>
1188 <li><p>If <var title="">name</var> is not a
1189 <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for
1190 <var title="">current</var> and
1191 <a href="#last-css-style-sheet-set-name">last CSS style sheet set name</a> is null
1192 <a href="#enable-a-css-style-sheet-set">enable a CSS style sheet set</a> with name
1193 <var title="">name</var>.</li>
1194 </ol>
1196 <!-- XXX ought to define "applied"
1198 thoughts:
1199 depends on disabled flag, alternate flag, media queries, sheesh
1200 -->
1203 <h4 id="the-http-default-style-header"><span class="secno">6.2.1 </span>The HTTP <code title="">Default-Style</code> Header</h4>
1205 <p>The HTTP <code title="http-default-style"><a href="#default-style">Default-Style</a></code> header
1206 can be used to set the <a href="#preferred-css-style-sheet-set-name">preferred CSS style sheet set name</a>
1207 influencing which <a href="#css-style-sheet-set">CSS style sheet set</a> is (initially) the
1208 <a href="#enabled-css-style-sheet-set">enabled CSS style sheet set</a>.</p>
1210 <p>For each HTTP <code title="http-default-style"><a href="#default-style">Default-Style</a></code>
1211 header, in header order, the user agent must
1212 <a href="#change-the-preferred-css-style-sheet-set-name">change the preferred CSS style sheet set name</a> with name being the
1213 value of the header.</p>
1216 <h4 id="the-stylesheetlist-interface"><span class="secno">6.2.2 </span>The <code title="">StyleSheetList</code> Interface</h4>
1218 <p>The <code><a href="#stylesheetlist">StyleSheetList</a></code> interface represents an ordered collection of <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a>.</p>
1220 <pre class="idl">[ArrayClass]
1221 interface <dfn id="stylesheetlist">StyleSheetList</dfn> {
1222 getter <a href="#stylesheet">StyleSheet</a>? <a href="#dom-stylesheetlist-item" title="dom-StyleSheetList-item">item</a>(unsigned long index);
1223 readonly attribute unsigned long <a href="#dom-stylesheetlist-length" title="dom-StyleSheetList-length">length</a>;
1224 };</pre>
1226 <p>The object's <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a> are the numbers in the range zero to one less than the number of
1227 <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> represented by the collection. If there are no such <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a>,
1228 then there are no <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a>.
1230 <p>The <dfn id="dom-stylesheetlist-item" title="dom-StyleSheetList-item"><code>item(<var title="">index</var>)</code></dfn> method must return the <var title="">index</var>th <a href="#css-style-sheet">CSS style
1231 sheet</a> in the collection. If there is no <var title="">index</var>th object in the collection, then the method must return null.
1233 <p>The <dfn id="dom-stylesheetlist-length" title="dom-StyleSheetList-length"><code>length</code></dfn> attribute must return the number of <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a>
1234 represented by the collection.
1236 <h4 id="extensions-to-the-document-interface"><span class="secno">6.2.3 </span>Extensions to the <code title="">Document</code> Interface</h4>
1238 <!--
1239 //
1240 // Significant changes since DOM-2 Style:
1241 //
1242 // 1. move styleSheets from separate interface (DocumentStyle) to Document
1243 // 2. addition of selectedStyleSheetSet, lastStyleSheetSet, preferredStyleSheetSet, styleSheetSets, and enableStyleSheetsForSet members
1244 //
1245 // N.B. HTML4 Section 14.3 "External Style Sheets" introduces the concept of a "group [of] alternate style sheets ... under a single style [sheet set] name",
1246 // but does not actually use the term "style sheet set". See http://www.w3.org/TR/html401/present/styles.html#h-14.3 for details.
1247 //
1248 // N.B. According to HTML4 Section 14.3, a "persistent style sheet ... must apply in addition to any alternate style sheet".
1249 //
1250 // N.B. HTML4 Section 14.3 distinguishes the three categories of style sheets as follows:
1251 //
1252 // * persistent - @rel='stylesheet', @title is missing (or empty string?)
1253 // * preferred - @rel='stylesheet', @title is present (and non-empty?)
1254 // * alternate - @rel='alternate stylesheet', @title is present (and non-empty?)
1255 //
1256 // Also, HTML5 effectively defines:
1257 //
1258 // * ignored - @rel='alternate stylesheet', @title is missing (or is empty string?) - in this case, LinkStyle.style must evaluate to null
1259 //
1260 // N.B. HTML4 Section 4.3 allows author to specify the default preferred style sheet [set]... [presumably in the case that there are multiple preferred style
1261 // sheet sets]:
1262 //
1263 // * in content - <META http-equiv="Default-Style" content="compact">
1264 // * in http - e.g., using response header - "Default-Style: compact"
1265 // * if multiple of the above forms are present, then the LAST one [seen or parsed] takes precedence; HOWEVER, if two or more LINK elements specify preferred
1266 // style [sheet sets], the FIRST one present in the document takes precedence;
1267 // * preferred style sheets specified using the above (META or HTTP header equivalent) take precedence over those specified with LINK
1268 //
1269 // N.B. CSSOM Draft presently employs the term "Style Sheet Collection"
1270 //
1271 // Spec Issues:
1272 //
1273 // 1. need to specify which style sheets are included in styleSheets, and in which order:
1274 //
1275 // * from Link HTTP header reference
1276 // * from <?xml-stylesheet ...?>
1277 // * from LINK element, @rel='stylesheet'|'alternate stylesheet'
1278 // * from STYLE element
1279 //
1280 // 2. for purpose of comparing two titled (named) style sheets, is title (name) compared on case-sensitive or case-insensitive basis
1281 //
1282 // 3. CSSOM 6.2 appears to imply that one can create a CSSStyleSheet (or StyleSheet) object and add it to a Document. However, that is not the case; rather
1283 // it is necessary to create an HTMLLinkElement or HTMLStyleElement element to indirectly create an empty StyleSheet, then this element can be added to the
1284 // Document.
1285 //
1286 -->
1288 <pre class="idl">partial interface <a class="external" href="http://dom.spec.whatwg.org/#document">Document</a> {
1289 readonly attribute <a href="#stylesheetlist">StyleSheetList</a> <a href="#dom-document-stylesheets" title="dom-Document-styleSheets">styleSheets</a>;<!-- DOM-2 - defined on DocumentStyle interface -->
1290 attribute DOMString? <a href="#dom-document-selectedstylesheetset" title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</a>;<!-- new -->
1291 readonly attribute DOMString? <a href="#dom-document-laststylesheetset" title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</a>;<!-- new -->
1292 readonly attribute DOMString? <a href="#dom-document-preferredstylesheetset" title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</a>;<!-- new -->
1293 readonly attribute DOMString[] <a href="#dom-document-stylesheetsets" title="dom-Document-styleSheetSets">styleSheetSets</a>;<!-- new -->
1294 void <a href="#dom-document-enablestylesheetsforset" title="dom-Document-enableStyleSheetsForSet">enableStyleSheetsForSet</a>(DOMString? name);<!-- new -->
1295 };</pre>
1297 <p>The <dfn id="dom-document-stylesheets" title="dom-Document-styleSheets"><code>styleSheets</code></dfn> attribute must return a <code><a href="#stylesheetlist">StyleSheetList</a></code> collection representing
1298 the <a href="#document-css-style-sheets">document CSS style sheets</a>.</p>
1299 <p class="note">Because of historical IDL limitations the <code title="dom-Document-styleSheets"><a href="#dom-document-stylesheets">styleSheets</a></code> attribute
1300 used to be on a separate interface, <code>DocumentStyle</code>.</p>
1302 <p>The <dfn id="dom-document-selectedstylesheetset" title="dom-Document-selectedStyleSheetSet"><code>selectedStyleSheetSet</code></dfn> attribute, on getting, must run these steps:</p>
1303 <ol>
1304 <li><p>If there is a single <a href="#enabled-css-style-sheet-set">enabled CSS style sheet set</a> and no
1305 other <a href="#document-css-style-sheets">document CSS style sheets</a> with a non-empty
1306 <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> have the
1307 <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> unset, return the
1308 <a href="#css-style-sheet-set-name">CSS style sheet set name</a> of the
1309 <a href="#enabled-css-style-sheet-set">enabled CSS style sheet set</a> and terminate these steps.</li>
1311 <li><p>Otherwise, if <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> from
1312 different <a href="#css-style-sheet-set" title="CSS style sheet set">CSS style sheet sets</a> have
1313 their <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> unset, return
1314 null and terminate these steps.</li>
1316 <li>
1317 <p>Otherwise, return the empty string.</p>
1319 <p class="note">At this point either all
1320 <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> with a non-empty
1321 <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> have the
1322 <a href="#concept-css-style-sheet-disabled-flag" title="concept-css-style-sheet-disabled-flag">disabled flag</a> set, or there are no such
1323 <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a>.</p>
1324 </li>
1325 </ol>
1327 <p>On setting the
1328 <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedstylesheetset">selectedStyleSheetSet</a></code>
1329 attribute these steps must be run:</p>
1331 <ol>
1332 <li><p>If the value is null terminate this set of steps.</li>
1333 <li><p>Otherwise, <a href="#select-a-css-style-sheet-set">select a CSS style sheet set</a> with the name being the
1334 value passed.</li>
1335 </ol>
1337 <p>From the DOM's perspective, all views have the same
1338 <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedstylesheetset">selectedStyleSheetSet</a></code>.
1339 If a user agent supports multiple views with different selected
1340 alternative style sheets, then this attribute (and the
1341 <code><a href="#stylesheet">StyleSheet</a></code> interface's
1342 <code title="dom-StyleSheet-disabled"><a href="#dom-stylesheet-disabled">disabled</a></code> attribute)
1343 must return and set the value for the default
1344 view.</p>
1346 <p>The <dfn id="dom-document-laststylesheetset" title="dom-Document-lastStyleSheetSet"><code>lastStyleSheetSet</code></dfn> attribute must return the <a href="#last-css-style-sheet-set-name">last CSS style sheet set name</a>.</p>
1347 <p class="note">This attribute is initially null.</p>
1349 <p>The <dfn id="dom-document-preferredstylesheetset" title="dom-Document-preferredStyleSheetSet"><code>preferredStyleSheetSet</code></dfn> attribute must return the <a href="#preferred-css-style-sheet-set-name">preferred CSS style sheet set
1350 name</a>.</p>
1351 <p class="note">Unlike <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-laststylesheetset">lastStyleSheetSet</a></code>,
1352 this attribute is initially the empty string.</p>
1354 <p>The <dfn id="dom-document-stylesheetsets" title="dom-Document-styleSheetSets"><code>styleSheetSets</code></dfn> attribute must return a read only array of the
1355 <a href="#css-style-sheet-set-name" title="CSS style sheet set name">CSS style sheet set names</a> of the
1356 <a href="#css-style-sheet-set" title="CSS style sheet set">CSS style sheet sets</a>, in order of the <a href="#document-css-style-sheets">document CSS style sheets</a>.</p>
1358 <p>The <dfn id="dom-document-enablestylesheetsforset" title="dom-Document-enableStyleSheetsForSet"><code>enableStyleSheetsForSet(<var title="">name</var>)</code></dfn> method must, when invoked, run these
1359 steps:</p>
1360 <ol>
1361 <li><p>If <var title="">name</var> is null terminate these steps.</li>
1362 <li><p><a href="#enable-a-css-style-sheet-set">enable a CSS style sheet set</a> with name <var title="">name</var>.</li>
1363 </ol>
1364 <p class="note"><a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> with an
1365 empty <a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a> are never affected by this method.
1366 This method does not change the values of the
1367 <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-laststylesheetset">lastStyleSheetSet</a></code> or
1368 <code title="dom-Document-preferredStyleSheetSet"><a href="#dom-document-preferredstylesheetset">preferredStyleSheetSet</a></code> attributes.</p>
1371 <h4 id="interaction-with-the-user-interface"><span class="secno">6.2.4 </span>Interaction with the User Interface</h4>
1373 <p>The user interface of Web browsers that support style sheets
1374 should list the style sheet titles given in the
1375 <code title="dom-Document-styleSheetSets"><a href="#dom-document-stylesheetsets">styleSheetSets</a></code> list,
1376 showing the
1377 <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedstylesheetset">selectedStyleSheetSet</a></code>
1378 as the selected style sheet set, leaving none selected if it is
1379 null or the empty string, and selecting an extra option
1380 "Basic Page Style" (or similar) if it is the empty string and the
1381 <code title="dom-Document-preferredStyleSheetSet"><a href="#dom-document-preferredstylesheetset">preferredStyleSheetSet</a></code>
1382 is the empty string as well.</p>
1384 <p>Selecting a style sheet from this list should
1385 use the <a href="#select-a-css-style-sheet-set">select a CSS style sheet set</a> set of steps. This
1386 (by definition) affects the
1387 <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-laststylesheetset">lastStyleSheetSet</a></code>
1388 attribute.</p>
1390 <h5 id="persisting-the-selected-css-style-sheet-set"><span class="secno">6.2.4.1 </span>Persisting the selected CSS style sheet set</h5>
1392 <p>If a user agent persist the <a href="#select-a-css-style-sheet-set" title="select a CSS style sheet set">selected</a> <a href="#css-style-sheet-set">CSS style sheet set</a>, it should use
1393 the value of the
1394 <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedstylesheetset">selectedStyleSheetSet</a></code>
1395 attribute, or if that is null, the
1396 <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-laststylesheetset">lastStyleSheetSet</a></code>
1397 attribute, when leaving the page (or at some other time) to determine the
1398 set name to store. If that is null then the <a href="#css-style-sheet-set">CSS style sheet set</a> should not be
1399 persisted.</p>
1401 <p>When re-setting the <a href="#css-style-sheet-set">CSS style sheet set</a> to the persisted value (which can
1402 happen at any time, typically at the first time the <a href="#css-style-sheet" title="CSS style sheet">CSS style sheets</a> are
1403 needed for styling the document, after the <code title=""><head></code> of
1404 the document has been parsed, after any scripts that are not dependent on
1405 computed style have executed), the <a href="#css-style-sheet-set">CSS style sheet set</a>
1406 should be set by using the
1407 <a href="#select-a-css-style-sheet-set">select a CSS style sheet set</a> set of steps as if the user had
1408 selected the <a href="#css-style-sheet-set">CSS style sheet set</a> manually.</p>
1410 <p class="note">This specification does not give any suggestions on
1411 how user agents are to decide to persist the <a href="#css-style-sheet-set">CSS style sheet set</a> or whether or
1412 how to persist the <a href="#select-a-css-style-sheet-set" title="select a CSS style sheet set">selected</a> <a href="#css-style-sheet-set">CSS style sheet set</a> across pages.</p>
1414 <!-- XXX this UI section suggests we may want to introduce a few more
1415 idioms -->
1418 <h4 id="examples"><span class="secno">6.2.5 </span>Examples</h4>
1420 <div class="example">
1421 <p>Thus, in the following HTML snippet:</p>
1423 <pre><link rel="alternate stylesheet" title="foo" href="a">
1424 <link rel="alternate stylesheet" title="bar" href="b">
1425 <script>
1426 document.selectedStyleSheetSet = 'foo';
1427 document.styleSheets[1].disabled = false;
1428 </script>
1429 <link rel="alternate stylesheet" title="foo" href="c">
1430 <link rel="alternate stylesheet" title="bar" href="d"></pre>
1432 <p>...the style sheets that end up enabled are style sheets "a", "b",
1433 and "c", the
1434 <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedstylesheetset">selectedStyleSheetSet</a></code>
1435 attribute would return null,
1436 <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-laststylesheetset">lastStyleSheetSet</a></code>
1437 would return "foo", and
1438 <code title="dom-Document-preferredStyleSheetSet"><a href="#dom-document-preferredstylesheetset">preferredStyleSheetSet</a></code>
1439 would return the empty string.</p>
1441 <p>Similarly, in the following HTML snippet:</p>
1443 <pre><link rel="alternate stylesheet" title="foo" href="a">
1444 <link rel="alternate stylesheet" title="bar" href="b">
1445 <script>
1446 var before = document.preferredStyleSheetSet;
1447 document.styleSheets[1].disabled = false;
1448 </script>
1449 <link rel="stylesheet" title="foo" href="c">
1450 <link rel="alternate stylesheet" title="bar" href="d">
1451 <script>
1452 var after = document.preferredStyleSheetSet;
1453 </script></pre>
1455 <p>...the "before" variable will be equal to the empty string, the
1456 "after" variable will be equal to "foo", and style sheets "a" and "c"
1457 will be enabled. This is the case even though the first script block
1458 sets style sheet "b" to be enabled, because upon parsing the
1459 following <code title=""><link></code> element, the
1460 <code title="dom-Document-preferredStyleSheetSet"><a href="#dom-document-preferredstylesheetset">preferredStyleSheetSet</a></code>
1461 is set and the
1462 <code title="dom-Document-enableStyleSheetsForSet"><a href="#dom-document-enablestylesheetsforset">enableStyleSheetsForSet()</a></code>
1463 method is called (since
1464 <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedstylesheetset">selectedStyleSheetSet</a></code>
1465 was never set
1466 explicitly, leaving
1467 <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-laststylesheetset">lastStyleSheetSet</a></code> at
1468 null throughout), which changes which style sheets are enabled and which
1469 are not.</p>
1470 </div>
1473 <h3 id="style-sheet-association"><span class="secno">6.3 </span>Style Sheet Association</h3>
1475 <p>This section defines the interface a
1476 <a href="#concept-css-style-sheet-owner-node" title="concept-css-style-sheet-owner-node">owner node</a> of a <a href="#css-style-sheet">CSS style sheet</a> has to
1477 implement and defines the requirements for
1478 <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-xml-stylesheet" title="xml-stylesheet processing instruction">xml-stylesheet processing instructions</a>
1479 and HTTP <code title="http-link">Link</code> headers when the link
1480 relation type is an
1481 <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for
1482 "<code title="">stylesheet</code>" since nobody else was interested in
1483 defining this.</p>
1485 <p class="note">The editor is in good hope that HTML and SVG will define the
1486 appropriate processing in their respective specifications, in terms of
1487 this specification, in due course.</p>
1491 <h4 id="the-linkstyle-interface"><span class="secno">6.3.1 </span>The <code title="">LinkStyle</code> Interface</h4>
1493 <p>The <dfn id="associated-css-style-sheet">associated CSS style sheet</dfn> of a node is the <a href="#css-style-sheet">CSS style sheet</a> in the list of
1494 <a href="#document-css-style-sheets">document CSS style sheets</a> of which the <a href="#concept-css-style-sheet-owner-node" title="concept-css-style-sheet-owner-node">owner node</a> implements the <code><a href="#linkstyle">LinkStyle</a></code>
1495 interface.</p>
1497 <pre class="idl">[NoInterfaceObject]
1498 interface <dfn id="linkstyle">LinkStyle</dfn> {
1499 readonly attribute <a href="#stylesheet">StyleSheet</a>? <a href="#dom-linkstyle-sheet" title="dom-LinkStyle-sheet">sheet</a>;
1500 };</pre>
1502 <p>The <dfn id="dom-linkstyle-sheet" title="dom-LinkStyle-sheet"><code>sheet</code></dfn> attribute must return the <a href="#associated-css-style-sheet">associated CSS style sheet</a> for the node or null
1503 if there is no <a href="#associated-css-style-sheet">associated CSS style sheet</a>.</p>
1505 <div class="example">
1506 <p>In the following fragment, the first <code title="">style</code>
1507 element has a <code title="dom-LinkStyle-sheet"><a href="#dom-linkstyle-sheet">sheet</a></code> attribute that returns a
1508 <code><a href="#stylesheet">StyleSheet</a></code> object representing the style sheet, but for
1509 the second <code title="">style</code> element, the <code title="dom-LinkStyle-sheet"><a href="#dom-linkstyle-sheet">sheet</a></code> attribute returns null,
1510 assuming the user agent supports CSS (<code title="">text/css</code>), but does
1511 not support the (hypothetical) ExampleSheets (<code title="">text/example-sheets</code>).</p>
1513 <pre><style type="text/css">
1514 body { background:lime }
1515 </style></pre>
1516 <pre><style type="text/example-sheets">
1517 $(body).background := lime
1518 </style></pre>
1519 </div>
1521 <p class="note">Whether or not the node refers to a style sheet is defined
1522 by the specification that defines the semantics of said node.</p>
1525 <h4 id="requirements-on-specifications"><span class="secno">6.3.2 </span>Requirements on specifications</h4>
1527 <p>Specifications introducing new ways of associating style sheets through
1528 the DOM should define which nodes implement the
1529 <code><a href="#linkstyle">LinkStyle</a></code> interface. When doing so, they
1530 must also define when a <a href="#css-style-sheet">CSS style sheet</a> is
1531 <a href="#create-a-css-style-sheet" title="create a CSS style sheet">created</a>.</p>
1537 <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 <code title="">xml-stylesheet</code> processing instruction</h4>
1539 <!-- XXX load/error events, reparse -->
1541 <pre class="idl"><a class="external" href="http://dom.spec.whatwg.org/#processinginstruction">ProcessingInstruction</a> implements <a href="#linkstyle">LinkStyle</a>;</pre>
1543 <p>For each
1544 <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-xml-stylesheet"><code>xml-stylesheet</code> processing instruction</a>
1545 that is not part of the
1546 <a class="external" href="http://www.w3.org/TR/xml/#dt-doctype">document type declaration</a> and has an
1547 <code title="">href</code>
1548 <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a> these steps must
1549 (unless otherwise stated) be run:</p>
1551 <ol>
1552 <li><p>Let <var title="">title</var> be the value of the
1553 <code title="">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
1554 <code title="">title</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a> is not specified.</li>
1556 <li><p>If there is an <code title="">alternate</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a>
1557 whose value is a <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match
1558 for "<code title="">yes</code>" and <var title="">title</var> is the
1559 empty string terminate these steps.</li>
1561 <li><p>If there is a <code title="">type</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a> whose
1562 value is not a <a href="#supported-styling-language">supported styling language</a> the user agent
1563 may terminate these steps.</li>
1565 <li><p>Let <var title="">input URL</var> be the value specified by the
1566 <code title="">href</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a>.
1568 <li><p>Let <var title="">base URL</var> be the processing instruction's <a class="external" href="http://dom.spec.whatwg.org/#concept-node-document" title="concept-node-document">node document</a>'s
1569 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#document-base-url">document base URL</a>.
1571 <li><p>Let <var title="">origin</var> be the processing instruction's <a class="external" href="http://dom.spec.whatwg.org/#concept-node-document" title="concept-node-document">node document</a>'s
1572 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#origin">origin</a>.
1574 <li><p>Let <var title="">parsed URL</var> be the return value of invoking the <a class="external" href="http://url.spec.whatwg.org/#concept-url-parser" title="concept-url-parser">URL parser</a> with the
1575 string <var title="">input URL</var> and the base URL <var title="">base URL</var>.
1577 <li><p>If <var title="">parsed URL</var> is failure, terminate these steps.
1579 <li><p>Let <var title="">request</var> be a new <a class="external" href="http://fetch.spec.whatwg.org/#concept-request" title="concept-request">request</a>, with the
1580 <a class="external" href="http://fetch.spec.whatwg.org/#concept-request-url" title="concept-request-url">url</a> <var title="">parsed URL</var>,
1581 <a class="external" href="http://fetch.spec.whatwg.org/#concept-request-origin" title="concept-request-origin">origin</a> <var title="">origin</var> and
1582 <a class="external" href="http://fetch.spec.whatwg.org/#concept-request-referrer" title="concept-request-referrer">referrer</a> <var title="">base URL</var>.
1584 <li><p>Let <var title="">response</var> be the result of <a class="external" href="http://fetch.spec.whatwg.org/#concept-fetch" title="concept-fetch">fetching</a> <var title="">request</var>.</li>
1586 <li><p>Wait until <var title="">response</var> is available.
1588 <li><p>If <var title="">response</var> is a <a class="external" href="http://fetch.spec.whatwg.org/#concept-network-error" title="concept-network-error">network error</a>, terminate these steps.
1590 <li><p>If the processing instruction's <a class="external" href="http://dom.spec.whatwg.org/#concept-node-document" title="concept-node-document">node document</a> is
1591 in <a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, <var title="">response</var> is
1592 <a class="external" href="http://fetch.spec.whatwg.org/#cors-same-origin">CORS-same-origin</a> and the <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/fetching-resources.html#content-type">Content-Type metadata</a> of <var title="">response</var> is not a
1593 <a href="#supported-styling-language">supported styling language</a> change the <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/fetching-resources.html#content-type">Content-Type metadata</a> of <var title="">response</var> to
1594 <code title="">text/css</code>.
1596 <li><p>If <var title="">response</var> is not in a
1597 <a href="#supported-styling-language">supported styling language</a> terminate these steps.</li>
1599 <li>
1600 <p><a href="#create-a-css-style-sheet">Create a CSS style sheet</a> with the following properties:</p>
1602 <dl>
1603 <dt><a href="#concept-css-style-sheet-location" title="concept-css-style-sheet-location">location</a></dt>
1604 <dd><p>The result of invoking the <a class="external" href="http://url.spec.whatwg.org/#concept-url-serializer" title="concept-url-serializer">URL serializer</a> with <var title="">parsed URL</var>.</dd>
1606 <dt><a href="#concept-css-style-sheet-parent" title="concept-css-style-sheet-parent">parent</a></dt>
1607 <dd><p>null.</dd>
1609 <dt><a href="#concept-css-style-sheet-owner-node" title="concept-css-style-sheet-owner-node">owner node</a></dt>
1610 <dd><p>The processing instruction.</dd>
1612 <dt><a href="#concept-css-style-sheet-owner-css-rule" title="concept-css-style-sheet-owner-css-rule">owner CSS rule</a></dt>
1613 <dd><p>null.</dd>
1615 <dt><a href="#concept-css-style-sheet-media" title="concept-css-style-sheet-media">media</a></dt>
1616 <dd><p>The value of the <code title="">media</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a>
1617 if any, or the empty string otherwise.</dd>
1619 <dt><a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a></dt>
1620 <dd><p><var title="">title</var>.</dd>
1622 <dt><a href="#concept-css-style-sheet-alternate-flag" title="concept-css-style-sheet-alternate-flag">alternate flag</a></dt>
1623 <dd><p>Set if the <code title="">alternate</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a>
1624 value is a <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for
1625 "<code title="">yes</code>", or clear otherwise.
1627 <dt><a href="#concept-css-style-sheet-origin-clean-flag" title="concept-css-style-sheet-origin-clean-flag">origin-clean flag</a>
1628 <dd><p>Set if <var title="">response</var> is <a class="external" href="http://fetch.spec.whatwg.org/#cors-same-origin">CORS-same-origin</a>, or clear otherwise.
1629 </dl>
1630 </li>
1631 </ol>
1636 <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
1637 <code title="">Link</code> Header</h4>
1639 <!-- XXX ref, one day -->
1641 <!-- XXX deal with media param -->
1643 <p>For each HTTP <code title="http-link">Link</code> header of which one
1644 of the link relation types is an
1645 <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match
1646 for "<code title="">stylesheet</code>" these steps
1647 must be run:</p>
1649 <ol>
1650 <li><p>Let <var title="">title</var> be the value of the first of all the
1651 <code title="">title</code> and <code title="">title*</code> parameters.
1652 If there are no such parameters it is the empty string.</li>
1654 <li><p>If one of the (other) link relation types is an
1655 <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for
1656 "<code title="">alternate</code>" and <var title="">title</var> is the
1657 empty string terminate these steps.</li>
1659 <li><p>Let <var title="">input URL</var> be the value specified. <span class="XXX">Be more specific</span>
1661 <li><p>Let <var title="">base URL</var> be the document's <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#document-base-url">document base URL</a>. <span class="XXX">Is there a document at this
1662 point?</span>
1664 <li><p>Let <var title="">origin</var> be the document's <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#origin">origin</a>.
1666 <li><p>Let <var title="">parsed URL</var> be the return value of invoking the <a class="external" href="http://url.spec.whatwg.org/#concept-url-parser" title="concept-url-parser">URL parser</a> with the
1667 string <var title="">input URL</var> and the base URL <var title="">base URL</var>.
1669 <li><p>If <var title="">parsed URL</var> is failure, terminate these steps.
1671 <li><p>Let <var title="">request</var> be a new <a class="external" href="http://fetch.spec.whatwg.org/#concept-request" title="concept-request">request</a>, with the
1672 <a class="external" href="http://fetch.spec.whatwg.org/#concept-request-url" title="concept-request-url">url</a> <var title="">parsed URL</var>,
1673 <a class="external" href="http://fetch.spec.whatwg.org/#concept-request-origin" title="concept-request-origin">origin</a> <var title="">origin</var> and
1674 <a class="external" href="http://fetch.spec.whatwg.org/#concept-request-referrer" title="concept-request-referrer">referrer</a> <var title="">base URL</var>.
1676 <li><p>Let <var title="">response</var> be the result of <a class="external" href="http://fetch.spec.whatwg.org/#concept-fetch" title="concept-fetch">fetching</a> <var title="">request</var>.</li>
1678 <li><p>Wait until <var title="">response</var> is available.
1680 <li><p>If <var title="">response</var> is a <a class="external" href="http://fetch.spec.whatwg.org/#concept-network-error" title="concept-network-error">network error</a>, terminate these steps.
1682 <li><p>If the processing instruction's <a class="external" href="http://dom.spec.whatwg.org/#concept-node-document" title="concept-node-document">node document</a> is
1683 in <a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, <var title="">response</var> is
1684 <a class="external" href="http://fetch.spec.whatwg.org/#cors-same-origin">CORS-same-origin</a> and the <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/fetching-resources.html#content-type">Content-Type metadata</a> of <var title="">response</var> is not a
1685 <a href="#supported-styling-language">supported styling language</a> change the <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/fetching-resources.html#content-type">Content-Type metadata</a> of <var title="">response</var> to
1686 <code title="">text/css</code>.
1688 <li><p>If <var title="">response</var> is not in a
1689 <a href="#supported-styling-language">supported styling language</a> terminate these steps.</li>
1691 <li>
1692 <p><a href="#create-a-css-style-sheet">Create a CSS style sheet</a> with the following properties:</p>
1694 <dl>
1695 <dt><a href="#concept-css-style-sheet-location" title="concept-css-style-sheet-location">location</a></dt>
1696 <dd><p>The result of invoking the <a class="external" href="http://url.spec.whatwg.org/#concept-url-serializer" title="concept-url-serializer">URL serializer</a> with <var title="">parsed URL</var>.</dd>
1698 <dt><a href="#concept-css-style-sheet-owner-node" title="concept-css-style-sheet-owner-node">owner node</a></dt>
1699 <dd><p>null.</dd>
1701 <dt><a href="#concept-css-style-sheet-parent" title="concept-css-style-sheet-parent">parent</a></dt>
1702 <dd><p>null.</dd>
1704 <dt><a href="#concept-css-style-sheet-owner-css-rule" title="concept-css-style-sheet-owner-css-rule">owner CSS rule</a></dt>
1705 <dd><p>null.</dd>
1707 <dt><a href="#concept-css-style-sheet-media" title="concept-css-style-sheet-media">media</a></dt>
1708 <dd><p>The value of the first <code title="">media</code> parameter.</dd>
1709 <!-- XXX register media parameter? bah -->
1711 <dt><a href="#concept-css-style-sheet-title" title="concept-css-style-sheet-title">title</a></dt>
1712 <dd><p><var title="">title</var>.</dd>
1714 <dt><a href="#concept-css-style-sheet-alternate-flag" title="concept-css-style-sheet-alternate-flag">alternate flag</a></dt>
1715 <dd><p>Set if one of the specified link relation type for this HTTP
1716 <code title="http-link">Link</code> header is an
1717 <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for
1718 "<code title="">alternate</code>", or false otherwise.
1720 <dt><a href="#concept-css-style-sheet-origin-clean-flag" title="concept-css-style-sheet-origin-clean-flag">origin-clean flag</a>
1721 <dd><p>Set if <var title="">response</var> is <a class="external" href="http://fetch.spec.whatwg.org/#cors-same-origin">CORS-same-origin</a>, or clear otherwise.
1722 </dl>
1723 </li>
1724 </ol>
1727 <h3 id="css-rules"><span class="secno">6.4 </span>CSS Rules</h3>
1729 <p>A <dfn id="css-rule">CSS rule</dfn> is an abstract concept that
1730 denotes a rule as defined by the CSS specification. A
1731 <a href="#css-rule">CSS rule</a> is represented as an object that implements a subclass of
1732 the <code><a href="#cssrule">CSSRule</a></code> interface, and which has the following
1733 associated state items:</p>
1735 <dl>
1736 <dt><dfn id="concept-css-rule-type" title="concept-css-rule-type">type</dfn></dt>
1737 <dd><p>A non-negative integer associated with a particular type of rule.
1738 This item is initialized when a rule is created and must never change.</dd>
1740 <dt><dfn id="concept-css-rule-text" title="concept-css-rule-text">text</dfn></dt>
1741 <dd><p>A text representation of the rule suitable for direct use in a style sheet.
1742 This item is initialized when a rule is created, and may change over the lifetime of the rule.</dd>
1744 <dt><dfn id="concept-css-rule-parent-css-rule" title="concept-css-rule-parent-css-rule">parent CSS rule</dfn></dt>
1745 <dd><p>An optional reference to another, enclosing <a href="#css-rule">CSS rule</a>.
1746 If the rule has an enclosing rule when it is created, then this item is initialized to the enclosing rule; otherwise it is null.
1747 Subsequent to initialization, this item is reset to null if the rule becomes non-enclosed. Once reset to null, it must never change.</dd>
1749 <dt><dfn id="concept-css-rule-parent-css-style-sheet" title="concept-css-rule-parent-css-style-sheet">parent CSS style sheet</dfn></dt>
1750 <dd><p>An optional reference to an associated <a href="#css-style-sheet">CSS style sheet</a>.
1751 This item is initialized to reference an associated style sheet when the rule is created. Subsequent to initialization, this item
1752 is reset to null if the rule becomes disassociated from its initial style sheet. Once reset to null, it must never change.</dd>
1754 <dt><dfn id="concept-css-rule-nested-css-rules" title="concept-css-rule-nested-css-rules">child CSS rules</dfn>
1755 <dd><p>A list of child <a href="#css-rule" title="CSS rule">CSS rules</a>.
1756 </dl>
1758 <p>In addition to the above state, each <a href="#css-rule">CSS rule</a> may be associated
1759 with other state in accordance with its <a href="#concept-css-rule-type" title="concept-css-rule-type">type</a>.</p>
1761 <p>To <dfn id="parse-a-css-rule">parse a CSS rule</dfn> ...</p>
1763 <p class="XXX">Should a rule be instantiated in OM if there is a parse error? To
1764 what extent should original (but non-valid) CSS text be captured in cssText?</p>
1766 <p>To <dfn id="serialize-a-css-rule">serialize a CSS rule</dfn>, perform one of the following in accordance with the <a href="#css-rule">CSS rule</a>'s <a href="#concept-css-rule-type" title="concept-css-rule-type">type</a>:</p>
1768 <dl class="switch">
1769 <dt><code><a href="#cssstylerule">CSSStyleRule</a></code></dt>
1770 <dd>
1771 <p>The result of concatenating the following:</p>
1772 <ol>
1773 <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>
1774 <li>The string "<code title=""> { </code>", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B),
1775 followed by a single SPACE (U+0020).</li>
1776 <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>
1777 <li>If the rule is associated with one or more declarations, the string "<code title=""> </code>", i.e., a single SPACE (U+0020).</li>
1778 <li>The string "<code title="">}</code>", RIGHT CURLY BRACKET (U+007D).
1779 </ol>
1780 </dd>
1782 <dt><code><a href="#csscharsetrule">CSSCharsetRule</a></code></dt>
1783 <dd>
1784 <p>The result of concatenating the following:</p>
1785 <ol>
1786 <li>The string "<code title="">@charset</code>" followed by a single SPACE (U+0020).</li>
1787 <li>The result of performing <a href="#serialize-a-string">serialize a string</a> on the rule's character encoding.</li>
1788 <li>The string "<code title="">;</code>", i.e., SEMICOLON (U+003B).
1789 </ol>
1790 <div class="example">
1791 <pre>@charset "UTF-8";</pre>
1792 </div>
1793 </dd>
1795 <dt><code><a href="#cssimportrule">CSSImportRule</a></code></dt>
1796 <dd>
1797 <p>The result of concatenating the following:</p>
1798 <ol>
1799 <li>The string "<code title="">@import</code>" followed by a single SPACE (U+0020).</li>
1800 <li>The result of performing <a href="#serialize-a-url">serialize a URL</a> on the rule's location.</li>
1801 <li>If the rule's associated media list is not empty, a single SPACE (U+0020) followed by the
1802 result of performing <a href="#serialize-a-media-query-list">serialize a media query list</a> on the media list.
1803 <li>The string "<code title="">;</code>", i.e., SEMICOLON (U+003B).
1804 </ol>
1805 <div class="example">
1806 <pre>@import url("import.css");</pre>
1807 <pre>@import url("print.css") print;</pre>
1808 </div>
1809 </dd>
1811 <dt><code><a href="#cssmediarule">CSSMediaRule</a></code></dt>
1812 <dd><p class="XXX">...</dd>
1814 <dt><code><a href="#cssfontfacerule">CSSFontFaceRule</a></code></dt>
1815 <dd><p class="XXX">...</dd>
1817 <dt><code><a href="#csspagerule">CSSPageRule</a></code></dt>
1818 <dd><p class="XXX">...</dd>
1820 <dt><code><a href="#cssnamespacerule">CSSNamespaceRule</a></code></dt>
1821 <dd><p>The literal string "<code title="">@namespace</code>", followed by a single SPACE
1822 (U+0020), followed by the
1823 <a href="#serialize-an-identifier" title="serialize an identifier">identifier escaped</a> value of the
1824 <code title="dom-CSSNamespaceRule-prefix"><a href="#dom-cssnamespacerule-prefix">prefix</a></code> attribute (if
1825 any), followed by a single SPACE (U+0020) if there is a prefix, followed by the
1826 <a href="#serialize-a-url" title="serialize a URL">URL escaped</a> value of the
1827 <code title="dom-CSSNamespaceRule-namespaceURI"><a href="#dom-cssnamespacerule-namespaceuri">namespaceURI</a></code>
1828 attribute, followed the character "<code title="">;</code>" (U+003B).</dd>
1829 </dl>
1831 <p>To <dfn id="insert-a-css-rule">insert a CSS rule</dfn> <var title="">rule</var> in a CSS rule list <var title="">list</var> at index <var title="">index</var>, follow these steps:</p>
1832 <ol>
1833 <li><p>Set <var title="">new rule</var> to the results of performing <a href="#parse-a-css-rule">parse a CSS rule</a>
1834 on argument <var title="">rule</var>, <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throwing</a>
1835 a <code class="external"><a href="http://dom.spec.whatwg.org/#syntaxerror">SyntaxError</a></code> exception if a parse error occurs.</li>
1836 <li><p>If <var title="">new rule</var> is an <code title="">@charset</code> at-rule, <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> a
1837 <code class="external"><a href="http://dom.spec.whatwg.org/#syntaxerror">SyntaxError</a></code> exception.
1838 <li><p>Set <var title="">length</var> to the number of items in <var title="">list</var>.</li>
1839 <li><p>If <var title="">index</var> is greater than <var title="">length</var>, then <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a>
1840 an <code class="external"><a href="http://dom.spec.whatwg.org/#indexsizeerror">IndexSizeError</a></code> exception.</li>
1841 <li><p>If <var title="">new rule</var> cannot be inserted into <var title="">list</var> at the zero-index position <var title="">index</var> due to constraints
1842 specified by CSS, then <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a>
1843 a <code class="external"><a href="http://dom.spec.whatwg.org/#hierarchyrequesterror">HierarchyRequestError</a></code> exception. <a href="#refsCSS">[CSS]</a></p>
1844 <p class="note">For example, a CSS style sheet cannot contain an <code title="">@import</code> at-rule after a rule set.</li>
1845 <li><p>If <var title="">new rule</var> is an <code title="">@namespace</code> at-rule, and <var title="">list</var> contains anything other than
1846 <code title="">@charset</code> at-rules, <code title="">@import</code> at-rules, and <code title="">@namespace</code> at-rules,
1847 <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/#invalidstateerror">InvalidStateError</a></code> exception.
1848 <li><p>Insert <var title="">new rule</var> into <var title="">list</var> at the zero-indexed position <var title="">index</var>.<p></li>
1849 <li><p>Return <var title="">index</var>.
1850 </ol>
1851 <p class="XXX">DOM-2 CSS specifies that a <code>NO_MODIFICATION_ALLOWED_ERR</code> exception is thrown
1852 if the style sheet is read-only. Are there any read-only style sheets?</p>
1854 <p>To <dfn id="remove-a-css-rule">remove a CSS rule</dfn> from a CSS rule list <var title="">list</var> at index <var title="">index</var>, follow these steps:</p>
1855 <ol>
1856 <li><p>Set <var title="">length</var> to the number of items in <var title="">list</var>.</li>
1857 <li><p>If <var title="">index</var> is greater than or equal to <var title="">length</var>, then <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a>
1858 an <code class="external"><a href="http://dom.spec.whatwg.org/#indexsizeerror">IndexSizeError</a></code> exception.</li>
1859 <li><p>Set <var title="">old rule</var> to the <var title="">index</var>th item in <var title="">list</var>.</li>
1860 <li><p>If <var title="">old rule</var> is an <code title="">@namespace</code> at-rule, and <var title="">list</var> contains anything other than
1861 <code title="">@charset</code> at-rules, <code title="">@import</code> at-rules, and <code title="">@namespace</code> at-rules,
1862 <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/#invalidstateerror">InvalidStateError</a></code> exception.
1863 <li><p>Remove rule <var title="">old rule</var> from <var title="">list</var> at the zero-indexed position <var title="">index</var>.<p></li>
1864 </ol>
1867 <h4 id="the-cssrulelist-interface"><span class="secno">6.4.1 </span>The <code title="">CSSRuleList</code> Interface</h4>
1869 <p>The <code><a href="#cssrulelist">CSSRuleList</a></code> interface represents an ordered collection of CSS style rules.</p>
1871 <pre class="idl">[ArrayClass]
1872 interface <dfn id="cssrulelist">CSSRuleList</dfn> {
1873 getter <a href="#cssrule">CSSRule</a>? <a href="#dom-cssrulelist-item" title="dom-CSSRuleList-item">item</a>(unsigned long index);
1874 readonly attribute unsigned long <a href="#dom-cssrulelist-length" title="dom-CSSRuleList-length">length</a>;
1875 };</pre>
1877 <p>The object's <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a> are the numbers in the range zero to one less than the number of
1878 <code><a href="#cssrule">CSSRule</a></code> objects represented by the collection. If there are no such <code><a href="#cssrule">CSSRule</a></code> objects, then there are no
1879 <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a>.
1881 <p>The <dfn id="dom-cssrulelist-item" title="dom-CSSRuleList-item"><code>item(<var title="">index</var>)</code></dfn> method must return the <var title="">index</var>th <code><a href="#cssrule">CSSRule</a></code>
1882 object in the collection. If there is no <var title="">index</var>th object in the collection, then the method must return null.
1884 <p>The <dfn id="dom-cssrulelist-length" title="dom-CSSRuleList-length"><code>length</code></dfn> attribute must return the number of <code><a href="#cssrule">CSSRule</a></code> objects represented by the
1885 collection.
1887 <h4 id="the-cssrule-interface"><span class="secno">6.4.2 </span>The <code title="">CSSRule</code> Interface</h4>
1889 <!--
1890 //
1891 // All members defined since DOM-2 Style. The only differences are:
1892 //
1893 // 1. removal of UNKNOWN_RULE = 0 constant
1894 // 2. addition of NAMESPACE_RULE = 10 constant
1895 // 3. removal of commented raises(DOMException) on setting cssText
1896 //
1897 -->
1899 <p>The <code><a href="#cssrule">CSSRule</a></code> interface represents an abstract, base CSS style rule. Each
1900 distinct CSS style rule type is represented by a distinct interface that
1901 inherits from this interface.</p>
1903 <pre class="idl">interface <dfn id="cssrule">CSSRule</dfn> {
1904 const unsigned short <a href="#dom-cssrule-style_rule" title="dom-CSSRule-STYLE_RULE">STYLE_RULE</a> = 1;
1905 const unsigned short <a href="#dom-cssrule-charset_rule" title="dom-CSSRule-CHARSET_RULE">CHARSET_RULE</a> = 2;
1906 const unsigned short <a href="#dom-cssrule-import_rule" title="dom-CSSRule-IMPORT_RULE">IMPORT_RULE</a> = 3;
1907 const unsigned short <a href="#dom-cssrule-media_rule" title="dom-CSSRule-MEDIA_RULE">MEDIA_RULE</a> = 4;
1908 const unsigned short <a href="#dom-cssrule-font_face_rule" title="dom-CSSRule-FONT_FACE_RULE">FONT_FACE_RULE</a> = 5;
1909 const unsigned short <a href="#dom-cssrule-page_rule" title="dom-CSSRule-PAGE_RULE">PAGE_RULE</a> = 6;
1910 const unsigned short <a href="#dom-cssrule-namespace_rule" title="dom-CSSRule-NAMESPACE_RULE">NAMESPACE_RULE</a> = 10;
1911 readonly attribute unsigned short <a href="#dom-cssrule-type" title="dom-CSSRule-type">type</a>;
1912 attribute DOMString <a href="#dom-cssrule-csstext" title="dom-CSSRule-cssText">cssText</a>;
1913 readonly attribute <a href="#cssrule">CSSRule</a>? <a href="#dom-cssrule-parentrule" title="dom-CSSRule-parentRule">parentRule</a>;
1914 readonly attribute <a href="#cssstylesheet">CSSStyleSheet</a>? <a href="#dom-cssrule-parentstylesheet" title="dom-CSSRule-parentStyleSheet">parentStyleSheet</a>;
1915 };</pre>
1917 <p>The <dfn id="dom-cssrule-type" title="dom-CSSRule-type"><code>type</code></dfn> attribute must return the CSS rule type, as follows:
1919 <dl class="switch">
1920 <dt>If the object is a <code><a href="#cssstylerule">CSSStyleRule</a></code>
1921 <dd><p>Return <dfn id="dom-cssrule-style_rule" title="dom-CSSRule-STYLE_RULE"><code>STYLE_RULE</code></dfn> (numeric value 1).
1922 <dt>If the object is a <code><a href="#csscharsetrule">CSSCharsetRule</a></code>
1923 <dd><p>Return <dfn id="dom-cssrule-charset_rule" title="dom-CSSRule-CHARSET_RULE"><code>CHARSET_RULE</code></dfn> (numberic value 2).
1924 <dt>If the object is a <code><a href="#cssimportrule">CSSImportRule</a></code>
1925 <dd><p>Return <dfn id="dom-cssrule-import_rule" title="dom-CSSRule-IMPORT_RULE"><code>IMPORT_RULE</code></dfn> (numberic value 3).
1926 <dt>If the object is a <code><a href="#cssmediarule">CSSMediaRule</a></code>
1927 <dd><p>Return <dfn id="dom-cssrule-media_rule" title="dom-CSSRule-MEDIA_RULE"><code>MEDIA_RULE</code></dfn> (numeric value 4).
1928 <dt>If the object is a <code><a href="#cssfontfacerule">CSSFontFaceRule</a></code>
1929 <dd><p>Return <dfn id="dom-cssrule-font_face_rule" title="dom-CSSRule-FONT_FACE_RULE"><code>FONT_FACE_RULE</code></dfn> (numeric value 5).
1930 <dt>If the object is a <code><a href="#csspagerule">CSSPageRule</a></code>
1931 <dd><p>Return <dfn id="dom-cssrule-page_rule" title="dom-CSSRule-PAGE_RULE"><code>PAGE_RULE</code></dfn> (numeric value 6).
1932 <dt>If the object is a <code><a href="#cssnamespacerule">CSSNamespaceRule</a></code>
1933 <dd><p>Return <dfn id="dom-cssrule-namespace_rule" title="dom-CSSRule-NAMESPACE_RULE"><code>NAMESPACE_RULE</code></dfn> (numeric value 10).
1934 <dt>Otherwise
1935 <dd><p>Return a value defined on the <a href="http://wiki.csswg.org/spec/cssom-constants">CSSOM Constants</a> wiki page.
1936 </dl>
1938 <p class="note">The value 0, formerly known as <code title="">UNKNOWN_RULE</code>, is made
1939 obsolete by this specification. This value will not be re-allocated in the future and will remain reserved.</p>
1941 <p>The <dfn id="dom-cssrule-csstext" title="dom-CSSRule-cssText"><code>cssText</code></dfn> attribute must return a <a href="#serialize-a-css-rule" title="serialize a CSS rule">serialization</a> of the
1942 <a href="#css-rule">CSS rule</a>.</p>
1943 <p>On setting the <code title="dom-CSSRule-cssText"><a href="#dom-cssrule-csstext">cssText</a></code> attribute these steps must be run:</p>
1944 <ol>
1945 <li><p><a href="#parse-a-css-rule" title="Parse a CSS rule">Parse</a> the value.</li>
1946 <li><p>If parsing failed terminate this algorithm.</li>
1947 <li><p>If the <code title="dom-CSSRule-type"><a href="#dom-cssrule-type">type</a></code> of the new
1948 object does not match the <code title="dom-CSSRule-type"><a href="#dom-cssrule-type">type</a></code> of
1949 the current object
1950 <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a> an
1951 <code class="external"><a href="http://dom.spec.whatwg.org/#invalidmodificationerror">InvalidModificationError</a></code> exception.</li>
1952 <li><p>Replace the current object with the new object.</li>
1953 </ol>
1955 <p>The <dfn id="dom-cssrule-parentrule" title="dom-CSSRule-parentRule"><code>parentRule</code></dfn> attribute must return the nearest enclosing rule of the current rule or null if
1956 there is none. If a value other than null is ever returned, than that same value must always be returned on each get access.</p>
1957 <p class="note">For example, <code title="">@media</code> can enclose a rule, in which case <code title="dom-CSSRule-parentRule"><a href="#dom-cssrule-parentrule">parentRule</a></code> would
1958 be non-null; in cases where there is no enclosing rule, <code title="dom-CSSRule-parentRule"><a href="#dom-cssrule-parentrule">ownerRule</a></code> will be null.</p>
1960 <p>The <dfn id="dom-cssrule-parentstylesheet" title="dom-CSSRule-parentStyleSheet"><code>parentStyleSheet</code></dfn> attribute must return the <code><a href="#cssstylesheet">CSSStyleSheet</a></code> object that contains the
1961 current rule or null if there is none.</p>
1962 <p class="note">The only circumstance where null is returned when a rule has been <a href="#remove-a-css-rule" title="remove a CSS rule">removed</a>.</p>
1963 <p class="note">Removing a <code class="external"><a href="http://dom.spec.whatwg.org/#node">Node</a></code> that implements the <code><a href="#linkstyle">LinkStyle</a></code> interface from a
1964 <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> instance does not (by itself) cause the <code><a href="#cssstylesheet">CSSStyleSheet</a></code> referenced by a <code><a href="#cssrule">CSSRule</a></code> to be
1965 unreachable.</p>
1968 <h4 id="the-cssstylerule-interface"><span class="secno">6.4.3 </span>The <code title="">CSSStyleRule</code> Interface</h4>
1970 <!--
1971 //
1972 // All members defined since DOM-2 Style. The only differences are:
1973 //
1974 // 1. removal of commented raises(DOMException) on setting selectorText
1975 //
1976 -->
1978 <p>The <code><a href="#cssstylerule">CSSStyleRule</a></code> interface represents a rule set.</p>
1980 <pre class="idl">interface <dfn id="cssstylerule">CSSStyleRule</dfn> : <a href="#cssrule">CSSRule</a> {
1981 attribute DOMString <a href="#dom-cssstylerule-selectortext" title="dom-CSSStyleRule-selectorText">selectorText</a>;
1982 [PutForwards=<a href="#dom-cssstyledeclaration-csstext" title="dom-CSSStyleDeclaration-cssText">cssText</a>] readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <a href="#dom-cssstylerule-style" title="dom-CSSStyleRule-style">style</a>;
1983 };</pre>
1985 <p>The <dfn id="dom-cssstylerule-selectortext" title="dom-CSSStyleRule-selectorText"><code>selectorText</code></dfn> attribute, on getting, must return the result of
1986 <a href="#serialize-a-group-of-selectors" title="serialize a group of selectors">serializing</a> the associated <a href="#group-of-selectors">group of selectors</a>.</p>
1987 <p>On setting the <code title="dom-CSSStyleRule-selectorText"><a href="#dom-cssstylerule-selectortext">selectorText</a></code> attribute these steps must be run:</p>
1988 <ol>
1989 <li><p>Run the <a href="#parse-a-group-of-selectors">parse a group of selectors</a> algorithm on the given value.</li>
1990 <li><p>If the algorithm returns a non-null value replace the associated <a href="#group-of-selectors">group of selectors</a> with the returned value.</li>
1991 <li><p>Otherwise, if the algorithm returns a null value, do nothing.</li>
1992 </ol>
1994 <p>The <dfn id="dom-cssstylerule-style" title="dom-CSSStyleRule-style"><code>style</code></dfn> attribute must return a <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> object for the rule set.</p>
1997 <h4 id="the-csscharsetrule-interface"><span class="secno">6.4.4 </span>The <code title="">CSSCharsetRule</code> Interface</h4>
1999 <p>The <code><a href="#csscharsetrule">CSSCharsetRule</a></code> interface represents an <code title="">@charset</code> at-rule.</p>
2001 <pre class="idl">interface <dfn id="csscharsetrule">CSSCharsetRule</dfn> : <a href="#cssrule">CSSRule</a> {
2002 attribute DOMString <a href="#dom-csscharsetrule-encoding" title="dom-CSSCharsetRule-encoding">encoding</a>;
2003 };</pre>
2005 <p>The <dfn id="dom-csscharsetrule-encoding" title="dom-CSSCharsetRule-encoding"><code>encoding</code></dfn> attribute must return the encoding information specified by the
2006 <code title="">@charset</code> at-rule.</p>
2009 <h4 id="the-cssimportrule-interface"><span class="secno">6.4.5 </span>The <code title="">CSSImportRule</code> Interface</h4>
2011 <p>The <code><a href="#cssimportrule">CSSImportRule</a></code> interface represents an <code title="">@import</code> at-rule.</p>
2013 <pre class="idl">interface <dfn id="cssimportrule">CSSImportRule</dfn> : <a href="#cssrule">CSSRule</a> {
2014 readonly attribute DOMString <a href="#dom-cssimportrule-href" title="dom-CSSImportRule-href">href</a>;
2015 [PutForwards=<a href="#dom-medialist-mediatext" title="dom-MediaList-mediaText">mediaText</a>] readonly attribute <a href="#medialist">MediaList</a> <a href="#dom-cssimportrule-media" title="dom-CSSImportRule-media">media</a>;
2016 readonly attribute <a href="#cssstylesheet">CSSStyleSheet</a> <a href="#dom-cssimportrule-stylesheet" title="dom-CSSImportRule-styleSheet">styleSheet</a>;
2017 };</pre>
2019 <p>The <dfn id="dom-cssimportrule-href" title="dom-CSSImportRule-href"><code>href</code></dfn> attribute must return the <a class="external" href="http://url.spec.whatwg.org/#concept-url" title="concept-url">URL</a> specified by
2020 the <code title="">@import</code> at-rule.</p>
2021 <p class="note">To get the resolved <a class="external" href="http://url.spec.whatwg.org/#concept-url" title="concept-url">URL</a> use the <code title="dom-StyleSheet-href"><a href="#dom-stylesheet-href">href</a></code>
2022 attribute of the associated <a href="#css-style-sheet">CSS style sheet</a>.</p>
2024 <p>The <dfn id="dom-cssimportrule-media" title="dom-CSSImportRule-media"><code>media</code></dfn> attribute must return the value of the <code title="dom-StyleSheet-media"><a href="#dom-stylesheet-media">media</a></code>
2025 attribute of the associated <a href="#css-style-sheet">CSS style sheet</a>.</p>
2027 <p>The <dfn id="dom-cssimportrule-stylesheet" title="dom-CSSImportRule-styleSheet"><code>styleSheet</code></dfn> attribute must return the associated <a href="#css-style-sheet">CSS style sheet</a>.</p>
2028 <p class="note">If loading of the style sheet fails its <a href="#concept-css-style-sheet-css-rules" title="concept-css-style-sheet-css-rules">CSS rules</a>
2029 list is simply empty, i.e., an <code title="">@import</code> at-rule always has an associated <a href="#css-style-sheet">CSS style sheet</a>.</p>
2032 <h4 id="the-cssmediarule-interface"><span class="secno">6.4.6 </span>The <code title="">CSSMediaRule</code> Interface</h4>
2034 <p>The <code><a href="#cssmediarule">CSSMediaRule</a></code> interface represents an <code title="">@media</code> at-rule.</p>
2036 <pre class="idl">interface <dfn id="cssmediarule">CSSMediaRule</dfn> : <a href="#cssrule">CSSRule</a> {
2037 [PutForwards=<a href="#dom-medialist-mediatext" title="dom-MediaList-mediaText">mediaText</a>] readonly attribute <a href="#medialist">MediaList</a> <a href="#dom-cssmediarule-media" title="dom-CSSMediaRule-media">media</a>;
2038 readonly attribute <a href="#cssrulelist">CSSRuleList</a> <a href="#dom-cssmediarule-cssrules" title="dom-CSSMediaRule-cssRules">cssRules</a>;
2039 unsigned long <a href="#dom-cssmediarule-insertrule" title="dom-CSSMediaRule-insertRule">insertRule</a>(DOMString rule, unsigned long index);
2040 void <a href="#dom-cssmediarule-deleterule" title="dom-CSSMediaRule-deleteRule">deleteRule</a>(unsigned long index);
2041 };</pre>
2043 <p>The <dfn id="dom-cssmediarule-media" title="dom-CSSMediaRule-media"><code>media</code></dfn> attribute must return a <code><a href="#medialist">MediaList</a></code> object for the list of media queries specified
2044 with the <code title="">@media</code> at-rule.</p>
2046 <p>The <dfn id="dom-cssmediarule-cssrules" title="dom-CSSMediaRule-cssRules"><code>cssRules</code></dfn> attribute must return a <code><a href="#cssrulelist">CSSRuleList</a></code> object for the
2047 <span title="concept-css-rule-child-css-rules">child CSS rules</span> specified with the <code title="">@media</code> at-rule.</p>
2049 <p>The <dfn id="dom-cssmediarule-insertrule" title="dom-CSSMediaRule-insertRule"><code>insertRule(<var title="">rule</var>, <var title="">index</var>)</code></dfn> method must return the result of
2050 invoking <a href="#insert-a-css-rule">insert a CSS rule</a> <var title="">rule</var> into the <span title="concept-css-rule-child-css-rules">child CSS rules</span> at
2051 <var title="">index</var>.</p>
2053 <p>The <dfn id="dom-cssmediarule-deleterule" title="dom-CSSMediaRule-deleteRule"><code>deleteRule(<var title="">index</var>)</code></dfn> method must <a href="#remove-a-css-rule">remove a CSS rule</a> from the
2054 <span title="concept-css-rule-child-css-rules">child CSS rules</span> at <var title="">index</var>.</p>
2057 <h4 id="the-cssfontfacerule-interface"><span class="secno">6.4.7 </span>The <code title="">CSSFontFaceRule</code> Interface</h4>
2059 <p>The <code><a href="#cssfontfacerule">CSSFontFaceRule</a></code> interface represents an <code title="">@font-face</code> at-rule.</p>
2061 <pre class="idl">interface <dfn id="cssfontfacerule">CSSFontFaceRule</dfn> : <a href="#cssrule">CSSRule</a> {
2062 [PutForwards=<a href="#dom-cssstyledeclaration-csstext" title="dom-CSSStyleDeclaration-cssText">cssText</a>] readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <a href="#dom-cssfontfacerule-style" title="dom-CSSFontFaceRule-style">style</a>;
2063 };</pre>
2065 <p>The <dfn id="dom-cssfontfacerule-style" title="dom-CSSFontFaceRule-style"><code>style</code></dfn> attribute must return a <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> block that contains the property
2066 declarations specified within the <code title="">@font-face</code> at-rule.</p>
2069 <h4 id="the-csspagerule-interface"><span class="secno">6.4.8 </span>The <code title="">CSSPageRule</code> Interface</h4>
2071 <p>The <code><a href="#csspagerule">CSSPageRule</a></code> interface represents an <code title="">@page</code> at-rule.</p>
2072 <p class="XXX">Need to define the rules for
2073 <dfn id="parse-a-list-of-css-page-selectors">parse a list of CSS page selectors</dfn> and
2074 <dfn id="serialize-a-list-of-css-page-selectors">serialize a list of CSS page selectors</dfn>.</p>
2076 <pre class="idl">interface <dfn id="csspagerule">CSSPageRule</dfn> : <a href="#cssrule">CSSRule</a> {
2077 attribute DOMString <a href="#dom-csspagerule-selectortext" title="dom-CSSPageRule-selectorText">selectorText</a>;
2078 [PutForwards=<a href="#dom-cssstyledeclaration-csstext" title="dom-CSSStyleDeclaration-cssText">cssText</a>] readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <a href="#dom-csspagerule-style" title="dom-CSSPageRule-style">style</a>;
2079 };</pre>
2081 <p>The <dfn id="dom-csspagerule-selectortext" title="dom-CSSPageRule-selectorText"><code>selectorText</code></dfn> attribute, on getting, must return the result of
2082 <a href="#serialize-a-list-of-css-page-selectors" title="serialize a list of CSS page selectors">serializing</a> the associated <a href="#list-of-css-page-selectors">list of CSS page selectors</a>.</p>
2083 <p>On setting the <code title="dom-CSSPageRule-selectorText"><a href="#dom-csspagerule-selectortext">selectorText</a></code> attribute these steps must be run:</p>
2084 <ol>
2085 <li><p>Run the <a href="#parse-a-list-of-css-page-selectors">parse a list of CSS page selectors</a> algorithm on the given value.</li>
2086 <li><p>If the algorithm returns a non-null value replace the associated <a href="#list-of-css-page-selectors">list of CSS page selectors</a> with the returned value.</li>
2087 <li><p>Otherwise, if the algorithm returns a null value, do nothing.</li>
2088 </ol>
2090 <p>The <dfn id="dom-csspagerule-style" title="dom-CSSPageRule-style"><code>style</code></dfn> attribute must return a <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> for the <code title="">@page</code>
2091 at-rule.</p>
2094 <h4 id="the-cssnamespacerule-interface"><span class="secno">6.4.9 </span>The <code title="">CSSNamespaceRule</code> Interface</h4>
2096 <p>The <code><a href="#cssnamespacerule">CSSNamespaceRule</a></code> interface represents an <code title="">@namespace</code> at-rule.</p>
2098 <pre class="idl">interface <dfn id="cssnamespacerule">CSSNamespaceRule</dfn> : <a href="#cssrule">CSSRule</a> {
2099 [TreatNullAs=EmptyString] attribute DOMString <a href="#dom-cssnamespacerule-namespaceuri" title="dom-CSSNamespaceRule-namespaceURI">namespaceURI</a>;
2100 [TreatNullAs=EmptyString] attribute DOMString <a href="#dom-cssnamespacerule-prefix" title="dom-CSSNamespaceRule-prefix">prefix</a>;
2101 };</pre>
2103 <p>The <dfn id="dom-cssnamespacerule-namespaceuri" title="dom-CSSNamespaceRule-namespaceURI"><code>namespaceURI</code></dfn> attribute, on getting, must return the namespace of the
2104 <code title="">@namespace</code> at-rule.
2106 <p>On setting, the <code title="dom-CSSNamespaceRule-namespaceURI"><a href="#dom-cssnamespacerule-namespaceuri">namespaceURI</a></code> attribute must run the following steps:</p>
2108 <ol>
2109 <li><p>Let <var title="">parent</var> be the <a href="#concept-css-rule-parent-css-style-sheet" title="concept-css-rule-parent-css-style-sheet">parent CSS style sheet</a>.
2110 <li><p>Let <var title="">list</var> be the <a href="#concept-css-style-sheet-css-rules" title="concept-css-style-sheet-css-rules">CSS rules</a> of <var title="">parent</var>, or
2111 null if <var title="">parent</var> is null.
2112 <li><p>If <var title="">list</var> is not null and contains anything other than
2113 <code title="">@charset</code> at-rules, <code title="">@import</code> at-rules, and <code title="">@namespace</code> at-rules,
2114 <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/#invalidstateerror">InvalidStateError</a></code> exception.
2115 <li><p>Set the namespace of the <code title="">@namespace</code> at-rule to the given value.
2116 </ol>
2118 <p>The <dfn id="dom-cssnamespacerule-prefix" title="dom-CSSNamespaceRule-prefix"><code>prefix</code></dfn> attribute must return the prefix of the <code title="">@namespace</code> at-rule or the
2119 empty string if there is no prefix.
2121 <p>On setting, the <code title="dom-CSSNamespaceRule-prefix"><a href="#dom-cssnamespacerule-prefix">prefix</a></code> attribute must run the following steps:</p>
2123 <ol>
2124 <li><p>Let <var title="">parent</var> be the <a href="#concept-css-rule-parent-css-style-sheet" title="concept-css-rule-parent-css-style-sheet">parent CSS style sheet</a>.
2125 <li><p>Let <var title="">list</var> be the <a href="#concept-css-style-sheet-css-rules" title="concept-css-style-sheet-css-rules">CSS rules</a> of <var title="">parent</var>, or
2126 null if <var title="">parent</var> is null.
2127 <li><p>If <var title="">list</var> is not null and contains anything other than
2128 <code title="">@charset</code> at-rules, <code title="">@import</code> at-rules, and <code title="">@namespace</code> at-rules,
2129 <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/#invalidstateerror">InvalidStateError</a></code> exception.
2130 <li><p>Set the prefix of the <code title="">@namespace</code> at-rule to the given value.
2131 </ol>
2134 <h3 id="css-declaration-blocks"><span class="secno">6.5 </span>CSS Declaration Blocks</h3>
2136 <p>A <dfn id="css-declaration-block">CSS declaration block</dfn> is an ordered collection of CSS
2137 properties with their associated values, also named CSS declarations. In
2138 the DOM a <a href="#css-declaration-block">CSS declaration block</a> is a
2139 <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> object. A
2140 <a href="#css-declaration-block">CSS declaration block</a> has two associated properties:</p>
2142 <dl>
2143 <dt><dfn id="concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</dfn></dt>
2144 <dd><p>Clear if the object can be manipulated. Set if it can not be
2145 manipulated. Unless otherwise stated it is clear.</dd>
2147 <dt><dfn id="concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</dfn></dt>
2148 <dd><p>The CSS declarations associated with the object.</dd>
2149 </dl>
2151 <p class="note">The <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> are
2152 ordered. This matters for the
2153 <code title="dom-CSSStyleDeclaration-item"><a href="#dom-cssstyledeclaration-item">item()</a></code> method.</p>
2155 <p>To <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn> ...</p>
2157 <p class="XXX">What should be captured in the cssText of a declaration block which fails
2158 to parse?</p>
2160 <p>To <dfn id="serialize-a-css-declaration-block">serialize a CSS declaration block</dfn>
2161 represented by a <code>CSSStyleDeclarations</code> instance named <var title="">d</var>,
2162 let <var title="">s</var> be the empty string, then run the steps below:</p>
2164 <ol>
2165 <li><p>If <code title=""><var title="">d</var>.length</code> is zero (0), then return <var title="">s</var>.</li>
2166 <li><p>For each <var title="">i</var> from zero (0) through <code title=""><var title="">d</var>.length</code> - 1 (inclusive), perform the following sub-steps:</p>
2167 <ol>
2168 <li><p>Let <var title="">n</var> be the value returned by <code title=""><var title="">d</var>.item(<var title="">i</var>)</code>.</li>
2169 <li><p>Let <var title="">v</var> be the value returned by <code title=""><var title="">d</var>.getPropertyValue(<var title="">n</var>)</code>.</li>
2170 <li><p>If <var title="">v</var> is the empty string, then continue.</li>
2171 <li>
2172 <p>Otherwise (<var title="">v</var> is non-empty), perform the following sub-steps:</p>
2173 <ol>
2174 <li><p>If <var title="">s</var> is not empty, then append a single SPACE (U+0020) to <var title="">s</var>.</li>
2175 <li><p>Append <var title="">n</var> to <var title="">s</var>.</li>
2176 <li><p>Append COLON (U+003A) followed by a single SPACE (U+0020), i.e., "<code title="">: </code>", to <var title="">s</var>.</li>
2177 <li><p>Append <var title="">v</var> to <var title="">s</var>.</li>
2178 </ol>
2179 </li>
2180 <li><p>Let <var title="">p</var> be the value returned by <code title=""><var title="">d</var>.getPropertyPriority(<var title="">n</var>)</code>.</li>
2181 <li>
2182 <p>If <var title="">p</var> is not the empty string, then perform the following sub-steps:</p>
2183 <ol>
2184 <li><p>Append a single SPACE (U+0020) followed by EXCLAMATION MARK (U+0021), i.e., "<code title=""> !</code>", to <var title="">s</var>.</li>
2185 <li><p>Append <var title="">p</var> to <var title="">s</var>.</li>
2186 </ol>
2187 </li>
2188 <li><p>Append SEMICOLON (U+003B), i.e., "<code title="">;</code>", to <var title="">s</var>.</li>
2189 </ol>
2190 </li>
2191 <li><p>Return <var title="">s</var>.</li>
2192 </ol>
2194 <p class="note">The serialization of an empty CSS declaration block is the empty string.</p>
2196 <p class="note">The serialization of a non-empty CSS declaration block does not include any surrounding whitespace, i.e., no whitepsace appears
2197 before the first property name and no whitespace appears after the final semicolon delimiter that follows the last property value.</p>
2200 <h4 id="the-cssstyledeclaration-interface"><span class="secno">6.5.1 </span>The <code title="">CSSStyleDeclaration</code> Interface</h4>
2202 <!--
2203 //
2204 // All members defined since DOM-2 Style. The only differences are:
2205 //
2206 // 1. removal of commented raises(DOMException) on setting cssText
2207 // 2. removal of raises(DOMException) on {set,remove}Property
2208 // 3. removal of getPropertyCSSValue() method
2209 //
2210 -->
2212 <p>The <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> interface represents a <a href="#css-declaration-block">CSS declaration block</a>, including its underlying state, where this
2213 underlying state depends upon the source of the <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> instance.</p>
2215 <pre class="idl">interface <dfn id="cssstyledeclaration">CSSStyleDeclaration</dfn> {
2216 attribute DOMString <a href="#dom-cssstyledeclaration-csstext" title="dom-CSSStyleDeclaration-cssText">cssText</a>;
2217 readonly attribute unsigned long <a href="#dom-cssstyledeclaration-length" title="dom-CSSStyleDeclaration-length">length</a>;
2218 getter DOMString <a href="#dom-cssstyledeclaration-item" title="dom-CSSStyleDeclaration-item">item</a>(unsigned long index);
2219 DOMString <a href="#dom-cssstyledeclaration-getpropertyvalue" title="dom-CSSStyleDeclaration-getPropertyValue">getPropertyValue</a>(DOMString property);
2220 DOMString <a href="#dom-cssstyledeclaration-getpropertypriority" title="dom-CSSStyleDeclaration-getPropertyPriority">getPropertyPriority</a>(DOMString property);
2221 void <a href="#dom-cssstyledeclaration-setproperty" title="dom-CSSStyleDeclaration-setProperty">setProperty</a>(DOMString property, [TreatNullAs=EmptyString] DOMString value, <!--
2222 -->[TreatNullAs=EmptyString] optional DOMString priority = "");
2223 DOMString <a href="#dom-cssstyledeclaration-removeproperty" title="dom-CSSStyleDeclaration-removeProperty">removeProperty</a>(DOMString property);
2224 readonly attribute <a href="#cssrule">CSSRule</a>? <a href="#dom-cssstyledeclaration-length" title="dom-CSSStyleDeclaration-length">parentRule</a>;
2225 attribute DOMString <a href="#dom-cssstyledeclaration-cssfloat" title="dom-CSSStyleDeclaration-cssFloat">cssFloat</a>;<!-- setProperty's value arg has [TreatNullAs=EmptyString] -->
2226 };</pre>
2228 <p>The object's <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a> are the numbers in the range zero to one less than the number of declarations in
2229 the <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>. If there are no such declarations, then there are no
2230 <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/#dfn-supported-property-indices">supported property indices</a>.
2232 <p>The <dfn id="dom-cssstyledeclaration-csstext" title="dom-CSSStyleDeclaration-cssText"><code>cssText</code></dfn> attribute must return the result of
2233 <a href="#serialize-a-css-declaration-block" title="serialize a CSS declaration block">serializing</a> the <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>.</p>
2234 <p>Setting the <code title="dom-CSSStyleDeclaration-cssText"><a href="#dom-cssstyledeclaration-csstext">cssText</a></code> attribute must run these steps:
2235 <ol>
2236 <li><p>If the <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> is set, <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a>
2237 a <code class="external"><a href="http://dom.spec.whatwg.org/#nomodificationallowederror">NoModificationAllowedError</a></code> exception and terminate these steps.</li>
2238 <li><p>Empty the <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>.</li>
2239 <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 null, insert it into the
2240 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>.</li>
2241 </ol>
2243 <p>The <dfn id="dom-cssstyledeclaration-length" title="dom-CSSStyleDeclaration-length"><code>length</code></dfn> attribute must return the number of declarations in the
2244 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>.</p>
2246 <p>The <dfn id="dom-cssstyledeclaration-item" title="dom-CSSStyleDeclaration-item"><code>item(<var title="">index</var>)</code></dfn> method must return the name of the property at position
2247 <var title="">index</var>.</p>
2249 <p>The <dfn id="dom-cssstyledeclaration-getpropertyvalue" title="dom-CSSStyleDeclaration-getPropertyValue"><code>getPropertyValue(<var title="">property</var>)</code></dfn> method must run these steps:</p>
2250 <ol>
2251 <li><p>If <var title="">property</var> is an <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII
2252 case-insensitive</a> match for a property of a declaration in the
2253 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>, and that declaration's property
2254 is defined to be case-insensitive, return the
2255 <a href="#serialize-a-css-value" title="serialize a CSS value">serialization</a> of that declaration's
2256 value.
2257 <li><p>If <var title="">property</var> is a <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a>
2258 match for a property of a declaration in the
2259 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>, and that declaration's property
2260 is defined to be case-sensitive, return the
2261 <a href="#serialize-a-css-value" title="serialize a CSS value">serialization</a> of that declaration's
2262 value.
2263 <li><p>Return the empty string.
2264 </ol>
2266 <p>The <dfn id="dom-cssstyledeclaration-getpropertypriority" title="dom-CSSStyleDeclaration-getPropertyPriority"><code>getPropertyPriority(<var title="">property</var>)</code></dfn> method must run these steps:
2267 <ol>
2268 <li><p>If <var title="">property</var> is an <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII
2269 case-insensitive</a> match for a property of a declaration in the <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> that has the
2270 <i title="">important</i> flag set, and that declaration's
2271 property is defined to be case-insensitive, return the string "<code title="">important</code>".</p>
2272 <li><p>If <var title="">property</var> is a
2273 <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for a property of a
2274 declaration in the <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> that has the
2275 <i title="">important</i> flag set, and that declaration's property is defined to be case-sensitive, return
2276 the string "<code title="">important</code>".</p>
2277 <li><p>Return the empty string.
2278 </ol>
2279 <p class="example">E.g. for <code title="">background-color:lime !IMPORTANT</code> the return
2280 value would be "<code title="">important</code>".</p>
2282 <p>The <dfn id="dom-cssstyledeclaration-setproperty" title="dom-CSSStyleDeclaration-setProperty"><code>setProperty(<var title="">property</var>, <var title="">value</var>,
2283 <var title="">priority</var>)</code></dfn> method must run these steps:</p>
2284 <ol>
2285 <li><p>If the <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> is set, <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a>
2286 an <code class="external"><a href="http://dom.spec.whatwg.org/#nomodificationallowederror">NoModificationAllowedError</a></code> exception and terminate these steps.</li>
2287 <li><p>If <var title="">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 that is defined to be
2288 case-insensitive, or if <var title="">property</var> is not a <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for a supported property that is defined to
2289 be case-sensitive, terminate this algorithm.</li>
2290 <li><p>If <var title="">value</var> is the empty string, invoke <code title="dom-CSSStyleDeclaration-removeProperty"><a href="#dom-cssstyledeclaration-removeproperty">removeProperty()</a></code>
2291 with <var title="">property</var> as argument and terminate this algorithm.</li>
2292 <li><p>If <var title="">priority</var> is neither an <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="">important</code>"
2293 nor the empty string terminate this algorithm.</li>
2294 <li>
2295 <p>If <a href="#parse-a-css-value" title="parse a CSS value">parsing the <var title="">value</var></a> returns null terminate this algorithm.
2296 <p class="note"><var title="">value</var> can not include "<code title="">!important</code>".</p>
2297 </li>
2298 <li><p>Finally, set <var title="">property</var> to <var title="">value</var> with the <i title="">important</i> flag set if <var title="">priority</var> is not the empty
2299 string, and unset otherwise.</li>
2300 </ol>
2302 <p>The <dfn id="dom-cssstyledeclaration-removeproperty" title="dom-CSSStyleDeclaration-removeProperty"><code>removeProperty(<var title="">property</var>)</code></dfn> method must run these steps:</p>
2303 <ol>
2304 <li><p>If the <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> is set, <a class="external" href="http://dom.spec.whatwg.org/#concept-throw" title="concept-throw">throw</a>
2305 a <code class="external"><a href="http://dom.spec.whatwg.org/#nomodificationallowederror">NoModificationAllowedError</a></code> exception and terminate these steps.</li>
2306 <li><p>Let <var title="">value</var> be the return value of invoking <code title="dom-CSSStyleDeclaration-getPropertyValue"><a href="#dom-cssstyledeclaration-getpropertyvalue">getPropertyValue()</a></code>
2307 with <var title="">property</var> as argument.
2308 <li><p>If <var title="">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
2309 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>, and that property is defined to be a case-insensitive property, remove the
2310 declaration.</li>
2311 <li><p>If <var title="">property</var> is a <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for a property of a declaration in the
2312 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>, and that property is defined to be a case-sensitive property, remove the
2313 declaration.</li>
2314 <li><p>Return <var title="">value</var>.
2315 </ol>
2317 <p>The <dfn id="dom-cssstyledeclaration-parentrule" title="dom-CSSStyleDeclaration-parentRule"><code>parentRule</code></dfn> attribute must return the <code><a href="#cssrule">CSSrule</a></code> object the
2318 <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> is object is associated with or null if it is not associated with a <code><a href="#cssrule">CSSrule</a></code> object.</p>
2320 <p>The <dfn id="dom-cssstyledeclaration-cssfloat" title="dom-CSSStyleDeclaration-cssFloat"><code>cssFloat</code></dfn>
2321 attribute, on getting, must return the result of invoking
2322 <code title="dom-CSSStyleDeclaration-getPropertyValue"><a href="#dom-cssstyledeclaration-getpropertyvalue">getPropertyValue()</a></code> with
2323 <code title="">float</code> as argument. On setting, the attribute must invoke
2324 <code title="dom-CSSStyleDeclaration-setProperty"><a href="#dom-cssstyledeclaration-setproperty">setProperty()</a></code> with
2325 <code title="">float</code> as first argument, as second argument the given value, and no third argument.
2326 Any exceptions thrown must be re-thrown.
2328 <p>For each CSS property <var title="">property</var> that the user agent supports,
2329 the following partial interface applies where <var title="">camel-cased attribute</var>
2330 is obtained by running the <a href="#css-property-to-idl-attribute">CSS property to IDL attribute</a> algorithm for
2331 <var>property</var>.</p>
2333 <pre class="idl extract">partial interface <a href="#cssstyledeclaration">CSSStyleDeclaration</a> {
2334 attribute DOMString _<a href="#dom-cssstyledeclaration-camel-cased-attribute" title="dom-CSSStyleDeclaration-camel-cased-attribute"><var title="">camel-cased attribute</var></a>;
2335 };</pre>
2337 <p>The <dfn id="dom-cssstyledeclaration-camel-cased-attribute" title="dom-CSSStyleDeclaration-camel-cased-attribute"><code><var title="">camel-cased attribute</var></code></dfn> attribute, on getting, must return the
2338 result of invoking <code title="dom-CSSStyleDeclaration-getPropertyValue"><a href="#dom-cssstyledeclaration-getpropertyvalue">getPropertyValue()</a></code> with the
2339 argument being the result of running the <a href="#idl-attribute-to-css-property">IDL attribute to CSS property</a>
2340 algorithm for <var title="">camel-cased attribute</var>.</p>
2342 <p>Setting the <code title="dom-CSSStyleDeclaration-camel-cased-attribute"><a href="#dom-cssstyledeclaration-camel-cased-attribute"><var title="">camel-cased attribute</var></a></code> attribute must invoke
2343 <code title="dom-CSSStyleDeclaration-setProperty"><a href="#dom-cssstyledeclaration-setproperty">setProperty()</a></code> with the
2344 first argument being the result of running the <a href="#idl-attribute-to-css-property">IDL attribute to CSS property</a>
2345 algorithm for <var title="">camel-cased attribute</var>, as second argument the given value, and no third argument. Any
2346 exceptions thrown must be re-thrown.</p>
2348 <p class="example">For example, for the 'font-size' property there would be a <code title="">fontSize</code> IDL attribute.
2350 <!-- [GA] Remove spec text for so called "dashed-attribute" until consensus obtains on whether to include in spec.
2352 <p>For each CSS property <var title>property</var> that the user agent supports, except for properties that have no "<code title>-</code>" (U+002D) in the
2353 property name, user agents must act as if there was a WebIDL <span data-anolis-spec=webidl>regular attribute</span> member as part of the
2354 <code>CSSStyleDeclaration</code> interface with the type being <code title>DOMString</code> and the <span data-anolis-spec=webidl>identifier</span> being
2355 <var title>property</var>, and let <var title>dashed attribute</var> be <var title>property</var>.
2357 <p>The <dfn title=dom-CSSStyleDeclaration-dashed-attribute><code><var title>dashed attribute</var></code></dfn> attribute, on getting, must return the
2358 result of invoking <code title=dom-CSSStyleDeclaration-getPropertyValue>getPropertyValue()</code> with the
2359 argument being <var title>dashed attribute</var>.</p>
2361 <p>Setting the <code title=dom-CSSStyleDeclaration-dashed-attribute><var title>dashed attribute</var></code> attribute must invoke
2362 <code title=dom-CSSStyleDeclaration-setProperty>setProperty()</code> with the
2363 first argument being <var title>dashed attribute</var>, as second argument the given value, and no third argument. Any
2364 exceptions thrown must be re-thrown.</p>
2366 <div class=example>
2367 <p>For example, for the 'font-size' property there would be a <code title>font-size</code> IDL attribute. In JavaScript, the property can be accessed as
2368 follows, assuming <var title>element</var> is an <span data-anolis-spec=html title="HTML elements">HTML element</span>:
2369 <pre><var title>element</var>.style['font-size'];</pre>
2370 </div>
2372 <p class=note>WebIDL does not allow dashes in identifiers in its syntax.
2374 <p class=XXX>The <code title=dom-CSSStyleDeclaration-dashed-attribute><var title>dashed attribute</var></code> attributes will be removed from the specification
2375 if implementations remove support. User agents that currently support them are urged to experiment with removing support.
2377 -->
2379 <p>The <dfn id="css-property-to-idl-attribute">CSS property to IDL attribute</dfn> algorithm for <var title="">property</var> is as
2380 follows:</p>
2382 <ol>
2383 <li><p>Let <var title="">output</var> be the empty string.
2385 <li><p>Let <var title="">uppercase next</var> be unset.
2387 <li><p>For each character <var title="">c</var> in <var title="">property</var>:
2389 <ol>
2390 <li><p>If <var title="">c</var> is "<code title="">-</code>" (U+002D), let <var title="">uppercase next</var> be set.
2392 <li><p>Otherwise, if <var title="">uppercase next</var> is set, let <var title="">uppercase next</var> be unset and append <var title="">c</var>
2393 <a class="external" href="http://dom.spec.whatwg.org/#converted-to-ascii-uppercase">converted to ASCII uppercase</a> to <var title="">output</var>.
2395 <li><p>Otherwise, append <var title="">c</var> to <var title="">output</var>.
2396 </ol>
2398 <li><p>Return <var title="">output</var>.
2399 </ol>
2401 <p>The <dfn id="idl-attribute-to-css-property">IDL attribute to CSS property</dfn> algorithm for <var title="">attribute</var> is as
2402 follows:</p>
2404 <ol>
2405 <li><p>Let <var title="">output</var> be the empty string.
2407 <li><p>For each character <var title="">c</var> in <var title="">attribute</var>:
2409 <ol>
2410 <li><p>If <var title="">c</var> is in the range U+0041 to U+005A (ASCII uppercase), append "<code title="">-</code>" (U+002D) followed by <var title="">c</var>
2411 <a class="external" href="http://dom.spec.whatwg.org/#converted-to-ascii-lowercase">converted to ASCII lowercase</a> to <var title="">output</var>.
2413 <li><p>Otherwise, append <var title="">c</var> to <var title="">output</var>.
2414 </ol>
2416 <li><p>Return <var title="">output</var>.
2417 </ol>
2420 <h3 id="css-values"><span class="secno">6.6 </span>CSS Values</h3>
2423 <h4 id="parsing-css-values"><span class="secno">6.6.1 </span>Parsing CSS Values</h4>
2425 <p>To <dfn id="parse-a-css-value">parse a CSS value</dfn> for a given
2426 <var title="">property</var> means to a parse the given value according to
2427 the definition of the property that is an
2428 <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for
2429 <var title="">property</var> in the CSS specification, if <var title="">property</var> is defined to be
2430 case-insensitive, or otherwise that is a
2431 <a class="external" href="http://dom.spec.whatwg.org/#case-sensitive">case-sensitive</a> match for <var title="">property</var> in the
2432 CSS specification. If the given value is <a href="#ignored">ignored</a> return null.
2433 Otherwise return the CSS value for the given <var title="">property</var>.</p>
2435 <p class="note">"<code title="">!important</code>" declarations are not
2436 part of the property value space and will therefore cause
2437 <a href="#parse-a-css-value">parse a CSS value</a> to return null.</p>
2441 <h4 id="serializing-css-values"><span class="secno">6.6.2 </span>Serializing CSS Values</h4>
2443 <!-- based on http://damowmow.com/playground/canon.txt -->
2445 <p>To <dfn id="serialize-a-css-value">serialize a CSS value</dfn> follow
2446 these rules:</p>
2448 <ul>
2449 <li><p><a href="#serialize-a-css-component-value" title="Serialize a CSS component value">Serialize</a> any
2450 CSS component values in the value.</li>
2452 <li><p>Where multiple CSS component values can appear in any order
2453 without changing the meaning of the value (typically represented by a
2454 double bar <code title="">||</code> in the value syntax), use the order as given
2455 in the syntax.</li>
2456 <!-- <code title><border-width> <border-style> <color></code>
2457 for <code title>border</code> -->
2459 <li>
2460 <p>Where CSS component values of the value can be omitted without
2461 changing the meaning of the value (e.g. initial values in shorthand
2462 properties), omit them. If this would remove all the values, then
2463 include the first allowed value.</p>
2465 <p class="example">E.g. <code title="">margin: 20px 20px</code> becomes
2466 <code title="">margin: 20px</code>.</p>
2468 <p class="example">E.g. the value <code title="">0</code> for the
2469 'border' property.</p>
2470 </li>
2472 <li><p>If the value of a shorthand property is requested and it cannot be
2473 computed because the properties associated with the shorthand have values
2474 that cannot be represented by the shorthand the serialization is the
2475 empty string.</li>
2477 <li><p>If a value has a <a href="#whitespace">whitespace</a>-separated list of
2478 CSS component values,
2479 <a href="#serialize-a-whitespace-separated-list" title="serialize a whitespace-separated list">serialize</a> the
2480 value as a whitespace-separated list.</li>
2482 <li><p>If a value has a comma-separated list of
2483 CSS component values,
2484 <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serialize</a> the
2485 value as a comma-separated list.</li>
2486 </ul>
2489 <p>To
2490 <dfn id="serialize-a-css-component-value">serialize a CSS component value</dfn>
2491 depends on the component, as follows:</p>
2493 <dl class="switch">
2494 <dt>keyword</dt>
2495 <dd><p>The keyword
2496 <a class="external" href="http://dom.spec.whatwg.org/#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.</dd>
2498 <dt><angle></dt>
2499 <dd><p>The number of degrees serialized as per <number> followed by
2500 the literal string "<code title="">deg</code>".</dd>
2502 <dt><color></dt>
2503 <dd>
2504 <p>If <color> is a component of a resolved or computed value, then
2505 return the color using the <code title="">rgb()</code> or <code title="">rgba()</code> functional
2506 notation as follows:</p>
2507 <ol>
2508 <li>If the alpha component of the color is equal to one, then return the serialization of the
2509 <code title="">rgb()</code> functional equivalent of the opaque color.</li>
2510 <li>If the alpha component of the color is not equal to one, then return the serialization of the
2511 <code title="">rgba()</code> functional equivalent of the non-opaque color.</li>
2512 </ol>
2513 <p>The serialization of the <code title="">rgb()</code> functional equivalent is the concatenation of the following:</p>
2514 <ol>
2515 <li>The string "<code title="">rgb(</code>".</li>
2516 <li>The shortest base-ten integer serialization of the color's red component.</li>
2517 <li>The string "<code title="">, </code>".</li>
2518 <li>The shortest base-ten serialization of the color's green component.</li>
2519 <li>The string "<code title="">, </code>".</li>
2520 <li>The shortest base-ten serialization of the color's blue component.</li>
2521 <li>The string "<code title="">)</code>".</li>
2522 </ol>
2523 <p>The serialization of the <code title="">rgba()</code> functional equivalent is the concatenation of the following:</p>
2524 <ol>
2525 <li>The string "<code title="">rgba(</code>".</li>
2526 <li>The shortest base-ten serialization of the color's red component.</li>
2527 <li>The string "<code title="">, </code>".</li>
2528 <li>The shortest base-ten serialization of the color's green component.</li>
2529 <li>The string "<code title="">, </code>".</li>
2530 <li>The shortest base-ten serialization of the color's blue component.</li>
2531 <li>The string "<code title="">, </code>".</li>
2532 <li>The shortest serialization of the <number> that denotes the color's alpha component.</li>
2533 <li>The string "<code title="">)</code>".</li>
2534 </ol>
2536 <p>In the above rules, the string "<code title="">, </code>" denotes a COMMA (U+002C) followed by a single SPACE (U+0020).</p>
2538 <p>If <color> is a component of a specified value, then
2539 return the color as follows:</p>
2540 <ol>
2541 <li>If the color was explicitly specified by the author, then return the original, author specified color value.</li>
2542 <li>Otherwise, return the value that would be returned if the color were a component of a computed value.</li>
2543 </ol>
2544 <p class="XXX">Should author specified values be normalized for case? Or should original case be preserved?</p>
2545 </dd>
2546 <!--
2547 <dt>It is a system color</dt>
2549 <dd>See below (you use the representation given in the specification that
2550 defines the keyword).</dd>
2552 <dt>Alpha component is equal to 1.0</dt>
2554 <dd>The color is an uppercase six-digit hexadecimal value, prefixed with a
2555 <code title>#</code> character (U+0023 NUMBER SIGN), with the first two digits
2556 representing the red component, the next two digits representing the green
2557 component, and the last two digits representing the blue component, the
2558 digits being in the range 0-9 A-F (U+0030 to U+0039 and U+0041 to
2559 U+0046).</dd>
2561 <dt>Alpha component is less than 1.0</dt>
2563 <dd>The color is in the CSS <code title>rgba()</code> functional-notation format:
2564 the literal string <code title>rgba</code> (U+0072 U+0067 U+0062 U+0061) followed
2565 by a U+0028 LEFT PARENTHESIS, a <span>color component integer</span>
2566 representing the red component, a <span>color component separator</span>, a
2567 <span>color component integer</span> for the green component, a <span>color
2568 component separator</span>, a <span>color component integer</span> for the
2569 blue component, another <span>color component separator</span> a U+0030
2570 DIGIT ZERO, a U+002E FULL STOP (representing the decimal point), one or
2571 more digits in the range 0-9 (U+0030 to U+0039) representing the fractional
2572 part of the alpha value, and finally a U+0029 RIGHT PARENTHESIS.</dd>
2574 <dt>The keyword <code title>transparent</code> is used</dt>
2576 <dd>The color is <code title>rgba(0, 0, 0, 0)</code>.</dd>
2577 -->
2579 <dt><counter></dt>
2580 <dd>
2581 <p>The concatenation of:</p>
2582 <ol>
2583 <li><p>If <counter> has three CSS component values the string
2584 "<code title="">counters(</code>".</li>
2585 <li><p>If <counter> has two CSS component values the string
2586 "<code title="">counter(</code>".</li>
2587 <li><p>The result of
2588 <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serializing</a> the
2589 <a href="#serialize-a-css-component-value" title="serialize a CSS component value">serialized</a>
2590 CSS component values belonging to <counter> as list while omitting
2591 the last CSS component value if it is 'decimal'.</li>
2592 <li><p>"<code title="">)</code>" (U+0029).</li>
2593 </ol>
2594 </dd>
2596 <dt><frequency></dt>
2597 <dd><p>The frequency in hertz serialized as per <number> followed by
2598 the literal string "<code title="">hz</code>".</dd>
2600 <dt><identifier></dt>
2601 <dd><p>The identifier
2602 <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>.</dd>
2604 <dt><integer></dt>
2605 <dd><p>A base-ten integer using digits 0-9 (U+0030 to U+0039) in the
2606 shortest form possible, preceded by "<code title="">-</code>" (U+002D) if it is
2607 negative.</dd>
2609 <dt><length></dt>
2610 <dd>
2611 <p>A length of zero is represented by the literal string
2612 "<code title="">0px</code>".</p>
2614 <p>Absolute lengths: the number of millimeters serialized as per
2615 <number> followed by the literal string "<code title="">mm</code>".</p>
2616 <p class="XXX">Rumor has it absolute lengths will become relative
2617 lengths. Centimeters would be compatible with <resolution>...</p>
2619 <p>Relative lengths: the <number> component serialized as per
2620 <number> followed by the unit in its canonical form as defined in its
2621 respective specification.</p>
2622 </dd>
2624 <dt><number></dt>
2625 <dd><p class="XXX">Browsers seem to use ToString(), but that might give a
2626 significand which according to some is teh evil (and also currently does
2627 not parse correctly).</dd>
2629 <dt><percentage></dt>
2630 <dd><p>The <number> component serialized as per <number> followed
2631 by the literal string "<code title="">%</code>" (U+0025).</dd>
2633 <dt><resolution></dt>
2634 <dd><p>The resolution in dots per centimeter serialized as per
2635 <number> followed by the literal string "<code title="">dpcm</code>".</dd>
2637 <dt><shape></dt>
2638 <dd><p>The string "<code title="">rect(</code>", followed by the result
2639 of <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serializing</a> the
2640 <a href="#serialize-a-css-component-value" title="serialize a CSS component value">serialized</a>
2641 CSS component values belonging to <shape> as list, followed by
2642 "<code title="">)</code>" (U+0029).</dd>
2644 <dt><string></dt>
2645 <dt><family-name></dt>
2646 <dt><specific-voice></dt>
2647 <dd><p>The string
2648 <a href="#serialize-a-string" title="serialize a string">string escaped</a>.</dd>
2650 <dt><time></dt>
2651 <dd><p>The time in seconds serialized as per <number> followed by
2652 the literal string "<code title="">s</code>".</dd>
2654 <dt><uri></dt>
2655 <dd><p>The <a class="external" href="http://url.spec.whatwg.org/#concept-absolute-url" title="concept-absolute-url">absolute URL</a>
2656 <a href="#serialize-a-url" title="serialize a URL">URL escaped</a>.</dd>
2657 </dl>
2659 <p>
2660 <absolute-size>,
2661 <border-width>,
2662 <border-style>,
2663 <bottom>,
2664 <generic-family>,
2665 <generic-voice>,
2666 <left>,
2667 <margin-width>,
2668 <padding-width>,
2669 <relative-size>,
2670 <right>, and
2671 <top>,
2672 are considered macros by this specification. They all represent instances
2673 of components outlined above.</p>
2675 <p class="XXX">One idea is that we can remove this section somewhere in
2676 the CSS3/CSS4 timeline by moving the above definitions to the drafts that
2677 define the CSS components.</p>
2680 <h5 id="examples-0"><span class="secno">6.6.2.1 </span>Examples</h5>
2682 <p>Here are some examples of before and after results on specified values.
2683 The before column could be what the author wrote in a style sheet, while
2684 the after column shows what querying the DOM would return.</p>
2686 <div class="example">
2687 <table>
2688 <thead>
2689 <tr><th>Before<th>After
2690 <tbody>
2691 <tr><td><code title="">background: none</code><td><code title="">background: rgba(0, 0, 0, 0)</code>
2692 <tr><td><code title="">outline: none</code><td><code title="">outline: invert</code>
2693 <tr><td><code title="">border: none</code><td><code title="">border: medium</code>
2694 <tr><td><code title="">list-style: none</code><td><code title="">list-style: disc</code>
2695 <tr><td><code title="">margin: 0 1px 1px 1px</code><td><code title="">margin: 0px 1px 1px</code>
2696 <tr><td><code title="">azimuth: behind left</code><td><code title="">azimuth: 220deg</code>
2697 <tr><td><code title="">font-family: a, 'b"', serif</code><td><code title="">font-family: "a", "b\"", serif</code>
2698 <tr><td><code title="">content: url('h)i') '\[\]'</code><td><code title="">content: url("h)i") "[]"</code>
2699 <tr><td><code title="">azimuth: leftwards</code><td><code title="">azimuth: leftwards</code>
2700 <tr><td><code title="">color: rgb(18, 52, 86)</code><td><code title="">color: #123456</code>
2701 <tr><td><code title="">color: rgba(000001, 0, 0, 1)</code><td><code title="">color: #000000</code>
2702 </table>
2704 <p class="XXX">Some of these need to be updated per the new rules.</p>
2705 </div>
2708 <h2 id="dom-access-to-css-declaration-blocks"><span class="secno">7 </span>DOM Access to CSS Declaration Blocks</h2>
2711 <h3 id="the-elementcssinlinestyle-interface"><span class="secno">7.1 </span>The <code><a href="#elementcssinlinestyle">ElementCSSInlineStyle</a></code> Interface</h3>
2713 <p>The <code><a href="#elementcssinlinestyle">ElementCSSInlineStyle</a></code> interface provides access to inline style properties of an element.</p>
2715 <pre class="idl">[NoInterfaceObject]
2716 interface <dfn id="elementcssinlinestyle">ElementCSSInlineStyle</dfn> {
2717 [PutForwards=<a href="#dom-cssstyledeclaration-csstext" title="dom-CSSStyleDeclaration-cssText">cssText</a>] readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <a href="#dom-elementcssinlinestyle-style" title="dom-ElementCSSInlineStyle-style">style</a>;
2718 };</pre>
2720 <p>The <dfn id="dom-elementcssinlinestyle-style" title="dom-ElementCSSInlineStyle-style"><code>style</code></dfn> attribute must return a <a href="#css-declaration-block">CSS declaration block</a> with the
2721 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> being set to the declarations
2722 specified in the element's <code title="">style</code> content attribute. If the
2723 <code title="">style</code> content attribute is absent, the object represents an empty
2724 declaration. Mutating the <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> object must set the
2725 <code title="">style</code> content attribute on the element to the
2726 <a href="#serialize-a-css-declaration-block" title="serialize a CSS declaration block">serialization</a> of the
2727 <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code>'s <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a>.
2728 The same object must be returned each time. The object is live; if the
2729 <code title="">style</code> content attribute is set, changed or removed, the <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> must be
2730 updated as appropriate.</p>
2732 <p>If the user agent supports HTML, the following IDL applies: <a class="informative" href="#refsHTML">[HTML]</a>
2734 <pre class="idl"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#htmlelement">HTMLElement</a> implements <a href="#elementcssinlinestyle">ElementCSSInlineStyle</a>;</pre>
2736 <p>If the user agent supports SVG, the following IDL applies: <a class="informative" href="#refsSVG">[SVG]</a>
2738 <pre class="idl">SVGElement implements <a href="#elementcssinlinestyle">ElementCSSInlineStyle</a>;</pre>
2741 <h3 id="extensions-to-the-window-interface"><span class="secno">7.2 </span>Extensions to the <code title="">Window</code> Interface</h3>
2743 <pre class="idl">partial interface <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window">Window</a> {
2744 <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <a href="#dom-window-getcomputedstyle" title="dom-Window-getComputedStyle">getComputedStyle</a>(<a class="external" href="http://dom.spec.whatwg.org/#element">Element</a> elt, <!--
2745 -->optional DOMString pseudoElt);
2746 };</pre>
2748 <p>The <dfn id="dom-window-getcomputedstyle" title="dom-Window-getComputedStyle"><code>getComputedStyle(<var title="">elt</var>, <var title="">pseudoElt</var>)</code></dfn> method must run these
2749 steps:</p>
2750 <ol>
2751 <li><p>Let <var title="">doc</var> be the
2752 <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code>
2753 associated with the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window">Window</a></code> object on
2754 which the method was invoked.</li>
2755 <li><p>Let <var title="">obj</var> be <var title="">elt</var>.</li>
2756 <li><p>If <var title="">pseudoElt</var> is as an
2757 <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for
2758 either ':before' or '::before' let
2759 <var title="">obj</var> be the <a href="#x::before-pseudo-element">::before pseudo-element</a> of
2760 <var title="">elt</var>.</li>
2761 <li><p>If <var title="">pseudoElt</var> is as an
2762 <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for
2763 either ':after' or '::after' let
2764 <var title="">obj</var> be the <a href="#x::after-pseudo-element">::after pseudo-element</a> of
2765 <var title="">elt</var>.</li>
2766 <li>
2767 <p>Return a <a href="#css-declaration-block">CSS declaration block</a> with the
2768 <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> set and the
2769 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all properties
2770 the user agent supports with the value being the <a href="#resolved-value">resolved value</a>
2771 computed for <var title="">obj</var> using the style rules associated
2772 with <var title="">doc</var>.</p>
2773 <p class="note">This means that even if <var title="">obj</var> is in a
2774 different document (e.g. one fetched via <code title="">XMLHttpRequest</code>) it
2775 will still use the style rules associated with the document that is
2776 associated with the global object on which
2777 <code title="dom-Window-getComputedStyle"><a href="#dom-window-getcomputedstyle">getComputedStyle()</a></code> was
2778 invoked to compute the <a href="#css-declaration-block">CSS declaration block</a>.</p>
2779 </li>
2780 </ol>
2781 <p class="note">Because of historical IDL limitations the <code title="dom-Window-getComputedStyle"><a href="#dom-window-getcomputedstyle">getComputedStyle()</a></code> method used to be on
2782 a separate interface, <code title="">ViewCSS</code>.</p>
2786 <h3 id="the-getstyleutils-interface"><span class="secno">7.3 </span>The <code title="">GetStyleUtils</code> Interface</h3>
2788 <p>The <dfn id="associated-document">associated document</dfn> of an object <var title="">obj</var> is <var title="">obj</var>'s <a class="external" href="http://dom.spec.whatwg.org/#concept-node-document" title="concept-node-document">node
2789 document</a> if <var title="">obj</var> is an <code class="external"><a href="http://dom.spec.whatwg.org/#element">Element</a></code> object, or <var title="">obj</var>'s associated
2790 <code class="external"><a href="http://dom.spec.whatwg.org/#element">Element</a></code> object's <a class="external" href="http://dom.spec.whatwg.org/#concept-node-document" title="concept-node-document">node document</a> if <var title="">obj</var> is a
2791 <code><a href="#pseudoelement">PseudoElement</a></code> object.</p>
2793 <pre class="idl">[NoInterfaceObject]
2794 interface <dfn id="getstyleutils">GetStyleUtils</dfn> {
2795 readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <a href="#dom-getstyleutils-specifiedstyle" title="dom-GetStyleUtils-specifiedStyle">specifiedStyle</a>;
2796 readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <a href="#dom-getstyleutils-defaultstyle" title="dom-GetStyleUtils-defaultStyle">defaultStyle</a>;
2797 readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <a href="#dom-getstyleutils-computedstyle" title="dom-GetStyleUtils-computedStyle">computedStyle</a>;
2798 readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <a href="#dom-getstyleutils-usedstyle" title="dom-GetStyleUtils-usedStyle">usedStyle</a>;
2799 };</pre>
2801 <p class="atrisk">The <dfn id="dom-getstyleutils-specifiedstyle" title="dom-GetStyleUtils-specifiedStyle"><code>specifiedStyle</code></dfn> attribute must return a <a href="#css-declaration-block">CSS declaration block</a>
2802 with the <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> set and the
2803 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all properties
2804 the user agent supports with the value being the <a href="#specified-value">specified value</a>
2805 computed for the <a class="external" href="http://dom.spec.whatwg.org/#context-object">context object</a> using the style rules associated
2806 with the <a class="external" href="http://dom.spec.whatwg.org/#context-object">context object</a>'s <a href="#associated-document">associated document</a>.</p>
2808 <p class="atrisk">The <dfn id="dom-getstyleutils-defaultstyle" title="dom-GetStyleUtils-defaultStyle"><code>defaultStyle</code></dfn> attribute must return a <a href="#css-declaration-block">CSS declaration block</a> with
2809 the <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> set and the
2810 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all properties the user agent supports with the value being the <a href="#computed-value">computed
2811 value</a> computed for the <a class="external" href="http://dom.spec.whatwg.org/#context-object">context object</a> using the user agent-level style rules and user-level style rules associated with
2812 the <a class="external" href="http://dom.spec.whatwg.org/#context-object">context object</a>'s <a href="#associated-document">associated document</a>, ignoring transitions, animations, author-level style
2813 rules, author-level presentational hints and override-level style rules.</p>
2815 <p class="atrisk">The <dfn id="dom-getstyleutils-computedstyle" title="dom-GetStyleUtils-computedStyle"><code>computedStyle</code></dfn> attribute must return a <a href="#css-declaration-block">CSS declaration block</a> with
2816 the <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> set and the
2817 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all properties
2818 the user agent supports with the value being the <a href="#computed-value">computed value</a>
2819 computed for the <a class="external" href="http://dom.spec.whatwg.org/#context-object">context object</a> using the style rules associated
2820 with the <a class="external" href="http://dom.spec.whatwg.org/#context-object">context object</a>'s <a href="#associated-document">associated document</a>.</p>
2822 <p class="atrisk">The <dfn id="dom-getstyleutils-usedstyle" title="dom-GetStyleUtils-usedStyle"><code>usedStyle</code></dfn> attribute must return a <a href="#css-declaration-block">CSS declaration block</a> with the
2823 <a href="#concept-css-declaration-block-readonly-flag" title="concept-css-declaration-block-readonly-flag">readonly flag</a> set and the
2824 <a href="#concept-css-declaration-block-declarations" title="concept-css-declaration-block-declarations">declarations</a> set to all properties
2825 the user agent supports with the value being the <a href="#used-value">used value</a>
2826 computed for the <a class="external" href="http://dom.spec.whatwg.org/#context-object">context object</a> using the style rules associated
2827 with the <a class="external" href="http://dom.spec.whatwg.org/#context-object">context object</a>'s <a href="#associated-document">associated document</a>.</p>
2831 <h3 id="extensions-to-the-element-interface"><span class="secno">7.4 </span>Extensions to the <code title="">Element</code> Interface</h3>
2833 <pre class="idl">partial interface <a class="external" href="http://dom.spec.whatwg.org/#element">Element</a> {
2834 <a href="#pseudoelement">PseudoElement</a>? <a href="#dom-element-pseudo" title="dom-Element-pseudo">pseudo</a>(DOMString pseudoElt);
2835 };
2837 <a class="external" href="http://dom.spec.whatwg.org/#element">Element</a> implements <a href="#getstyleutils">GetStyleUtils</a>;</pre>
2839 <p class="atrisk">The <dfn id="dom-element-pseudo" title="dom-Element-pseudo"><code>pseudo(<var title="">pseudoElt</var>)</code></dfn> method, when invoked, must run the following steps:
2840 <ol>
2841 <li><p>If <var title="">pseudoElt</var> is as an <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for either ':before' or
2842 '::before' return the <code><a href="#pseudoelement">PseudoElement</a></code> representing the <a href="#x::before-pseudo-element">::before pseudo-element</a> of the
2843 <a class="external" href="http://dom.spec.whatwg.org/#context-object">context object</a>.</li>
2844 <li><p>If <var title="">pseudoElt</var> is as an <a class="external" href="http://dom.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a> match for either ':after' or
2845 '::after' return the <code><a href="#pseudoelement">PseudoElement</a></code> representing the <a href="#x::after-pseudo-element">::after pseudo-element</a> of the
2846 <a class="external" href="http://dom.spec.whatwg.org/#context-object">context object</a>.</li>
2847 <li><p>Return null.</li>
2848 </ol>
2849 <p>When invoked with an argument that returns a <code><a href="#pseudoelement">PseudoElement</a></code> object representing a particular pseudo-element, the same object must be
2850 returned as returned by an earlier call that represent the same pseudo-element.</p>
2854 <h3 id="the-pseudoelement-interface"><span class="secno">7.5 </span>The <code title="">PseudoElement</code> Interface</h3>
2856 <p class="atrisk">The <code><a href="#pseudoelement">PseudoElement</a></code> interface is used for representing CSS pseudo-elements. A <code><a href="#pseudoelement">PseudoElement</a></code> object is associated with an
2857 <code class="external"><a href="http://dom.spec.whatwg.org/#element">Element</a></code> object.</p>
2859 <pre class="idl">interface <dfn id="pseudoelement">PseudoElement</dfn> {
2860 };
2862 <a href="#pseudoelement">PseudoElement</a> implements <a href="#getstyleutils">GetStyleUtils</a>;</pre>
2865 <h2 id="resolved-values"><span class="secno">8 </span>Resolved Values</h2>
2867 <p><code title="dom-Window-getComputedStyle"><a href="#dom-window-getcomputedstyle">getComputedStyle()</a></code> was
2868 historically defined to return the "computed value" of an element or
2869 pseudo-element. However, the concept of "computed value" changed between
2870 revisions of CSS while the implementation of
2871 <code title="dom-Window-getComputedStyle"><a href="#dom-window-getcomputedstyle">getComputedStyle()</a></code> had to
2872 remain the same for compatibility with deployed scripts. To address this
2873 issue this specification introduces the concept of a
2874 <dfn id="resolved-value">resolved value</dfn>.</p>
2876 <p>The <a href="#resolved-value">resolved value</a> for a given property can be determined
2877 as follows:</p>
2879 <dl class="switch">
2880 <!--
2881 We want to treat shorthand properties like any other value basically.
2883 <dt>'background'
2884 <dt>'border'
2885 <dt>'border-collapse'
2886 <dt>'border-color'
2887 <dt>'border-spacing'
2888 <dt>'border-style'
2889 <dt>'border-top'
2890 <dt>'border-right'
2891 <dt>'border-bottom'
2892 <dt>'border-left'
2893 <dt>'border-width'
2894 <dt>'font'
2895 <dt>'list-style'
2896 <dt>'margin'
2897 <dt>'outline'
2898 <!- - overflow is not - ->
2899 <dt>'padding'
2900 <dt>'pause'
2901 <dd>
2902 <p>There is no <span>resolved value</span>.</p>
2903 </dd>
2904 -->
2906 <dt>'line-height'</dt>
2907 <dd><p>The <a href="#resolved-value">resolved value</a> is the <a href="#used-value">used value</a>.</dd>
2909 <dt>'height'</dt>
2910 <dt>'margin'</dt>
2911 <dt>'margin-bottom'</dt>
2912 <dt>'margin-left'</dt>
2913 <dt>'margin-right'</dt>
2914 <dt>'margin-top'</dt>
2915 <dt>'padding'</dt>
2916 <dt>'padding-bottom'</dt>
2917 <dt>'padding-left'</dt>
2918 <dt>'padding-right'</dt>
2919 <dt>'padding-top'</dt>
2920 <dt>'width'</dt>
2921 <dd><p>If the property applies to the element or pseudo-element and the
2922 <a href="#resolved-value">resolved value</a> of the 'display' property is not
2923 'none', the <a href="#resolved-value">resolved value</a> is the
2924 <a href="#used-value">used value</a>. Otherwise the <a href="#resolved-value">resolved value</a> is the
2925 <a href="#computed-value">computed value</a>.</dd>
2927 <dt>'bottom'</dt>
2928 <dt>'left'</dt>
2929 <dt>'right'</dt>
2930 <dt>'top'</dt>
2931 <dd><p>If the property applies to a positioned element and the
2932 <a href="#resolved-value">resolved value</a> of the 'display' property is not
2933 'none', the <a href="#resolved-value">resolved value</a> is the
2934 <a href="#used-value">used value</a>. Otherwise the <a href="#resolved-value">resolved value</a> is the
2935 computed value.</dd>
2937 <dt>Any other property</dt>
2938 <dd><p>The <a href="#resolved-value">resolved value</a> is the <a href="#computed-value">computed value</a>.</dd>
2939 </dl>
2942 <h2 id="iana-considerations"><span class="secno">9 </span>IANA Considerations</h2>
2945 <h3 id="default-style"><span class="secno">9.1 </span><dfn title="http-default-style"><code>Default-Style</code></dfn></h3>
2947 <p>This section describes a header field for registration in the Permanent
2948 Message Header Field Registry.
2949 <!--<a href="XXX">[RFC3864]</a>--></p>
2951 <dl>
2952 <dt>Header field name</dt>
2953 <dd>Default-Style</dd>
2954 <dt>Applicable protocol</dt>
2955 <dd>http</dd>
2956 <dt>Status</dt>
2957 <dd>standard</dd>
2958 <dt>Author/Change controller</dt>
2959 <dd>W3C</dd>
2960 <dt>Specification document(s)</dt>
2961 <dd>This document is the relevant specification.</dd>
2962 <dt>Related information</dt>
2963 <dd>None.</dd>
2964 </dl>
2967 <h2 class="no-num" id="references">References</h2>
2969 <div id="anolis-references"><dl><dt id="refsCSS">[CSS]
2970 <dd><cite><a href="http://www.w3.org/TR/CSS2/">CSS</a></cite>, Bert Bos, Tantek Çelik, Ian Hickson et al.. W3C.
2972 <dt id="refsCSSNAMESPACES">[CSSNAMESPACES]
2973 <dd><cite><a href="http://dev.w3.org/csswg/css-namespaces/">CSS Namespaces Module</a></cite>, Elika J. Etemad and Anne van Kesteren. W3C.
2975 <dt id="refsCSSPAGE">[CSSPAGE]
2976 <dd><cite><a href="http://dev.w3.org/csswg/css-page/">CSS Paged Media Module</a></cite>, Melinda Grant, Håkon Wium Lie, Elika J. Etemad et al.. W3C.
2978 <dt id="refsDOM">[DOM]
2979 <dd><cite><a href="http://dom.spec.whatwg.org/">DOM</a></cite>, Anne van Kesteren, Aryeh Gregor and Ms2ger. WHATWG.
2981 <dt id="refsDOM2STYLE">[DOM2STYLE]
2982 <dd>(Non-normative) <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.
2984 <dt id="refsFETCH">[FETCH]
2985 <dd><cite><a href="http://fetch.spec.whatwg.org/">Fetch</a></cite>, Anne van Kesteren. WHATWG.
2987 <dt id="refsHTML">[HTML]
2988 <dd><cite><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML</a></cite>, Ian Hickson. WHATWG.
2990 <dt id="refsRFC2119">[RFC2119]
2991 <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.
2993 <dt id="refsSELECTORS">[SELECTORS]
2994 <dd><cite><a href="http://dev.w3.org/csswg/selectors4/">Selectors Level 4</a></cite>, Elika J. Etemad. W3C.
2996 <dt id="refsSVG">[SVG]
2997 <dd>(Non-normative) <cite><a href="http://www.w3.org/TR/SVG/">Scalable Vector Graphics (SVG)</a></cite>, O. Andersson, R. Berjon, E. Dahlström et al.. W3C.
2999 <dt id="refsURL">[URL]
3000 <dd><cite><a href="http://url.spec.whatwg.org/">URL</a></cite>, Anne van Kesteren. WHATWG.
3002 <dt id="refsXML">[XML]
3003 <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.
3005 <dt id="refsXMLSS">[XMLSS]
3006 <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.
3008 </dl></div>
3011 <h2 class="no-num" id="change-history">Change History</h2>
3013 <p>This section documents the primary technical changes of CSSOM related functionality, with a focus on changes to API signatures.</p>
3015 <h3 class="no-num" id="changes-from-dom-2-style">Changes From DOM-2 Style</h3>
3017 <ul>
3018 <li><p>Remove definition of <code title="">CSSRule.UNKNOWN_RULE</code>, reserving its value (0) to prevent future reuse.</li>
3019 <li><p>Remove definition of <code title="">DOMImplementationCSS</code> interface.</li>
3020 </ul>
3023 <h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
3025 <p>The editors would like to thank
3027 Alexey Feldgendler,
3028 Björn Höhrmann,
3029 Boris Zbasky,
3030 Brian Kardell,
3031 Christian Krebs,
3032 Daniel Glazman,
3033 David Baron,
3034 <i>fantasai</i>,
3035 Hallvord R. M. Steen,
3036 Ian Hickson,
3037 John Daggett,
3038 Lachlan Hunt,
3039 Morten Stenshorne,
3040 Philip Taylor,
3041 Robert O'Callahan,
3042 Sjoerd Visscher,
3043 <!--Simon Pieters,-->
3044 Sylvain Galineau,
3045 Tarquin Wilton-Jones, and
3046 Zack Weinberg
3048 for contributing to this specification.</p>
3050 <p>Additional thanks to Ian Hickson for writing the
3051 initial version of the alternative style sheets API and canonicalization
3052 (now serialization) rules for CSS values.</p>
3054 <!-- XXX NOTES
3056 <style type=text/css;charset=utf-8> does create a StyleSheet in Firefox
3057 and Opera, but does not create a StyleSheet in IE. I prefer IE.
3059 <style type=TEXT/CSS> sets the style sheet type to text/css in Firefox and
3060 TEXT/CSS in Opera and IE. I prefer Firefox.
3062 <style> sets the style sheet location to the document location Firefox,
3063 the empty string in IE, and null in Opera. I prefer Opera
3065 <style media="x"> invokes .sheet.media.mediaText = "x"
3067 <style> does not "have" a title
3069 .cascadedStyle that returns less keywords than currentStyle, no inherit,
3070 etc.
3072 Markup style: http://krijnhoetmer.nl/irc-logs/whatwg/20100204#l-529
3073 -->
