Thu, 24 Apr 2014 11:45:59 -0700
[css-grid] Rename Grid Layout Algorithm, move the intrinsic sizing section around.
simonp@8226 | 1 | <!doctype html> |
simonp@8226 | 2 | <html lang="en-US"> |
simonp@8226 | 3 | <head> |
simonp@8226 | 4 | <meta charset=utf-8> |
simonp@8226 | 5 | <title>CSS Object Model (CSSOM)</title> |
simonp@8435 | 6 | <link rel=stylesheet href=../default.css> |
simonp@8226 | 7 | <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/W3C-[STATUS]"> |
simonp@8226 | 8 | </head> |
simonp@8226 | 9 | <body class="draft"> |
simonp@9661 | 10 | |
simonp@8244 | 11 | <div class="head"> |
simonp@8244 | 12 | <!--logo--> |
simonp@8244 | 13 | |
simonp@8244 | 14 | |
simonp@8244 | 15 | <h1>CSS Object Model (CSSOM)</h1> |
simonp@8244 | 16 | |
simonp@8244 | 17 | |
simonp@8244 | 18 | <h2 class="no-num no-toc" id="w3c-doctype">[LONGSTATUS] [DATE: 3 August 2002]</h2> |
simonp@8244 | 19 | |
simonp@8244 | 20 | <dl> |
simonp@8244 | 21 | |
simonp@8244 | 22 | <dt>This Version:</dt> |
simonp@8244 | 23 | <dd class=dontpublish><a href="http://dev.w3.org/csswg/cssom/">http://dev.w3.org/csswg/cssom/</a></dd> |
simonp@8244 | 24 | <dd class=publish><a href="[VERSION]">[VERSION]</a></dd> |
simonp@8244 | 25 | |
simonp@8244 | 26 | <dt class=dontpublish>Participate:</dt> |
simonp@8304 | 27 | <dd class=dontpublish><a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a> |
simonp@8304 | 28 | (<a href="http://lists.w3.org/Archives/Public/www-style/">archives</a>)</dd> |
simonp@8304 | 29 | <dd class=dontpublish><a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?product=CSS&component=CSSOM">File a bug</a> |
simonp@8304 | 30 | (<a href="https://www.w3.org/Bugs/Public/buglist.cgi?component=CSSOM&product=CSS&resolution=---">open bugs</a>) |
simonp@13690 | 31 | <script async="" src="http://resources.whatwg.org/file-bug.js"></script></dd> |
simonp@8244 | 32 | <dd class=dontpublish><a href="irc://irc.w3.org:6665/css">IRC: #css on W3C</a></dd> |
simonp@8244 | 33 | |
simonp@8244 | 34 | <dt class=publish>Latest Version:</dt> |
simonp@8244 | 35 | <dd class=publish><a href="[LATEST]">[LATEST]</a></dd> |
simonp@8244 | 36 | |
simonp@8244 | 37 | <dt class=publish>Latest Editor's draft:</dt> |
simonp@8244 | 38 | <dd class=publish><a href="http://dev.w3.org/csswg/cssom/">http://dev.w3.org/csswg/cssom/</a></dd> |
simonp@8244 | 39 | |
simonp@9662 | 40 | <dt>Previous Versions:</dt> |
simonp@9662 | 41 | <dd><a href="http://www.w3.org/TR/2011/WD-cssom-20110712/">http://www.w3.org/TR/2011/WD-cssom-20110712/</a></dd> |
simonp@9662 | 42 | <dd><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> |
simonp@8244 | 43 | |
simonp@8244 | 44 | <dt>Editors:</dt> |
simonp@8539 | 45 | <dd>Simon Pieters |
simonp@8244 | 46 | (<a href="http://www.opera.com/">Opera Software ASA</a>) |
simonp@9714 | 47 | <<a href="mailto:simonp@opera.com">simonp@opera.com</a>></dd> |
simonp@8244 | 48 | <dd><a href="http://www.w3.org/wiki/User:Gadams">Glenn Adams</a> |
simonp@8244 | 49 | (<a href="http://www.cox.com/">Cox Communications, Inc.</a>) |
simonp@8244 | 50 | <<a href="mailto:glenn.adams@cox.com">glenn.adams@cox.com</a>></dd> |
simonp@8244 | 51 | |
simonp@8244 | 52 | <dt>Previous Editor:</dt> |
simonp@8244 | 53 | <dd><a href="http://annevankesteren.nl/">Anne van Kesteren</a> |
simonp@8244 | 54 | (<a href="http://www.opera.com/">Opera Software ASA</a>) |
simonp@8551 | 55 | <<a href="mailto:annevk@annevk.nl">annevk@annevk.nl</a>></dd> |
simonp@8244 | 56 | </dl> |
simonp@8244 | 57 | |
simonp@8244 | 58 | <!--copyright--> |
simonp@8244 | 59 | |
simonp@8244 | 60 | </div> |
simonp@8244 | 61 | |
simonp@8244 | 62 | <hr class="top"> |
simonp@8244 | 63 | |
simonp@8244 | 64 | |
simonp@8244 | 65 | <h2 class="no-num no-toc">Abstract</h2> |
simonp@8244 | 66 | |
simonp@8244 | 67 | <p>CSSOM defines APIs (including generic parsing and serialization rules) |
simonp@8244 | 68 | for Media Queries, Selectors, and of course CSS itself.</p> |
simonp@8244 | 69 | |
simonp@8244 | 70 | |
simonp@8244 | 71 | <h2 class="no-num no-toc" id="sotd">Status of This Document</h2> |
simonp@8244 | 72 | |
simonp@8244 | 73 | <p>This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment. |
simonp@8244 | 74 | Its publication here does not imply endorsement of its contents by W3C or by the CSS Working Group. Don't cite |
simonp@8244 | 75 | this document other than as work in progress.</p> |
simonp@8244 | 76 | |
simonp@8244 | 77 | <p class="note">Implementers should note well that this specification is an ongoing effort to sort out |
simonp@8371 | 78 | what has been widely implemented and deployed from <span data-anolis-ref class=informative>DOM2STYLE</span> as well as common extensions thereto, some details |
simonp@8244 | 79 | of which are currently interoperable and others which are not currently interoperable. As this specification moves |
simonp@8244 | 80 | forward, it is hoped that these differences will be resolved and an unambiguous and adequate consensus-based |
simonp@8244 | 81 | specification will emerge.</p> |
simonp@8244 | 82 | |
simonp@8244 | 83 | <p><em>This section describes the status of this document at the time of |
simonp@8244 | 84 | its publication. Other documents may supersede this document. A list of |
simonp@8244 | 85 | current W3C publications and the latest revision of this technical report |
simonp@8244 | 86 | can be found in the |
simonp@8244 | 87 | <a href="http://www.w3.org/TR/">W3C technical reports index at http://www.w3.org/TR/.</a></em> |
simonp@8244 | 88 | |
simonp@8244 | 89 | <p class="dontpublish">This is the [DATE: 3 August 2002] [LONGSTATUS] of CSSOM. Please send comments to |
simonp@8244 | 90 | <a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a> |
simonp@8244 | 91 | (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) |
simonp@8244 | 92 | with <samp>[cssom]</samp> at the start of the subject line. |
simonp@8244 | 93 | |
simonp@8244 | 94 | <p class="publish">This is the [DATE] First Public Working Draft of CSSOM, produced by the |
simonp@8244 | 95 | <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part |
simonp@8244 | 96 | of the <a href="http://www.w3.org/Style/">Style Activity</a>). |
simonp@8244 | 97 | <!--XXX remove "First Public" after initial publication --> |
simonp@8244 | 98 | |
simonp@8244 | 99 | <p>This document was produced by a group operating under the |
simonp@8244 | 100 | <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>. |
simonp@8244 | 101 | W3C maintains a |
simonp@8244 | 102 | <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel=disclosure>public list of any patent disclosures</a> |
simonp@8244 | 103 | made in connection with the deliverables of the group; that page also |
simonp@8244 | 104 | includes instructions for disclosing a patent. An individual who has |
simonp@8244 | 105 | actual knowledge of a patent which the individual believes contains |
simonp@8244 | 106 | <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> |
simonp@8244 | 107 | must disclose the information in accordance with |
simonp@8244 | 108 | <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>.</p> |
simonp@8244 | 109 | |
simonp@8244 | 110 | |
simonp@8244 | 111 | <h2 class="no-num no-toc" id="toc">Table of Contents</h2> |
simonp@8244 | 112 | |
simonp@8244 | 113 | <!--toc--> |
simonp@8244 | 114 | |
simonp@8244 | 115 | |
simonp@8244 | 116 | <h2>Introduction</h2> |
simonp@8244 | 117 | |
simonp@8244 | 118 | <p>This document formally specifies the core features of the CSS Object Model (CSSOM). Other documents in the CSSOM family of specifications |
simonp@8244 | 119 | as well as other CSS related specifications define extensions to these core features.</p> |
simonp@8244 | 120 | |
simonp@8244 | 121 | <p>The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to |
simonp@8244 | 122 | and manipulation of style related state information and processes.</p> |
simonp@8244 | 123 | |
simonp@8244 | 124 | <p>The features defined below are fundamentally based on prior specifications of the W3C DOM Working Group, primarily |
simonp@8371 | 125 | <span data-anolis-ref class=informative>DOM2STYLE</span>. The purposes of the present document are (1) to improve on that prior work by providing |
simonp@8244 | 126 | more technical specificity (so as to improve testability and interoperability), (2) to deprecate or remove certain less-widely implemented |
simonp@8244 | 127 | features no longer considered to be essential in this context, and (3) to newly specify certain extensions that have been |
simonp@8244 | 128 | or expected to be widely implemented.</p> |
simonp@8244 | 129 | |
simonp@9662 | 130 | <!--<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>--> |
simonp@8244 | 131 | |
simonp@8244 | 132 | |
simonp@8244 | 133 | <h2>Conformance</h2> |
simonp@8244 | 134 | |
simonp@8244 | 135 | <p>All diagrams, examples, and notes in this specification are |
simonp@8244 | 136 | non-normative, as are all sections explicitly marked non-normative. |
simonp@8244 | 137 | Everything else in this specification is normative. |
simonp@8244 | 138 | |
simonp@8244 | 139 | <p>The key words "MUST", "MUST NOT", "REQUIRED", <!--"SHALL", "SHALL |
simonp@8244 | 140 | NOT",--> "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and |
simonp@8244 | 141 | "OPTIONAL" in the normative parts of this document are to be |
simonp@8244 | 142 | interpreted as described in RFC2119. For readability, these words do |
simonp@8244 | 143 | not appear in all uppercase letters in this specification. |
simonp@8244 | 144 | <span data-anolis-ref>RFC2119</span> |
simonp@8244 | 145 | |
simonp@8244 | 146 | <p>Requirements phrased in the imperative as part of algorithms |
simonp@8244 | 147 | (such as "strip any leading space characters" or "return false and |
simonp@8244 | 148 | terminate these steps") are to be interpreted with the meaning of the |
simonp@8244 | 149 | key word ("must", "should", "may", etc) used in introducing the |
simonp@8244 | 150 | algorithm. |
simonp@8244 | 151 | |
simonp@8244 | 152 | <p>Conformance requirements phrased as algorithms or specific steps |
simonp@8244 | 153 | may be implemented in any manner, so long as the end result is |
simonp@8244 | 154 | equivalent. (In particular, the algorithms defined in this |
simonp@8244 | 155 | specification are intended to be easy to follow, and not intended to |
simonp@8244 | 156 | be performant.) |
simonp@8244 | 157 | |
simonp@8244 | 158 | <p id="hardwareLimitations">User agents may impose |
simonp@8244 | 159 | implementation-specific limits on otherwise unconstrained inputs, |
simonp@8244 | 160 | e.g. to prevent denial of service attacks, to guard against running |
simonp@8553 | 161 | out of memory, or to work around platform-specific limitations. <!--fingerprint--> |
simonp@8244 | 162 | |
simonp@8304 | 163 | <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 |
simonp@8304 | 164 | e.g. the author can't change the behavior by overriding attributes or methods with custom properties or functions in ECMAScript. |
simonp@8244 | 165 | |
simonp@8244 | 166 | <p>Unless otherwise stated, string comparisons are done in a |
simonp@8244 | 167 | <span data-anolis-spec=dom>case-sensitive</span> manner. |
simonp@8244 | 168 | |
simonp@8244 | 169 | |
simonp@8244 | 170 | <h2>Terminology</h2> |
simonp@8244 | 171 | |
simonp@8244 | 172 | <p>This specification employs certain terminology from the following documents: |
simonp@8244 | 173 | <cite>DOM</cite>, |
simonp@8244 | 174 | <cite>HTML</cite>, |
simonp@8433 | 175 | <cite>CSS Syntax</cite>, |
simon@9919 | 176 | <cite>Encoding</cite>, |
simonp@8244 | 177 | <cite>URL</cite>, |
simonp@8372 | 178 | <cite>Fetch</cite>, |
simonp@8244 | 179 | <cite>Associating Style Sheets with XML documents</cite> |
simonp@8244 | 180 | and |
simonp@8244 | 181 | <cite>XML</cite>. |
simonp@8244 | 182 | <span data-anolis-ref>DOM</span> |
simonp@8244 | 183 | <span data-anolis-ref>HTML</span> |
simonp@8433 | 184 | <span data-anolis-ref>CSSSYNTAX</span> |
simon@9919 | 185 | <span data-anolis-ref>ENCODING</span> |
simonp@8244 | 186 | <span data-anolis-ref>URL</span> |
simonp@8372 | 187 | <span data-anolis-ref>FETCH</span> |
simonp@8244 | 188 | <span data-anolis-ref>XMLSS</span> |
simonp@8244 | 189 | <span data-anolis-ref>XML</span> |
simonp@8244 | 190 | |
simonp@8244 | 191 | <p>When this specification talks about object |
simonp@8406 | 192 | <code title><var>A</var></code> where <code title><var>A</var></code> is actually an interface, it generally means an object implementing interface |
simonp@8406 | 193 | <code title><var>A</var></code>.</p> |
simonp@8244 | 194 | |
simonp@8811 | 195 | <p>The terms <dfn>whitespace</dfn> and <dfn>ignored</dfn> are defined in CSS. <span data-anolis-ref>CSS</span> |
simonp@8811 | 196 | |
simonp@8811 | 197 | <p>The terms <dfn>cascaded value</dfn>, <dfn>computed value</dfn> and <dfn>used value</dfn> are defined in CSS Cascade and Inheritance. |
simonp@8811 | 198 | <span data-anolis-ref>CSSCASCADE</span> |
simonp@8327 | 199 | |
simonp@8327 | 200 | <p>The terms <dfn>simple selector</dfn>, <dfn>sequence of simple selectors</dfn>, <dfn>universal selector</dfn> and <dfn>group of selectors</dfn> are defined in |
simonp@8327 | 201 | Selectors. <span data-anolis-ref>SELECTORS</span> |
simonp@8327 | 202 | |
simonp@8327 | 203 | <p>The terms <dfn>namespace prefix</dfn> and <dfn>default namespace</dfn> are defined in CSS Namespaces Module. <span data-anolis-ref>CSSNAMESPACES</span> |
simonp@8327 | 204 | |
simonp@8327 | 205 | <p>The term <dfn>list of CSS page selectors</dfn> refers to the comma-separated list of page selectors, as defined in CSS Paged Media Module. |
simonp@8327 | 206 | <span data-anolis-ref>CSSPAGE</span> |
simonp@8244 | 207 | |
simonp@9044 | 208 | <p>The terms <dfn>set</dfn> and <dfn>unset</dfn> to refer to the true and |
simonp@8304 | 209 | false values of binary flags or variables, respectively. These terms are also used as verbs in which case they refer to |
simonp@8304 | 210 | mutating some value to make it true or false, respectively.</p> |
simonp@8244 | 211 | |
simonp@8327 | 212 | <p>The term <dfn>supported styling language</dfn> refers to CSS. |
simonp@8327 | 213 | |
simonp@8327 | 214 | <p class=note>If another styling language becomes supported in user agents, this specification is expected to be updated as necessary. |
simonp@8244 | 215 | |
simonp@8592 | 216 | <p>The term <dfn>supported CSS property</dfn> refers to a CSS property that the user agent implements, and that is defined to be a case-insensitive property in |
simonp@8592 | 217 | the CSS specification. A <span>supported CSS property</span> must be in its lowercase form for the purpose of comparisons this specification. |
simonp@8592 | 218 | |
simonp@8999 | 219 | <p>The term <dfn>author-defined CSS property</dfn> refers to <code title>var-*</code> properties as defined in CSS Custom Properties for Cascading Variables, |
simonp@8999 | 220 | and are case-sensitive. <span data-anolis-ref>CSSVARIABLES</span> |
simonp@8592 | 221 | |
simonp@8329 | 222 | <p>The terms <dfn>::before pseudo-element</dfn> and <dfn>::after pseudo-element</dfn> refer to the :before and :after pseudo-elements in CSS, except in this |
simonp@8329 | 223 | specification the pseudo-elements are assumed to exist for all elements even if no box is generated for them. <span data-anolis-ref>CSS</span> |
simonp@8329 | 224 | |
simon@9919 | 225 | <p>The term <dfn>environment encoding</dfn> is defined in CSS Syntax Module. <span data-anolis-ref>CSSSYNTAX</span> |
simon@9919 | 226 | |
simon@9919 | 227 | <p>The algorithm <dfn>get an encoding</dfn> is defined in the Encoding standard. <span data-anolis-ref>ENCODING</span> |
simon@9919 | 228 | |
simon@9919 | 229 | <p>The term <dfn>document's character encoding</dfn> is defined in DOM. <span data-anolis-ref>DOM</span> |
simon@9919 | 230 | |
simonp@8244 | 231 | <h3>Common Serializing Idioms</h3> |
simonp@8244 | 232 | |
simonp@8244 | 233 | <p>To <dfn>escape a character</dfn> means to create a string of |
simonp@8304 | 234 | "<code title>\</code>" (U+005C), followed by the character.</p> |
simonp@8244 | 235 | |
simonp@8244 | 236 | <p>To <dfn>escape a character as code point</dfn> means to create a |
simonp@8304 | 237 | string of "<code title>\</code>" (U+005C), followed by the Unicode code point as |
simonp@8244 | 238 | the smallest possible number of hexadecimal digits in the range 0-9 a-f |
simonp@8244 | 239 | (U+0030 to U+0039 and U+0061 to U+0066) to represent the code point in |
simonp@8244 | 240 | base 16, followed by a single SPACE (U+0020).</p> |
simonp@8244 | 241 | |
simonp@8244 | 242 | <p>To <dfn>serialize an identifier</dfn> means to create a string represented |
simonp@8244 | 243 | by the concatenation of, for each character of the identifier:</p> |
simonp@8244 | 244 | |
simonp@8244 | 245 | <ul> |
simonp@8244 | 246 | <li>If the character is NULL (U+0000), then <span data-anolis-spec=dom title=concept-throw>throw</span> an |
simonp@8244 | 247 | <code data-anolis-spec=dom>InvalidCharacterError</code> exception and terminate these steps.</li> |
simonp@8244 | 248 | <li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or |
simonp@8244 | 249 | [\7f-\9f] (U+007F to U+009F), then the character |
simonp@8244 | 250 | <span title="escape a character as code point">escaped as code point</span>.</li> |
simonp@8244 | 251 | <li>If the character is the first character and is in the range [0-9] |
simonp@8244 | 252 | (U+0030 to U+0039), then the character |
simonp@8244 | 253 | <span title="escape a character as code point">escaped as code point</span>.</li> |
simonp@8244 | 254 | <li>If the character is the second character and is in the range [0-9] |
simonp@8304 | 255 | (U+0030 to U+0039) and the first character is a "<code title>-</code>" |
simonp@8244 | 256 | (U+002D), then the character |
simonp@8244 | 257 | <span title="escape a character as code point">escaped as code point</span>.</li> |
simonp@8304 | 258 | <li>If the character is the second character and is "<code title>-</code>" |
simonp@8304 | 259 | (U+002D) and the first character is "<code title>-</code>" as well, then the |
simonp@8244 | 260 | <span title="escape a character">escaped</span> character.</li> |
simonp@8244 | 261 | <li>If the character is not handled by one of the above rules and is |
simonp@8304 | 262 | greater than or equal to U+0080, is "<code title>-</code>" (U+002D) or |
simonp@8304 | 263 | "<code title>_</code>" (U+005F), or is in one of the ranges [0-9] (U+0030 to |
simonp@8244 | 264 | U+0039), [A-Z] (U+0041 to U+005A), or [a-z] (U+0061 to U+007A), then the character |
simonp@8244 | 265 | itself.</li> |
simonp@8244 | 266 | <li>Otherwise, the <span title="escape a character">escaped</span> |
simonp@8244 | 267 | character.</li> |
simonp@8244 | 268 | </ul> |
simonp@8244 | 269 | |
simonp@8244 | 270 | <p>To <dfn>serialize a string</dfn> means to create a string represented |
simonp@8346 | 271 | by '"' (U+0022), followed by the result of applying the rules |
simonp@8244 | 272 | below to each character of the given string, followed by |
simonp@8346 | 273 | '"' (U+0022):</p> |
simonp@8244 | 274 | |
simonp@8244 | 275 | <ul> |
simonp@8244 | 276 | <li>If the character is NULL (U+0000), then <span data-anolis-spec=dom title=concept-throw>throw</span> an |
simonp@8244 | 277 | <code data-anolis-spec=dom>InvalidCharacterError</code> exception and terminate these steps.</li> |
simonp@8244 | 278 | <li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or [\7f-\9f] (U+007F to |
simonp@8244 | 279 | U+009F), the character <span title="escape a character as code point">escaped as code point</span>.</li> |
simonp@8346 | 280 | <li>If the character is '"' (U+0022) or "<code title>\</code>" |
simonp@8244 | 281 | (U+005C), the <span title="escape a character">escaped</span> character.</li> |
simonp@8244 | 282 | <li>Otherwise, the character itself.</li> |
simonp@8244 | 283 | </ul> |
simonp@8244 | 284 | |
simonp@8304 | 285 | <p class="note">"<code title>'</code>" (U+0027) is not escaped because strings |
simonp@8346 | 286 | are always serialized with '"' (U+0022).</p> |
simonp@8244 | 287 | |
simonp@8244 | 288 | <p>To <dfn>serialize a URL</dfn> means to create a string represented by |
simonp@8304 | 289 | "<code title>url(</code>", followed by the |
simonp@8244 | 290 | <span title="serialize a string">string escaped</span> value of the given |
simonp@8304 | 291 | string, followed by "<code title>)</code>".</p> |
simonp@8244 | 292 | |
simonp@8244 | 293 | <p>To <dfn>serialize a comma-separated list</dfn> concatenate all items of |
simonp@8304 | 294 | the list in list order while separating them by "<code title>, </code>", i.e., |
simonp@8244 | 295 | COMMA (U+002C) followed by a single SPACE (U+0020).</p> |
simonp@8244 | 296 | |
simonp@8244 | 297 | <p>To <dfn>serialize a whitespace-separated list</dfn> concatenate all |
simonp@8304 | 298 | items of the list in list order while separating them by "<code title> </code>", i.e., |
simonp@8244 | 299 | a single SPACE (U+0020).</p> |
simonp@8244 | 300 | |
simonp@8244 | 301 | <p class="note">When serializing a list according to the above rules, |
simonp@8244 | 302 | extraneous whitespace is not inserted prior to the first item or subsequent to |
simonp@8244 | 303 | the last item. Unless otherwise specified, an empty list is serialized as the |
simonp@8244 | 304 | empty string.</p> |
simonp@8244 | 305 | |
simonp@8244 | 306 | |
simonp@8244 | 307 | <h2>Media Queries</h2> |
simonp@8244 | 308 | |
simonp@8244 | 309 | <p>Media queries are defined by the Media Queries specification. This |
simonp@8244 | 310 | section defines various concepts around media queries, including their API |
simonp@8244 | 311 | and serialization form.</p> |
simonp@8244 | 312 | |
simonp@8244 | 313 | <!-- XXX ref --> |
simonp@8244 | 314 | |
simonp@8244 | 315 | |
simonp@8244 | 316 | <h3>Parsing Media Queries</h3> |
simonp@8244 | 317 | |
simonp@8244 | 318 | <p>To |
simonp@8244 | 319 | <dfn>parse a media query list</dfn> for a |
simonp@8406 | 320 | given string <var>s</var> into a media query list is defined in |
simonp@8244 | 321 | the Media Queries specification. Return the list of one or more media |
simonp@8244 | 322 | queries that the algorithm defined there gives.</p> <!-- XXX ref --> |
simonp@8244 | 323 | |
simonp@8244 | 324 | <p class="note">A media query that ends up being "ignored" will turn |
simonp@8304 | 325 | into "<code title>not all</code>".</p> |
simonp@8244 | 326 | |
simonp@8244 | 327 | <p>To |
simonp@8244 | 328 | <dfn>parse a media query</dfn> for a given string |
simonp@8406 | 329 | <var>s</var> means to follow the |
simonp@8289 | 330 | <span>parse a media query list</span> steps and return null if more |
simonp@8244 | 331 | than one media query is returned or a media query if a |
simonp@8244 | 332 | single media query is returned.</p> |
simonp@8244 | 333 | |
simonp@8244 | 334 | <p class="note">Again, a media query that ends up being "ignored" will |
simonp@8304 | 335 | turn into "<code title>not all</code>".</p> |
simonp@8244 | 336 | |
simonp@8244 | 337 | |
simonp@8244 | 338 | <h3>Serializing Media Queries</h3> |
simonp@8244 | 339 | |
simonp@8244 | 340 | <p>To |
simonp@8244 | 341 | <dfn>serialize a media query list</dfn> |
simonp@8244 | 342 | run these steps:</p> |
simonp@8244 | 343 | |
simonp@8244 | 344 | <ol> |
simonp@8244 | 345 | <li><p>If the media query list is empty return the empty string and |
simonp@8244 | 346 | terminate these steps.</p></li> |
simonp@8244 | 347 | |
simonp@8581 | 348 | <li><p><span title="serialize a media query">Serialize</span> each media query in the list of media queries, in the same order as they appear in the list of |
simonp@8581 | 349 | media queries, and then <span title="serialize a comma-separated list">serialize</span> the list.</p></li> |
simonp@8244 | 350 | </ol> |
simonp@8244 | 351 | |
simonp@8244 | 352 | <p>To |
simonp@8244 | 353 | <dfn>serialize a media query</dfn> let |
simonp@8406 | 354 | <var>s</var> be the empty string, run the steps below, and |
simonp@8406 | 355 | finally return <var>s</var>:</p> |
simonp@8244 | 356 | |
simonp@8244 | 357 | <ol> |
simonp@8304 | 358 | <li><p>If the media query is negated append "<code title>not</code>", followed |
simonp@8406 | 359 | by a single SPACE (U+0020), to <var>s</var>.</p></li> |
simonp@8406 | 360 | |
simonp@8406 | 361 | <li><p>Let <var>type</var> be the media type of the media query, |
simonp@8244 | 362 | <span title="serialize an identifier">escaped</span> and |
simonp@8244 | 363 | <span data-anolis-spec=dom>converted to ASCII lowercase</span>.</p></li> |
simonp@8244 | 364 | |
simonp@8244 | 365 | <li><p>If the media query does not contain media features append |
simonp@8406 | 366 | <var>type</var>, to <var>s</var>, |
simonp@8406 | 367 | then return <var>s</var> and terminate this algorithm.</p></li> |
simonp@8406 | 368 | |
simonp@8406 | 369 | <li><p>If <var>type</var> is not "<code title>all</code>" or if the |
simonp@8406 | 370 | media query is negated append <var>type</var>, followed by a |
simonp@8304 | 371 | single SPACE (U+0020), followed by "<code title>and</code>", followed by a single SPACE |
simonp@8406 | 372 | (U+0020), to <var>s</var>.</p></li> |
simonp@8244 | 373 | |
simonp@8244 | 374 | <li><p>Sort the media features in lexicographical order.</p></li> |
simonp@8244 | 375 | |
simonp@8244 | 376 | <li> |
simonp@8244 | 377 | <p>Then, for each media feature:</p> |
simonp@8226 | 378 | |
simonp@8226 | 379 | <ol> |
simonp@8304 | 380 | <li><p>Append a "<code title>(</code>" (U+0028), followed by the media feature |
simonp@8244 | 381 | name, <span data-anolis-spec=dom>converted to ASCII lowercase</span>, |
simonp@8406 | 382 | to <var>s</var>.</p></li> |
simonp@8244 | 383 | |
simonp@8304 | 384 | <li><p>If a value is given append a "<code title>:</code>" (U+003A), followed |
simonp@8244 | 385 | by a single SPACE (U+0020), followed by the |
simonp@8244 | 386 | <span title="serialize a media feature value">serialized media feature value</span>, |
simonp@8406 | 387 | to <var>s</var>.</p></li> |
simonp@8244 | 388 | |
simonp@8304 | 389 | <li><p>Append a "<code title>)</code>" (U+0029) to |
simonp@8406 | 390 | <var>s</var>.</p></li> |
simonp@8244 | 391 | |
simonp@8244 | 392 | <li><p>If this is not the last media feature append a single SPACE (U+0020), |
simonp@8304 | 393 | followed by "<code title>and</code>", followed by a single SPACE (U+0020), to |
simonp@8406 | 394 | <var>s</var>.</p></li> |
simonp@8226 | 395 | </ol> |
simonp@8244 | 396 | </li> |
simonp@8244 | 397 | </ol> |
simonp@8244 | 398 | |
simonp@8244 | 399 | <div class="example"> |
simonp@8244 | 400 | <p>Here are some examples of input (first column) and output (second |
simonp@8244 | 401 | column):</p> |
simonp@8244 | 402 | |
simonp@8559 | 403 | <table class="complex data"> |
simonp@8244 | 404 | <thead> |
simonp@8244 | 405 | <tr><th>Input<th>Output |
simonp@8244 | 406 | <tbody> |
simonp@8226 | 407 | <tr> |
simonp@8244 | 408 | <td><pre>not screen and (min-WIDTH:5px) AND (max-width:40px)</pre> |
simonp@8244 | 409 | <td><pre>not screen and (max-width: 40px) and (min-width: 5px)</pre> |
simonp@8226 | 410 | <tr> |
simonp@8244 | 411 | <td><pre>all and (color) and (color)</pre> |
simonp@8244 | 412 | <td><pre>(color)</pre> |
simonp@8244 | 413 | </table> |
simonp@8244 | 414 | </div> |
simonp@8244 | 415 | |
simonp@8244 | 416 | |
simonp@8244 | 417 | |
simonp@8244 | 418 | <h4>Serializing Media Feature Values</h4> |
simonp@8244 | 419 | |
simonp@8435 | 420 | <p class="issue">This should probably be done in terms of mapping it to |
simonp@8244 | 421 | serializing CSS values as media features are defined in terms of CSS |
simonp@8244 | 422 | values after all.</p> |
simonp@8244 | 423 | |
simonp@8244 | 424 | <p>To <dfn>serialize a media feature value</dfn> |
simonp@8406 | 425 | named <var>v</var> locate <var>v</var> in the first |
simonp@8244 | 426 | column of the table below and use the serialization format described in |
simonp@8244 | 427 | the second column:</p> |
simonp@8244 | 428 | |
simonp@8559 | 429 | <table class="complex data"> |
simonp@8559 | 430 | <thead> |
simonp@8559 | 431 | <tr> |
simonp@8559 | 432 | <th>Media Feature |
simonp@8559 | 433 | <th>Serialization |
simonp@8559 | 434 | <tbody> |
simonp@8559 | 435 | <tr> |
simonp@8559 | 436 | <td>'width' |
simonp@8559 | 437 | <td>... |
simonp@8559 | 438 | <tr> |
simonp@8559 | 439 | <td>'height' |
simonp@8559 | 440 | <td>... |
simonp@8559 | 441 | <tr> |
simonp@8559 | 442 | <td>'device-width' |
simonp@8559 | 443 | <td>... |
simonp@8559 | 444 | <tr> |
simonp@8559 | 445 | <td>'device-height' |
simonp@8559 | 446 | <td>... |
simonp@8559 | 447 | <tr> |
simonp@8559 | 448 | <td>'orientation' |
simonp@8559 | 449 | <td> |
simonp@8559 | 450 | <p>If the value is 'portrait': "<code title>portrait</code>".</p> |
simonp@8559 | 451 | <p>If the value is 'landscape': "<code title>landscape</code>".</p> |
simonp@8559 | 452 | <tr> |
simonp@8559 | 453 | <td>'aspect-ratio' |
simonp@8559 | 454 | <td>... |
simonp@8559 | 455 | <tr> |
simonp@8559 | 456 | <td>'device-aspect-ratio' |
simonp@8559 | 457 | <td>... |
simonp@8559 | 458 | <tr> |
simonp@8559 | 459 | <td>'color' |
simonp@8559 | 460 | <td>... |
simonp@8559 | 461 | <tr> |
simonp@8559 | 462 | <td>'color-index' |
simonp@8559 | 463 | <td>... |
simonp@8559 | 464 | <tr> |
simonp@8559 | 465 | <td>'monochrome' |
simonp@8559 | 466 | <td>... |
simonp@8559 | 467 | <tr> |
simonp@8559 | 468 | <td>'resolution' |
simonp@8559 | 469 | <td>... |
simonp@8559 | 470 | <tr> |
simonp@8559 | 471 | <td>'scan' |
simonp@8559 | 472 | <td> |
simonp@8559 | 473 | <p>If the value is 'progressive': "<code title>progressive</code>".</p> |
simonp@8559 | 474 | <p>If the value is 'interlace': "<code title>interlace</code>".</p> |
simonp@8559 | 475 | <tr> |
simonp@8559 | 476 | <td>'grid' |
simonp@8559 | 477 | <td>... |
simonp@8244 | 478 | </table> |
simonp@8244 | 479 | |
simonp@8244 | 480 | <p>Other specifications can extend this table and vendor-prefixed media |
simonp@8244 | 481 | features can have custom serialization formats as well.</p> |
simonp@8244 | 482 | |
simonp@8244 | 483 | |
simonp@8244 | 484 | <h3>Comparing Media Queries</h3> |
simonp@8244 | 485 | |
simonp@8244 | 486 | <p>To |
simonp@8244 | 487 | <dfn>compare media queries</dfn> |
simonp@8406 | 488 | <var>m1</var> and <var>m2</var> means to |
simonp@8244 | 489 | <span title="serialize a media query">serialize</span> them both and |
simonp@8244 | 490 | return true if they are a |
simonp@8244 | 491 | <span data-anolis-spec=dom>case-sensitive</span> match and false if they |
simonp@8244 | 492 | are not.</p> |
simonp@8244 | 493 | |
simonp@8244 | 494 | |
simonp@8244 | 495 | <h3>The <code title>MediaList</code> Interface</h3> |
simonp@8226 | 496 | |
simonp@8226 | 497 | <!-- |
simonp@8226 | 498 | // |
simonp@8226 | 499 | // All members defined since DOM-2 Style. The only differences are: |
simonp@8226 | 500 | // |
simonp@8226 | 501 | // 1. addition of stringifier qualifier on mediaText |
simonp@8226 | 502 | // 2. addition of getter qualifier on item |
simonp@8226 | 503 | // 3. removal of raises(DOMException) from {append,delete}Medium |
simonp@8226 | 504 | // |
simonp@8226 | 505 | --> |
simonp@8226 | 506 | |
simonp@8226 | 507 | <p>An object that implements the <code>MediaList</code> interface has an associated <dfn>collection of media queries</dfn>.</p> |
simonp@8226 | 508 | |
simonp@9217 | 509 | <pre class=idl>[ArrayClass] |
simonp@9217 | 510 | interface <dfn>MediaList</dfn> { |
simonp@8407 | 511 | [TreatNullAs=EmptyString] stringifier attribute DOMString <span title=dom-MediaList-mediaText>mediaText</span>; |
simonp@8226 | 512 | readonly attribute unsigned long <span title=dom-MediaList-length>length</span>; |
simonp@9342 | 513 | getter DOMString? <span title=dom-MediaList-item>item</span>(unsigned long index); |
simonp@8226 | 514 | void <span title=dom-MediaList-appendMedium>appendMedium</span>(DOMString medium); |
simonp@8226 | 515 | void <span title=dom-MediaList-deleteMedium>deleteMedium</span>(DOMString medium); |
simonp@8226 | 516 | };</pre> |
simonp@8226 | 517 | |
simonp@8265 | 518 | <p>The object's <span data-anolis-spec=webidl>supported property indices</span> are the numbers in the range zero to one less than the number of media queries |
simonp@8265 | 519 | in the <span>collection of media queries</span> represented by the collection. If there are no such media queries, then there are no |
simonp@8265 | 520 | <span data-anolis-spec=webidl>supported property indices</span>. |
simonp@8265 | 521 | |
simonp@8406 | 522 | <p>To <dfn>create a <code>MediaList</code> object</dfn> with a string <var>text</var>, run the following steps: |
simonp@8226 | 523 | <ol> |
simonp@8226 | 524 | <li><p>Create a new <code>MediaList</code> object.</p></li> |
simonp@8406 | 525 | <li><p>Set its <code title='dom-MediaList-mediaText'>mediaText</code> attribute to <var>text</var>.</p></li> |
simonp@8226 | 526 | <li><p>Return the newly created <code>MediaList</code> object.</p></li> |
simonp@8226 | 527 | </ol> |
simonp@8226 | 528 | |
simonp@8304 | 529 | <p>The <dfn title=dom-MediaList-mediaText><code>mediaText</code></dfn> attribute, on getting, must return a |
simonp@8304 | 530 | <span title='serialize a media query list'>serialization</span> of the <span>collection of media queries</span>.</p> |
simonp@8226 | 531 | <p>Setting the <code title=dom-MediaList-mediaText>mediaText</code> attribute must run these steps: |
simonp@8226 | 532 | <ol> |
simonp@8226 | 533 | <li><p>Empty the <span>collection of media queries</span>.</p></li> |
simonp@8226 | 534 | <li><p>If the given value is the empty string terminate these steps.</p></li> |
simonp@8226 | 535 | <li><p>Append all the media queries as a result of <span title='parse a media query list'>parsing</span> the given |
simonp@8226 | 536 | value to the <span>collection of media queries</span>.</p></li> |
simonp@8226 | 537 | </ol> |
simonp@8226 | 538 | |
simonp@8406 | 539 | <p>The <dfn title=dom-MediaList-item><code>item(<var>index</var>)</code></dfn> method must return the media query in the <span>collection of media |
simonp@8406 | 540 | queries</span> given by <var>index</var>, or null, if <var>index</var> is greater than or equal to the number of media queries in the |
simonp@8226 | 541 | <span>collection of media queries</span>.</p> |
simonp@8226 | 542 | |
simonp@8304 | 543 | <p>The <dfn title=dom-MediaList-length><code>length</code></dfn> attribute must return the number of media queries in the <span>collection of media |
simonp@8304 | 544 | queries</span>.</p> |
simonp@8226 | 545 | |
simonp@8406 | 546 | <p>The <dfn title=dom-MediaList-appendMedium><code>appendMedium(<var>medium</var>)</code></dfn> method must run these steps:</p> |
simonp@8226 | 547 | <ol> |
simonp@8406 | 548 | <li><p>Let <var>m</var> be the result of <span title='parse a media query'>parsing</span> the given value.</p></li> |
simonp@8406 | 549 | <li><p>If <var>m</var> is null terminate these steps.</p></li> |
simonp@8406 | 550 | <li><p>If <span title='compare media queries'>comparing</span> <var>m</var> with any of the media queries in the |
simonp@8226 | 551 | <span>collection of media queries</span> returns true terminate these steps.</p></li> |
simonp@8406 | 552 | <li><p>Append <var>m</var> to the <span>collection of media queries</span>.</p></li> |
simonp@8226 | 553 | </ol> |
simonp@8226 | 554 | |
simonp@8406 | 555 | <p>The <dfn title=dom-MediaList-deleteMedium><code>deleteMedium(<var>medium</var>)</code></dfn> method must run these steps:</p> |
simonp@8226 | 556 | <ol> |
simonp@8406 | 557 | <li><p>Let <var>m</var> be the result of <span title='parse a media query'>parsing</span> the given value.</p></li> |
simonp@8406 | 558 | <li><p>If <var>m</var> is null terminate these steps.</p></li> |
simonp@8226 | 559 | <li><p>Remove any media query from the <span>collection of media queries</span> for which |
simonp@8406 | 560 | <span title='compare media queries'>comparing</span> the media query with <var>m</var> returns true.</p></li> |
simonp@8226 | 561 | </ol> |
simonp@8226 | 562 | |
simonp@8244 | 563 | <h2>Selectors</h2> |
simonp@8244 | 564 | |
simonp@8244 | 565 | <p>Selectors are defined in the Selectors specification. This section |
simonp@8244 | 566 | mainly defines how to serialize them.</p> <!-- XXX ref --> |
simonp@8244 | 567 | |
simonp@8244 | 568 | <!-- XXX ref universal selector etc? some are in <span> some not --> |
simonp@8244 | 569 | |
simonp@8244 | 570 | |
simonp@8244 | 571 | <h3>Parsing Selectors</h3> |
simonp@8244 | 572 | |
simonp@8244 | 573 | <p>To |
simonp@8244 | 574 | <dfn>parse a group of selectors</dfn> |
simonp@8304 | 575 | means to parse the value using the <code title>selectors_group</code> |
simonp@8244 | 576 | production defined in the Selectors specification and return either a |
simonp@8289 | 577 | group of selectors if parsing did not fail or null if parsing did |
simonp@8244 | 578 | fail.</p> <!-- XXX ref --> |
simonp@8244 | 579 | |
simonp@8244 | 580 | |
simonp@8244 | 581 | <h3>Serializing Selectors</h3> |
simonp@8244 | 582 | <!-- http://dump.testsuite.org/2009/cssom/serializing-selectors.htm --> |
simonp@8244 | 583 | |
simonp@8244 | 584 | <p>To |
simonp@8244 | 585 | <dfn>serialize a group of selectors</dfn> |
simonp@8244 | 586 | <span title="serialize a selector">serialize</span> each selector in the |
simonp@8244 | 587 | group of selectors and then |
simonp@8244 | 588 | <span title="serialize a comma-separated list">serialize</span> the |
simonp@8244 | 589 | group.</p> |
simonp@8244 | 590 | |
simonp@8244 | 591 | <p>To <dfn>serialize a selector</dfn> let |
simonp@8406 | 592 | <var>s</var> be the empty string, run the steps below for each |
simonp@8244 | 593 | part of the chain of the selector, and finally return |
simonp@8406 | 594 | <var>s</var>:</p> |
simonp@8244 | 595 | |
simonp@8244 | 596 | <ol> |
simonp@8244 | 597 | <li><p>If there is only one <span>simple selector</span> in the |
simonp@8244 | 598 | <span>sequence of simple selectors</span> which is a |
simonp@8244 | 599 | <span>universal selector</span>, append the result of |
simonp@8244 | 600 | <span title="serialize a simple selector">serializing</span> the |
simonp@8406 | 601 | <span>universal selector</span> to <var>s</var>.</p></li> |
simonp@8244 | 602 | |
simonp@8244 | 603 | <li><p>Otherwise, for each <span>simple selector</span> in the |
simonp@8244 | 604 | <span>sequence of simple selectors</span> that is not a |
simonp@8438 | 605 | universal selector of which the |
simonp@8244 | 606 | <span>namespace prefix</span> maps to a namespace that is not the |
simonp@8244 | 607 | <span>default namespace</span> |
simonp@8244 | 608 | <span title="serialize a simple selector">serialize</span> the |
simonp@8244 | 609 | <span>simple selector</span> and append the result to |
simonp@8406 | 610 | <var>s</var>.</p></li> |
simonp@8244 | 611 | |
simonp@8244 | 612 | <li><p>If this is not the last part of the chain of the selector append a |
simonp@8244 | 613 | single SPACE (U+0020), followed by the combinator |
simonp@8304 | 614 | "<code title>></code>", |
simonp@8304 | 615 | "<code title>+</code>", or |
simonp@8304 | 616 | "<code title>~</code>" |
simonp@8244 | 617 | as appropriate, followed by another single SPACE (U+0020) if the combinator was |
simonp@8406 | 618 | not whitespace, to <var>s</var>.</p></li> |
simonp@8244 | 619 | |
simonp@8244 | 620 | <li><p>If this is the last part of the chain of the selector and there is |
simonp@8304 | 621 | a pseudo-element, append "<code title>::</code>" followed by the name of the |
simonp@8438 | 622 | pseudo-element, to <var>s</var>.</p></li> |
simonp@8244 | 623 | </ol> |
simonp@8244 | 624 | |
simonp@8244 | 625 | |
simonp@8244 | 626 | <p>To |
simonp@8244 | 627 | <dfn>serialize a simple selector</dfn> |
simonp@8406 | 628 | let <var>s</var> be the empty string, run the steps below, and |
simonp@8406 | 629 | finally return <var>s</var>:</p> |
simonp@8244 | 630 | |
simonp@8244 | 631 | <dl class="switch"> |
simonp@8244 | 632 | <dt>type selector</dt> |
simonp@8244 | 633 | <dt>universal selector</dt> |
simonp@8244 | 634 | <dd> |
simonp@8226 | 635 | <ol> |
simonp@8244 | 636 | <li><p>If the <span>namespace prefix</span> maps to a namespace that is |
simonp@8244 | 637 | not the <span>default namespace</span> and is not the |
simonp@8244 | 638 | null namespace (not in a namespace) append the |
simonp@8244 | 639 | <span title="serialize an identifier">escaped</span> |
simonp@8304 | 640 | <span>namespace prefix</span>, followed by a "<code title>|</code>" (U+007C) |
simonp@8406 | 641 | to <var>s</var>.</p></li> |
simonp@8244 | 642 | |
simonp@8244 | 643 | <li><p>If the <span>namespace prefix</span> maps to a namespace that is |
simonp@8244 | 644 | the null namespace (not in a namespace) append |
simonp@8406 | 645 | "<code title>|</code>" (U+007C) to <var>s</var>.</p></li> |
simonp@8244 | 646 | <!-- This includes |* --> |
simonp@8244 | 647 | |
simonp@8244 | 648 | <li><p>If this is a type selector append the |
simonp@8244 | 649 | <span title="serialize an identifier">escaped</span> element name to |
simonp@8406 | 650 | <var>s</var>.</p></li> |
simonp@8226 | 651 | |
simonp@8304 | 652 | <li><p>If this is a universal selector append "<code title>*</code>" (U+002A) |
simonp@8406 | 653 | to <var>s</var>.</p></li> |
simonp@8226 | 654 | </ol> |
simonp@8244 | 655 | </dd> |
simonp@8244 | 656 | |
simonp@8244 | 657 | <dt>attribute selector</dt> |
simonp@8244 | 658 | <dd> |
simonp@8244 | 659 | <ol> |
simonp@8304 | 660 | <li><p>Append "<code title>[</code>" (U+005B) to |
simonp@8406 | 661 | <var>s</var>.</p></li> |
simonp@8244 | 662 | |
simonp@8244 | 663 | <li><p>If the <span>namespace prefix</span> maps to a namespace that is |
simonp@8244 | 664 | not the null namespace (not in a namespace) append the |
simonp@8244 | 665 | <span title="serialize an identifier">escaped</span> |
simonp@8304 | 666 | <span>namespace prefix</span>, followed by a "<code title>|</code>" (U+007C) |
simonp@8406 | 667 | to <var>s</var>.</p></li> |
simonp@8244 | 668 | |
simonp@8244 | 669 | <li><p>Append the <span title="serialize an identifier">escaped</span> |
simonp@8406 | 670 | attribute name to <var>s</var>.</p></li> |
simonp@8244 | 671 | |
simonp@8244 | 672 | <li><p>If there is an attribute value specified, append |
simonp@8304 | 673 | "<code title>=</code>", |
simonp@8304 | 674 | "<code title>~=</code>", |
simonp@8304 | 675 | "<code title>|=</code>", |
simonp@8304 | 676 | "<code title>^=</code>", |
simonp@8304 | 677 | "<code title>$=</code>", or |
simonp@8304 | 678 | "<code title>*=</code>" |
simonp@8244 | 679 | as appropriate (depending on the type of attribute selector), followed |
simonp@8244 | 680 | by the <span title="serialize a string">string escaped</span> |
simonp@8406 | 681 | attribute value, to <var>s</var>.</p></li> |
simonp@8244 | 682 | |
simonp@8304 | 683 | <li><p>Append "<code title>]</code>" (U+005D) to |
simonp@8438 | 684 | <var>s</var>.</p></li> |
simonp@8244 | 685 | </ol> |
simonp@8244 | 686 | </dd> |
simonp@8244 | 687 | |
simonp@8244 | 688 | <dt>class selector</dt> |
simonp@8304 | 689 | <dd><p>Append a "<code title>.</code>" (U+002E), followed by the |
simonp@8244 | 690 | <span title="serialize an identifier">escaped</span> class name to |
simonp@8406 | 691 | <var>s</var>.</p></dd> |
simonp@8244 | 692 | |
simonp@8244 | 693 | <dt>ID selector</dt> |
simonp@8304 | 694 | <dd><p>Append a "<code title>#</code>" (U+0023), followed by the |
simonp@8244 | 695 | <span title="serialize an identifier">escaped</span> ID to |
simonp@8406 | 696 | <var>s</var>.</p></dd> |
simonp@8244 | 697 | |
simonp@8244 | 698 | <dt>pseudo-class</dt> |
simonp@8244 | 699 | <dd> |
simonp@8244 | 700 | <p>If the pseudo-class does not accept arguments append |
simonp@8304 | 701 | "<code title>:</code>" (U+003A), followed by the name of the pseudo-class, to |
simonp@8406 | 702 | <var>s</var>.</p> |
simonp@8244 | 703 | |
simonp@8304 | 704 | <p>Otherwise, append "<code title>:</code>" (U+003A), followed by the name of |
simonp@8304 | 705 | the pseudo-class, followed by "<code title>(</code>" (U+0028), followed by the |
simonp@8244 | 706 | value of the pseudo-class argument determined as per below, followed by |
simonp@8406 | 707 | "<code title>)</code>" (U+0029), to <var>s</var>.</p> |
simonp@8226 | 708 | |
simonp@8226 | 709 | <dl class="switch"> |
simonp@8304 | 710 | <dt><code title>:lang()</code></dt> |
simonp@8244 | 711 | <dd><p>The <span title="serialize an identifier">escaped</span> |
simonp@8244 | 712 | value.</p></dd> |
simonp@8244 | 713 | |
simonp@8304 | 714 | <dt><code title>:nth-child()</code></dt> |
simonp@8304 | 715 | <dt><code title>:nth-last-child()</code></dt> |
simonp@8304 | 716 | <dt><code title>:nth-of-type()</code></dt> |
simonp@8304 | 717 | <dt><code title>:nth-last-of-type()</code></dt> |
simonp@8437 | 718 | <dd><p>The result of serializing the value using the rules for <span data-anolis-spec=csssyntax>serializing <an+b></span>. |
simonp@9661 | 719 | |
simonp@8304 | 720 | <dt><code title>:not()</code></dt> |
simonp@8244 | 721 | <dd><p>The result of serializing the value using the rules for |
simonp@8244 | 722 | <span title="serialize a group of selectors">serializing a group of selectors</span>.</p></dd> |
simonp@8226 | 723 | </dl> |
simonp@8244 | 724 | </dd> |
simonp@8244 | 725 | </dl> |
simonp@8244 | 726 | |
simonp@8244 | 727 | |
simonp@8244 | 728 | <h2>CSS</h2> |
simonp@8244 | 729 | |
simonp@8244 | 730 | |
simonp@8244 | 731 | <h3>CSS Style Sheets</h3> |
simonp@8244 | 732 | |
simonp@8244 | 733 | <p>A <dfn>CSS style sheet</dfn> is an abstract concept that |
simonp@8244 | 734 | represents a style sheet as defined by the CSS specification. In the CSSOM a |
simonp@8244 | 735 | <span>CSS style sheet</span> is represented as a <code>CSSStyleSheet</code> object. A |
simonp@8244 | 736 | <span>CSS style sheet</span> has a number of associated state items:</p> |
simonp@8244 | 737 | |
simonp@8244 | 738 | <dl> |
simonp@8305 | 739 | <dt><dfn title=concept-css-style-sheet-type>type</dfn></dt> |
simonp@8304 | 740 | <dd><p>The literal string "<code title>text/css</code>".</p></dd> |
simonp@8244 | 741 | |
simonp@8305 | 742 | <dt><dfn title=concept-css-style-sheet-location>location</dfn></dt> |
simonp@8373 | 743 | <dd><p>Specified when created. The <span data-anolis-spec=url title=concept-absolute-url>absolute URL</span> of the first request of the |
simonp@8303 | 744 | <span>CSS style sheet</span> or null if the <span>CSS style sheet</span> was |
simonp@8373 | 745 | embedded. Does not change during the lifetime of the <span>CSS style sheet</span>.</p></dd> |
simonp@8244 | 746 | |
simonp@8441 | 747 | <dt><dfn title=concept-css-style-sheet-parent-css-style-sheet>parent CSS style sheet</dfn></dt> |
simonp@8373 | 748 | <dd><p>Specified when created. The <span>CSS style sheet</span> that is the parent of the |
simonp@8303 | 749 | <span>CSS style sheet</span> or null if there is no associated parent.</p></dd> |
simonp@8244 | 750 | |
simonp@8305 | 751 | <dt><dfn title=concept-css-style-sheet-owner-node>owner node</dfn></dt> |
simonp@8373 | 752 | <dd><p>Specified when created. The DOM node associated with the <span>CSS style sheet</span> or |
simonp@8289 | 753 | null if there is no associated DOM node.</p></dd> |
simonp@8244 | 754 | |
simonp@8305 | 755 | <dt><dfn title=concept-css-style-sheet-owner-css-rule>owner CSS rule</dfn></dt> |
simonp@8441 | 756 | <dd><p>Specified when created. The <span>CSS rule</span> in the <span title=concept-css-style-sheet-parent-css-style-sheet>parent CSS style sheet</span> |
simonp@8303 | 757 | that caused the inclusion of the <span>CSS style sheet</span> or null if |
simonp@8244 | 758 | there is no associated rule.</p></dd> |
simonp@8244 | 759 | |
simonp@8305 | 760 | <dt><dfn title=concept-css-style-sheet-media>media</dfn></dt> |
simonp@8244 | 761 | <dd> |
simonp@8373 | 762 | <p>Specified when created. The <code>MediaList</code> object associated with the |
simonp@8303 | 763 | <span>CSS style sheet</span>.</p> |
simonp@8244 | 764 | |
simonp@8373 | 765 | <p>If this property is specified to a string, the <span title=concept-css-style-sheet-media>media</span> must be set to the return value of invoking |
simonp@8373 | 766 | <span>create a <code>MediaList</code> object</span> steps for that string.</p> |
simonp@9661 | 767 | |
simonp@8560 | 768 | <p>If this property is specified to an attribute of the <span title=concept-css-style-sheet-owner-node>owner node</span>, the |
simonp@8560 | 769 | <span title=concept-css-style-sheet-media>media</span> must be set to the return value of invoking <span>create a <code>MediaList</code> object</span> steps |
simonp@8560 | 770 | for the value of that attribute. Whenever the attribute is set, changed or removed, the <span title=concept-css-style-sheet-media>media</span>'s |
simonp@8560 | 771 | <code title=dom-MediaList-mediaText>mediaText</code> attribute must be set to the new value of the attribute, or to null if the attribute is absent. |
simonp@9661 | 772 | |
simonp@8560 | 773 | <p class=note>Changing the <span title=concept-css-style-sheet-media>media</span>'s <code title=dom-MediaList-mediaText>mediaText</code> attribute does not |
simonp@8560 | 774 | change the corresponding attribute on the <span title=concept-css-style-sheet-owner-node>owner node</span>. |
simonp@8244 | 775 | </dd> |
simonp@8244 | 776 | |
simonp@8305 | 777 | <dt><dfn title=concept-css-style-sheet-title>title</dfn></dt> |
simonp@8244 | 778 | <dd> |
simonp@8373 | 779 | <p>Specified when created. The title of the <span>CSS style sheet</span>, which can be the empty string.</p> |
simonp@8244 | 780 | |
simonp@8244 | 781 | <div class="example"> |
simonp@8305 | 782 | <p>In the following, the <span title=concept-css-style-sheet-title>title</span> is non-empty |
simonp@8244 | 783 | for the first style sheet, but is empty for the second and third style sheets.</p> |
simonp@8244 | 784 | <pre><style title="papaya whip"> |
simonp@8226 | 785 | body { background: #ffefd5; } |
simonp@8226 | 786 | </style></pre> |
simonp@8226 | 787 | <pre><style title=""> |
simonp@8226 | 788 | body { background: orange; } |
simonp@8226 | 789 | </style></pre> |
simonp@8226 | 790 | <pre><style> |
simonp@8226 | 791 | body { background: brown; } |
simonp@8226 | 792 | </style></pre> |
simonp@8244 | 793 | </div> |
simonp@9661 | 794 | |
simonp@8560 | 795 | <p>If this property is specified to an attribute of the <span title=concept-css-style-sheet-owner-node>owner node</span>, the |
simonp@8560 | 796 | <span title=concept-css-style-sheet-title>title</span> must be set to the value of that attribute. Whenever the attribute is set, changed or removed, the |
simonp@8560 | 797 | <span title=concept-css-style-sheet-title>title</span> must be set to the new value of the attribute, or to the empty string if the attribute is absent. |
simonp@9661 | 798 | |
simonp@8244 | 799 | </dd> |
simonp@8244 | 800 | |
simonp@8305 | 801 | <dt><dfn title=concept-css-style-sheet-alternate-flag>alternate flag</dfn></dt> |
simonp@8244 | 802 | <dd> |
simonp@9044 | 803 | <p>Specified when created. Either set or unset. Unset by default.</p> |
simonp@8244 | 804 | |
simonp@8244 | 805 | <div class="example"> |
simonp@8304 | 806 | <p>The following <span title="CSS style sheet">CSS style sheets</span> have |
simonp@8305 | 807 | their <span title=concept-css-style-sheet-alternate-flag>alternate flag</span> set:</p> |
simonp@8244 | 808 | |
simonp@8244 | 809 | <pre><?xml-stylesheet alternate="yes" title="x" href="data:text/css,…"?></pre> |
simonp@8244 | 810 | |
simonp@8244 | 811 | <pre><link rel="alternate stylesheet" title="x" href="data:text/css,…"></pre> |
simonp@8244 | 812 | </div> |
simonp@8244 | 813 | </dd> |
simonp@8244 | 814 | |
simonp@8305 | 815 | <dt><dfn title=concept-css-style-sheet-disabled-flag>disabled flag</dfn></dt> |
simonp@8244 | 816 | <dd> |
simonp@9044 | 817 | <p>Either set or unset. Unset by default.</p> |
simonp@9044 | 818 | |
simonp@9044 | 819 | <p class="note">Even when unset it does not necessarily mean that the |
simonp@8303 | 820 | <span>CSS style sheet</span> is actually used for rendering.</p> |
simonp@8244 | 821 | </dd> |
simonp@8244 | 822 | |
simonp@8244 | 823 | |
simonp@8305 | 824 | <dt><dfn title=concept-css-style-sheet-css-rules>CSS rules</dfn></dt> |
simonp@8244 | 825 | <dd><p>The <span title="CSS rule">CSS rules</span> associated with the |
simonp@8303 | 826 | <span>CSS style sheet</span>.</p></dd> |
simonp@9661 | 827 | |
simonp@8372 | 828 | <dt><dfn title=concept-css-style-sheet-origin-clean-flag>origin-clean flag</dfn> |
simonp@9044 | 829 | <dd><p>Specified when created. Either set or unset. If it is set, the API allows reading and modifying of the <span title=concept-css-style-sheet-css-rules>CSS |
simonp@8373 | 830 | rules</span>. |
simonp@8244 | 831 | </dl> |
simonp@8244 | 832 | |
simonp@8244 | 833 | |
simonp@8244 | 834 | <h4>The <code title>StyleSheet</code> Interface</h4> |
simonp@8226 | 835 | |
simonp@8226 | 836 | <!-- |
simonp@8226 | 837 | // |
simonp@8226 | 838 | // All members defined since DOM-2 Style. Only difference |
simonp@8226 | 839 | // is addition of [PutForwards=mediaText], which is presently |
simonp@8226 | 840 | // not defined in CSSOM draft. |
simonp@8226 | 841 | // |
simonp@8226 | 842 | --> |
simonp@8226 | 843 | |
simonp@8226 | 844 | <p>The <code>StyleSheet</code> interface represents an abstract, base style sheet.</p> |
simonp@8226 | 845 | |
simonp@8226 | 846 | <pre class=idl>interface <dfn>StyleSheet</dfn> { |
simonp@8226 | 847 | readonly attribute DOMString <span title=dom-StyleSheet-type>type</span>; |
simonp@8226 | 848 | readonly attribute DOMString? <span title=dom-StyleSheet-href>href</span>; |
simonp@8304 | 849 | readonly attribute (<span data-anolis-spec=dom>Element</span> or <span data-anolis-spec=dom>ProcessingInstruction</span>)? <!-- |
simonp@8304 | 850 | --><span title=dom-StyleSheet-ownerNode>ownerNode</span>; |
simonp@8226 | 851 | readonly attribute <span>StyleSheet</span>? <span title=dom-StyleSheet-parentStyleSheet>parentStyleSheet</span>; |
simonp@8226 | 852 | readonly attribute DOMString? <span title=dom-StyleSheet-title>title</span>; |
simonp@8820 | 853 | [SameObject, PutForwards=<span title=dom-MediaList-mediaText>mediaText</span>] readonly attribute <span>MediaList</span> <!-- |
simonp@8820 | 854 | --><span title=dom-StyleSheet-media>media</span>; |
simonp@8226 | 855 | attribute boolean <span title=dom-StyleSheet-disabled>disabled</span>; |
simonp@8226 | 856 | };</pre> |
simonp@8226 | 857 | |
simonp@8305 | 858 | <p>The <dfn title=dom-StyleSheet-type><code>type</code></dfn> attribute must return the <span title=concept-css-style-sheet-type>type</span>.</p> |
simonp@8305 | 859 | |
simonp@8374 | 860 | <p>The <dfn title=dom-StyleSheet-href><code>href</code></dfn> attribute must return the <span title=concept-css-style-sheet-location>location</span>.</p> |
simonp@8289 | 861 | |
simonp@8305 | 862 | <p>The <dfn title=dom-StyleSheet-ownerNode><code>ownerNode</code></dfn> attribute must return the <span title=concept-css-style-sheet-owner-node>owner |
simonp@8374 | 863 | node</span>.</p> |
simonp@8305 | 864 | |
simonp@8305 | 865 | <p>The <dfn title=dom-StyleSheet-parentStyleSheet><code>parentStyleSheet</code></dfn> attribute must return the |
simonp@8441 | 866 | <span title=concept-css-style-sheet-parent-css-style-sheet>parent CSS style sheet</span>.</p> |
simonp@8305 | 867 | |
simonp@8305 | 868 | <p>The <dfn title=dom-StyleSheet-title><code>title</code></dfn> attribute must return the <span title=concept-css-style-sheet-title>title</span> or null if |
simonp@8373 | 869 | <span title=concept-css-style-sheet-title>title</span> is the empty string.</p> |
simonp@8226 | 870 | |
simonp@8305 | 871 | <p>The <dfn title=dom-StyleSheet-media><code>media</code></dfn> attribute must return the <span title=concept-css-style-sheet-media>media</span>.</p> |
simonp@8226 | 872 | |
simonp@8305 | 873 | <p>The <dfn title=dom-StyleSheet-disabled><code>disabled</code></dfn> attribute, on getting, must return true if the |
simonp@8305 | 874 | <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> |
simonp@8305 | 875 | is set, or false otherwise. On setting, the <code title=dom-StyleSheet-disabled>disabled</code> attribute must set the |
simonp@8305 | 876 | <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> if the new value is true, or unset the |
simonp@8305 | 877 | <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> otherwise.</p> |
simonp@8226 | 878 | |
simonp@8226 | 879 | |
simonp@8244 | 880 | <h4>The <code title>CSSStyleSheet</code> Interface</h4> |
simonp@8226 | 881 | |
simonp@8226 | 882 | <!-- |
simonp@8226 | 883 | // |
simonp@8226 | 884 | // All members defined since DOM-2 Style. The only differences are: |
simonp@8226 | 885 | // |
simonp@8226 | 886 | // 1. removal of raises(DOMException) on {insert,delete}Rule operations. |
simonp@8226 | 887 | // |
simonp@8226 | 888 | --> |
simonp@8226 | 889 | |
simonp@8436 | 890 | <p>The <code>CSSStyleSheet</code> interface represents a <span>CSS style sheet</span>.</p> |
simonp@8226 | 891 | <pre class=idl>interface <dfn>CSSStyleSheet</dfn> : <span>StyleSheet</span> { |
simonp@8226 | 892 | readonly attribute <span>CSSRule</span>? <span title=dom-CSSStyleSheet-ownerRule>ownerRule</span>; |
simonp@8820 | 893 | [SameObject] readonly attribute <span>CSSRuleList</span> <span title=dom-CSSStyleSheet-cssRules>cssRules</span>; |
simonp@8226 | 894 | unsigned long <span title=dom-CSSStyleSheet-insertRule>insertRule</span>(DOMString rule, unsigned long index); |
simonp@8226 | 895 | void <span title=dom-CSSStyleSheet-deleteRule>deleteRule</span>(unsigned long index); |
simonp@8226 | 896 | };</pre> |
simonp@8226 | 897 | |
simonp@8305 | 898 | <p>The <dfn title=dom-CSSStyleSheet-ownerRule><code>ownerRule</code></dfn> attribute must return the <span title=concept-css-style-sheet-owner-css-rule>owner |
simonp@8436 | 899 | CSS rule</span>. If a value other than null is ever returned, then that same value must always be returned on each get access.</p> |
simonp@8226 | 900 | |
simonp@8372 | 901 | <p>The <dfn title=dom-CSSStyleSheet-cssRules><code>cssRules</code></dfn> attribute must follow these steps: |
simonp@8372 | 902 | |
simonp@8372 | 903 | <ol> |
simonp@9044 | 904 | <li><p>If the <span title=concept-css-style-sheet-origin-clean-flag>origin-clean flag</span> is unset, |
simonp@8372 | 905 | <span title=concept-throw data-anolis-spec=dom>throw</span> a <code data-anolis-spec=dom>SecurityError</code> exception. |
simonp@8372 | 906 | <li><p>Return a read-only, live <code>CSSRuleList</code> object representing |
simonp@8820 | 907 | the <span title=concept-css-style-sheet-css-rules>CSS rules</span>.</p> |
simonp@8372 | 908 | <p class='note'>Even though the returned <code>CSSRuleList</code> object is read-only (from the perspective of |
simonp@8372 | 909 | client-authored script), it can nevertheless change over time due to its liveness status. For example, invoking |
simonp@8372 | 910 | the <code title=dom-CSSStyleSheet-insertRule>insertRule()</code> or <code title=dom-CSSStyleSheet-deleteRule>deleteRule()</code> methods can result in |
simonp@8372 | 911 | mutations reflected in the returned object.</p> |
simonp@8372 | 912 | </ol> |
simonp@8372 | 913 | |
simonp@8406 | 914 | <p>The <dfn title=dom-CSSStyleSheet-insertRule><code>insertRule(<var>rule</var>, <var>index</var>)</code></dfn> method must run the following steps: |
simonp@8372 | 915 | |
simonp@8372 | 916 | <ol> |
simonp@9044 | 917 | <li><p>If the <span title=concept-css-style-sheet-origin-clean-flag>origin-clean flag</span> is unset, |
simonp@8372 | 918 | <span title=concept-throw data-anolis-spec=dom>throw</span> a <code data-anolis-spec=dom>SecurityError</code> exception. |
simonp@8406 | 919 | <li><p>Return the result of invoking <span>insert a CSS rule</span> <var>rule</var> in the <span title=concept-css-style-sheet-css-rules>CSS rules</span> |
simonp@8406 | 920 | at <var>index</var>. |
simonp@8372 | 921 | </ol> |
simonp@8372 | 922 | |
simonp@8406 | 923 | <p>The <dfn title=dom-CSSStyleSheet-deleteRule><code>deleteRule(<var>index</var>)</code></dfn> method must run the following steps: |
simonp@8372 | 924 | |
simonp@8372 | 925 | <ol> |
simonp@9044 | 926 | <li><p>If the <span title=concept-css-style-sheet-origin-clean-flag>origin-clean flag</span> is unset, |
simonp@8372 | 927 | <span title=concept-throw data-anolis-spec=dom>throw</span> a <code data-anolis-spec=dom>SecurityError</code> exception. |
simonp@8406 | 928 | <li><p><span>Remove a CSS rule</span> in the <span title=concept-css-style-sheet-css-rules>CSS rules</span> at <var>index</var>. |
simonp@8372 | 929 | </ol> |
simonp@8226 | 930 | |
simonp@8307 | 931 | <h3>CSS Style Sheet Collections</h3> |
simonp@8244 | 932 | |
simonp@8244 | 933 | <p>Below various new concepts are defined that are associated with each |
simonp@8244 | 934 | <code data-anolis-spec=dom>Document</code> object.</p> |
simonp@8244 | 935 | |
simonp@8244 | 936 | <p>Each <code data-anolis-spec=dom>Document</code> has an associated list of zero or more |
simonp@8304 | 937 | <span title="CSS style sheet">CSS style sheets</span>, named the |
simonp@8306 | 938 | <dfn>document CSS style sheets</dfn>. This is |
simonp@8244 | 939 | an ordered list that contains all |
simonp@8304 | 940 | <span title="CSS style sheet">CSS style sheets</span> associated with the |
simonp@8244 | 941 | <code data-anolis-spec=dom>Document</code>, in |
simonp@8244 | 942 | <span data-anolis-spec=dom title=concept-tree-order>tree order</span>, with |
simonp@8304 | 943 | <span title="CSS style sheet">CSS style sheets</span> created from HTTP |
simonp@8406 | 944 | <code title>Link</code> headers first, if any, in header |
simonp@8244 | 945 | order.</p> |
simonp@8244 | 946 | |
simonp@8305 | 947 | <p>To <dfn>create a CSS style sheet</dfn>, run these |
simonp@8244 | 948 | steps:</p> |
simonp@8244 | 949 | |
simonp@8244 | 950 | <ol> |
simonp@8303 | 951 | <li><p>Create a new <span>CSS style sheet</span> object and set its |
simonp@8244 | 952 | properties as specified.</p></li> |
simonp@8244 | 953 | |
simonp@8552 | 954 | <li> |
simonp@8552 | 955 | <p>Then run the <span>add a CSS style sheet</span> steps for the newly created <span>CSS style sheet</span>. |
simonp@9661 | 956 | |
simonp@8552 | 957 | <p class=warning>If the <span title=concept-css-style-sheet-origin-clean-flag>origin-clean flag</span> is unset, this can expose information from the user's |
simonp@8552 | 958 | intranet. |
simonp@8244 | 959 | </ol> |
simonp@8244 | 960 | |
simonp@8306 | 961 | <p>To <dfn>add a CSS style sheet</dfn>, run these |
simonp@8244 | 962 | steps:</p> |
simonp@8244 | 963 | |
simonp@8244 | 964 | <ol> |
simonp@8303 | 965 | <li><p>Add the <span>CSS style sheet</span> to the list of |
simonp@8306 | 966 | <span>document CSS style sheets</span> at the appropriate location. The |
simonp@8244 | 967 | remainder of these steps deal with the |
simonp@8305 | 968 | <span title=concept-css-style-sheet-disabled-flag>disabled flag</span>.</p></li> |
simonp@8305 | 969 | |
simonp@8305 | 970 | <li><p>If the <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> is set, terminate |
simonp@8244 | 971 | these steps.</p></li> |
simonp@8244 | 972 | |
simonp@8373 | 973 | <li><p>If the <span title=concept-css-style-sheet-title>title</span> is not the empty string, the |
simonp@9044 | 974 | <span title=concept-css-style-sheet-alternate-flag>alternate flag</span> is unset, and |
simonp@8306 | 975 | <span>preferred CSS style sheet set name</span> is the empty string |
simonp@8306 | 976 | <span>change the preferred CSS style sheet set name</span> to the |
simonp@8305 | 977 | <span title=concept-css-style-sheet-title>title</span>.</p></li> |
simonp@8244 | 978 | |
simonp@8244 | 979 | <li> |
simonp@9044 | 980 | <p>If any of the following is true unset the |
simonp@8305 | 981 | <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> and terminate these steps: |
simonp@8244 | 982 | |
simonp@8244 | 983 | <ul> |
simonp@8373 | 984 | <li><p>The <span title=concept-css-style-sheet-title>title</span> is the empty string.</p></li> |
simonp@8306 | 985 | <li><p>The <span>last CSS style sheet set name</span> is null and the |
simonp@8305 | 986 | <span title=concept-css-style-sheet-title>title</span> is a |
simonp@8244 | 987 | <span data-anolis-spec=dom>case-sensitive</span> match |
simonp@8306 | 988 | for the <span>preferred CSS style sheet set name</span>.</p></li> |
simonp@8305 | 989 | <li><p>The <span title=concept-css-style-sheet-title>title</span> is a |
simonp@8244 | 990 | <span data-anolis-spec=dom>case-sensitive</span> match for the |
simonp@8306 | 991 | <span>last CSS style sheet set name</span>.</p></li> |
simonp@8244 | 992 | </ul> |
simonp@8244 | 993 | </li> |
simonp@8244 | 994 | |
simonp@8305 | 995 | <li><p>Set the <span title=concept-css-style-sheet-disabled-flag>disabled flag</span>.</li> |
simonp@8244 | 996 | </ol> |
simonp@8244 | 997 | |
simonp@8440 | 998 | <p>To <dfn>remove a CSS style sheet</dfn>, run these steps:</p> |
simonp@8440 | 999 | |
simonp@8440 | 1000 | <ol> |
simonp@8440 | 1001 | <li><p>Remove the <span>CSS style sheet</span> from the list of <span>document CSS style sheets</span>. |
simonp@9661 | 1002 | |
simonp@8444 | 1003 | <li><p>Set the <span>CSS style sheet</span>'s <span title=concept-css-style-sheet-parent-css-style-sheet>parent CSS style sheet</span>, |
simonp@8444 | 1004 | <span title=concept-css-style-sheet-owner-node>owner node</span> and <span title=concept-css-style-sheet-owner-css-rule>owner CSS rule</span> to null. |
simonp@9661 | 1005 | |
simonp@8440 | 1006 | <!-- "associated CSS style sheet" is defined in terms of owner node, so we don't need to set it to null explicitly --> |
simonp@9661 | 1007 | |
simonp@8440 | 1008 | <!-- XXX does anything need to happen wrt alternate style sheets? what if the last style sheet with the preferred style sheet set name is removed? --> |
simonp@8440 | 1009 | </ol> |
simonp@8440 | 1010 | |
simonp@8306 | 1011 | <p>A <dfn>persistent CSS style sheet</dfn> is a |
simonp@8306 | 1012 | <span>CSS style sheet</span> from the <span>document CSS style sheets</span> |
simonp@8305 | 1013 | whose <span title=concept-css-style-sheet-title>title</span> is the empty string and whose |
simonp@9044 | 1014 | <span title=concept-css-style-sheet-alternate-flag>alternate flag</span> is unset.</p> |
simonp@8244 | 1015 | |
simonp@8306 | 1016 | <p>A <dfn>CSS style sheet set</dfn> is an ordered |
simonp@8304 | 1017 | collection of one or more <span title="CSS style sheet">CSS style sheets</span> |
simonp@8306 | 1018 | from the <span>document CSS style sheets</span> which have an identical |
simonp@8305 | 1019 | <span title=concept-css-style-sheet-title>title</span> that is not the empty string.</p> |
simonp@8244 | 1020 | |
simonp@8306 | 1021 | <p>A <dfn>CSS style sheet set name</dfn> is the |
simonp@8306 | 1022 | <span title=concept-css-style-sheet-title>title</span> the <span>CSS style sheet set</span> has in |
simonp@8244 | 1023 | common.</p> |
simonp@8244 | 1024 | |
simonp@8306 | 1025 | <p>An <dfn>enabled CSS style sheet set</dfn> is a |
simonp@8306 | 1026 | <span>CSS style sheet set</span> of which each <span>CSS style sheet</span> has |
simonp@9044 | 1027 | its <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> unset.</p> |
simonp@8244 | 1028 | |
simonp@8306 | 1029 | <p>To <dfn>enable a CSS style sheet set</dfn> |
simonp@8406 | 1030 | with name <var>name</var>, run these steps:</p> |
simonp@8244 | 1031 | |
simonp@8244 | 1032 | <ol> |
simonp@8406 | 1033 | <li><p>If <var>name</var> is the empty string, set the |
simonp@8305 | 1034 | <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> for each <span>CSS style sheet</span> |
simonp@8306 | 1035 | that is in a <span>CSS style sheet set</span> and terminate these steps.</li> |
simonp@8305 | 1036 | |
simonp@9044 | 1037 | <li><p>Unset the <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> for each |
simonp@8306 | 1038 | <span>CSS style sheet</span> in a <span>CSS style sheet set</span> whose |
simonp@8327 | 1039 | <span>CSS style sheet set name</span> is a |
simonp@8244 | 1040 | <span data-anolis-spec=dom>case-sensitive</span> match for |
simonp@8406 | 1041 | <var>name</var> and set it for all other |
simonp@8304 | 1042 | <span title="CSS style sheet">CSS style sheets</span> in a |
simonp@8306 | 1043 | <span>CSS style sheet set</span>.</p></li> |
simonp@8244 | 1044 | </ol> |
simonp@8244 | 1045 | |
simonp@8306 | 1046 | <p>To <dfn>select a CSS style sheet set</dfn> |
simonp@8406 | 1047 | with name <var>name</var>, run these steps:</p> |
simonp@8244 | 1048 | |
simonp@8244 | 1049 | <ol> |
simonp@8306 | 1050 | <li><p><span>enable a CSS style sheet set</span> with name |
simonp@8406 | 1051 | <var>name</var>.</p></li> |
simonp@8244 | 1052 | |
simonp@8306 | 1053 | <li><p>Set <span>last CSS style sheet set name</span> to |
simonp@8406 | 1054 | <var>name</var>.</p></li> |
simonp@8244 | 1055 | </ol> |
simonp@8244 | 1056 | |
simonp@8306 | 1057 | <p>A <dfn>last CSS style sheet set name</dfn> |
simonp@8306 | 1058 | is a concept to determine what <span>CSS style sheet set</span> was last |
simonp@8306 | 1059 | <span title="select a CSS style sheet set">selected</span>. Initially its |
simonp@8289 | 1060 | value is null.</p> |
simonp@8244 | 1061 | |
simonp@8244 | 1062 | <p>A |
simonp@8306 | 1063 | <dfn>preferred CSS style sheet set name</dfn> |
simonp@8244 | 1064 | is a concept to determine which |
simonp@8304 | 1065 | <span title="CSS style sheet">CSS style sheets</span> need to have their |
simonp@9044 | 1066 | <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> unset. Initially its value |
simonp@8244 | 1067 | is the empty string. |
simonp@8244 | 1068 | |
simonp@8244 | 1069 | <p>To |
simonp@8306 | 1070 | <dfn>change the preferred CSS style sheet set name</dfn> |
simonp@8406 | 1071 | with name <var>name</var>, run these steps:</p> |
simonp@8244 | 1072 | |
simonp@8244 | 1073 | <ol> |
simonp@8406 | 1074 | <li><p>Let <var>current</var> be the <span>preferred CSS style sheet set name</span>.</p></li> |
simonp@8306 | 1075 | |
simonp@8306 | 1076 | <li><p>Set <span>preferred CSS style sheet set name</span> to |
simonp@8406 | 1077 | <var>name</var>.</p></li> |
simonp@8406 | 1078 | |
simonp@8406 | 1079 | <li><p>If <var>name</var> is not a |
simonp@8244 | 1080 | <span data-anolis-spec=dom>case-sensitive</span> match for |
simonp@8406 | 1081 | <var>current</var> and |
simonp@8306 | 1082 | <span>last CSS style sheet set name</span> is null |
simonp@8306 | 1083 | <span>enable a CSS style sheet set</span> with name |
simonp@8406 | 1084 | <var>name</var>.</p></li> |
simonp@8244 | 1085 | </ol> |
simonp@8244 | 1086 | |
simonp@8244 | 1087 | <!-- XXX ought to define "applied" |
simonp@8244 | 1088 | |
simonp@8244 | 1089 | thoughts: |
simonp@8244 | 1090 | depends on disabled flag, alternate flag, media queries, sheesh |
simonp@8244 | 1091 | --> |
simonp@8244 | 1092 | |
simonp@8244 | 1093 | |
simonp@8244 | 1094 | <h4>The HTTP <code title>Default-Style</code> Header</h4> |
simonp@8244 | 1095 | |
simonp@8244 | 1096 | <p>The HTTP <code title="http-default-style">Default-Style</code> header |
simonp@8306 | 1097 | can be used to set the <span>preferred CSS style sheet set name</span> |
simonp@8306 | 1098 | influencing which <span>CSS style sheet set</span> is (initially) the |
simonp@8306 | 1099 | <span>enabled CSS style sheet set</span>.</p> |
simonp@8244 | 1100 | |
simonp@8244 | 1101 | <p>For each HTTP <code title="http-default-style">Default-Style</code> |
simonp@8244 | 1102 | header, in header order, the user agent must |
simonp@8306 | 1103 | <span>change the preferred CSS style sheet set name</span> with name being the |
simonp@8244 | 1104 | value of the header.</p> |
simonp@8244 | 1105 | |
simonp@8244 | 1106 | |
simonp@8244 | 1107 | <h4>The <code title>StyleSheetList</code> Interface</h4> |
simonp@8229 | 1108 | |
simonp@8304 | 1109 | <p>The <code>StyleSheetList</code> interface represents an ordered collection of <span title="CSS style sheet">CSS style sheets</span>.</p> |
simonp@8229 | 1110 | |
simonp@8229 | 1111 | <pre class=idl>[ArrayClass] |
simonp@8229 | 1112 | interface <dfn>StyleSheetList</dfn> { |
simonp@8229 | 1113 | getter <span>StyleSheet</span>? <span title=dom-StyleSheetList-item>item</span>(unsigned long index); |
simonp@8229 | 1114 | readonly attribute unsigned long <span title=dom-StyleSheetList-length>length</span>; |
simonp@8229 | 1115 | };</pre> |
simonp@8229 | 1116 | |
simonp@8304 | 1117 | <p>The object's <span data-anolis-spec=webidl>supported property indices</span> are the numbers in the range zero to one less than the number of |
simonp@8304 | 1118 | <span title="CSS style sheet">CSS style sheets</span> represented by the collection. If there are no such <span title="CSS style sheet">CSS style sheets</span>, |
simonp@8304 | 1119 | then there are no <span data-anolis-spec=webidl>supported property indices</span>. |
simonp@8304 | 1120 | |
simonp@8406 | 1121 | <p>The <dfn title=dom-StyleSheetList-item><code>item(<var>index</var>)</code></dfn> method must return the <var>index</var>th <span>CSS style |
simonp@8406 | 1122 | sheet</span> in the collection. If there is no <var>index</var>th object in the collection, then the method must return null. |
simonp@8304 | 1123 | |
simonp@8304 | 1124 | <p>The <dfn title=dom-StyleSheetList-length><code>length</code></dfn> attribute must return the number of <span title="CSS style sheet">CSS style sheets</span> |
simonp@8304 | 1125 | represented by the collection. |
simonp@8226 | 1126 | |
simonp@8244 | 1127 | <h4>Extensions to the <code title>Document</code> Interface</h4> |
simonp@8226 | 1128 | |
simonp@8226 | 1129 | <!-- |
simonp@8226 | 1130 | // |
simonp@8226 | 1131 | // Significant changes since DOM-2 Style: |
simonp@8226 | 1132 | // |
simonp@8226 | 1133 | // 1. move styleSheets from separate interface (DocumentStyle) to Document |
simonp@8226 | 1134 | // 2. addition of selectedStyleSheetSet, lastStyleSheetSet, preferredStyleSheetSet, styleSheetSets, and enableStyleSheetsForSet members |
simonp@8226 | 1135 | // |
simonp@8226 | 1136 | // 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", |
simonp@8226 | 1137 | // 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. |
simonp@8226 | 1138 | // |
simonp@8226 | 1139 | // N.B. According to HTML4 Section 14.3, a "persistent style sheet ... must apply in addition to any alternate style sheet". |
simonp@8226 | 1140 | // |
simonp@8226 | 1141 | // N.B. HTML4 Section 14.3 distinguishes the three categories of style sheets as follows: |
simonp@8226 | 1142 | // |
simonp@8226 | 1143 | // * persistent - @rel='stylesheet', @title is missing (or empty string?) |
simonp@8226 | 1144 | // * preferred - @rel='stylesheet', @title is present (and non-empty?) |
simonp@8226 | 1145 | // * alternate - @rel='alternate stylesheet', @title is present (and non-empty?) |
simonp@8226 | 1146 | // |
simonp@8226 | 1147 | // Also, HTML5 effectively defines: |
simonp@8226 | 1148 | // |
simonp@8226 | 1149 | // * ignored - @rel='alternate stylesheet', @title is missing (or is empty string?) - in this case, LinkStyle.style must evaluate to null |
simonp@8226 | 1150 | // |
simonp@8304 | 1151 | // 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 |
simonp@8304 | 1152 | // sheet sets]: |
simonp@8226 | 1153 | // |
simonp@8226 | 1154 | // * in content - <META http-equiv="Default-Style" content="compact"> |
simonp@8226 | 1155 | // * in http - e.g., using response header - "Default-Style: compact" |
simonp@8304 | 1156 | // * 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 |
simonp@8304 | 1157 | // style [sheet sets], the FIRST one present in the document takes precedence; |
simonp@8226 | 1158 | // * preferred style sheets specified using the above (META or HTTP header equivalent) take precedence over those specified with LINK |
simonp@8226 | 1159 | // |
simonp@8226 | 1160 | // N.B. CSSOM Draft presently employs the term "Style Sheet Collection" |
simonp@8226 | 1161 | // |
simonp@8226 | 1162 | // Spec Issues: |
simonp@8226 | 1163 | // |
simonp@8226 | 1164 | // 1. need to specify which style sheets are included in styleSheets, and in which order: |
simonp@8226 | 1165 | // |
simonp@8226 | 1166 | // * from Link HTTP header reference |
simonp@8226 | 1167 | // * from <?xml-stylesheet ...?> |
simonp@8226 | 1168 | // * from LINK element, @rel='stylesheet'|'alternate stylesheet' |
simonp@8226 | 1169 | // * from STYLE element |
simonp@8226 | 1170 | // |
simonp@8226 | 1171 | // 2. for purpose of comparing two titled (named) style sheets, is title (name) compared on case-sensitive or case-insensitive basis |
simonp@8226 | 1172 | // |
simonp@8226 | 1173 | // 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 |
simonp@8304 | 1174 | // it is necessary to create an HTMLLinkElement or HTMLStyleElement element to indirectly create an empty StyleSheet, then this element can be added to the |
simonp@8304 | 1175 | // Document. |
simonp@8226 | 1176 | // |
simonp@8226 | 1177 | --> |
simonp@8226 | 1178 | |
simonp@8226 | 1179 | <pre class=idl>partial interface <span data-anolis-spec=dom>Document</span> { |
simonp@8820 | 1180 | [SameObject] readonly attribute <span>StyleSheetList</span> <span title=dom-Document-styleSheets>styleSheets</span>;<!-- DOM-2 - defined on DocumentStyle |
simonp@8820 | 1181 | interface --> |
simonp@8226 | 1182 | attribute DOMString? <span title=dom-Document-selectedStyleSheetSet>selectedStyleSheetSet</span>;<!-- new --> |
simonp@8226 | 1183 | readonly attribute DOMString? <span title=dom-Document-lastStyleSheetSet>lastStyleSheetSet</span>;<!-- new --> |
simonp@8226 | 1184 | readonly attribute DOMString? <span title=dom-Document-preferredStyleSheetSet>preferredStyleSheetSet</span>;<!-- new --> |
simonp@8226 | 1185 | readonly attribute DOMString[] <span title=dom-Document-styleSheetSets>styleSheetSets</span>;<!-- new --> |
simonp@8226 | 1186 | void <span title=dom-Document-enableStyleSheetsForSet>enableStyleSheetsForSet</span>(DOMString? name);<!-- new --> |
simonp@8226 | 1187 | };</pre> |
simonp@8226 | 1188 | |
simonp@8229 | 1189 | <p>The <dfn title=dom-Document-styleSheets><code>styleSheets</code></dfn> attribute must return a <code>StyleSheetList</code> collection representing |
simonp@8306 | 1190 | the <span>document CSS style sheets</span>.</p> |
simonp@8226 | 1191 | <p class='note'>Because of historical IDL limitations the <code title=dom-Document-styleSheets>styleSheets</code> attribute |
simonp@8406 | 1192 | used to be on a separate interface, <code title>DocumentStyle</code>.</p> |
simonp@8226 | 1193 | |
simonp@8301 | 1194 | <p>The <dfn title=dom-Document-selectedStyleSheetSet><code>selectedStyleSheetSet</code></dfn> attribute, on getting, must run these steps:</p> |
simonp@8226 | 1195 | <ol> |
simonp@8306 | 1196 | <li><p>If there is a single <span>enabled CSS style sheet set</span> and no |
simonp@8373 | 1197 | other <span>document CSS style sheets</span> with a |
simonp@8373 | 1198 | <span title=concept-css-style-sheet-title>title</span> that is not the empty string have the |
simonp@8305 | 1199 | <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> unset, return the |
simonp@8327 | 1200 | <span>CSS style sheet set name</span> of the |
simonp@8306 | 1201 | <span>enabled CSS style sheet set</span> and terminate these steps.</li> |
simonp@9661 | 1202 | |
simonp@8304 | 1203 | <li><p>Otherwise, if <span title="CSS style sheet">CSS style sheets</span> from |
simonp@8306 | 1204 | different <span title='CSS style sheet set'>CSS style sheet sets</span> have |
simonp@8305 | 1205 | their <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> unset, return |
simonp@8289 | 1206 | null and terminate these steps.</li> |
simonp@9661 | 1207 | |
simonp@8226 | 1208 | <li> |
simonp@8226 | 1209 | <p>Otherwise, return the empty string.</p> |
simonp@9661 | 1210 | |
simonp@8226 | 1211 | <p class='note'>At this point either all |
simonp@8373 | 1212 | <span title="CSS style sheet">CSS style sheets</span> with a |
simonp@8373 | 1213 | <span title=concept-css-style-sheet-title>title</span> that is not the empty string have the |
simonp@8305 | 1214 | <span title=concept-css-style-sheet-disabled-flag>disabled flag</span> set, or there are no such |
simonp@8304 | 1215 | <span title="CSS style sheet">CSS style sheets</span>.</p> |
simonp@8226 | 1216 | </li> |
simonp@8226 | 1217 | </ol> |
simonp@8226 | 1218 | |
simonp@8226 | 1219 | <p>On setting the |
simonp@8226 | 1220 | <code title='dom-Document-selectedStyleSheetSet'>selectedStyleSheetSet</code> |
simonp@8226 | 1221 | attribute these steps must be run:</p> |
simonp@8226 | 1222 | |
simonp@8226 | 1223 | <ol> |
simonp@8289 | 1224 | <li><p>If the value is null terminate this set of steps.</p></li> |
simonp@8331 | 1225 | <li><p>Otherwise, <span>select a CSS style sheet set</span> with the name being the |
simonp@8226 | 1226 | value passed.</p></li> |
simonp@8226 | 1227 | </ol> |
simonp@8226 | 1228 | |
simonp@8226 | 1229 | <p>From the DOM's perspective, all views have the same |
simonp@8226 | 1230 | <code title='dom-Document-selectedStyleSheetSet'>selectedStyleSheetSet</code>. |
simonp@8226 | 1231 | If a user agent supports multiple views with different selected |
simonp@8226 | 1232 | alternative style sheets, then this attribute (and the |
simonp@8226 | 1233 | <code>StyleSheet</code> interface's |
simonp@8226 | 1234 | <code title='dom-StyleSheet-disabled'>disabled</code> attribute) |
simonp@8226 | 1235 | must return and set the value for the default |
simonp@8226 | 1236 | view.</p> |
simonp@8226 | 1237 | |
simonp@8306 | 1238 | <p>The <dfn title=dom-Document-lastStyleSheetSet><code>lastStyleSheetSet</code></dfn> attribute must return the <span>last CSS style sheet set name</span>.</p> |
simonp@8289 | 1239 | <p class='note'>This attribute is initially null.</p> |
simonp@8226 | 1240 | |
simonp@8327 | 1241 | <p>The <dfn title=dom-Document-preferredStyleSheetSet><code>preferredStyleSheetSet</code></dfn> attribute must return the <span>preferred CSS style sheet set |
simonp@8304 | 1242 | name</span>.</p> |
simonp@8226 | 1243 | <p class='note'>Unlike <code title='dom-Document-lastStyleSheetSet'>lastStyleSheetSet</code>, |
simonp@8226 | 1244 | this attribute is initially the empty string.</p> |
simonp@8226 | 1245 | |
simonp@8226 | 1246 | <p>The <dfn title=dom-Document-styleSheetSets><code>styleSheetSets</code></dfn> attribute must return a read only array of the |
simonp@8583 | 1247 | <span title='CSS style sheet set name'>CSS style sheet set names</span> of the <span title='CSS style sheet set'>CSS style sheet sets</span>, in order of the |
simonp@8820 | 1248 | <span>document CSS style sheets</span>. The array is live; if the <span>document CSS style sheets</span> change, the array must be updated as appropriate.</p> |
simonp@8226 | 1249 | |
simonp@8406 | 1250 | <p>The <dfn title=dom-Document-enableStyleSheetsForSet><code>enableStyleSheetsForSet(<var>name</var>)</code></dfn> method must, when invoked, run these |
simonp@8304 | 1251 | steps:</p> |
simonp@8226 | 1252 | <ol> |
simonp@8406 | 1253 | <li><p>If <var>name</var> is null terminate these steps.</p></li> |
simonp@8406 | 1254 | <li><p><span>enable a CSS style sheet set</span> with name <var>name</var>.</p></li> |
simonp@8226 | 1255 | </ol> |
simonp@8373 | 1256 | <p class='note'><span title='CSS style sheet'>CSS style sheets</span> with a |
simonp@8373 | 1257 | <span title=concept-css-style-sheet-title>title</span> that is the empty string are never affected by this method. |
simonp@8226 | 1258 | This method does not change the values of the |
simonp@8226 | 1259 | <code title='dom-Document-lastStyleSheetSet'>lastStyleSheetSet</code> or |
simonp@8226 | 1260 | <code title='dom-Document-preferredStyleSheetSet'>preferredStyleSheetSet</code> attributes.</p> |
simonp@8226 | 1261 | |
simonp@8226 | 1262 | |
simonp@8244 | 1263 | <h4>Interaction with the User Interface</h4> |
simonp@8244 | 1264 | |
simonp@8244 | 1265 | <p>The user interface of Web browsers that support style sheets |
simonp@8244 | 1266 | should list the style sheet titles given in the |
simonp@8244 | 1267 | <code title="dom-Document-styleSheetSets">styleSheetSets</code> list, |
simonp@8244 | 1268 | showing the |
simonp@8244 | 1269 | <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code> |
simonp@8244 | 1270 | as the selected style sheet set, leaving none selected if it is |
simonp@8289 | 1271 | null or the empty string, and selecting an extra option |
simonp@8244 | 1272 | "Basic Page Style" (or similar) if it is the empty string and the |
simonp@8244 | 1273 | <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code> |
simonp@8244 | 1274 | is the empty string as well.</p> |
simonp@8244 | 1275 | |
simonp@8244 | 1276 | <p>Selecting a style sheet from this list should |
simonp@8306 | 1277 | use the <span>select a CSS style sheet set</span> set of steps. This |
simonp@8244 | 1278 | (by definition) affects the |
simonp@8244 | 1279 | <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code> |
simonp@8244 | 1280 | attribute.</p> |
simonp@8244 | 1281 | |
simonp@8307 | 1282 | <h5>Persisting the selected CSS style sheet set</h5> |
simonp@8307 | 1283 | |
simonp@8307 | 1284 | <p>If a user agent persist the <span title="select a CSS style sheet set">selected</span> <span>CSS style sheet set</span>, it should use |
simonp@8244 | 1285 | the value of the |
simonp@8244 | 1286 | <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code> |
simonp@8289 | 1287 | attribute, or if that is null, the |
simonp@8244 | 1288 | <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code> |
simonp@8244 | 1289 | attribute, when leaving the page (or at some other time) to determine the |
simonp@8307 | 1290 | set name to store. If that is null then the <span>CSS style sheet set</span> should not be |
simonp@8244 | 1291 | persisted.</p> |
simonp@8244 | 1292 | |
simonp@8307 | 1293 | <p>When re-setting the <span>CSS style sheet set</span> to the persisted value (which can |
simonp@8307 | 1294 | happen at any time, typically at the first time the <span title="CSS style sheet">CSS style sheets</span> are |
simonp@8304 | 1295 | needed for styling the document, after the <code title><head></code> of |
simonp@8244 | 1296 | the document has been parsed, after any scripts that are not dependent on |
simonp@8307 | 1297 | computed style have executed), the <span>CSS style sheet set</span> |
simonp@8244 | 1298 | should be set by using the |
simonp@8306 | 1299 | <span>select a CSS style sheet set</span> set of steps as if the user had |
simonp@8307 | 1300 | selected the <span>CSS style sheet set</span> manually.</p> |
simonp@8244 | 1301 | |
simonp@8244 | 1302 | <p class="note">This specification does not give any suggestions on |
simonp@8307 | 1303 | how user agents are to decide to persist the <span>CSS style sheet set</span> or whether or |
simonp@8307 | 1304 | how to persist the <span title="select a CSS style sheet set">selected</span> <span>CSS style sheet set</span> across pages.</p> |
simonp@8244 | 1305 | |
simonp@8244 | 1306 | <!-- XXX this UI section suggests we may want to introduce a few more |
simonp@8244 | 1307 | idioms --> |
simonp@8244 | 1308 | |
simonp@8244 | 1309 | |
simonp@8244 | 1310 | <h4>Examples</h4> |
simonp@8244 | 1311 | |
simonp@8244 | 1312 | <div class="example"> |
simonp@8244 | 1313 | <p>Thus, in the following HTML snippet:</p> |
simonp@8244 | 1314 | |
simonp@8244 | 1315 | <pre><link rel="alternate stylesheet" title="foo" href="a"> |
simonp@8226 | 1316 | <link rel="alternate stylesheet" title="bar" href="b"> |
simonp@8226 | 1317 | <script> |
simonp@8226 | 1318 | document.selectedStyleSheetSet = 'foo'; |
simonp@8226 | 1319 | document.styleSheets[1].disabled = false; |
simonp@8226 | 1320 | </script> |
simonp@8226 | 1321 | <link rel="alternate stylesheet" title="foo" href="c"> |
simonp@8226 | 1322 | <link rel="alternate stylesheet" title="bar" href="d"></pre> |
simonp@8226 | 1323 | |
simonp@8244 | 1324 | <p>...the style sheets that end up enabled are style sheets "a", "b", |
simonp@8244 | 1325 | and "c", the |
simonp@8244 | 1326 | <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code> |
simonp@8289 | 1327 | attribute would return null, |
simonp@8244 | 1328 | <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code> |
simonp@8244 | 1329 | would return "foo", and |
simonp@8244 | 1330 | <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code> |
simonp@8244 | 1331 | would return the empty string.</p> |
simonp@8244 | 1332 | |
simonp@8244 | 1333 | <p>Similarly, in the following HTML snippet:</p> |
simonp@8244 | 1334 | |
simonp@8244 | 1335 | <pre><link rel="alternate stylesheet" title="foo" href="a"> |
simonp@8226 | 1336 | <link rel="alternate stylesheet" title="bar" href="b"> |
simonp@8226 | 1337 | <script> |
simonp@8226 | 1338 | var before = document.preferredStyleSheetSet; |
simonp@8226 | 1339 | document.styleSheets[1].disabled = false; |
simonp@8226 | 1340 | </script> |
simonp@8226 | 1341 | <link rel="stylesheet" title="foo" href="c"> |
simonp@8226 | 1342 | <link rel="alternate stylesheet" title="bar" href="d"> |
simonp@8226 | 1343 | <script> |
simonp@8226 | 1344 | var after = document.preferredStyleSheetSet; |
simonp@8226 | 1345 | </script></pre> |
simonp@8226 | 1346 | |
simonp@8244 | 1347 | <p>...the "before" variable will be equal to the empty string, the |
simonp@8244 | 1348 | "after" variable will be equal to "foo", and style sheets "a" and "c" |
simonp@8244 | 1349 | will be enabled. This is the case even though the first script block |
simonp@8244 | 1350 | sets style sheet "b" to be enabled, because upon parsing the |
simonp@8304 | 1351 | following <code title><link></code> element, the |
simonp@8244 | 1352 | <code title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code> |
simonp@8244 | 1353 | is set and the |
simonp@8244 | 1354 | <code title="dom-Document-enableStyleSheetsForSet">enableStyleSheetsForSet()</code> |
simonp@8244 | 1355 | method is called (since |
simonp@8244 | 1356 | <code title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code> |
simonp@8244 | 1357 | was never set |
simonp@8244 | 1358 | explicitly, leaving |
simonp@8244 | 1359 | <code title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code> at |
simonp@8289 | 1360 | null throughout), which changes which style sheets are enabled and which |
simonp@8244 | 1361 | are not.</p> |
simonp@8244 | 1362 | </div> |
simonp@8244 | 1363 | |
simonp@8244 | 1364 | |
simonp@8244 | 1365 | <h3>Style Sheet Association</h3> |
simonp@8244 | 1366 | |
simonp@8826 | 1367 | <p>This section defines the interface an |
simonp@8305 | 1368 | <span title=concept-css-style-sheet-owner-node>owner node</span> of a <span>CSS style sheet</span> has to |
simonp@8244 | 1369 | implement and defines the requirements for |
simonp@8244 | 1370 | <span data-anolis-spec=xmlss title="xml-stylesheet processing instruction">xml-stylesheet processing instructions</span> |
simonp@8406 | 1371 | and HTTP <code title>Link</code> headers when the link |
simonp@8244 | 1372 | relation type is an |
simonp@8244 | 1373 | <span data-anolis-spec=dom>ASCII case-insensitive</span> match for |
simonp@8304 | 1374 | "<code title>stylesheet</code>" since nobody else was interested in |
simonp@8244 | 1375 | defining this.</p> |
simonp@8244 | 1376 | |
simonp@8244 | 1377 | <p class=note>The editor is in good hope that HTML and SVG will define the |
simonp@8244 | 1378 | appropriate processing in their respective specifications, in terms of |
simonp@8244 | 1379 | this specification, in due course.</p> |
simonp@8244 | 1380 | |
simonp@8244 | 1381 | |
simonp@8522 | 1382 | <h4>Fetching CSS style sheets</h4> |
simonp@8522 | 1383 | |
simonp@8523 | 1384 | <p>To <dfn>fetch a CSS style sheet</dfn> with parsed URL <var>parsed URL</var>, referrer <var>referrer</var>, document |
simonp@8522 | 1385 | <var>document</var>, optionally a set of parameters <var>parameters</var> (used as input to creating a |
simonp@8522 | 1386 | <span data-anolis-spec=fetch title=concept-request>request</span>), follow these steps: |
simonp@8522 | 1387 | |
simonp@8522 | 1388 | <ol> |
simonp@8522 | 1389 | <li><p>Let <var>origin</var> be <var>document</var>'s <span data-anolis-spec=html>origin</span>. |
simonp@8522 | 1390 | |
simonp@8522 | 1391 | <li><p>Let <var>request</var> be a new <span data-anolis-spec=fetch title=concept-request>request</span>, with the |
simonp@8522 | 1392 | <span data-anolis-spec=fetch title=concept-request-url>url</span> <var>parsed URL</var>, |
simonp@8522 | 1393 | <span data-anolis-spec=fetch title=concept-request-origin>origin</span> <var>origin</var>, |
simonp@8522 | 1394 | <span data-anolis-spec=fetch title=concept-request-referrer>referrer</span> <var>referrer</var>, and if specified the set of parameters <var>parameters</var>. |
simonp@8522 | 1395 | |
simonp@8522 | 1396 | <li><p>Let <var>response</var> be the result of <span data-anolis-spec=fetch title=concept-fetch>fetching</span> <var>request</var>.</p></li> |
simonp@8522 | 1397 | |
simonp@8522 | 1398 | <li><p>Wait until <var>response</var> is available. |
simonp@9661 | 1399 | |
simonp@8522 | 1400 | <li><p>If <var>response</var> is a <span data-anolis-spec=fetch title=concept-network-error>network error</span>, return an error. |
simonp@9661 | 1401 | |
simonp@8522 | 1402 | <li><p>If <var>document</var> is in <span data-anolis-spec=dom title=concept-document-quirks>quirks mode</span>, <var>response</var> is |
simonp@9661 | 1403 | <span title>CORS-same-origin</span><!--XXX xref--> and the <span data-anolis-spec=html>Content-Type metadata</span> of <var>response</var> is not a |
simonp@8522 | 1404 | <span>supported styling language</span> change the <span data-anolis-spec=html>Content-Type metadata</span> of <var>response</var> to |
simonp@8522 | 1405 | <code title>text/css</code>. |
simonp@8522 | 1406 | |
simonp@8522 | 1407 | <li><p>If <var>response</var> is not in a <span>supported styling language</span> return an error.</p></li> |
simonp@8522 | 1408 | |
simonp@8522 | 1409 | <li><p>Return <var>response</var>. |
simonp@8522 | 1410 | </ol> |
simonp@8244 | 1411 | |
simonp@8244 | 1412 | <h4>The <code title>LinkStyle</code> Interface</h4> |
simonp@8226 | 1413 | |
simonp@8307 | 1414 | <p>The <dfn>associated CSS style sheet</dfn> of a node is the <span>CSS style sheet</span> in the list of |
simonp@8306 | 1415 | <span>document CSS style sheets</span> of which the <span title=concept-css-style-sheet-owner-node>owner node</span> implements the <code>LinkStyle</code> |
simonp@8305 | 1416 | interface.</p> |
simonp@8226 | 1417 | |
simonp@8226 | 1418 | <pre class=idl>[NoInterfaceObject] |
simonp@8226 | 1419 | interface <dfn>LinkStyle</dfn> { |
simonp@8226 | 1420 | readonly attribute <span>StyleSheet</span>? <span title=dom-LinkStyle-sheet>sheet</span>; |
simonp@8226 | 1421 | };</pre> |
simonp@8226 | 1422 | |
simonp@8307 | 1423 | <p>The <dfn title=dom-LinkStyle-sheet><code>sheet</code></dfn> attribute must return the <span>associated CSS style sheet</span> for the node or null |
simonp@8307 | 1424 | if there is no <span>associated CSS style sheet</span>.</p> |
simonp@9661 | 1425 | |
simonp@8244 | 1426 | <div class="example"> |
simonp@8304 | 1427 | <p>In the following fragment, the first <code title>style</code> |
simonp@8304 | 1428 | element has a <code title=dom-LinkStyle-sheet>sheet</code> attribute that returns a |
simonp@8244 | 1429 | <code>StyleSheet</code> object representing the style sheet, but for |
simonp@8304 | 1430 | the second <code title>style</code> element, the <code title=dom-LinkStyle-sheet>sheet</code> attribute returns null, |
simonp@8304 | 1431 | assuming the user agent supports CSS (<code title>text/css</code>), but does |
simonp@8304 | 1432 | not support the (hypothetical) ExampleSheets (<code title>text/example-sheets</code>).</p> |
simonp@8244 | 1433 | |
simonp@8244 | 1434 | <pre><style type="text/css"> |
simonp@8226 | 1435 | body { background:lime } |
simonp@8226 | 1436 | </style></pre> |
simonp@8226 | 1437 | <pre><style type="text/example-sheets"> |
simonp@8226 | 1438 | $(body).background := lime |
simonp@8226 | 1439 | </style></pre> |
simonp@8244 | 1440 | </div> |
simonp@8244 | 1441 | |
simonp@8244 | 1442 | <p class="note">Whether or not the node refers to a style sheet is defined |
simonp@8244 | 1443 | by the specification that defines the semantics of said node.</p> |
simonp@8244 | 1444 | |
simonp@8244 | 1445 | |
simonp@8244 | 1446 | <h4>Requirements on specifications</h4> |
simonp@8244 | 1447 | |
simonp@8244 | 1448 | <p>Specifications introducing new ways of associating style sheets through |
simonp@8244 | 1449 | the DOM should define which nodes implement the |
simonp@8244 | 1450 | <code>LinkStyle</code> interface. When doing so, they |
simonp@8303 | 1451 | must also define when a <span>CSS style sheet</span> is |
simonp@8305 | 1452 | <span title="create a CSS style sheet">created</span>.</p> |
simonp@8244 | 1453 | |
simonp@8244 | 1454 | |
simonp@8244 | 1455 | |
simonp@8244 | 1456 | |
simonp@8244 | 1457 | |
simonp@8440 | 1458 | <h4>Requirements on User Agents Implementing the xml-stylesheet processing instruction</h4> |
simonp@8440 | 1459 | |
simonp@8440 | 1460 | <!-- XXX load/error events --> |
simonp@8244 | 1461 | |
simonp@8244 | 1462 | <pre class="idl"><span data-anolis-spec=dom>ProcessingInstruction</span> implements <span>LinkStyle</span>;</pre> |
simonp@8244 | 1463 | |
simonp@8440 | 1464 | <p>The <dfn>prolog</dfn> refers to <span data-anolis-spec=dom title=concept-node>nodes</span> that are children of the |
simonp@8440 | 1465 | <span data-anolis-spec=dom title=concept-document>document</span> and are not <span data-anolis-spec=dom title=concept-tree-following>following</span> the |
simonp@8440 | 1466 | <code data-anolis-spec=dom>Element</code> child of the <span data-anolis-spec=dom title=concept-document>document</span>, if any. |
simonp@8440 | 1467 | |
simonp@9720 | 1468 | <p>When a <code data-anolis-spec=dom>ProcessingInstruction</code> <span data-anolis-spec=dom title=concept-node>node</span> <var>node</var> becomes part of the |
simonp@9720 | 1469 | <span>prolog</span>, is no longer part of the <span>prolog</span>, or has its <span data-anolis-spec=dom title=concept-cd-data>data</span> changed, these steps |
simonp@9720 | 1470 | must be run: |
simonp@8244 | 1471 | |
simonp@8244 | 1472 | <ol> |
simonp@8440 | 1473 | <li><p>If an instance of this algorithm is currently running for <var>node</var>, abort that instance, and stop the associated |
simonp@8440 | 1474 | <span data-anolis-spec=fetch title=concept-fetch>fetching</span> if applicable. |
simonp@8440 | 1475 | |
simonp@8440 | 1476 | <li><p>If <var>node</var> has an <span>associated CSS style sheet</span>, <span title="remove a CSS style sheet">remove</span> it. |
simonp@9661 | 1477 | |
simonp@8440 | 1478 | <li><p>If <var>node</var> is not an <span data-anolis-spec=xmlss>xml-stylesheet processing instruction</span>, terminate these steps. |
simonp@9661 | 1479 | |
simonp@8440 | 1480 | <li><p>If <var>node</var> does not have an <code title>href</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>, terminate these steps. |
simonp@8440 | 1481 | |
simonp@8406 | 1482 | <li><p>Let <var>title</var> be the value of the |
simonp@8304 | 1483 | <code title>title</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> or the empty string if the |
simonp@8304 | 1484 | <code title>title</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> is not specified.</p></li> |
simonp@8304 | 1485 | |
simonp@8304 | 1486 | <li><p>If there is an <code title>alternate</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> |
simonp@8244 | 1487 | whose value is a <span data-anolis-spec=dom>case-sensitive</span> match |
simonp@8406 | 1488 | for "<code title>yes</code>" and <var>title</var> is the |
simonp@8244 | 1489 | empty string terminate these steps.</p></li> |
simonp@8244 | 1490 | |
simonp@8304 | 1491 | <li><p>If there is a <code title>type</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> whose |
simonp@8244 | 1492 | value is not a <span>supported styling language</span> the user agent |
simonp@8244 | 1493 | may terminate these steps.</p></li> |
simonp@8244 | 1494 | |
simonp@8406 | 1495 | <li><p>Let <var>input URL</var> be the value specified by the |
simonp@8372 | 1496 | <code title>href</code> <span data-anolis-spec=xmlss>pseudo-attribute</span>. |
simonp@9661 | 1497 | |
simonp@8522 | 1498 | <li><p>Let <var>document</var> be <var>node</var>'s <span data-anolis-spec=dom title=concept-node-document>node document</span> |
simonp@9661 | 1499 | |
simonp@8522 | 1500 | <li><p>Let <var>base URL</var> be <var>document</var>'s <span data-anolis-spec=html>document base URL</span>. |
simonp@9661 | 1501 | |
simonp@8522 | 1502 | <li><p>Let <var>referrer</var> be <var>document</var>'s <span data-anolis-spec=html title="the document's address">address</span>. |
simonp@8522 | 1503 | |
simonp@8523 | 1504 | <li><p>Let <var>parsed URL</var> be the return value of invoking the <span data-anolis-spec=url title=concept-url-parser>URL parser</span> with the |
simonp@8523 | 1505 | string <var>input URL</var> and the base URL <var>base URL</var>. |
simonp@9661 | 1506 | |
simonp@8523 | 1507 | <li><p>If <var>parsed URL</var> is failure, terminate these steps. |
simonp@8523 | 1508 | |
simonp@8523 | 1509 | <li><p>Let <var>response</var> be the result of <span title="fetch a CSS style sheet">fetching a CSS style sheet</span> with parsed URL <var>parsed URL</var>, |
simonp@8523 | 1510 | referrer <var>referrer</var> and document <var>document</var>. |
simonp@9661 | 1511 | |
simonp@8522 | 1512 | <li><p>If <var>response</var> is an error, terminate these steps. |
simonp@8244 | 1513 | |
simonp@8244 | 1514 | <li> |
simonp@8305 | 1515 | <p><span>Create a CSS style sheet</span> with the following properties:</p> |
simonp@8244 | 1516 | |
simonp@8244 | 1517 | <dl> |
simonp@8305 | 1518 | <dt><span title=concept-css-style-sheet-location>location</span></dt> |
simonp@8406 | 1519 | <dd><p>The result of invoking the <span data-anolis-spec=url title=concept-url-serializer>URL serializer</span> with <var>parsed URL</var>.</p></dd> |
simonp@8244 | 1520 | |
simonp@8441 | 1521 | <dt><span title=concept-css-style-sheet-parent-css-style-sheet>parent CSS style sheet</span></dt> |
simonp@8372 | 1522 | <dd><p>null.</p></dd> |
simonp@8244 | 1523 | |
simonp@8305 | 1524 | <dt><span title=concept-css-style-sheet-owner-node>owner node</span></dt> |
simonp@8441 | 1525 | <dd><p><var>node</var>.</p></dd> |
simonp@8244 | 1526 | |
simonp@8305 | 1527 | <dt><span title=concept-css-style-sheet-owner-css-rule>owner CSS rule</span></dt> |
simonp@8372 | 1528 | <dd><p>null.</p></dd> |
simonp@8244 | 1529 | |
simonp@8305 | 1530 | <dt><span title=concept-css-style-sheet-media>media</span></dt> |
simonp@8304 | 1531 | <dd><p>The value of the <code title>media</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> |
simonp@8244 | 1532 | if any, or the empty string otherwise.</p></dd> |
simonp@8244 | 1533 | |
simonp@8305 | 1534 | <dt><span title=concept-css-style-sheet-title>title</span></dt> |
simonp@8406 | 1535 | <dd><p><var>title</var>.</p></dd> |
simonp@8244 | 1536 | |
simonp@8305 | 1537 | <dt><span title=concept-css-style-sheet-alternate-flag>alternate flag</span></dt> |
simonp@8304 | 1538 | <dd><p>Set if the <code title>alternate</code> <span data-anolis-spec=xmlss>pseudo-attribute</span> |
simonp@8244 | 1539 | value is a <span data-anolis-spec=dom>case-sensitive</span> match for |
simonp@9044 | 1540 | "<code title>yes</code>", or unset otherwise. |
simonp@9661 | 1541 | |
simonp@8372 | 1542 | <dt><span title=concept-css-style-sheet-origin-clean-flag>origin-clean flag</span> |
simonp@9661 | 1543 | <dd><p>Set if <var>response</var> is <span title>CORS-same-origin</span><!--XXX xref-->, or unset otherwise. |
simonp@8244 | 1544 | </dl> |
simon@9919 | 1545 | |
simon@9919 | 1546 | <p>The CSS <span>environment encoding</span> is the result of running the following steps:</p> |
simon@9919 | 1547 | |
simon@9919 | 1548 | <ol> |
simon@9919 | 1549 | <li><p>If the element has a <code title>charset</code> |
simon@9919 | 1550 | <span data-anolis-spec=xmlss>pseudo-attribute</span>, |
simon@9919 | 1551 | <span>get an encoding</span> from that pseudo-attribute's value. |
simon@9919 | 1552 | If that succeeds, return the resulting encoding and abort these steps.</p></li> |
simon@9919 | 1553 | |
simon@9919 | 1554 | <li><p>Otherwise, return the <span>document's character encoding</span>. |
simon@9919 | 1555 | <span data-anolis-ref>DOM</span></p></li> |
simon@9919 | 1556 | </ol> |
simonp@8244 | 1557 | </li> |
simonp@8244 | 1558 | </ol> |
simonp@8244 | 1559 | |
simonp@8953 | 1560 | <p>A style sheet referenced by an <span data-anolis-spec=xmlss>xml-stylesheet processing instruction</span> using the rules in this section, in the context of |
simonp@9661 | 1561 | the <code data-anolis-spec=dom>Document</code> of an <span data-anolis-spec=html>XML parser</span> is said to be |
simonp@8953 | 1562 | <span data-anolis-spec=html>a style sheet that is blocking scripts</span> if the <code data-anolis-spec=dom>ProcessingInstruction</code> |
simonp@8953 | 1563 | <span data-anolis-spec=dom title=concept-node>node</span> was created by that <code data-anolis-spec=dom>Document</code>'s parser, and the style sheet was |
simonp@8953 | 1564 | enabled when the node was created by the parser, and the <span data-anolis-spec=html>style sheet ready</span> flag is not yet set, and, the last time the |
simonp@8953 | 1565 | <span data-anolis-spec=html>event loop</span> reached step 1, the node was in that Document, and the user agent hasn't given up on that particular style sheet |
simonp@8953 | 1566 | yet. A user agent may give up on such a style sheet at any time. |
simonp@8244 | 1567 | |
simonp@8244 | 1568 | <h4>Requirements on User Agents Implementing the HTTP |
simonp@8244 | 1569 | <code title>Link</code> Header</h4> |
simonp@8244 | 1570 | |
simonp@8244 | 1571 | <!-- XXX ref, one day --> |
simonp@8244 | 1572 | |
simonp@8244 | 1573 | <!-- XXX deal with media param --> |
simonp@8244 | 1574 | |
simonp@8539 | 1575 | <p class=atrisk>For each HTTP <code title>Link</code> header of which one |
simonp@8244 | 1576 | of the link relation types is an |
simonp@8244 | 1577 | <span data-anolis-spec=dom>ASCII case-insensitive</span> match |
simonp@8304 | 1578 | for "<code title>stylesheet</code>" these steps |
simonp@8244 | 1579 | must be run:</p> |
simonp@8244 | 1580 | |
simonp@8244 | 1581 | <ol> |
simonp@8406 | 1582 | <li><p>Let <var>title</var> be the value of the first of all the |
simonp@8453 | 1583 | <code title>title</code> parameters. |
simonp@8244 | 1584 | If there are no such parameters it is the empty string.</p></li> |
simonp@8244 | 1585 | |
simonp@8244 | 1586 | <li><p>If one of the (other) link relation types is an |
simonp@8244 | 1587 | <span data-anolis-spec=dom>ASCII case-insensitive</span> match for |
simonp@8406 | 1588 | "<code title>alternate</code>" and <var>title</var> is the |
simonp@8244 | 1589 | empty string terminate these steps.</p></li> |
simonp@8244 | 1590 | |
simonp@8435 | 1591 | <li><p>Let <var>input URL</var> be the value specified. <span class=issue title>Be more specific</span> |
simonp@9661 | 1592 | |
simonp@8435 | 1593 | <li><p>Let <var>base URL</var> be the document's <span data-anolis-spec=html>document base URL</span>. <span class=issue title>Is there a document at this |
simonp@8372 | 1594 | point?</span> |
simonp@9661 | 1595 | |
simonp@8522 | 1596 | <li><p>Let <var>referrer</var> be the document's <span data-anolis-spec=html title="the document's address">address</span>. |
simonp@9661 | 1597 | |
simonp@8406 | 1598 | <li><p>Let <var>origin</var> be the document's <span data-anolis-spec=html>origin</span>. |
simonp@9661 | 1599 | |
simonp@8523 | 1600 | <li><p>Let <var>parsed URL</var> be the return value of invoking the <span data-anolis-spec=url title=concept-url-parser>URL parser</span> with the |
simonp@8523 | 1601 | string <var>input URL</var> and the base URL <var>base URL</var>. |
simonp@9661 | 1602 | |
simonp@8523 | 1603 | <li><p>If <var>parsed URL</var> is failure, terminate these steps. |
simonp@8523 | 1604 | |
simonp@8523 | 1605 | <li><p>Let <var>response</var> be the result of <span title="fetch a CSS style sheet">fetching a CSS style sheet</span> with parsed URL <var>parsed URL</var>, |
simonp@8523 | 1606 | referrer <var>referrer</var> and document being the document. <span class=issue title>What if the HTML parser hasn't decided on quirks/non-quirks yet?</span> |
simonp@8244 | 1607 | |
simonp@8244 | 1608 | <li> |
simonp@8305 | 1609 | <p><span>Create a CSS style sheet</span> with the following properties:</p> |
simonp@8244 | 1610 | |
simonp@8244 | 1611 | <dl> |
simonp@8305 | 1612 | <dt><span title=concept-css-style-sheet-location>location</span></dt> |
simonp@8406 | 1613 | <dd><p>The result of invoking the <span data-anolis-spec=url title=concept-url-serializer>URL serializer</span> with <var>parsed URL</var>.</p></dd> |
simonp@8244 | 1614 | |
simonp@8305 | 1615 | <dt><span title=concept-css-style-sheet-owner-node>owner node</span></dt> |
simonp@8372 | 1616 | <dd><p>null.</p></dd> |
simonp@8244 | 1617 | |
simonp@8441 | 1618 | <dt><span title=concept-css-style-sheet-parent-css-style-sheet>parent CSS style sheet</span></dt> |
simonp@8372 | 1619 | <dd><p>null.</p></dd> |
simonp@8244 | 1620 | |
simonp@8305 | 1621 | <dt><span title=concept-css-style-sheet-owner-css-rule>owner CSS rule</span></dt> |
simonp@8372 | 1622 | <dd><p>null.</p></dd> |
simonp@8244 | 1623 | |
simonp@8305 | 1624 | <dt><span title=concept-css-style-sheet-media>media</span></dt> |
simonp@8304 | 1625 | <dd><p>The value of the first <code title>media</code> parameter.</p></dd> |
simonp@8244 | 1626 | <!-- XXX register media parameter? bah --> |
simonp@8244 | 1627 | |
simonp@8305 | 1628 | <dt><span title=concept-css-style-sheet-title>title</span></dt> |
simonp@8406 | 1629 | <dd><p><var>title</var>.</p></dd> |
simonp@8244 | 1630 | |
simonp@8305 | 1631 | <dt><span title=concept-css-style-sheet-alternate-flag>alternate flag</span></dt> |
simonp@8244 | 1632 | <dd><p>Set if one of the specified link relation type for this HTTP |
simonp@8406 | 1633 | <code title>Link</code> header is an |
simonp@8244 | 1634 | <span data-anolis-spec=dom>ASCII case-insensitive</span> match for |
simonp@8304 | 1635 | "<code title>alternate</code>", or false otherwise. |
simonp@9661 | 1636 | |
simonp@8372 | 1637 | <dt><span title=concept-css-style-sheet-origin-clean-flag>origin-clean flag</span> |
simonp@9661 | 1638 | <dd><p>Set if <var>response</var> is <span title>CORS-same-origin</span><!--XXX xref-->, or unset otherwise. |
simonp@8244 | 1639 | </dl> |
simonp@8244 | 1640 | </li> |
simonp@8244 | 1641 | </ol> |
simonp@8244 | 1642 | |
simonp@8953 | 1643 | <p>A style sheet referenced by a HTTP <code title>Link</code> header using the rules in this section is said to be <span data-anolis-spec=html>a style sheet |
simonp@8953 | 1644 | that is blocking scripts</span> if the style sheet was enabled when created, and the <span data-anolis-spec=html>style sheet ready</span> flag is not yet set, |
simonp@8953 | 1645 | and the user agent hasn't given up on that particular style sheet yet. A user agent may give up on such a style sheet at any time. |
simonp@8244 | 1646 | |
simonp@8244 | 1647 | <h3>CSS Rules</h3> |
simonp@8244 | 1648 | |
simonp@8244 | 1649 | <p>A <dfn>CSS rule</dfn> is an abstract concept that |
simonp@8244 | 1650 | denotes a rule as defined by the CSS specification. A |
simonp@8244 | 1651 | <span>CSS rule</span> is represented as an object that implements a subclass of |
simonp@8244 | 1652 | the <code>CSSRule</code> interface, and which has the following |
simonp@8244 | 1653 | associated state items:</p> |
simonp@8244 | 1654 | |
simonp@8244 | 1655 | <dl> |
simonp@8305 | 1656 | <dt><dfn title=concept-css-rule-type>type</dfn></dt> |
simonp@8244 | 1657 | <dd><p>A non-negative integer associated with a particular type of rule. |
simonp@8444 | 1658 | This item is initialized when a rule is created and cannot change.</p></dd> |
simonp@8244 | 1659 | |
simonp@8305 | 1660 | <dt><dfn title=concept-css-rule-text>text</dfn></dt> |
simonp@8244 | 1661 | <dd><p>A text representation of the rule suitable for direct use in a style sheet. |
simonp@8444 | 1662 | This item is initialized when a rule is created and can be changed.</p></dd> |
simonp@8244 | 1663 | |
simonp@8305 | 1664 | <dt><dfn title=concept-css-rule-parent-css-rule>parent CSS rule</dfn></dt> |
simonp@8436 | 1665 | <dd><p>A reference to an enclosing <span>CSS rule</span> or null. |
simonp@8444 | 1666 | If the rule has an enclosing rule when it is created, then this item is initialized to the enclosing rule; otherwise it is null. It can be changed to |
simonp@8444 | 1667 | null.</p></dd> |
simonp@8244 | 1668 | |
simonp@8305 | 1669 | <dt><dfn title=concept-css-rule-parent-css-style-sheet>parent CSS style sheet</dfn></dt> |
simonp@8436 | 1670 | <dd><p>A reference to a parent <span>CSS style sheet</span> or null. |
simonp@8444 | 1671 | This item is initialized to reference an associated style sheet when the rule is created. It can be changed to null.</p></dd> |
simonp@8372 | 1672 | |
simonp@8406 | 1673 | <dt><dfn title=concept-css-rule-child-css-rules>child CSS rules</dfn> |
simonp@8444 | 1674 | <dd><p>A list of child <span title="CSS rule">CSS rules</span>. The list can be mutated. |
simonp@8244 | 1675 | </dl> |
simonp@8244 | 1676 | |
simonp@8244 | 1677 | <p>In addition to the above state, each <span>CSS rule</span> may be associated |
simonp@8305 | 1678 | with other state in accordance with its <span title=concept-css-rule-type>type</span>.</p> |
simonp@8244 | 1679 | |
simonp@9043 | 1680 | <p>To <dfn>parse a CSS rule</dfn> from a string <var>string</var>, run the following steps: |
simonp@9043 | 1681 | |
simonp@9043 | 1682 | <ol> |
simonp@9043 | 1683 | <li><p>Let <var>rule</var> be the return value of invoking <span data-anolis-spec=csssyntax>parse a rule</span> with <var>string</var>. |
simonp@9043 | 1684 | <li><p>If <var>rule</var> is a syntax error, return <var>rule</var>. |
simonp@9043 | 1685 | <li><p>Let <var>parsed rule</var> be the result of parsing <var>rule</var> according to the appropriate CSS specifications, dropping parts that are said to be |
simonp@9043 | 1686 | ignored. If the whole style rule is dropped, return a syntax error. |
simonp@9043 | 1687 | <li><p>Return <var>parsed rule</var>. |
simonp@9043 | 1688 | </ol> |
simonp@8244 | 1689 | |
simonp@8373 | 1690 | <p>To <dfn>serialize a CSS rule</dfn>, perform one of the following in accordance with the <span>CSS rule</span>'s |
simonp@8373 | 1691 | <span title="concept-css-rule-type">type</span>:</p> |
simonp@8244 | 1692 | |
simonp@8244 | 1693 | <dl class="switch"> |
simonp@8244 | 1694 | <dt><code>CSSStyleRule</code></dt> |
simonp@8244 | 1695 | <dd> |
simonp@8244 | 1696 | <p>The result of concatenating the following:</p> |
simonp@8244 | 1697 | <ol> |
simonp@8244 | 1698 | <li>The result of performing <span>serialize a group of selectors</span> on the rule's associated selectors.</li> |
simonp@8304 | 1699 | <li>The string "<code title> { </code>", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B), |
simonp@8244 | 1700 | followed by a single SPACE (U+0020).</li> |
simonp@8244 | 1701 | <li>The result of performing <span>serialize a CSS declaration block</span> on the rule's associated declarations.</li> |
simonp@8304 | 1702 | <li>If the rule is associated with one or more declarations, the string "<code title> </code>", i.e., a single SPACE (U+0020).</li> |
simonp@8304 | 1703 | <li>The string "<code title>}</code>", RIGHT CURLY BRACKET (U+007D). |
simonp@8244 | 1704 | </ol> |
simonp@8244 | 1705 | </dd> |
simonp@8244 | 1706 | |
simonp@8244 | 1707 | <dt><code>CSSCharsetRule</code></dt> |
simonp@8244 | 1708 | <dd> |
simonp@8244 | 1709 | <p>The result of concatenating the following:</p> |
simonp@8244 | 1710 | <ol> |
simonp@8304 | 1711 | <li>The string "<code title>@charset</code>" followed by a single SPACE (U+0020).</li> |
simonp@8244 | 1712 | <li>The result of performing <span>serialize a string</span> on the rule's character encoding.</li> |
simonp@8304 | 1713 | <li>The string "<code title>;</code>", i.e., SEMICOLON (U+003B). |
simonp@8244 | 1714 | </ol> |
simonp@8244 | 1715 | <div class="example"> |
simonp@8244 | 1716 | <pre>@charset "UTF-8";</pre> |
simonp@8226 | 1717 | </div> |
simonp@8244 | 1718 | </dd> |
simonp@8244 | 1719 | |
simonp@8244 | 1720 | <dt><code>CSSImportRule</code></dt> |
simonp@8244 | 1721 | <dd> |
simonp@8244 | 1722 | <p>The result of concatenating the following:</p> |
simonp@8226 | 1723 | <ol> |
simonp@8304 | 1724 | <li>The string "<code title>@import</code>" followed by a single SPACE (U+0020).</li> |
simonp@8244 | 1725 | <li>The result of performing <span>serialize a URL</span> on the rule's location.</li> |
simonp@8244 | 1726 | <li>If the rule's associated media list is not empty, a single SPACE (U+0020) followed by the |
simonp@8244 | 1727 | result of performing <span>serialize a media query list</span> on the media list. |
simonp@8304 | 1728 | <li>The string "<code title>;</code>", i.e., SEMICOLON (U+003B). |
simonp@8226 | 1729 | </ol> |
simonp@8244 | 1730 | <div class="example"> |
simonp@8244 | 1731 | <pre>@import url("import.css");</pre> |
simonp@8244 | 1732 | <pre>@import url("print.css") print;</pre> |
simonp@8244 | 1733 | </div> |
simonp@8244 | 1734 | </dd> |
simonp@8244 | 1735 | |
simonp@8244 | 1736 | <dt><code>CSSMediaRule</code></dt> |
simonp@8435 | 1737 | <dd><p class="issue">...</p></dd> |
simonp@8244 | 1738 | |
simonp@8582 | 1739 | <dt><code title>CSSFontFaceRule</code></dt> |
simonp@8435 | 1740 | <dd><p class="issue">...</p></dd> |
simonp@8244 | 1741 | |
simonp@8244 | 1742 | <dt><code>CSSPageRule</code></dt> |
simonp@8435 | 1743 | <dd><p class="issue">...</p></dd> |
simonp@8244 | 1744 | |
simonp@8244 | 1745 | <dt><code>CSSNamespaceRule</code></dt> |
simonp@8304 | 1746 | <dd><p>The literal string "<code title>@namespace</code>", followed by a single SPACE |
simonp@8244 | 1747 | (U+0020), followed by the |
simonp@8244 | 1748 | <span title="serialize an identifier">identifier escaped</span> value of the |
simonp@8244 | 1749 | <code title="dom-CSSNamespaceRule-prefix">prefix</code> attribute (if |
simonp@8244 | 1750 | any), followed by a single SPACE (U+0020) if there is a prefix, followed by the |
simonp@8244 | 1751 | <span title="serialize a URL">URL escaped</span> value of the |
simonp@8244 | 1752 | <code title="dom-CSSNamespaceRule-namespaceURI">namespaceURI</code> |
simonp@8304 | 1753 | attribute, followed the character "<code title>;</code>" (U+003B).</p></dd> |
simonp@8244 | 1754 | </dl> |
simonp@8244 | 1755 | |
simonp@8406 | 1756 | <p>To <dfn>insert a CSS rule</dfn> <var>rule</var> in a CSS rule list <var>list</var> at index <var>index</var>, follow these steps:</p> |
simonp@8287 | 1757 | <ol> |
simonp@8406 | 1758 | <li><p>Set <var>new rule</var> to the results of performing <span>parse a CSS rule</span> |
simonp@8433 | 1759 | on argument <var>rule</var>. |
simonp@8433 | 1760 | <li><p>If <var>new rule</var> is a syntax error, <span data-anolis-spec='dom' title='concept-throw'>throw</span> |
simonp@8433 | 1761 | a <code data-anolis-spec='dom'>SyntaxError</code> exception.</p></li> |
simonp@8406 | 1762 | <li><p>If <var>new rule</var> is an <code title>@charset</code> at-rule, <span data-anolis-spec='dom' title='concept-throw'>throw</span> a |
simonp@8287 | 1763 | <code data-anolis-spec='dom'>SyntaxError</code> exception. |
simonp@8406 | 1764 | <li><p>Set <var>length</var> to the number of items in <var>list</var>.</p></li> |
simonp@8406 | 1765 | <li><p>If <var>index</var> is greater than <var>length</var>, then <span data-anolis-spec='dom' title='concept-throw'>throw</span> |
simonp@8287 | 1766 | an <code data-anolis-spec='dom'>IndexSizeError</code> exception.</p></li> |
simonp@8406 | 1767 | <li><p>If <var>new rule</var> cannot be inserted into <var>list</var> at the zero-index position <var>index</var> due to constraints |
simonp@8304 | 1768 | specified by CSS, then <span data-anolis-spec='dom' title='concept-throw'>throw</span> |
simonp@8287 | 1769 | a <code data-anolis-spec='dom'>HierarchyRequestError</code> exception. <span data-anolis-ref>CSS</span></p> |
simon@8381 | 1770 | <p class='note'>For example, a CSS style sheet cannot contain an <code title>@import</code> at-rule after a style rule.</p></li> |
simonp@8406 | 1771 | <li><p>If <var>new rule</var> is an <code title>@namespace</code> at-rule, and <var>list</var> contains anything other than |
simonp@8288 | 1772 | <code title>@charset</code> at-rules, <code title>@import</code> at-rules, and <code title>@namespace</code> at-rules, |
simonp@8288 | 1773 | <span data-anolis-spec='dom' title='concept-throw'>throw</span> an <code data-anolis-spec=dom>InvalidStateError</code> exception. |
simonp@8406 | 1774 | <li><p>Insert <var>new rule</var> into <var>list</var> at the zero-indexed position <var>index</var>.<p></li> |
simonp@8406 | 1775 | <li><p>Return <var>index</var>. |
simonp@8287 | 1776 | </ol> |
simonp@8287 | 1777 | |
simonp@8406 | 1778 | <p>To <dfn>remove a CSS rule</dfn> from a CSS rule list <var>list</var> at index <var>index</var>, follow these steps:</p> |
simonp@8287 | 1779 | <ol> |
simonp@8406 | 1780 | <li><p>Set <var>length</var> to the number of items in <var>list</var>.</p></li> |
simonp@8406 | 1781 | <li><p>If <var>index</var> is greater than or equal to <var>length</var>, then <span data-anolis-spec='dom' title='concept-throw'>throw</span> |
simonp@8287 | 1782 | an <code data-anolis-spec='dom'>IndexSizeError</code> exception.</p></li> |
simonp@8406 | 1783 | <li><p>Set <var>old rule</var> to the <var>index</var>th item in <var>list</var>.</p></li> |
simonp@8406 | 1784 | <li><p>If <var>old rule</var> is an <code title>@namespace</code> at-rule, and <var>list</var> contains anything other than |
simonp@8288 | 1785 | <code title>@charset</code> at-rules, <code title>@import</code> at-rules, and <code title>@namespace</code> at-rules, |
simonp@8288 | 1786 | <span data-anolis-spec='dom' title='concept-throw'>throw</span> an <code data-anolis-spec=dom>InvalidStateError</code> exception. |
simonp@8406 | 1787 | <li><p>Remove rule <var>old rule</var> from <var>list</var> at the zero-indexed position <var>index</var>.<p></li> |
simonp@8444 | 1788 | <li><p>Set <var>old rule</var>'s <span title=concept-css-rule-parent-css-rule>parent CSS rule</span> and |
simonp@8444 | 1789 | <span title=concept-css-rule-parent-css-style-sheet>parent CSS style sheet</span> to null. |
simonp@8287 | 1790 | </ol> |
simonp@8287 | 1791 | |
simonp@8244 | 1792 | |
simonp@8244 | 1793 | <h4>The <code title>CSSRuleList</code> Interface</h4> |
simonp@8229 | 1794 | |
simonp@8229 | 1795 | <p>The <code>CSSRuleList</code> interface represents an ordered collection of CSS style rules.</p> |
simonp@8229 | 1796 | |
simonp@8229 | 1797 | <pre class=idl>[ArrayClass] |
simonp@8229 | 1798 | interface <dfn>CSSRuleList</dfn> { |
simonp@8229 | 1799 | getter <span>CSSRule</span>? <span title=dom-CSSRuleList-item>item</span>(unsigned long index); |
simonp@8229 | 1800 | readonly attribute unsigned long <span title=dom-CSSRuleList-length>length</span>; |
simonp@8229 | 1801 | };</pre> |
simonp@8229 | 1802 | |
simonp@8304 | 1803 | <p>The object's <span data-anolis-spec=webidl>supported property indices</span> are the numbers in the range zero to one less than the number of |
simonp@8304 | 1804 | <code>CSSRule</code> objects represented by the collection. If there are no such <code>CSSRule</code> objects, then there are no |
simonp@8304 | 1805 | <span data-anolis-spec=webidl>supported property indices</span>. |
simonp@8304 | 1806 | |
simonp@8406 | 1807 | <p>The <dfn title=dom-CSSRuleList-item><code>item(<var>index</var>)</code></dfn> method must return the <var>index</var>th <code>CSSRule</code> |
simonp@8406 | 1808 | object in the collection. If there is no <var>index</var>th object in the collection, then the method must return null. |
simonp@8304 | 1809 | |
simonp@8304 | 1810 | <p>The <dfn title=dom-CSSRuleList-length><code>length</code></dfn> attribute must return the number of <code>CSSRule</code> objects represented by the |
simonp@8304 | 1811 | collection. |
simonp@8226 | 1812 | |
simonp@8244 | 1813 | <h4>The <code title>CSSRule</code> Interface</h4> |
simonp@8226 | 1814 | |
simonp@8226 | 1815 | <!-- |
simonp@8226 | 1816 | // |
simonp@8226 | 1817 | // All members defined since DOM-2 Style. The only differences are: |
simonp@8226 | 1818 | // |
simonp@8226 | 1819 | // 1. removal of UNKNOWN_RULE = 0 constant |
simonp@8226 | 1820 | // 2. addition of NAMESPACE_RULE = 10 constant |
simonp@8226 | 1821 | // 3. removal of commented raises(DOMException) on setting cssText |
simonp@8226 | 1822 | // |
simonp@8226 | 1823 | --> |
simonp@8226 | 1824 | |
simonp@8226 | 1825 | <p>The <code>CSSRule</code> interface represents an abstract, base CSS style rule. Each |
simonp@8244 | 1826 | distinct CSS style rule type is represented by a distinct interface that |
simonp@8244 | 1827 | inherits from this interface.</p> |
simonp@9661 | 1828 | |
simonp@8226 | 1829 | <pre class=idl>interface <dfn>CSSRule</dfn> { |
simonp@8262 | 1830 | const unsigned short <span title=dom-CSSRule-STYLE_RULE>STYLE_RULE</span> = 1; |
simonp@8262 | 1831 | const unsigned short <span title=dom-CSSRule-CHARSET_RULE>CHARSET_RULE</span> = 2; |
simonp@8262 | 1832 | const unsigned short <span title=dom-CSSRule-IMPORT_RULE>IMPORT_RULE</span> = 3; |
simonp@8262 | 1833 | const unsigned short <span title=dom-CSSRule-MEDIA_RULE>MEDIA_RULE</span> = 4; |
simonp@8262 | 1834 | const unsigned short <span title=dom-CSSRule-FONT_FACE_RULE>FONT_FACE_RULE</span> = 5; |
simonp@8262 | 1835 | const unsigned short <span title=dom-CSSRule-PAGE_RULE>PAGE_RULE</span> = 6; |
simonp@8901 | 1836 | const unsigned short <span title=dom-CSSRule-MARGIN_RULE>MARGIN_RULE</span> = 9; |
simonp@8262 | 1837 | const unsigned short <span title=dom-CSSRule-NAMESPACE_RULE>NAMESPACE_RULE</span> = 10; |
simonp@8262 | 1838 | readonly attribute unsigned short <span title=dom-CSSRule-type>type</span>; |
simonp@8262 | 1839 | attribute DOMString <span title=dom-CSSRule-cssText>cssText</span>; |
simonp@8262 | 1840 | readonly attribute <span>CSSRule</span>? <span title=dom-CSSRule-parentRule>parentRule</span>; |
simonp@8262 | 1841 | readonly attribute <span>CSSStyleSheet</span>? <span title=dom-CSSRule-parentStyleSheet>parentStyleSheet</span>; |
simonp@8226 | 1842 | };</pre> |
simonp@8226 | 1843 | |
simonp@8263 | 1844 | <p>The <dfn title=dom-CSSRule-type><code>type</code></dfn> attribute must return the CSS rule type, as follows: |
simonp@8263 | 1845 | |
simonp@8263 | 1846 | <dl class=switch> |
simonp@8263 | 1847 | <dt>If the object is a <code>CSSStyleRule</code> |
simonp@8263 | 1848 | <dd><p>Return <dfn title=dom-CSSRule-STYLE_RULE><code>STYLE_RULE</code></dfn> (numeric value 1). |
simonp@8263 | 1849 | <dt>If the object is a <code>CSSCharsetRule</code> |
simonp@8263 | 1850 | <dd><p>Return <dfn title=dom-CSSRule-CHARSET_RULE><code>CHARSET_RULE</code></dfn> (numberic value 2). |
simonp@8263 | 1851 | <dt>If the object is a <code>CSSImportRule</code> |
simonp@8263 | 1852 | <dd><p>Return <dfn title=dom-CSSRule-IMPORT_RULE><code>IMPORT_RULE</code></dfn> (numberic value 3). |
simonp@8263 | 1853 | <dt>If the object is a <code>CSSMediaRule</code> |
simonp@8263 | 1854 | <dd><p>Return <dfn title=dom-CSSRule-MEDIA_RULE><code>MEDIA_RULE</code></dfn> (numeric value 4). |
simonp@8582 | 1855 | <dt>If the object is a <code title>CSSFontFaceRule</code> |
simonp@8263 | 1856 | <dd><p>Return <dfn title=dom-CSSRule-FONT_FACE_RULE><code>FONT_FACE_RULE</code></dfn> (numeric value 5). |
simonp@8263 | 1857 | <dt>If the object is a <code>CSSPageRule</code> |
simonp@8263 | 1858 | <dd><p>Return <dfn title=dom-CSSRule-PAGE_RULE><code>PAGE_RULE</code></dfn> (numeric value 6). |
simonp@8263 | 1859 | <dt>If the object is a <code>CSSNamespaceRule</code> |
simonp@8901 | 1860 | <dd><p>Return <dfn title=dom-CSSRule-MARGIN_RULE><code>MARGIN_RULE</code></dfn> (numeric value 9). |
simonp@8901 | 1861 | <dt>If the object is a <code>CSSMarginRule</code> |
simonp@8263 | 1862 | <dd><p>Return <dfn title=dom-CSSRule-NAMESPACE_RULE><code>NAMESPACE_RULE</code></dfn> (numeric value 10). |
simonp@8263 | 1863 | <dt>Otherwise |
simonp@8263 | 1864 | <dd><p>Return a value defined on the <a href='http://wiki.csswg.org/spec/cssom-constants'>CSSOM Constants</a> wiki page. |
simonp@8263 | 1865 | </dl> |
simonp@8263 | 1866 | |
simonp@8263 | 1867 | <p class=note>The value 0, formerly known as <code title>UNKNOWN_RULE</code>, is made |
simonp@8263 | 1868 | obsolete by this specification. This value will not be re-allocated in the future and will remain reserved.</p> |
simonp@8226 | 1869 | |
simonp@8226 | 1870 | <p>The <dfn title=dom-CSSRule-cssText><code>cssText</code></dfn> attribute must return a <span title='serialize a CSS rule'>serialization</span> of the |
simonp@8226 | 1871 | <span>CSS rule</span>.</p> |
simonp@8226 | 1872 | <p>On setting the <code title=dom-CSSRule-cssText>cssText</code> attribute these steps must be run:</p> |
simonp@8226 | 1873 | <ol> |
simonp@8433 | 1874 | <li><p>Let <var>new rule</var> be the returned value of <span title='parse a CSS rule'>parsing</span> the value.</p></li> |
simonp@8433 | 1875 | <li><p>If <var>new rule</var> is a syntax error, terminate this algorithm.</p></li> |
simonp@8433 | 1876 | <li><p>If the <span title=concept-css-rule-type>type</span> of <var>new rule</var> does not match the <span title=concept-css-rule-type>type</span> of |
simonp@8226 | 1877 | the current object |
simonp@8226 | 1878 | <span data-anolis-spec=dom title=concept-throw>throw</span> an |
simonp@8293 | 1879 | <code data-anolis-spec=dom>InvalidModificationError</code> exception.</li> |
simonp@8433 | 1880 | <li><p>Replace the current object with <var>new rule</var>.</p></li> |
simonp@8226 | 1881 | </ol> |
simonp@8226 | 1882 | |
simonp@8436 | 1883 | <p>The <dfn title=dom-CSSRule-parentRule><code>parentRule</code></dfn> attribute must return the <span title=concept-css-rule-parent-css-rule>parent CSS |
simonp@8436 | 1884 | rule</span>.</p> |
simonp@8304 | 1885 | <p class='note'>For example, <code title>@media</code> can enclose a rule, in which case <code title=dom-CSSRule-parentRule>parentRule</code> would |
simonp@8436 | 1886 | be non-null; in cases where there is no enclosing rule, <code title=dom-CSSRule-parentRule>parentRule</code> will be null.</p> |
simonp@8436 | 1887 | |
simonp@8436 | 1888 | <p>The <dfn title=dom-CSSRule-parentStyleSheet><code>parentStyleSheet</code></dfn> attribute must return the |
simonp@8436 | 1889 | <span title=concept-css-rule-parent-css-style-sheet>parent CSS style sheet</span>.</p> |
simonp@8289 | 1890 | <p class='note'>The only circumstance where null is returned when a rule has been <span title="remove a CSS rule">removed</span>.</p> |
simonp@8304 | 1891 | <p class='note'>Removing a <code data-anolis-spec=dom>Node</code> that implements the <code>LinkStyle</code> interface from a |
simonp@8304 | 1892 | <code data-anolis-spec=dom>Document</code> instance does not (by itself) cause the <code>CSSStyleSheet</code> referenced by a <code>CSSRule</code> to be |
simonp@8304 | 1893 | unreachable.</p> |
simonp@8226 | 1894 | |
simonp@8226 | 1895 | |
simonp@8244 | 1896 | <h4>The <code title>CSSStyleRule</code> Interface</h4> |
simonp@8226 | 1897 | |
simonp@8226 | 1898 | <!-- |
simonp@8226 | 1899 | // |
simonp@8226 | 1900 | // All members defined since DOM-2 Style. The only differences are: |
simonp@8226 | 1901 | // |
simonp@8226 | 1902 | // 1. removal of commented raises(DOMException) on setting selectorText |
simonp@8226 | 1903 | // |
simonp@8226 | 1904 | --> |
simonp@8226 | 1905 | |
simon@8381 | 1906 | <p>The <code>CSSStyleRule</code> interface represents a style rule.</p> |
simon@8381 | 1907 | |
simon@8381 | 1908 | <p class=note>CSS 2.1 calls style rule <a href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule sets</a>.</p> |
simonp@8226 | 1909 | |
simonp@8226 | 1910 | <pre class=idl>interface <dfn>CSSStyleRule</dfn> : <span>CSSRule</span> { |
simonp@8226 | 1911 | attribute DOMString <span title=dom-CSSStyleRule-selectorText>selectorText</span>; |
simonp@8902 | 1912 | [SameObject, PutForwards=<span title=dom-CSSStyleDeclaration-cssText>cssText</span>] readonly attribute <span>CSSStyleDeclaration</span> <!-- |
simonp@8436 | 1913 | --><span title=dom-CSSStyleRule-style>style</span>; |
simonp@8226 | 1914 | };</pre> |
simonp@8226 | 1915 | |
simonp@8304 | 1916 | <p>The <dfn title=dom-CSSStyleRule-selectorText><code>selectorText</code></dfn> attribute, on getting, must return the result of |
simonp@8304 | 1917 | <span title='serialize a group of selectors'>serializing</span> the associated <span>group of selectors</span>.</p> |
simonp@8226 | 1918 | <p>On setting the <code title=dom-CSSStyleRule-selectorText>selectorText</code> attribute these steps must be run:</p> |
simonp@8226 | 1919 | <ol> |
simonp@8226 | 1920 | <li><p>Run the <span>parse a group of selectors</span> algorithm on the given value.</p></li> |
simonp@8226 | 1921 | <li><p>If the algorithm returns a non-null value replace the associated <span>group of selectors</span> with the returned value.</p></li> |
simonp@8289 | 1922 | <li><p>Otherwise, if the algorithm returns a null value, do nothing.</p></li> |
simonp@8226 | 1923 | </ol> |
simonp@8226 | 1924 | |
simonp@8590 | 1925 | <p>The <dfn title=dom-CSSStyleRule-style><code>style</code></dfn> attribute must return a <code>CSSStyleDeclaration</code> object for the style rule, with the |
simonp@8916 | 1926 | following properties: |
simonp@8916 | 1927 | <dl> |
simonp@8916 | 1928 | <dt><span title=concept-css-declaration-block-readonly-flag>readonly flag</span> |
simonp@8916 | 1929 | <dd><p>Unset. |
simonp@8916 | 1930 | <dt><span title=concept-css-declaration-block-declarations>declarations</span> |
simonp@8916 | 1931 | <dd><p>The declared declarations in the rule, in <span title=concept-declarations-specified-order>specified order</span>.</p> |
simonp@8916 | 1932 | <dt><span title=contept-css-declaration-block-parent-css-rule>parent CSS rule</span> |
simonp@8916 | 1933 | <dd><p>The <span data-anolis-spec=dom>context object</span>. |
simonp@8916 | 1934 | <dt><span title=concept-css-declaration-block-owner-node>owner node</span> |
simonp@8916 | 1935 | <dd><p>Null. |
simonp@8916 | 1936 | </dl> |
simonp@8807 | 1937 | |
simonp@8807 | 1938 | <p>The <dfn title=concept-declarations-specified-order>specified order</dfn> for declarations is the same as specified, but with shorthand properties |
simonp@8807 | 1939 | expanded into their longhand properties, in canonical order. If a property is specified more than once (after shorthand expansion), only the |
simonp@8807 | 1940 | one with greatest cascading order must be represented, at the same relative position as it was specified. <span data-anolis-ref>CSSCASCADE</span> |
simonp@8226 | 1941 | |
simonp@8244 | 1942 | <h4>The <code title>CSSCharsetRule</code> Interface</h4> |
simonp@8226 | 1943 | |
simonp@8304 | 1944 | <p>The <code>CSSCharsetRule</code> interface represents an <code title>@charset</code> at-rule.</p> |
simonp@8226 | 1945 | |
simonp@8226 | 1946 | <pre class=idl>interface <dfn>CSSCharsetRule</dfn> : <span>CSSRule</span> { |
simonp@8226 | 1947 | attribute DOMString <span title=dom-CSSCharsetRule-encoding>encoding</span>; |
simonp@8226 | 1948 | };</pre> |
simonp@8226 | 1949 | |
simonp@8304 | 1950 | <p>The <dfn title=dom-CSSCharsetRule-encoding><code>encoding</code></dfn> attribute must return the encoding information specified by the |
simonp@8304 | 1951 | <code title>@charset</code> at-rule.</p> |
simonp@8226 | 1952 | |
simonp@8226 | 1953 | |
simonp@8244 | 1954 | <h4>The <code title>CSSImportRule</code> Interface</h4> |
simonp@8226 | 1955 | |
simonp@8304 | 1956 | <p>The <code>CSSImportRule</code> interface represents an <code title>@import</code> at-rule.</p> |
simonp@8226 | 1957 | |
simonp@8226 | 1958 | <pre class=idl>interface <dfn>CSSImportRule</dfn> : <span>CSSRule</span> { |
simonp@8226 | 1959 | readonly attribute DOMString <span title=dom-CSSImportRule-href>href</span>; |
simonp@8820 | 1960 | [SameObject, PutForwards=<span title=dom-MediaList-mediaText>mediaText</span>] readonly attribute <span>MediaList</span> <!-- |
simonp@8820 | 1961 | --><span title=dom-CSSImportRule-media>media</span>; |
simonp@8820 | 1962 | [SameObject] readonly attribute <span>CSSStyleSheet</span> <span title=dom-CSSImportRule-styleSheet>styleSheet</span>; |
simonp@8226 | 1963 | };</pre> |
simonp@8226 | 1964 | |
simonp@8304 | 1965 | <p>The <dfn title=dom-CSSImportRule-href><code>href</code></dfn> attribute must return the <span data-anolis-spec=url title=concept-url>URL</span> specified by |
simonp@8304 | 1966 | the <code title>@import</code> at-rule.</p> |
simonp@8227 | 1967 | <p class='note'>To get the resolved <span data-anolis-spec=url title=concept-url>URL</span> use the <code title='dom-StyleSheet-href'>href</code> |
simonp@8303 | 1968 | attribute of the associated <span>CSS style sheet</span>.</p> |
simonp@8226 | 1969 | |
simonp@8226 | 1970 | <p>The <dfn title=dom-CSSImportRule-media><code>media</code></dfn> attribute must return the value of the <code title='dom-StyleSheet-media'>media</code> |
simonp@8303 | 1971 | attribute of the associated <span>CSS style sheet</span>.</p> |
simonp@8303 | 1972 | |
simonp@8303 | 1973 | <p>The <dfn title=dom-CSSImportRule-styleSheet><code>styleSheet</code></dfn> attribute must return the associated <span>CSS style sheet</span>.</p> |
simonp@8372 | 1974 | <p class='note'>If loading of the style sheet fails its <span title=concept-css-style-sheet-css-rules>CSS rules</span> |
simonp@8304 | 1975 | list is simply empty, i.e., an <code title>@import</code> at-rule always has an associated <span>CSS style sheet</span>.</p> |
simonp@8226 | 1976 | |
simonp@8226 | 1977 | |
simonp@8482 | 1978 | <h4>The <code title>CSSGroupingRule</code> Interface</h4> |
simonp@8482 | 1979 | |
simonp@8482 | 1980 | <p>The <code>CSSGroupingRule</code> interface represents an at-rule that contains other rules nested inside itself. |
simonp@8482 | 1981 | |
simonp@8482 | 1982 | <pre class=idl>interface <dfn>CSSGroupingRule</dfn> : <span>CSSRule</span> { |
simonp@8820 | 1983 | [SameObject] readonly attribute <span>CSSRuleList</span> <span title=dom-CSSGroupingRule-cssRules>cssRules</span>; |
simonp@8482 | 1984 | unsigned long <span title=dom-CSSGroupingRule-insertRule>insertRule</span>(DOMString rule, unsigned long index); |
simonp@8482 | 1985 | void <span title=dom-CSSGroupingRule-deleteRule>deleteRule</span>(unsigned long index); |
simonp@8483 | 1986 | };</pre> |
simonp@8482 | 1987 | |
simonp@8482 | 1988 | <p>The <dfn title=dom-CSSGroupingRule-cssRules><code>cssRules</code></dfn> attribute must return a <code>CSSRuleList</code> object for the |
simonp@8482 | 1989 | <span title=concept-css-rule-child-css-rules>child CSS rules</span>.</p> |
simonp@8482 | 1990 | |
simonp@8482 | 1991 | <p>The <dfn title=dom-CSSGroupingRule-insertRule><code>insertRule(<var>rule</var>, <var>index</var>)</code></dfn> method must return the result of |
simonp@8482 | 1992 | invoking <span>insert a CSS rule</span> <var>rule</var> into the <span title=concept-css-rule-child-css-rules>child CSS rules</span> at |
simonp@8482 | 1993 | <var>index</var>.</p> |
simonp@8482 | 1994 | |
simonp@8482 | 1995 | <p>The <dfn title=dom-CSSGroupingRule-deleteRule><code>deleteRule(<var>index</var>)</code></dfn> method must <span>remove a CSS rule</span> from the |
simonp@8482 | 1996 | <span title=concept-css-rule-child-css-rules>child CSS rules</span> at <var>index</var>.</p> |
simonp@8482 | 1997 | |
simonp@8482 | 1998 | |
simonp@8244 | 1999 | <h4>The <code title>CSSMediaRule</code> Interface</h4> |
simonp@8226 | 2000 | |
simonp@8304 | 2001 | <p>The <code>CSSMediaRule</code> interface represents an <code title>@media</code> at-rule.</p> |
simonp@8226 | 2002 | |
simonp@8482 | 2003 | <pre class=idl>interface <dfn>CSSMediaRule</dfn> : <span>CSSGroupingRule</span> { |
simonp@8820 | 2004 | [SameObject, PutForwards=<span title=dom-MediaList-mediaText>mediaText</span>] readonly attribute <span>MediaList</span> <!-- |
simonp@8820 | 2005 | --><span title=dom-CSSMediaRule-media>media</span>; |
simonp@8226 | 2006 | };</pre> |
simonp@8226 | 2007 | |
simonp@8226 | 2008 | <p>The <dfn title=dom-CSSMediaRule-media><code>media</code></dfn> attribute must return a <code>MediaList</code> object for the list of media queries specified |
simonp@8304 | 2009 | with the <code title>@media</code> at-rule.</p> |
simonp@8304 | 2010 | |
simonp@8226 | 2011 | |
simonp@8244 | 2012 | <h4>The <code title>CSSPageRule</code> Interface</h4> |
simonp@9661 | 2013 | |
simonp@8304 | 2014 | <p>The <code>CSSPageRule</code> interface represents an <code title>@page</code> at-rule.</p> |
simonp@8445 | 2015 | <p class="issue">Need to define the rules for |
simonp@8327 | 2016 | <dfn>parse a list of CSS page selectors</dfn> and |
simonp@8327 | 2017 | <dfn>serialize a list of CSS page selectors</dfn>.</p> |
simonp@8226 | 2018 | |
simonp@8901 | 2019 | <pre class=idl>interface <dfn>CSSPageRule</dfn> : <span>CSSGroupingRule</span> { |
simonp@8901 | 2020 | attribute DOMString <span title=dom-CSSPageRule-selectorText>selectorText</span>; |
simonp@8902 | 2021 | [SameObject, PutForwards=<span title=dom-CSSStyleDeclaration-cssText>cssText</span>] readonly attribute <span>CSSStyleDeclaration</span> <!-- |
simonp@8484 | 2022 | --><span title=dom-CSSPageRule-style>style</span>; |
simonp@8226 | 2023 | };</pre> |
simonp@8226 | 2024 | |
simonp@8304 | 2025 | <p>The <dfn title=dom-CSSPageRule-selectorText><code>selectorText</code></dfn> attribute, on getting, must return the result of |
simonp@8327 | 2026 | <span title='serialize a list of CSS page selectors'>serializing</span> the associated <span>list of CSS page selectors</span>.</p> |
simonp@8226 | 2027 | <p>On setting the <code title=dom-CSSPageRule-selectorText>selectorText</code> attribute these steps must be run:</p> |
simonp@8226 | 2028 | <ol> |
simonp@8327 | 2029 | <li><p>Run the <span>parse a list of CSS page selectors</span> algorithm on the given value.</p></li> |
simonp@8327 | 2030 | <li><p>If the algorithm returns a non-null value replace the associated <span>list of CSS page selectors</span> with the returned value.</p></li> |
simonp@8289 | 2031 | <li><p>Otherwise, if the algorithm returns a null value, do nothing.</p></li> |
simonp@8226 | 2032 | </ol> |
simonp@8226 | 2033 | |
simonp@8902 | 2034 | <p>The <dfn title=dom-CSSPageRule-style><code>style</code></dfn> attribute must return a <code>CSSStyleDeclaration</code> object for the |
simonp@8916 | 2035 | <code title>@page</code> at-rule, with the following properties: |
simonp@8916 | 2036 | <dl> |
simonp@8916 | 2037 | <dt><span title=concept-css-declaration-block-readonly-flag>readonly flag</span> |
simonp@8916 | 2038 | <dd><p>Unset. |
simonp@8916 | 2039 | <dt><span title=concept-css-declaration-block-declarations>declarations</span> |
simonp@8916 | 2040 | <dd><p>The declared declarations in the rule, in <span title=concept-declarations-specified-order>specified order</span>.</p> |
simonp@8916 | 2041 | <dt><span title=contept-css-declaration-block-parent-css-rule>parent CSS rule</span> |
simonp@8916 | 2042 | <dd><p>The <span data-anolis-spec=dom>context object</span>. |
simonp@8916 | 2043 | <dt><span title=concept-css-declaration-block-owner-node>owner node</span> |
simonp@8916 | 2044 | <dd><p>Null. |
simonp@8916 | 2045 | </dl> |
simonp@8901 | 2046 | |
simonp@8901 | 2047 | |
simonp@8901 | 2048 | <h4>The <code title>CSSMarginRule</code> Interface</h4> |
simonp@8901 | 2049 | |
simonp@8901 | 2050 | <p>The <code title>CSSMarginRule</code> interface represents a margin at-rule (e.g. <code title>@top-left</code>) in an <code title>@page</code> at-rule. |
simonp@8901 | 2051 | <span data-anolis-ref>CSSPAGE</span> |
simonp@8901 | 2052 | |
simonp@8901 | 2053 | <pre class=idl>interface <dfn>CSSMarginRule</dfn> : <span>CSSRule</span> { |
simonp@8901 | 2054 | readonly attribute DOMString <span title=dom-CSSMarginRule-name>name</span>; |
simonp@8902 | 2055 | [SameObject, PutForwards=<span title=dom-CSSStyleDeclaration-cssText>cssText</span>] readonly attribute <span>CSSStyleDeclaration</span> <!-- |
simonp@8901 | 2056 | --><span title=dom-CSSMarginRule-style>style</span>; |
simonp@8901 | 2057 | };</pre> |
simonp@8901 | 2058 | |
simonp@8901 | 2059 | <p>The <dfn title=dom-CSSMarginRule-name><code>name</code></dfn> attribute must return the name of the margin at-rule. The <code title>@</code> character is not |
simonp@8901 | 2060 | included in the name. <span data-anolis-ref>CSSSYNTAX</span> |
simonp@8901 | 2061 | |
simonp@8902 | 2062 | <p>The <dfn title=dom-CSSMarginRule-style><code>style</code></dfn> attribute must return a <code>CSSStyleDeclaration</code> object for the |
simonp@8916 | 2063 | margin at-rule, with the following properties: |
simonp@8916 | 2064 | <dl> |
simonp@8916 | 2065 | <dt><span title=concept-css-declaration-block-readonly-flag>readonly flag</span> |
simonp@8916 | 2066 | <dd><p>Unset. |
simonp@8916 | 2067 | <dt><span title=concept-css-declaration-block-declarations>declarations</span> |
simonp@8916 | 2068 | <dd><p>The declared declarations in the rule, in <span title=concept-declarations-specified-order>specified order</span>.</p> |
simonp@8916 | 2069 | <dt><span title=contept-css-declaration-block-parent-css-rule>parent CSS rule</span> |
simonp@8916 | 2070 | <dd><p>The <span data-anolis-spec=dom>context object</span>. |
simonp@8916 | 2071 | <dt><span title=concept-css-declaration-block-owner-node>owner node</span> |
simonp@8916 | 2072 | <dd><p>Null. |
simonp@8916 | 2073 | </dl> |
simonp@8226 | 2074 | |
simonp@8226 | 2075 | |
simonp@8244 | 2076 | <h4>The <code title>CSSNamespaceRule</code> Interface</h4> |
simonp@8226 | 2077 | |
simonp@8304 | 2078 | <p>The <code>CSSNamespaceRule</code> interface represents an <code title>@namespace</code> at-rule.</p> |
simonp@8226 | 2079 | |
simonp@8226 | 2080 | <pre class=idl>interface <dfn>CSSNamespaceRule</dfn> : <span>CSSRule</span> { |
simonp@8335 | 2081 | [TreatNullAs=EmptyString] attribute DOMString <span title=dom-CSSNamespaceRule-namespaceURI>namespaceURI</span>; |
simonp@8335 | 2082 | [TreatNullAs=EmptyString] attribute DOMString <span title=dom-CSSNamespaceRule-prefix>prefix</span>; |
simonp@8226 | 2083 | };</pre> |
simonp@8226 | 2084 | |
simonp@8288 | 2085 | <p>The <dfn title=dom-CSSNamespaceRule-namespaceURI><code>namespaceURI</code></dfn> attribute, on getting, must return the namespace of the |
simonp@8304 | 2086 | <code title>@namespace</code> at-rule. |
simonp@8301 | 2087 | |
simonp@8301 | 2088 | <p>On setting, the <code title=dom-CSSNamespaceRule-namespaceURI>namespaceURI</code> attribute must run the following steps:</p> |
simonp@8288 | 2089 | |
simonp@8288 | 2090 | <ol> |
simonp@8406 | 2091 | <li><p>Let <var>parent</var> be the <span title=concept-css-rule-parent-css-style-sheet>parent CSS style sheet</span>. |
simonp@8406 | 2092 | <li><p>Let <var>list</var> be the <span title=concept-css-style-sheet-css-rules>CSS rules</span> of <var>parent</var>, or |
simonp@8406 | 2093 | null if <var>parent</var> is null. |
simonp@8406 | 2094 | <li><p>If <var>list</var> is not null and contains anything other than |
simonp@8288 | 2095 | <code title>@charset</code> at-rules, <code title>@import</code> at-rules, and <code title>@namespace</code> at-rules, |
simonp@8288 | 2096 | <span data-anolis-spec='dom' title='concept-throw'>throw</span> an <code data-anolis-spec=dom>InvalidStateError</code> exception. |
simonp@8288 | 2097 | <li><p>Set the namespace of the <code title>@namespace</code> at-rule to the given value. |
simonp@8288 | 2098 | </ol> |
simonp@8226 | 2099 | |
simonp@8304 | 2100 | <p>The <dfn title=dom-CSSNamespaceRule-prefix><code>prefix</code></dfn> attribute must return the prefix of the <code title>@namespace</code> at-rule or the |
simonp@8301 | 2101 | empty string if there is no prefix. |
simonp@8301 | 2102 | |
simonp@8301 | 2103 | <p>On setting, the <code title=dom-CSSNamespaceRule-prefix>prefix</code> attribute must run the following steps:</p> |
simonp@8288 | 2104 | |
simonp@8288 | 2105 | <ol> |
simonp@8406 | 2106 | <li><p>Let <var>parent</var> be the <span title=concept-css-rule-parent-css-style-sheet>parent CSS style sheet</span>. |
simonp@8406 | 2107 | <li><p>Let <var>list</var> be the <span title=concept-css-style-sheet-css-rules>CSS rules</span> of <var>parent</var>, or |
simonp@8406 | 2108 | null if <var>parent</var> is null. |
simonp@8406 | 2109 | <li><p>If <var>list</var> is not null and contains anything other than |
simonp@8288 | 2110 | <code title>@charset</code> at-rules, <code title>@import</code> at-rules, and <code title>@namespace</code> at-rules, |
simonp@8288 | 2111 | <span data-anolis-spec='dom' title='concept-throw'>throw</span> an <code data-anolis-spec=dom>InvalidStateError</code> exception. |
simonp@8288 | 2112 | <li><p>Set the prefix of the <code title>@namespace</code> at-rule to the given value. |
simonp@8288 | 2113 | </ol> |
simonp@8226 | 2114 | |
simonp@8226 | 2115 | |
simonp@8999 | 2116 | <h3>CSS Declarations</h3> |
simonp@8999 | 2117 | |
simonp@8999 | 2118 | <p>A <dfn>CSS declaration</dfn> is an abstract concept that is not exposed as an object in the DOM. A <span>CSS declaration</span> has the following associated |
simonp@8999 | 2119 | properties: |
simonp@8999 | 2120 | |
simonp@8999 | 2121 | <dl> |
simonp@8999 | 2122 | <dt><dfn title=concept-css-declaration-property-name>property name</dfn> |
simonp@8999 | 2123 | <dd><p>The property name of the declaration. |
simonp@8999 | 2124 | <dt><dfn title=concept-css-declaration-value>value</dfn> |
simonp@8999 | 2125 | <dd><p>The value of the declaration represented as a list of component values. |
simonp@8999 | 2126 | <dt><dfn title=concept-css-declaration-important-flag>important flag</dfn> |
simonp@8999 | 2127 | <dd><p>Either set or unset. Can be changed. |
simonp@8999 | 2128 | <dt><dfn title=concept-css-declaration-case-sensitive-flag>case-sensitive flag</dfn> |
simonp@8999 | 2129 | <dd><p>Set if the <span title=concept-css-declaration-property-name>property name</span> is defined to be case-sensitive according to its specification, |
simonp@8999 | 2130 | otherwise unset. |
simonp@8999 | 2131 | </dl> |
simonp@8999 | 2132 | |
simonp@8244 | 2133 | <h3>CSS Declaration Blocks</h3> |
simonp@8244 | 2134 | |
simonp@8244 | 2135 | <p>A <dfn>CSS declaration block</dfn> is an ordered collection of CSS |
simonp@8999 | 2136 | properties with their associated values, also named <span title="CSS declaration">CSS declarations</span>. In |
simonp@8244 | 2137 | the DOM a <span>CSS declaration block</span> is a |
simonp@8902 | 2138 | <code>CSSStyleDeclaration</code> object. A |
simonp@8916 | 2139 | <span>CSS declaration block</span> has the following associated properties:</p> |
simonp@8244 | 2140 | |
simonp@8244 | 2141 | <dl> |
simonp@8305 | 2142 | <dt><dfn title=concept-css-declaration-block-readonly-flag>readonly flag</dfn></dt> |
simonp@9044 | 2143 | <dd><p>Unset if the object can be manipulated. Set if it can not be |
simonp@9044 | 2144 | manipulated. Unless otherwise stated it is unset.</p></dd> |
simonp@8244 | 2145 | |
simonp@8305 | 2146 | <dt><dfn title=concept-css-declaration-block-declarations>declarations</dfn></dt> |
simonp@8999 | 2147 | <dd><p>The <span title="CSS declaration">CSS declarations</span> associated with the object.</p></dd> |
simonp@9661 | 2148 | |
simonp@8916 | 2149 | <dt><dfn title=contept-css-declaration-block-parent-css-rule>parent CSS rule</dfn> |
simonp@8916 | 2150 | <dd><p>The <span>CSS rule</span> that the <span>CSS declaration block</span> is associated with, if any, or null otherwise. |
simonp@9661 | 2151 | |
simonp@8916 | 2152 | <dt><dfn title=concept-css-declaration-block-owner-node>owner node</dfn> |
simonp@8916 | 2153 | <dd><p>The <span data-anolis-spec=dom>Element</span> or <span>PseudoElement</span> that the <span>CSS declaration block</span> is associated with, if any, or |
simonp@8916 | 2154 | null otherwise. |
simonp@8244 | 2155 | </dl> |
simonp@8244 | 2156 | |
simonp@9043 | 2157 | <p>To <dfn>parse a CSS declaration block</dfn> from a string <var>string</var>, follow these steps: |
simonp@9043 | 2158 | |
simonp@9043 | 2159 | <ol> |
simonp@9043 | 2160 | <li><p>Let <var>declarations</var> be the return value of invoking <span data-anolis-spec=csssyntax>parse a list of declarations</span> with <var>string</var>. |
simonp@9043 | 2161 | <li><p>Let <var>parsed declarations</var> be a new empty list. |
simonp@9043 | 2162 | <li><p>For each item <var>declaration</var> in <var>declarations</var>, follow these substeps: |
simonp@9043 | 2163 | <ol> |
simonp@9043 | 2164 | <li><p>Let <var>parsed declaration</var> be the result of parsing <var>declaration</var> according to the appropriate CSS specifications, dropping parts that |
simonp@9043 | 2165 | are said to be ignored. If the whole declaration is dropped, let <var>parsed declaration</var> be null. |
simonp@9043 | 2166 | <li><p>If <var>parsed declaration</var> is not null, append it to <var>parsed declarations</var>. |
simonp@9043 | 2167 | </ol> |
simonp@9043 | 2168 | <li><p>Return <var>parsed declarations</var>. |
simonp@9043 | 2169 | </ol> |
simonp@8244 | 2170 | |
simonp@8795 | 2171 | <p>To <dfn>serialize a CSS declaration</dfn> with property name <var>property</var>, value <var>value</var> and optionally an <i>important</i> flag set, follow |
simonp@8795 | 2172 | these steps: |
simonp@8244 | 2173 | |
simonp@8244 | 2174 | <ol> |
simonp@8795 | 2175 | <li><p>Let <var>s</var> be the empty string. |
simonp@8795 | 2176 | <li><p>Append <var>property</var> to <var>s</var>. |
simonp@8795 | 2177 | <li><p>Append "<code title>: </code>" (U+003A U+0020) to <var>s</var>. |
simonp@8795 | 2178 | <li><p>Append <var>value</var> to <var>s</var>. |
simonp@8795 | 2179 | <li><p>If the <i>important</i> flag is set, append "<code title> !important</code>" (U+0020 U+0021 U+0069 U+006D U+0070 U+006F U+0072 U+0074 U+0061 U+006E |
simonp@8795 | 2180 | U+0074) to <var>s</var>. |
simonp@8795 | 2181 | <li><p>Append "<code title>;</code>" (U+003B) to <var>s</var>. |
simonp@8795 | 2182 | <li><p>Return <var>s</var>. |
simonp@8795 | 2183 | </ol> |
simonp@8795 | 2184 | |
simonp@8795 | 2185 | <p>To <dfn>serialize a CSS declaration block</dfn> <var>declaration block</var> means to run the steps below:</p> |
simonp@8795 | 2186 | |
simonp@8795 | 2187 | <ol> |
simonp@8795 | 2188 | <li><p>Let <var>list</var> be an empty array. |
simonp@8795 | 2189 | <li><p>Let <var>already serialized</var> be an empty array. |
simonp@8999 | 2190 | <li><p><i>Declaration loop</i>: For each <span>CSS declaration</span> <var>declaration</var> in <var>declaration block</var>'s |
simonp@8795 | 2191 | <span title=concept-css-declaration-block-declarations>declarations</span>, follow these substeps: |
simonp@8795 | 2192 | <ol> |
simonp@8999 | 2193 | <li><p>Let <var>property</var> be <var>declaration</var>'s <span title=concept-css-declaration-property-name>property name</span>. |
simonp@8795 | 2194 | <li><p>If <var>property</var> is in <var>already serialized</var>, continue with the steps labeled <i>declaration loop</i>. |
simonp@9661 | 2195 | <li><p>If <var>property</var> maps to one or more shorthand properties, let <var>shorthands</var> be an array of those shorthand properties, in |
simonp@8795 | 2196 | <span title=concept-shorthands-preferred-order>preferred order</span>, and follow these substeps: |
simonp@8226 | 2197 | <ol> |
simonp@9100 | 2198 | <li><p>Let <var>longhands</var> be an array consisting of all <span title="CSS declaration">CSS declarations</span> in <var>declaration block</var>'s |
simonp@8999 | 2199 | <span title=concept-css-declaration-block-declarations>declarations</span> that that are not in <var>already serialized</var> and have a |
simonp@8999 | 2200 | <span title=concept-css-declaration-property-name>property name</span> that |
simonp@8795 | 2201 | maps to one of the shorthand properties in <var>shorthands</var>. |
simonp@8795 | 2202 | <li><p><i>Shorthand loop</i>: For each <var>shorthand</var> in <var>shorthands</var>, follow these substeps: |
simonp@8795 | 2203 | <ol> |
simonp@8795 | 2204 | <li><p>If all properties that map to <var>shorthand</var> are not present in <var>longhands</var>, continue with the steps labeled <i>shorthand loop</i>. |
simonp@8795 | 2205 | <li><p>Let <var>current longhands</var> be an empty array. |
simonp@8999 | 2206 | <li><p>Append all <span title="CSS declaration">CSS declarations</span> in <var>longhands</var> have a |
simonp@8999 | 2207 | <span title=concept-css-declaration-property-name>property name</span> that maps to <var>shorthand</var> to <var>current longhands</var>. |
simonp@8999 | 2208 | <li><p>If there is one or more <span title="CSS declaration">CSS declarations</span> in <var>current longhands</var> have their |
simonp@8999 | 2209 | <span title=concept-css-declaration-important-flag>important flag</span> set and one or more with it unset, continue with |
simonp@8795 | 2210 | the steps labeled <i>shorthand loop</i>. |
simonp@8795 | 2211 | <li><p>Let <var>value</var> be the result of invoking <span>serialize a CSS value</span> of <var>current longhands</var>. |
simonp@8795 | 2212 | <li><p>If <var>value</var> is the empty string, continue with the steps labeled <i>shorthand loop</i>. |
simonp@8795 | 2213 | <li><p>Let <var>serialized declaration</var> be the result of invoking <span>serialize a CSS declaration</span> with property name |
simonp@8999 | 2214 | <var>shorthand</var>, value <var>value</var>, and the <i>important</i> flag set if the <span title="CSS declaration">CSS declarations</span> in |
simonp@8999 | 2215 | <var>current longhands</var> have their <span title=concept-css-declaration-important-flag>important flag</span> set. |
simonp@8795 | 2216 | <li><p>Append <var>serialized declaration</var> to <var>list</var>. |
simonp@8795 | 2217 | <li><p>Append the property names of all items of <var>current longhands</var> to <var>already serialized</var>. |
simonp@8795 | 2218 | <li><p>Remove the items present in <var>current longhands</var> from <var>longhands</var>. |
simonp@8795 | 2219 | </ol> |
simonp@8226 | 2220 | </ol> |
simonp@8795 | 2221 | <li><p>If <var>property</var> is in <var>already serialized</var>, continue with the steps labeled <i>declaration loop</i>. |
simonp@8795 | 2222 | <li><p>Let <var>value</var> be the result of invoking <span>serialize a CSS value</span> of <var>declaration</var>. |
simonp@8795 | 2223 | <li><p>Let <var>serialized declaration</var> be the result of invoking <span>serialize a CSS declaration</span> with property name <var>property</var>, value |
simonp@8999 | 2224 | <var>value</var>, and the <i>important</i> flag set if <var>declaration</var> has its <span title=concept-css-declaration-important-flag>important |
simonp@8999 | 2225 | flag</span> set. |
simonp@8795 | 2226 | <li><p>Append <var>serialized declaration</var> to <var>list</var>. |
simonp@8795 | 2227 | <li><p>Append <var>property</var> to <var>already serialized</var>. |
simonp@8795 | 2228 | </ol> |
simonp@8795 | 2229 | <li><p>Return <var>list</var> joined with "<code title> </code>" (U+0020). |
simonp@8244 | 2230 | </ol> |
simonp@8244 | 2231 | |
simonp@8244 | 2232 | <p class="note">The serialization of an empty CSS declaration block is the empty string.</p> |
simonp@8244 | 2233 | |
simonp@8244 | 2234 | <p class="note">The serialization of a non-empty CSS declaration block does not include any surrounding whitespace, i.e., no whitepsace appears |
simonp@8244 | 2235 | before the first property name and no whitespace appears after the final semicolon delimiter that follows the last property value.</p> |
simonp@8244 | 2236 | |
simonp@8795 | 2237 | <p>The <dfn title=concept-shorthands-preferred-order>preferred order</dfn> of a list of shorthand properties <var>shorthands</var> is as follows: |
simonp@8795 | 2238 | |
simonp@8795 | 2239 | <ol> |
simonp@8795 | 2240 | <li><p>Order <var>shorthands</var> lexicographically. |
simonp@8823 | 2241 | <li><p>Move all items in <var>shorthands</var> that begin with "<code title>-</code>" (U+002D) last in the list, retaining their relative order. |
simonp@8823 | 2242 | <li><p>Move all items in <var>shorthands</var> that begin with "<code title>-</code>" (U+002D) but do not begin with "<code title>-webkit-</code>" last in the |
simonp@8823 | 2243 | list, retaining their relative order. |
simonp@8795 | 2244 | <li><p>Order <var>shorthands</var> by the number of longhand properties that map to it, with the greatest number first. |
simonp@8795 | 2245 | </ol> |
simonp@8244 | 2246 | |
simonp@8902 | 2247 | <h4>The <code title>CSSStyleDeclaration</code> Interface</h4> |
simonp@8902 | 2248 | |
simonp@8902 | 2249 | <p>The <code>CSSStyleDeclaration</code> interface represents a <span>CSS declaration block</span>, including its underlying state, where this |
simonp@8902 | 2250 | underlying state depends upon the source of the <code>CSSStyleDeclaration</Code> instance.</p> |
simonp@8226 | 2251 | |
simonp@8226 | 2252 | <!-- |
simonp@8226 | 2253 | // |
simonp@8226 | 2254 | // All members defined since DOM-2 Style. The only differences are: |
simonp@8226 | 2255 | // |
simonp@8226 | 2256 | // 1. removal of commented raises(DOMException) on setting cssText |
simonp@8226 | 2257 | // 2. removal of raises(DOMException) on {set,remove}Property |
simonp@8226 | 2258 | // 3. removal of getPropertyCSSValue() method |
simonp@8226 | 2259 | // |
simonp@8226 | 2260 | --> |
simonp@8226 | 2261 | |
simonp@8902 | 2262 | <pre class=idl>interface <dfn>CSSStyleDeclaration</dfn> { |
simonp@8902 | 2263 | attribute DOMString <span title=dom-CSSStyleDeclaration-cssText>cssText</span>; |
simonp@8902 | 2264 | readonly attribute unsigned long <span title=dom-CSSStyleDeclaration-length>length</span>; |
simonp@8902 | 2265 | getter DOMString <span title=dom-CSSStyleDeclaration-item>item</span>(unsigned long index); |
simonp@8902 | 2266 | DOMString <span title=dom-CSSStyleDeclaration-getPropertyValue>getPropertyValue</span>(DOMString property); |
simonp@8902 | 2267 | DOMString <span title=dom-CSSStyleDeclaration-getPropertyPriority>getPropertyPriority</span>(DOMString property); |
simonp@8902 | 2268 | void <span title=dom-CSSStyleDeclaration-setProperty>setProperty</span>(DOMString property, [TreatNullAs=EmptyString] DOMString value, <!-- |
simonp@9100 | 2269 | -->[TreatNullAs=EmptyString] optional DOMString priority = ""); |
simonp@9100 | 2270 | void <span title=dom-CSSStyleDeclaration-setPropertyValue>setPropertyValue</span>(DOMString property, [TreatNullAs=EmptyString] DOMString value); |
simonp@9100 | 2271 | void <span title=dom-CSSStyleDeclaration-setPropertyPriority>setPropertyPriority</span>(DOMString property, [TreatNullAs=EmptyString] DOMString priority); |
simonp@8902 | 2272 | DOMString <span title=dom-CSSStyleDeclaration-removeProperty>removeProperty</span>(DOMString property); |
simonp@8912 | 2273 | readonly attribute <span>CSSRule</span>? <span title=dom-CSSStyleDeclaration-parentRule>parentRule</span>; |
simonp@8902 | 2274 | attribute DOMString <span title=dom-CSSStyleDeclaration-cssFloat>cssFloat</span>;<!-- setProperty's value arg has [TreatNullAs=EmptyString] --> |
simonp@8226 | 2275 | };</pre> |
simonp@8226 | 2276 | |
simonp@9661 | 2277 | <p>The object's <span data-anolis-spec=webidl>supported property indices</span> are the numbers in the range zero to one less than the number of |
simonp@8999 | 2278 | <span title="CSS declaration">CSS declarations</span> in the <span title=concept-css-declaration-block-declarations>declarations</span>. If there are no such |
simonp@8999 | 2279 | <span title="CSS declaration">CSS declarations</span>, then there are no <span data-anolis-spec=webidl>supported property indices</span>. |
simonp@8266 | 2280 | |
simonp@8902 | 2281 | <p>The <dfn title=dom-CSSStyleDeclaration-cssText><code>cssText</code></dfn> attribute must return the result of |
simonp@8305 | 2282 | <span title='serialize a CSS declaration block'>serializing</span> the <span title=concept-css-declaration-block-declarations>declarations</span>.</p> |
simonp@8902 | 2283 | <p>Setting the <code title=dom-CSSStyleDeclaration-cssText>cssText</code> attribute must run these steps: |
simonp@8226 | 2284 | <ol> |
simonp@8305 | 2285 | <li><p>If the <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> is set, <span data-anolis-spec=dom title=concept-throw>throw</span> |
simonp@8305 | 2286 | a <code data-anolis-spec=dom>NoModificationAllowedError</code> exception and terminate these steps.</li> |
simonp@8305 | 2287 | <li><p>Empty the <span title=concept-css-declaration-block-declarations>declarations</span>.</li> |
simonp@8590 | 2288 | <li><p><span title='Parse a CSS declaration block'>Parse</span> the given value and, if the return value is not the empty list, insert the items in the list |
simonp@8807 | 2289 | into the <span title=concept-css-declaration-block-declarations>declarations</span>, in <span title=concept-declarations-specified-order>specified |
simonp@8807 | 2290 | order</span>.</p></li> |
simonp@8226 | 2291 | </ol> |
simonp@8226 | 2292 | |
simonp@8999 | 2293 | <p>The <dfn title=dom-CSSStyleDeclaration-length><code>length</code></dfn> attribute must return the number of <span title="CSS declaration">CSS |
simonp@8999 | 2294 | declarations</span> in the <span title=concept-css-declaration-block-declarations>declarations</span>.</p> |
simonp@8999 | 2295 | |
simonp@8999 | 2296 | <p>The <dfn title=dom-CSSStyleDeclaration-item><code>item(<var>index</var>)</code></dfn> method must return the |
simonp@8999 | 2297 | <span title=concept-css-declaration-property-name>property name</span> of the <span>CSS declaration</span> at position <var>index</var>.</p> |
simonp@8406 | 2298 | |
simonp@8902 | 2299 | <p>The <dfn title=dom-CSSStyleDeclaration-getPropertyValue><code>getPropertyValue(<var>property</var>)</code></dfn> method must run these steps:</p> |
simonp@8226 | 2300 | <ol> |
simonp@8592 | 2301 | <li><p>Let <var>property</var> be <var>property</var> <span data-anolis-spec=dom>converted to ASCII lowercase</span>. |
simonp@8594 | 2302 | <li><p>If <var>property</var> is a shorthand property, then follow these substeps: |
simonp@8594 | 2303 | <ol> |
simonp@8594 | 2304 | <li><p>Let <var>list</var> be a new empty array. |
simonp@8594 | 2305 | <li><p>For each longhand property <var>longhand</var> that <var>property</var> maps to, in canonical order, follow these substeps: |
simonp@8594 | 2306 | <ol> |
simonp@8999 | 2307 | <li><p>If <var>longhand</var> is a <span data-anolis-spec=dom>case-sensitive</span> match for a <span title=concept-css-declaration-property-name>property |
simonp@8999 | 2308 | name</span> of a <span>CSS declaration</span> in the <span title=concept-css-declaration-block-declarations>declarations</span>, let <var>declaration</var> |
simonp@8999 | 2309 | be that <span>CSS declaration</span>, or null otherwise. |
simonp@8594 | 2310 | <li><p>If <var>declaration</var> is null, return the empty string and terminate these steps. |
simonp@8594 | 2311 | <li><p>Append the <var>declaration</var> to <var>list</var>. |
simonp@8594 | 2312 | </ol> |
simonp@8594 | 2313 | <li><p>Return the <span title='serialize a CSS value'>serialization</span> of <var>list</var> and terminate these steps. |
simonp@8594 | 2314 | </ol> |
simonp@8406 | 2315 | <li><p>If <var>property</var> is a <span data-anolis-spec=dom>case-sensitive</span> |
simonp@8999 | 2316 | match for a <span title=concept-css-declaration-property-name>property name</span> of a <span>CSS declaration</span> in the |
simonp@8594 | 2317 | <span title=concept-css-declaration-block-declarations>declarations</span>, return the result of invoking |
simonp@8594 | 2318 | <span>serialize a CSS value</span> of that declaration and terminate these steps. |
simonp@8226 | 2319 | <li><p>Return the empty string. |
simonp@8226 | 2320 | </ol> |
simonp@8226 | 2321 | |
simonp@8902 | 2322 | <p>The <dfn title=dom-CSSStyleDeclaration-getPropertyPriority><code>getPropertyPriority(<var>property</var>)</code></dfn> method must run these steps: |
simonp@8226 | 2323 | <ol> |
simonp@8592 | 2324 | <li><p>Let <var>property</var> be <var>property</var> <span data-anolis-spec=dom>converted to ASCII lowercase</span>. |
simonp@8586 | 2325 | <li><p>If <var>property</var> is a shorthand property, follow these substeps: |
simonp@8586 | 2326 | <ol> |
simonp@8586 | 2327 | <li><p>Let <var>list</var> be a new array. |
simonp@8586 | 2328 | <li><p>For each longhand property <var>longhand</var> that <var>property</var> maps to, append the result of invoking |
simonp@8902 | 2329 | <code title=dom-CSSStyleDeclaration-getPropertyPriority>getPropertyPriority()</code> with <var>longhand</var> as argument to <var>list</var>. |
simonp@8586 | 2330 | <li><p>If all items in <var>list</var> are the string "<code title>important</code>", return the string "<code title>important</code>" and terminate these |
simonp@8586 | 2331 | steps. |
simonp@8586 | 2332 | </ol> |
simonp@8586 | 2333 | <li><p>Otherwise, follow these substeps: |
simonp@8586 | 2334 | <ol> |
simonp@8586 | 2335 | <li><p>If <var>property</var> is a |
simonp@8999 | 2336 | <span data-anolis-spec=dom>case-sensitive</span> match for a <span title=concept-css-declaration-property-name>property name</span> of a <span>CSS |
simonp@8999 | 2337 | declaration</span> in the <span title=concept-css-declaration-block-declarations>declarations</span> that has the |
simonp@8999 | 2338 | <span title=concept-css-declaration-important-flag>important flag</span> set, return the string "<code title>important</code>".</p> |
simonp@8586 | 2339 | </ol> |
simonp@8226 | 2340 | <li><p>Return the empty string. |
simonp@8226 | 2341 | </ol> |
simonp@8450 | 2342 | <div class='example'><p>E.g. for <code title>background-color:lime !IMPORTANT</code> the return |
simonp@8450 | 2343 | value would be "<code title>important</code>".</div> |
simonp@8304 | 2344 | |
simonp@8902 | 2345 | <p>The <dfn title=dom-CSSStyleDeclaration-setProperty><code>setProperty(<var>property</var>, <var>value</var>, |
simonp@8406 | 2346 | <var>priority</var>)</code></dfn> method must run these steps:</p> |
simonp@8226 | 2347 | <ol> |
simonp@8305 | 2348 | <li><p>If the <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> is set, <span data-anolis-spec=dom title=concept-throw>throw</span> |
simonp@8826 | 2349 | a <code data-anolis-spec=dom>NoModificationAllowedError</code> exception and terminate these steps.</li> |
simonp@8592 | 2350 | <li><p>Let <var>property</var> be <var>property</var> <span data-anolis-spec=dom>converted to ASCII lowercase</span>. |
simonp@8592 | 2351 | <li><p>If <var>property</var> is not a <span data-anolis-spec=dom>case-sensitive</span> match for a <span>supported CSS property</span>, terminate this |
simonp@8592 | 2352 | algorithm.</p></li> |
simonp@8902 | 2353 | <li><p>If <var>value</var> is the empty string, invoke <code title='dom-CSSStyleDeclaration-removeProperty'>removeProperty()</code> |
simonp@8406 | 2354 | with <var>property</var> as argument and terminate this algorithm.</p></li> |
simonp@9100 | 2355 | <li><p>If <var>priority</var> is not the empty string and is not an <span data-anolis-spec=dom>ASCII case-insensitive</span> match for the string |
simonp@9100 | 2356 | "<code title>important</code>", terminate this algorithm. |
simonp@8226 | 2357 | <li> |
simonp@9212 | 2358 | <p>Let <var>component value list</var> be the result of <span title='parse a CSS value'>parsing</span> <var>value</var> for property <var>property</var>. |
simonp@8594 | 2359 | <p class='note'><var>value</var> can not include "<code title>!important</code>".</p> |
simonp@8226 | 2360 | </li> |
simonp@8594 | 2361 | <li><p>If <var>component value list</var> is null terminate these steps. |
simonp@8594 | 2362 | <li><p>If <var>property</var> is a shorthand property, then for each longhand property <var>longhand</var> that <var>property</var> maps to, in canonical |
simonp@9100 | 2363 | order, <span title="append a CSS declaration">append the CSS declaration</span> <var>longhand</var> with the appropriate value(s) from <var>component value |
simonp@9100 | 2364 | list</var>, with the <i>important</i> flag set if <var>priority</var> is not the empty string, and unset otherwise, and with the list of declarations being the |
simonp@8594 | 2365 | <span title=concept-css-declaration-block-declarations>declarations</span>. |
simonp@9100 | 2366 | <li><p>Otherwise, <span title="append a CSS declaration">append the CSS declaration</span> <var>property</var> with value <var>component value list</var>, with |
simonp@9100 | 2367 | the <i>important</i> flag set if <var>priority</var> is not the empty string, and unset otherwise, and with the list of declarations being the |
simonp@8594 | 2368 | <span title=concept-css-declaration-block-declarations>declarations</span>. |
simonp@8594 | 2369 | </ol> |
simonp@8594 | 2370 | |
simonp@9100 | 2371 | <p>To <dfn>append a CSS declaration</dfn> <var>property</var> with a value <var>component value list</var> and optionally with an <i>important</i> flag set, in |
simonp@9100 | 2372 | a list of declarations <var>declarations</var>, follow these steps: |
simonp@9100 | 2373 | |
simonp@9100 | 2374 | <ol> |
simonp@9100 | 2375 | <li><p>If <var>property</var> is a <span data-anolis-spec=dom>case-sensitive</span> match for a <span title=concept-css-declaration-property-name>property |
simonp@9100 | 2376 | name</span> of a <span>CSS declaration</span> in <var>declarations</var>, let <var>declaration</var> be that <span>CSS declaration</span>. |
simonp@9100 | 2377 | <li><p>Otherwise, append a new <span>CSS declaration</span> with the <span title=concept-css-declaration-property-name>property name</span> <var>property</var> |
simonp@9100 | 2378 | to <var>declarations</var> and let <var>declaration</var> be that <span>CSS declaration</span>. |
simonp@9100 | 2379 | <li><p>If <var>declaration</var> has its <span title=concept-css-declaration-important-flag>important flag</span> set and the <i>important</i> flag is not set, |
simonp@9100 | 2380 | terminate these steps. |
simonp@9100 | 2381 | <li><p>Set <var>declaration</var>'s <span title=concept-css-declaration-value>value</span> to <var>component value list</var>. |
simonp@9100 | 2382 | <li><p>If the <i>important</i> flag is set, set <var>declaration</var>'s <span title=concept-css-declaration-important-flag>important flag</span>. |
simonp@9100 | 2383 | </ol> |
simonp@9100 | 2384 | |
simonp@9100 | 2385 | <p>The <dfn title=dom-CSSStyleDeclaration-setPropertyValue><code>setPropertyValue(<var>property</var>, <var>value</var>)</code></dfn> method must run these |
simonp@9100 | 2386 | steps:</p> |
simonp@9100 | 2387 | <ol> |
simonp@9100 | 2388 | <li><p>If the <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> is set, <span data-anolis-spec=dom title=concept-throw>throw</span> |
simonp@9100 | 2389 | a <code data-anolis-spec=dom>NoModificationAllowedError</code> exception and terminate these steps.</li> |
simonp@9100 | 2390 | <li><p>Let <var>property</var> be <var>property</var> <span data-anolis-spec=dom>converted to ASCII lowercase</span>. |
simonp@9100 | 2391 | <li><p>If <var>property</var> is not a <span data-anolis-spec=dom>case-sensitive</span> match for a <span>supported CSS property</span>, terminate this |
simonp@9100 | 2392 | algorithm.</p></li> |
simonp@9100 | 2393 | <li><p>If <var>value</var> is the empty string, invoke <code title='dom-CSSStyleDeclaration-removeProperty'>removeProperty()</code> |
simonp@9100 | 2394 | with <var>property</var> as argument and terminate this algorithm.</p></li> |
simonp@9100 | 2395 | <li> |
simonp@9212 | 2396 | <p>Let <var>component value list</var> be the result of <span title='parse a CSS value'>parsing</span> <var>value</var> for property <var>property</var>. |
simonp@9100 | 2397 | <p class='note'><var>value</var> can not include "<code title>!important</code>".</p> |
simonp@9100 | 2398 | </li> |
simonp@9100 | 2399 | <li><p>If <var>component value list</var> is null terminate these steps. |
simonp@9100 | 2400 | <li><p>If <var>property</var> is a shorthand property, then for each longhand property <var>longhand</var> that <var>property</var> maps to, in canonical |
simonp@9100 | 2401 | order, <span title="set a CSS declaration value">set the CSS declaration value</span> <var>longhand</var> to the appropriate value(s) from <var>component |
simonp@9100 | 2402 | value list</var>, and with the list of declarations being the <span title=concept-css-declaration-block-declarations>declarations</span>. |
simonp@9100 | 2403 | <li><p>Otherwise, <span title="set a CSS declaration value">set the CSS declaration value</span> <var>property</var> to the value <var>component value |
simonp@9100 | 2404 | list</var>, and with the list of declarations being the <span title=concept-css-declaration-block-declarations>declarations</span>. |
simonp@9100 | 2405 | </ol> |
simonp@9100 | 2406 | |
simonp@9100 | 2407 | <p>To <dfn>set a CSS declaration value</dfn> to a value <var>component value list</var> in a list of declarations <var>declarations</var>, follow these steps: |
simonp@8594 | 2408 | |
simonp@8594 | 2409 | <ol> |
simonp@8999 | 2410 | <li><p>If <var>property</var> is a <span data-anolis-spec=dom>case-sensitive</span> match for a <span title=concept-css-declaration-property-name>property |
simonp@8999 | 2411 | name</span> of a <span>CSS declaration</span> in <var>declarations</var>, let <var>declaration</var> be that <span>CSS declaration</span>. |
simonp@8999 | 2412 | <li><p>Otherwise, append a new <span>CSS declaration</span> with the <span title=concept-css-declaration-property-name>property name</span> <var>property</var> |
simonp@8999 | 2413 | to <var>declarations</var> and let <var>declaration</var> be that <span>CSS declaration</span>. |
simonp@8999 | 2414 | <li><p>Set <var>declaration</var>'s <span title=concept-css-declaration-value>value</span> to <var>component value list</var>. |
simonp@9100 | 2415 | </ol> |
simonp@9100 | 2416 | |
simonp@9100 | 2417 | <p>The <dfn title=dom-CSSStyleDeclaration-setPropertyPriority><code>setPropertyPriority(<var>property</var>, <var>priority</var>)</code></dfn> method must run |
simonp@9100 | 2418 | these steps:</p> |
simonp@9100 | 2419 | |
simonp@9100 | 2420 | <ol> |
simonp@9100 | 2421 | <li><p>If the <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> is set, <span data-anolis-spec=dom title=concept-throw>throw</span> |
simonp@9100 | 2422 | a <code data-anolis-spec=dom>NoModificationAllowedError</code> exception and terminate these steps.</li> |
simonp@9100 | 2423 | <li><p>Let <var>property</var> be <var>property</var> <span data-anolis-spec=dom>converted to ASCII lowercase</span>. |
simonp@9100 | 2424 | <li><p>If <var>property</var> is not a <span data-anolis-spec=dom>case-sensitive</span> match for a <span>supported CSS property</span>, terminate this |
simonp@9100 | 2425 | algorithm.</p></li> |
simonp@9100 | 2426 | <li><p>If <var>priority</var> is not the empty string and is not an <span data-anolis-spec=dom>ASCII case-insensitive</span> match for the string |
simonp@9100 | 2427 | "<code title>important</code>", terminate this algorithm. |
simonp@9100 | 2428 | <li><p>If <var>property</var> is a shorthand property, then for each longhand property <var>longhand</var> that <var>property</var> maps to, in canonical |
simonp@9100 | 2429 | order, <span title="set a CSS declaration priority">set the CSS declaration priority</span> <var>longhand</var> with the <i>important</i> flag set if |
simonp@9100 | 2430 | <var>priority</var> is not the empty string, and unset otherwise, and with the list of declarations being the |
simonp@9100 | 2431 | <span title=concept-css-declaration-block-declarations>declarations</span>. |
simonp@9100 | 2432 | <li><p>Otherwise, <span title="set a CSS declaration priority">set the CSS declaration priority</span> <var>property</var> with the <i>important</i> flag set |
simonp@9100 | 2433 | if <var>priority</var> is not the empty string, and unset otherwise, and with the list of declarations being the |
simonp@9100 | 2434 | <span title=concept-css-declaration-block-declarations>declarations</span>. |
simonp@9100 | 2435 | </ol> |
simonp@9100 | 2436 | |
simonp@9100 | 2437 | <p>To <dfn>set a CSS declaration priority</dfn> <var>property</var> optionally with an <i>important</i> flag set, in a list of declarations |
simonp@9100 | 2438 | <var>declarations</var>, follow these steps: |
simonp@9100 | 2439 | |
simonp@9100 | 2440 | <ol> |
simonp@9100 | 2441 | <li><p>If <var>property</var> is a <span data-anolis-spec=dom>case-sensitive</span> match for a <span title=concept-css-declaration-property-name>property |
simonp@9100 | 2442 | name</span> of a <span>CSS declaration</span> in <var>declarations</var>, let <var>declaration</var> be that <span>CSS declaration</span>. |
simonp@9100 | 2443 | <li><p>Otherwise, terminate these steps. |
simonp@9100 | 2444 | <li><p>If the <i>important</i> flag is set, set <var>declaration</var>'s <span title=concept-css-declaration-important-flag>important flag</span>. Otherwise, |
simonp@9100 | 2445 | unset <var>declaration</var>'s <span title=concept-css-declaration-important-flag>important flag</span>. |
simonp@8226 | 2446 | </ol> |
simonp@8226 | 2447 | |
simonp@8902 | 2448 | <p>The <dfn title=dom-CSSStyleDeclaration-removeProperty><code>removeProperty(<var>property</var>)</code></dfn> method must run these steps:</p> |
simonp@8226 | 2449 | <ol> |
simonp@8305 | 2450 | <li><p>If the <span title=concept-css-declaration-block-readonly-flag>readonly flag</span> is set, <span data-anolis-spec=dom title=concept-throw>throw</span> |
simonp@8305 | 2451 | a <code data-anolis-spec=dom>NoModificationAllowedError</code> exception and terminate these steps.</li> |
simonp@8592 | 2452 | <li><p>Let <var>property</var> be <var>property</var> <span data-anolis-spec=dom>converted to ASCII lowercase</span>. |
simonp@8902 | 2453 | <li><p>Let <var>value</var> be the return value of invoking <code title=dom-CSSStyleDeclaration-getPropertyValue>getPropertyValue()</code> |
simonp@8406 | 2454 | with <var>property</var> as argument. |
simonp@8586 | 2455 | <li><p>If <var>property</var> is a shorthand property, for each longhand property <var>longhand</var> that <var>property</var> maps to, invoke |
simonp@8902 | 2456 | <code title=dom-CSSStyleDeclaration-removeProperty>removeProperty()</code> with <var>longhand</var> as argument. |
simonp@8999 | 2457 | <li><p>Otherwise, if <var>property</var> is a <span data-anolis-spec=dom>case-sensitive</span> match for a |
simonp@8999 | 2458 | <span title=concept-css-declaration-property-name>property name</span> of a <span>CSS declaration</span> in the |
simonp@8999 | 2459 | <span title=concept-css-declaration-block-declarations>declarations</span>, remove that <span>CSS declaration</span>. |
simonp@8406 | 2460 | <li><p>Return <var>value</var>. |
simonp@8226 | 2461 | </ol> |
simonp@8226 | 2462 | |
simonp@8916 | 2463 | <p>The <dfn title=dom-CSSStyleDeclaration-parentRule><code>parentRule</code></dfn> attribute must return the |
simonp@8916 | 2464 | <span title=contept-css-declaration-block-parent-css-rule>parent CSS rule</span>.</p> |
simonp@8289 | 2465 | |
simonp@8291 | 2466 | <p>The <dfn title=dom-CSSStyleDeclaration-cssFloat><code>cssFloat</code></dfn> |
simonp@8291 | 2467 | attribute, on getting, must return the result of invoking |
simonp@8902 | 2468 | <code title=dom-CSSStyleDeclaration-getPropertyValue>getPropertyValue()</code> with |
simonp@8291 | 2469 | <code title>float</code> as argument. On setting, the attribute must invoke |
simonp@8902 | 2470 | <code title=dom-CSSStyleDeclaration-setProperty>setProperty()</code> with |
simonp@8291 | 2471 | <code title>float</code> as first argument, as second argument the given value, and no third argument. |
simonp@8291 | 2472 | Any exceptions thrown must be re-thrown. |
simonp@8291 | 2473 | |
simonp@8592 | 2474 | <p>For each CSS property <var>property</var> that is a <span>supported CSS property</span>, |
simonp@8406 | 2475 | the following partial interface applies where <var>camel-cased attribute</var> |
simonp@8291 | 2476 | is obtained by running the <span>CSS property to IDL attribute</span> algorithm for |
simonp@8291 | 2477 | <var>property</var>.</p> |
simonp@8291 | 2478 | |
simonp@8352 | 2479 | <pre class="idl extract">partial interface <span>CSSStyleDeclaration</span> { |
simonp@8406 | 2480 | attribute DOMString _<span title=dom-CSSStyleDeclaration-camel-cased-attribute><var>camel-cased attribute</var></span>; |
simonp@8291 | 2481 | };</pre> |
simonp@8291 | 2482 | |
simonp@8406 | 2483 | <p>The <dfn title=dom-CSSStyleDeclaration-camel-cased-attribute><code><var>camel-cased attribute</var></code></dfn> attribute, on getting, must return the |
simonp@8902 | 2484 | result of invoking <code title=dom-CSSStyleDeclaration-getPropertyValue>getPropertyValue()</code> with the |
simonp@8331 | 2485 | argument being the result of running the <span>IDL attribute to CSS property</span> |
simonp@8406 | 2486 | algorithm for <var>camel-cased attribute</var>.</p> |
simonp@8406 | 2487 | |
simonp@8406 | 2488 | <p>Setting the <code title=dom-CSSStyleDeclaration-camel-cased-attribute><var>camel-cased attribute</var></code> attribute must invoke |
simonp@8902 | 2489 | <code title=dom-CSSStyleDeclaration-setProperty>setProperty()</code> with the |
simonp@8331 | 2490 | first argument being the result of running the <span>IDL attribute to CSS property</span> |
simonp@8406 | 2491 | algorithm for <var>camel-cased attribute</var>, as second argument the given value, and no third argument. Any |
simonp@8291 | 2492 | exceptions thrown must be re-thrown.</p> |
simonp@8289 | 2493 | |
simonp@8450 | 2494 | <div class=example><p>For example, for the 'font-size' property there would be a <code title>fontSize</code> IDL attribute.</div> |
simonp@8351 | 2495 | |
glenn@8354 | 2496 | <!-- [GA] Remove spec text for so called "dashed-attribute" until consensus obtains on whether to include in spec. |
glenn@8354 | 2497 | |
simonp@8592 | 2498 | <p>For each CSS property <var>property</var> that is a <span>supported CSS property</span>, except for properties that have no "<code title>-</code>" (U+002D) |
simonp@8592 | 2499 | in the 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 |
simonp@8351 | 2500 | <code>CSSStyleDeclaration</code> interface with the type being <code title>DOMString</code> and the <span data-anolis-spec=webidl>identifier</span> being |
simonp@8406 | 2501 | <var>property</var>, and let <var>dashed attribute</var> be <var>property</var>. |
simonp@8406 | 2502 | |
simonp@8406 | 2503 | <p>The <dfn title=dom-CSSStyleDeclaration-dashed-attribute><code><var>dashed attribute</var></code></dfn> attribute, on getting, must return the |
simonp@8902 | 2504 | result of invoking <code title=dom-CSSStyleDeclaration-getPropertyValue>getPropertyValue()</code> with the |
simonp@8406 | 2505 | argument being <var>dashed attribute</var>.</p> |
simonp@8406 | 2506 | |
simonp@8406 | 2507 | <p>Setting the <code title=dom-CSSStyleDeclaration-dashed-attribute><var>dashed attribute</var></code> attribute must invoke |
simonp@8902 | 2508 | <code title=dom-CSSStyleDeclaration-setProperty>setProperty()</code> with the |
simonp@8406 | 2509 | first argument being <var>dashed attribute</var>, as second argument the given value, and no third argument. Any |
simonp@8351 | 2510 | exceptions thrown must be re-thrown.</p> |
simonp@8351 | 2511 | |
simonp@8351 | 2512 | <div class=example> |
simonp@8351 | 2513 | <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 |
simonp@8406 | 2514 | follows, assuming <var>element</var> is an <span data-anolis-spec=html title="HTML elements">HTML element</span>: |
simonp@8406 | 2515 | <pre><var>element</var>.style['font-size'];</pre> |
simonp@8351 | 2516 | </div> |
simonp@8351 | 2517 | |
simonp@8351 | 2518 | <p class=note>WebIDL does not allow dashes in identifiers in its syntax. |
simonp@8351 | 2519 | |
simonp@8435 | 2520 | <p class=issue>The <code title=dom-CSSStyleDeclaration-dashed-attribute><var>dashed attribute</var></code> attributes will be removed from the specification |
simonp@8352 | 2521 | if implementations remove support. User agents that currently support them are urged to experiment with removing support. |
simonp@8352 | 2522 | |
glenn@8354 | 2523 | --> |
glenn@8354 | 2524 | |
simonp@8406 | 2525 | <p>The <dfn>CSS property to IDL attribute</dfn> algorithm for <var>property</var> is as |
simonp@8244 | 2526 | follows:</p> |
simonp@8244 | 2527 | |
simonp@8244 | 2528 | <ol> |
simonp@8406 | 2529 | <li><p>Let <var>output</var> be the empty string. |
simonp@9661 | 2530 | |
simonp@8406 | 2531 | <li><p>Let <var>uppercase next</var> be unset. |
simonp@9661 | 2532 | |
simonp@8406 | 2533 | <li><p>For each character <var>c</var> in <var>property</var>: |
simonp@8244 | 2534 | |
simonp@8226 | 2535 | <ol> |
simonp@8406 | 2536 | <li><p>If <var>c</var> is "<code title>-</code>" (U+002D), let <var>uppercase next</var> be set. |
simonp@9661 | 2537 | |
simonp@8406 | 2538 | <li><p>Otherwise, if <var>uppercase next</var> is set, let <var>uppercase next</var> be unset and append <var>c</var> |
simonp@8406 | 2539 | <span data-anolis-spec=dom>converted to ASCII uppercase</span> to <var>output</var>. |
simonp@9661 | 2540 | |
simonp@8406 | 2541 | <li><p>Otherwise, append <var>c</var> to <var>output</var>. |
simonp@8226 | 2542 | </ol> |
simonp@8244 | 2543 | |
simonp@8406 | 2544 | <li><p>Return <var>output</var>. |
simonp@8244 | 2545 | </ol> |
simonp@8244 | 2546 | |
simonp@8406 | 2547 | <p>The <dfn>IDL attribute to CSS property</dfn> algorithm for <var>attribute</var> is as |
simonp@8244 | 2548 | follows:</p> |
simonp@8244 | 2549 | |
simonp@8244 | 2550 | <ol> |
simonp@8406 | 2551 | <li><p>Let <var>output</var> be the empty string. |
simonp@9661 | 2552 | |
simonp@8406 | 2553 | <li><p>For each character <var>c</var> in <var>attribute</var>: |
simonp@9661 | 2554 | |
simonp@8226 | 2555 | <ol> |
simonp@8406 | 2556 | <li><p>If <var>c</var> is in the range U+0041 to U+005A (ASCII uppercase), append "<code title>-</code>" (U+002D) followed by <var>c</var> |
simonp@8406 | 2557 | <span data-anolis-spec=dom>converted to ASCII lowercase</span> to <var>output</var>. |
simonp@9661 | 2558 | |
simonp@8406 | 2559 | <li><p>Otherwise, append <var>c</var> to <var>output</var>. |
simonp@8226 | 2560 | </ol> |
simonp@9661 | 2561 | |
simonp@8406 | 2562 | <li><p>Return <var>output</var>. |
simonp@8244 | 2563 | </ol> |
simonp@8244 | 2564 | |
simonp@8226 | 2565 | |
simonp@8244 | 2566 | <h3>CSS Values</h3> |
simonp@8244 | 2567 | |
simonp@8244 | 2568 | |
simonp@8244 | 2569 | <h4>Parsing CSS Values</h4> |
simonp@8244 | 2570 | |
simonp@8449 | 2571 | <p>To <dfn>parse a CSS value</dfn> <var>value</var> for a given |
simonp@8449 | 2572 | <var>property</var> means to follow these steps: |
simonp@8449 | 2573 | |
simonp@8449 | 2574 | <ol> |
simonp@8449 | 2575 | <li><p>Let <var>list</var> be the value returned by invoking <span data-anolis-spec=csssyntax>parse a list of component values</span> from <var>value</var>. |
simonp@8592 | 2576 | <li><p>Match <var>list</var> against the grammar for the property <var>property</var> in the CSS specification. |
simonp@8449 | 2577 | <li><p>If the above step failed, return null. |
simonp@8449 | 2578 | <li><p>Return <var>list</var>. |
simonp@8449 | 2579 | </ol> |
simonp@8244 | 2580 | |
simonp@8304 | 2581 | <p class="note">"<code title>!important</code>" declarations are not |
simonp@8244 | 2582 | part of the property value space and will therefore cause |
simonp@8289 | 2583 | <span>parse a CSS value</span> to return null.</p> |
simonp@8244 | 2584 | |
simonp@8244 | 2585 | |
simonp@8244 | 2586 | |
simonp@8244 | 2587 | <h4>Serializing CSS Values</h4> |
simonp@8244 | 2588 | |
simonp@8244 | 2589 | <!-- based on http://damowmow.com/playground/canon.txt --> |
simonp@8244 | 2590 | |
simonp@8999 | 2591 | <p>To <dfn>serialize a CSS value</dfn> of a <span>CSS declaration</span> <var>declaration</var> or a list of longhand <span title="CSS declaration">CSS |
simonp@8999 | 2592 | declarations</span> <var>list</var>, follow these rules:</p> |
simonp@8244 | 2593 | |
simonp@8595 | 2594 | <ol> |
simonp@8595 | 2595 | <li><p>If this algorithm is invoked with a list <var>list</var>, follow these substeps: |
simonp@8595 | 2596 | <ol> |
simonp@8795 | 2597 | <li><p>Let <var>shorthand</var> be the shorthand property that exactly maps to all the longhand properties in <var>list</var>. If there are multiple such |
simonp@8795 | 2598 | shorthand properties, use the first in <span title=concept-shorthands-preferred-order>preferred order</span>. |
simonp@8595 | 2599 | <li><p>If <var>shorthand</var> cannot represent the values of <var>list</var> in its grammar, return the empty string and terminate these steps. |
simonp@8595 | 2600 | <li><p>Let <var>trimmed list</var> be a new empty array. |
simonp@8999 | 2601 | <li><p>For each <span>CSS declaration</span> <var>declaration</var> in <var>list</var>, if <var>declaration</var>'s |
simonp@8999 | 2602 | <span title=concept-css-declaration-value>value</span> is not the initial value, or if |
simonp@8595 | 2603 | <var>declaration</var> is a required component of the <var>shorthand</var> property, append <var>declaration</var> to <var>trimmed list</var>. |
simonp@8595 | 2604 | <li><p>If <var>trimmed list</var> is empty, append the value of the first item in <var>list</var> to <var>trimmed list</var>. |
simonp@8595 | 2605 | <li><p>Let <var>values</var> be a new empty array. |
simonp@8999 | 2606 | <li><p>For each <span>CSS declaration</span> <var>declaration</var> in <var>trimmed list</var>, invoke <span>serialize a CSS value</span> of |
simonp@8999 | 2607 | <var>declaration</var>, and append the result to <var>values</var>. |
simonp@8595 | 2608 | <li><p>Return the result of joining <var>values</var> as appropriate according to the grammar of <var>shorthand</var> and terminate these steps. |
simonp@8595 | 2609 | </ol> |
simonp@8595 | 2610 | <li><p>Let <var>values</var> be a new empty array. |
simonp@8999 | 2611 | <li><p>Append the result of invoking <span>serialize a CSS component value</span> of <var>declaration</var>'s |
simonp@8999 | 2612 | <span title=concept-css-declaration-value>value</span> to <var>values</var>. |
simonp@8999 | 2613 | <li><p>If the grammar of the <span title=concept-css-declaration-property-name>property name</span> of <var>declaration</var> is defined to be |
simonp@8999 | 2614 | whitespace-separated, return the result of invoking <span>serialize a whitespace-separated list</span> of <var>values</var> and terminate these steps. |
simonp@8999 | 2615 | <li><p>If the grammar of the <span title=concept-css-declaration-property-name>property name</span> of <var>declaration</var> is defined to be comma-separated, |
simonp@8999 | 2616 | return the result of invoking <span>serialize a comma-separated list</span> of <var>values</var>. |
simonp@8595 | 2617 | </ol> |
simonp@8244 | 2618 | |
simonp@8244 | 2619 | <p>To |
simonp@8244 | 2620 | <dfn>serialize a CSS component value</dfn> |
simonp@8244 | 2621 | depends on the component, as follows:</p> |
simonp@8244 | 2622 | |
simonp@8244 | 2623 | <dl class="switch"> |
simonp@8244 | 2624 | <dt>keyword</dt> |
simonp@8244 | 2625 | <dd><p>The keyword |
simonp@8244 | 2626 | <span data-anolis-spec=dom>converted to ASCII lowercase</span>.</p></dd> |
simonp@8244 | 2627 | |
simonp@8244 | 2628 | <dt><angle></dt> |
simonp@8954 | 2629 | <dd><p>The <number> component serialized as per <number> followed by the unit in canonical form as defined in its respective specification.</p></dd> |
simonp@8244 | 2630 | |
simonp@8244 | 2631 | <dt><color></dt> |
simonp@8244 | 2632 | <dd> |
simonp@8244 | 2633 | <p>If <color> is a component of a resolved or computed value, then |
simonp@8304 | 2634 | return the color using the <code title>rgb()</code> or <code title>rgba()</code> functional |
simonp@8244 | 2635 | notation as follows:</p> |
simonp@8244 | 2636 | <ol> |
simonp@8244 | 2637 | <li>If the alpha component of the color is equal to one, then return the serialization of the |
simonp@8304 | 2638 | <code title>rgb()</code> functional equivalent of the opaque color.</li> |
simonp@8244 | 2639 | <li>If the alpha component of the color is not equal to one, then return the serialization of the |
simonp@8304 | 2640 | <code title>rgba()</code> functional equivalent of the non-opaque color.</li> |
simonp@8244 | 2641 | </ol> |
simonp@8304 | 2642 | <p>The serialization of the <code title>rgb()</code> functional equivalent is the concatenation of the following:</p> |
simonp@8244 | 2643 | <ol> |
simonp@8304 | 2644 | <li>The string "<code title>rgb(</code>".</li> |
simonp@8244 | 2645 | <li>The shortest base-ten integer serialization of the color's red component.</li> |
simonp@8304 | 2646 | <li>The string "<code title>, </code>".</li> |
simonp@8244 | 2647 | <li>The shortest base-ten serialization of the color's green component.</li> |
simonp@8304 | 2648 | <li>The string "<code title>, </code>".</li> |
simonp@8244 | 2649 | <li>The shortest base-ten serialization of the color's blue component.</li> |
simonp@8304 | 2650 | <li>The string "<code title>)</code>".</li> |
simonp@8244 | 2651 | </ol> |
simonp@8304 | 2652 | <p>The serialization of the <code title>rgba()</code> functional equivalent is the concatenation of the following:</p> |
simonp@8244 | 2653 | <ol> |
simonp@8304 | 2654 | <li>The string "<code title>rgba(</code>".</li> |
simonp@8244 | 2655 | <li>The shortest base-ten serialization of the color's red component.</li> |
simonp@8304 | 2656 | <li>The string "<code title>, </code>".</li> |
simonp@8244 | 2657 | <li>The shortest base-ten serialization of the color's green component.</li> |
simonp@8304 | 2658 | <li>The string "<code title>, </code>".</li> |
simonp@8244 | 2659 | <li>The shortest base-ten serialization of the color's blue component.</li> |
simonp@8304 | 2660 | <li>The string "<code title>, </code>".</li> |
simonp@8244 | 2661 | <li>The shortest serialization of the <number> that denotes the color's alpha component.</li> |
simonp@8304 | 2662 | <li>The string "<code title>)</code>".</li> |
simonp@8244 | 2663 | </ol> |
simonp@8244 | 2664 | |
simonp@8304 | 2665 | <p>In the above rules, the string "<code title>, </code>" denotes a COMMA (U+002C) followed by a single SPACE (U+0020).</p> |
simonp@8244 | 2666 | |
simonp@8244 | 2667 | <p>If <color> is a component of a specified value, then |
simonp@8244 | 2668 | return the color as follows:</p> |
simonp@8244 | 2669 | <ol> |
simonp@8244 | 2670 | <li>If the color was explicitly specified by the author, then return the original, author specified color value.</li> |
simonp@8244 | 2671 | <li>Otherwise, return the value that would be returned if the color were a component of a computed value.</li> |
simonp@8244 | 2672 | </ol> |
simonp@8435 | 2673 | <p class="issue">Should author specified values be normalized for case? Or should original case be preserved?</p> |
simonp@8244 | 2674 | </dd> |
simonp@8244 | 2675 | <!-- |
simonp@8244 | 2676 | <dt>It is a system color</dt> |
simonp@8244 | 2677 | |
simonp@8244 | 2678 | <dd>See below (you use the representation given in the specification that |
simonp@8244 | 2679 | defines the keyword).</dd> |
simonp@8244 | 2680 | |
simonp@8244 | 2681 | <dt>Alpha component is equal to 1.0</dt> |
simonp@8244 | 2682 | |
simonp@8244 | 2683 | <dd>The color is an uppercase six-digit hexadecimal value, prefixed with a |
simonp@8304 | 2684 | <code title>#</code> character (U+0023 NUMBER SIGN), with the first two digits |
simonp@8244 | 2685 | representing the red component, the next two digits representing the green |
simonp@8244 | 2686 | component, and the last two digits representing the blue component, the |
simonp@8244 | 2687 | digits being in the range 0-9 A-F (U+0030 to U+0039 and U+0041 to |
simonp@8244 | 2688 | U+0046).</dd> |
simonp@8244 | 2689 | |
simonp@8244 | 2690 | <dt>Alpha component is less than 1.0</dt> |
simonp@8244 | 2691 | |
simonp@8304 | 2692 | <dd>The color is in the CSS <code title>rgba()</code> functional-notation format: |
simonp@8304 | 2693 | the literal string <code title>rgba</code> (U+0072 U+0067 U+0062 U+0061) followed |
simonp@8244 | 2694 | by a U+0028 LEFT PARENTHESIS, a <span>color component integer</span> |
simonp@8244 | 2695 | representing the red component, a <span>color component separator</span>, a |
simonp@8244 | 2696 | <span>color component integer</span> for the green component, a <span>color |
simonp@8244 | 2697 | component separator</span>, a <span>color component integer</span> for the |
simonp@8244 | 2698 | blue component, another <span>color component separator</span> a U+0030 |
simonp@8244 | 2699 | DIGIT ZERO, a U+002E FULL STOP (representing the decimal point), one or |
simonp@8244 | 2700 | more digits in the range 0-9 (U+0030 to U+0039) representing the fractional |
simonp@8244 | 2701 | part of the alpha value, and finally a U+0029 RIGHT PARENTHESIS.</dd> |
simonp@8244 | 2702 | |
simonp@8304 | 2703 | <dt>The keyword <code title>transparent</code> is used</dt> |
simonp@8304 | 2704 | |
simonp@8304 | 2705 | <dd>The color is <code title>rgba(0, 0, 0, 0)</code>.</dd> |
simonp@8244 | 2706 | --> |
simonp@8244 | 2707 | |
simonp@8244 | 2708 | <dt><counter></dt> |
simonp@8244 | 2709 | <dd> |
simonp@8914 | 2710 | <p>The return value of the following algorithm:</p> |
simonp@8244 | 2711 | <ol> |
simonp@8914 | 2712 | <li><p>Let <var>s</var> be the empty string. |
simonp@8914 | 2713 | <li><p>If <counter> has three CSS component values append the string |
simonp@8914 | 2714 | "<code title>counters(</code>" to <var>s</var>.</p></li> |
simonp@8914 | 2715 | <li><p>If <counter> has two CSS component values append the string |
simonp@8914 | 2716 | "<code title>counter(</code>" to <var>s</var>.</p></li> |
simonp@8914 | 2717 | <li><p>Let <var>list</var> be a list of CSS component values belonging to <counter>, omitting the last CSS component value if it is 'decimal'. |
simonp@8914 | 2718 | <li><p>Let each item in <var>list</var> be the result of invoking <span>serialize a CSS component value</span> on that item. |
simonp@8914 | 2719 | <li><p>Append the result of invoking <span>serialize a comma-separated list</span> on <var>list</var> to <var>s</var>. |
simonp@8914 | 2720 | <li><p>Append "<code title>)</code>" (U+0029) to <var>s</var>.</p></li> |
simonp@8914 | 2721 | <li><p>Return <var>s</var>. |
simonp@8244 | 2722 | </ol> |
simonp@8244 | 2723 | </dd> |
simonp@8244 | 2724 | |
simonp@8244 | 2725 | <dt><frequency></dt> |
simonp@8244 | 2726 | <dd><p>The frequency in hertz serialized as per <number> followed by |
simonp@8304 | 2727 | the literal string "<code title>hz</code>".</dd> |
simonp@8244 | 2728 | |
simonp@8244 | 2729 | <dt><identifier></dt> |
simonp@8244 | 2730 | <dd><p>The identifier |
simonp@8244 | 2731 | <span title="serialize an identifier">escaped</span>.</p></dd> |
simonp@8244 | 2732 | |
simonp@8244 | 2733 | <dt><integer></dt> |
simonp@8244 | 2734 | <dd><p>A base-ten integer using digits 0-9 (U+0030 to U+0039) in the |
simonp@8304 | 2735 | shortest form possible, preceded by "<code title>-</code>" (U+002D) if it is |
simonp@8244 | 2736 | negative.</p></dd> |
simonp@8244 | 2737 | |
simonp@8244 | 2738 | <dt><length></dt> |
simonp@8244 | 2739 | <dd> |
simonp@8244 | 2740 | <p>A length of zero is represented by the literal string |
simonp@8304 | 2741 | "<code title>0px</code>".</p> |
simonp@8244 | 2742 | |
simonp@8244 | 2743 | <p>Absolute lengths: the number of millimeters serialized as per |
simonp@8304 | 2744 | <number> followed by the literal string "<code title>mm</code>".</p> |
simonp@8435 | 2745 | <p class="issue">Rumor has it absolute lengths will become relative |
simonp@8244 | 2746 | lengths. Centimeters would be compatible with <resolution>...</p> |
simonp@8244 | 2747 | |
simonp@8244 | 2748 | <p>Relative lengths: the <number> component serialized as per |
simonp@8244 | 2749 | <number> followed by the unit in its canonical form as defined in its |
simonp@8244 | 2750 | respective specification.</p> |
simonp@8244 | 2751 | </dd> |
simonp@8244 | 2752 | |
simonp@8244 | 2753 | <dt><number></dt> |
simonp@8485 | 2754 | <dd> |
simonp@8485 | 2755 | <p>A base-ten number using digits 0-9 (U+0030 to U+0039) in the shortest form possible, using "<code title>.</code>" to separate decimals (if any), preceded |
simonp@8485 | 2756 | by "<code title>-</code>" (U+002D) if it is negative. |
simonp@9661 | 2757 | |
simonp@8485 | 2758 | <p class=note>JavaScript's <code title>ToString</code> algorithm cannot be used since it can serialize numbers using an exponent, which would not round-trip |
simonp@8485 | 2759 | in CSS. |
simonp@8244 | 2760 | |
simonp@8244 | 2761 | <dt><percentage></dt> |
simonp@8244 | 2762 | <dd><p>The <number> component serialized as per <number> followed |
simonp@8304 | 2763 | by the literal string "<code title>%</code>" (U+0025).</p></dd> |
simonp@8244 | 2764 | |
simonp@8244 | 2765 | <dt><resolution></dt> |
simonp@8244 | 2766 | <dd><p>The resolution in dots per centimeter serialized as per |
simonp@8304 | 2767 | <number> followed by the literal string "<code title>dpcm</code>".</dd> |
simonp@8244 | 2768 | |
simonp@8244 | 2769 | <dt><shape></dt> |
simonp@8914 | 2770 | <dd> |
simonp@8914 | 2771 | <p>The return value of the following algorithm: |
simonp@8914 | 2772 | <ol> |
simonp@8914 | 2773 | <li><p>Let <var>s</var> be the string "<code title>rect(</code>". |
simonp@8914 | 2774 | <li><p>Let <var>list</var> be a list of the CSS component values belonging to <shape>. |
simonp@8914 | 2775 | <li><p>Let each item in <var>list</var> be the result of invoking <span>serialize a CSS component value</span> of that item. |
simonp@8914 | 2776 | <li><p>Append the result of invoking <span>serialize a comma-separated list</span> on <var>list</var> to <var>s</var>. |
simonp@8914 | 2777 | <li><p>Append "<code title>)</code>" (U+0029) to <var>s</var>. |
simonp@8914 | 2778 | <li><p>Return <var>s</var>. |
simonp@8914 | 2779 | </ol> |
simonp@8914 | 2780 | </dd> |
simonp@8244 | 2781 | |
simonp@8244 | 2782 | <dt><string></dt> |
simonp@8244 | 2783 | <dt><family-name></dt> |
simonp@8244 | 2784 | <dt><specific-voice></dt> |
simonp@8244 | 2785 | <dd><p>The string |
simonp@8244 | 2786 | <span title="serialize a string">string escaped</span>.</p></dd> |
simonp@8244 | 2787 | |
simonp@8244 | 2788 | <dt><time></dt> |
simonp@8244 | 2789 | <dd><p>The time in seconds serialized as per <number> followed by |
simonp@8304 | 2790 | the literal string "<code title>s</code>".</dd> |
simonp@8244 | 2791 | |
simonp@8244 | 2792 | <dt><uri></dt> |
simonp@8244 | 2793 | <dd><p>The <span data-anolis-spec=url title=concept-absolute-url>absolute URL</span> |
simonp@8244 | 2794 | <span title="serialize a URL">URL escaped</span>.</p></dd> |
simonp@8244 | 2795 | </dl> |
simonp@8244 | 2796 | |
simonp@8244 | 2797 | <p> |
simonp@8244 | 2798 | <absolute-size>, |
simonp@8244 | 2799 | <border-width>, |
simonp@8244 | 2800 | <border-style>, |
simonp@8244 | 2801 | <bottom>, |
simonp@8244 | 2802 | <generic-family>, |
simonp@8244 | 2803 | <generic-voice>, |
simonp@8244 | 2804 | <left>, |
simonp@8244 | 2805 | <margin-width>, |
simonp@8244 | 2806 | <padding-width>, |
simonp@8244 | 2807 | <relative-size>, |
simonp@8244 | 2808 | <right>, and |
simonp@8244 | 2809 | <top>, |
simonp@8244 | 2810 | are considered macros by this specification. They all represent instances |
simonp@8244 | 2811 | of components outlined above.</p> |
simonp@8244 | 2812 | |
simonp@8435 | 2813 | <p class="issue">One idea is that we can remove this section somewhere in |
simonp@8244 | 2814 | the CSS3/CSS4 timeline by moving the above definitions to the drafts that |
simonp@8244 | 2815 | define the CSS components.</p> |
simonp@8244 | 2816 | |
simonp@8244 | 2817 | |
simonp@8244 | 2818 | <h5>Examples</h5> |
simonp@8244 | 2819 | |
simonp@8244 | 2820 | <p>Here are some examples of before and after results on specified values. |
simonp@8244 | 2821 | The before column could be what the author wrote in a style sheet, while |
simonp@8244 | 2822 | the after column shows what querying the DOM would return.</p> |
simonp@8244 | 2823 | |
simonp@8244 | 2824 | <div class="example"> |
simonp@8559 | 2825 | <table class="complex data"> |
simonp@8244 | 2826 | <thead> |
simonp@8244 | 2827 | <tr><th>Before<th>After |
simonp@8244 | 2828 | <tbody> |
simonp@8304 | 2829 | <tr><td><code title>background: none</code><td><code title>background: rgba(0, 0, 0, 0)</code> |
simonp@8304 | 2830 | <tr><td><code title>outline: none</code><td><code title>outline: invert</code> |
simonp@8304 | 2831 | <tr><td><code title>border: none</code><td><code title>border: medium</code> |
simonp@8304 | 2832 | <tr><td><code title>list-style: none</code><td><code title>list-style: disc</code> |
simonp@8304 | 2833 | <tr><td><code title>margin: 0 1px 1px 1px</code><td><code title>margin: 0px 1px 1px</code> |
simonp@8304 | 2834 | <tr><td><code title>azimuth: behind left</code><td><code title>azimuth: 220deg</code> |
simonp@8304 | 2835 | <tr><td><code title>font-family: a, 'b"', serif</code><td><code title>font-family: "a", "b\"", serif</code> |
simonp@8304 | 2836 | <tr><td><code title>content: url('h)i') '\[\]'</code><td><code title>content: url("h)i") "[]"</code> |
simonp@8304 | 2837 | <tr><td><code title>azimuth: leftwards</code><td><code title>azimuth: leftwards</code> |
simonp@8304 | 2838 | <tr><td><code title>color: rgb(18, 52, 86)</code><td><code title>color: #123456</code> |
simonp@8304 | 2839 | <tr><td><code title>color: rgba(000001, 0, 0, 1)</code><td><code title>color: #000000</code> |
simonp@8244 | 2840 | </table> |
simonp@8244 | 2841 | |
simonp@8435 | 2842 | <p class="issue">Some of these need to be updated per the new rules.</p> |
simonp@8244 | 2843 | </div> |
simonp@8244 | 2844 | |
simonp@8244 | 2845 | |
simonp@8244 | 2846 | <h2>DOM Access to CSS Declaration Blocks</h2> |
simonp@8244 | 2847 | |
simonp@8244 | 2848 | |
simonp@8244 | 2849 | <h3>The <code>ElementCSSInlineStyle</code> Interface</h3> |
simonp@8226 | 2850 | |
simonp@8226 | 2851 | <p>The <code>ElementCSSInlineStyle</code> interface provides access to inline style properties of an element.</p> |
simonp@8226 | 2852 | |
simonp@8226 | 2853 | <pre class=idl>[NoInterfaceObject] |
simonp@8226 | 2854 | interface <dfn>ElementCSSInlineStyle</dfn> { |
simonp@8902 | 2855 | [SameObject, PutForwards=<span title=dom-CSSStyleDeclaration-cssText>cssText</span>] readonly attribute <span>CSSStyleDeclaration</span> <!-- |
simonp@8484 | 2856 | --><span title=dom-ElementCSSInlineStyle-style>style</span>; |
simonp@8226 | 2857 | };</pre> |
simonp@8226 | 2858 | |
simonp@8916 | 2859 | <p>The <dfn title=dom-ElementCSSInlineStyle-style><code>style</code></dfn> attribute must return a live <span>CSS declaration block</span> with the following |
simonp@8916 | 2860 | properties: |
simonp@8916 | 2861 | <dl> |
simonp@8916 | 2862 | <dt><span title=concept-css-declaration-block-readonly-flag>readonly flag</span> |
simonp@8916 | 2863 | <dd><p>Unset. |
simonp@8916 | 2864 | <dt><span title=concept-css-declaration-block-declarations>declarations</span> |
simonp@8916 | 2865 | <dd><p>The result of <span title='Parse a CSS declaration block'>parsing</span> the <code title>style</code> content attribute, in |
simonp@8916 | 2866 | <span title=concept-declarations-specified-order>specified order</span>. If the <code title>style</code> content attribute is absent, the object represents an |
simonp@8999 | 2867 | empty list of <span title="CSS declaration">CSS declarations</span>. Mutating the <span title=concept-css-declaration-block-declarations>declarations</span> |
simonp@8999 | 2868 | must set the <code title>style</code> content attribute on the <span data-anolis-spec=dom>context object</span> to the |
simonp@8916 | 2869 | <span title='serialize a CSS declaration block'>serialization</span> of the <span title=concept-css-declaration-block-declarations>declarations</span>. If the |
simonp@8916 | 2870 | <code title>style</code> content attribute is set, changed or removed, the <span title=concept-css-declaration-block-declarations>declarations</span> must be |
simonp@8916 | 2871 | updated as appropriate. |
simonp@8916 | 2872 | <dt><span title=contept-css-declaration-block-parent-css-rule>parent CSS rule</span> |
simonp@8916 | 2873 | <dd><p>Null. |
simonp@8916 | 2874 | <dt><span title=concept-css-declaration-block-owner-node>owner node</span> |
simonp@8916 | 2875 | <dd><p>The <span data-anolis-spec=dom>context object</span>. |
simonp@8916 | 2876 | </dl> |
simonp@8226 | 2877 | |
simonp@8371 | 2878 | <p>If the user agent supports HTML, the following IDL applies: <span data-anolis-ref class=informative>HTML</span> |
simonp@8371 | 2879 | |
simonp@8371 | 2880 | <pre class=idl><span data-anolis-spec=html>HTMLElement</span> implements <span>ElementCSSInlineStyle</span>;</pre> |
simonp@8371 | 2881 | |
simonp@8371 | 2882 | <p>If the user agent supports SVG, the following IDL applies: <span data-anolis-ref class=informative>SVG</span> |
simonp@8371 | 2883 | |
simonp@8371 | 2884 | <pre class=idl>SVGElement implements <span>ElementCSSInlineStyle</span>;</pre> |
simonp@8226 | 2885 | |
simonp@8226 | 2886 | |
simonp@8244 | 2887 | <h3>Extensions to the <code title>Window</code> Interface</h3> |
simonp@8226 | 2888 | |
simonp@8226 | 2889 | <pre class=idl>partial interface <span data-anolis-spec=html>Window</span> { |
simonp@8820 | 2890 | [NewObject] <span>CSSStyleDeclaration</span> <!-- |
simonp@8820 | 2891 | --><span title=dom-Window-getComputedStyle>getComputedStyle</span>(<span data-anolis-spec=dom>Element</span> elt, optional DOMString pseudoElt); |
simonp@8226 | 2892 | };</pre> |
simonp@8226 | 2893 | |
simonp@8406 | 2894 | <p>The <dfn title=dom-Window-getComputedStyle><code>getComputedStyle(<var>elt</var>, <var>pseudoElt</var>)</code></dfn> method must run these |
simonp@8304 | 2895 | steps:</p> |
simonp@8226 | 2896 | <ol> |
simonp@8406 | 2897 | <li><p>Let <var>doc</var> be the |
simonp@8226 | 2898 | <code data-anolis-spec=dom>Document</code> |
simonp@8226 | 2899 | associated with the <code data-anolis-spec=html>Window</code> object on |
simonp@8226 | 2900 | which the method was invoked.</p></li> |
simonp@8406 | 2901 | <li><p>Let <var>obj</var> be <var>elt</var>.</p></li> |
simonp@8406 | 2902 | <li><p>If <var>pseudoElt</var> is as an |
simonp@8226 | 2903 | <span data-anolis-spec=dom>ASCII case-insensitive</span> match for |
simonp@8346 | 2904 | either ':before' or '::before' let |
simonp@8406 | 2905 | <var>obj</var> be the <span>::before pseudo-element</span> of |
simonp@8406 | 2906 | <var>elt</var>.</p></li> |
simonp@8406 | 2907 | <li><p>If <var>pseudoElt</var> is as an |
simonp@8226 | 2908 | <span data-anolis-spec=dom>ASCII case-insensitive</span> match for |
simonp@8346 | 2909 | either ':after' or '::after' let |
simonp@8406 | 2910 | <var>obj</var> be the <span>::after pseudo-element</span> of |
simonp@8406 | 2911 | <var>elt</var>.</p></li> |
simonp@8226 | 2912 | <li> |
simonp@8916 | 2913 | <p>Return a live <span>CSS declaration block</span> with the following properties: |
simonp@8916 | 2914 | <dl> |
simonp@8916 | 2915 | <dt><span title=concept-css-declaration-block-readonly-flag>readonly flag</span> |
simonp@8916 | 2916 | <dd><p>Set. |
simonp@8916 | 2917 | <dt><span title=concept-css-declaration-block-declarations>declarations</span> |
simonp@8959 | 2918 | <dd><p>All longhand properties that are <span title="supported CSS property">supported CSS properties</span>, in lexicographical order, with the value being |
simonp@8959 | 2919 | the <span>resolved value</span> computed for <var>obj</var> using the style rules associated with <var>doc</var>.</p> |
simonp@8916 | 2920 | <p class=note>This means that even if <var>obj</var> is in a different document (e.g. one fetched via <code title>XMLHttpRequest</code>) it will still use |
simonp@8916 | 2921 | the style rules associated with the document that is associated with the global object on which |
simonp@8916 | 2922 | <code title=dom-Window-getComputedStyle>getComputedStyle()</code> was invoked to compute the <span>CSS declaration block</span>.</p> |
simonp@8916 | 2923 | <dt><span title=contept-css-declaration-block-parent-css-rule>parent CSS rule</span> |
simonp@8916 | 2924 | <dd><p>Null. |
simonp@8916 | 2925 | <dt><span title=concept-css-declaration-block-owner-node>owner node</span> |
simonp@8916 | 2926 | <dd><p><var>obj</var>. |
simonp@8916 | 2927 | </dl> |
simonp@8226 | 2928 | </li> |
simonp@8226 | 2929 | </ol> |
simonp@8226 | 2930 | <p class='note'>Because of historical IDL limitations the <code title=dom-Window-getComputedStyle>getComputedStyle()</code> method used to be on |
simonp@8304 | 2931 | a separate interface, <code title>ViewCSS</code>.</p> |
simonp@8226 | 2932 | |
simonp@8552 | 2933 | <p class=warning>The <code title=dom-Window-getComputedStyle>getComputedStyle()</code> method exposes information from <span title="CSS style sheet">CSS style |
simonp@8552 | 2934 | sheets</span> with the <span title=concept-css-style-sheet-origin-clean-flag>origin-clean flag</span> unset. |
simonp@8226 | 2935 | |
simonp@8244 | 2936 | <h3>The <code title>GetStyleUtils</code> Interface</h3> |
simonp@8226 | 2937 | |
simonp@8406 | 2938 | <p>The <dfn>associated document</dfn> of an object <var>obj</var> is <var>obj</var>'s <span data-anolis-spec=dom title=concept-node-document>node |
simonp@8406 | 2939 | document</span> if <var>obj</var> is an <code data-anolis-spec=dom>Element</code> object, or <var>obj</var>'s associated |
simonp@8406 | 2940 | <code data-anolis-spec=dom>Element</code> object's <span data-anolis-spec=dom title=concept-node-document>node document</span> if <var>obj</var> is a |
simonp@8304 | 2941 | <code>PseudoElement</code> object.</p> |
simonp@8226 | 2942 | |
simonp@8226 | 2943 | <pre class=idl>[NoInterfaceObject] |
simonp@8226 | 2944 | interface <dfn>GetStyleUtils</dfn> { |
simonp@8822 | 2945 | [SameObject] readonly attribute <span>CSSStyleDeclaration</span> <span title=dom-GetStyleUtils-cascadedStyle>cascadedStyle</span>; |
simonp@8822 | 2946 | <!--[SameObject] readonly attribute <span>CSSStyleDeclaration</span> <span title=dom-GetStyleUtils-defaultStyle>defaultStyle</span>; |
simonp@8822 | 2947 | -->[SameObject] readonly attribute <span>CSSStyleDeclaration</span> <span title=dom-GetStyleUtils-rawComputedStyle>rawComputedStyle</span>; |
simonp@8822 | 2948 | [SameObject] readonly attribute <span>CSSStyleDeclaration</span> <span title=dom-GetStyleUtils-usedStyle>usedStyle</span>; |
simonp@8226 | 2949 | };</pre> |
simonp@8226 | 2950 | |
simonp@8822 | 2951 | <p class=atrisk>The <dfn title=dom-GetStyleUtils-cascadedStyle><code>cascadedStyle</code></dfn> attribute must return a live <span>CSS declaration block</span> |
simonp@8916 | 2952 | with the following properties: |
simonp@8916 | 2953 | <dl> |
simonp@8916 | 2954 | <dt><span title=concept-css-declaration-block-readonly-flag>readonly flag</span> |
simonp@8916 | 2955 | <dd><p>Set. |
simonp@8916 | 2956 | <dt><span title=concept-css-declaration-block-declarations>declarations</span> |
simonp@8959 | 2957 | <dd><p>All longhand properties that are <span title="supported CSS property">supported CSS properties</span>, in lexicographical order, that have a |
simonp@8959 | 2958 | <span>cascaded value</span> for the <span data-anolis-spec=dom>context object</span>, with the value being the <span>cascaded value</span> computed for the |
simonp@8959 | 2959 | <span data-anolis-spec=dom>context object</span> using the style rules associated with the <span data-anolis-spec=dom>context object</span>'s <span>associated |
simonp@8959 | 2960 | document</span>.</p> |
simonp@8916 | 2961 | <dt><span title=contept-css-declaration-block-parent-css-rule>parent CSS rule</span> |
simonp@8916 | 2962 | <dd><p>Null. |
simonp@8916 | 2963 | <dt><span title=concept-css-declaration-block-owner-node>owner node</span> |
simonp@8916 | 2964 | <dd><p>The <span data-anolis-spec=dom>context object</span>. |
simonp@8916 | 2965 | </dl> |
simonp@8916 | 2966 | |
simonp@8916 | 2967 | <!-- |
simonp@8916 | 2968 | <p class=atrisk>The <dfn title=dom-GetStyleUtils-defaultStyle><code>defaultStyle</code></dfn> attribute must return a live <span>CSS declaration block</span> |
simonp@8916 | 2969 | with the following properties: |
simonp@8916 | 2970 | <dl> |
simonp@8916 | 2971 | <dt><span title=concept-css-declaration-block-readonly-flag>readonly flag</span> |
simonp@8916 | 2972 | <dd><p>Set. |
simonp@8916 | 2973 | <dt><span title=concept-css-declaration-block-declarations>declarations</span> |
simonp@8959 | 2974 | <dd><p>All longhand properties that are <span title="supported CSS property">supported CSS properties</span>, in lexicographical order, with the value being |
simonp@8959 | 2975 | the <span>computed value</span> computed for the <span data-anolis-spec=dom>context object</span> using the user-agent-level style rules and user-level style |
simonp@8959 | 2976 | rules associated with the <span data-anolis-spec=dom>context object</span>'s <span>associated document</span>, ignoring transitions, animations, author-level |
simonp@8959 | 2977 | style rules, author-level presentational hints and override-level style rules.</p> |
simonp@8916 | 2978 | <dt><span title=contept-css-declaration-block-parent-css-rule>parent CSS rule</span> |
simonp@8916 | 2979 | <dd><p>Null. |
simonp@8916 | 2980 | <dt><span title=concept-css-declaration-block-owner-node>owner node</span> |
simonp@8916 | 2981 | <dd><p>The <span data-anolis-spec=dom>context object</span>. |
simonp@8916 | 2982 | </dl> |
simonp@8916 | 2983 | --> |
simonp@8226 | 2984 | |
simonp@8822 | 2985 | <p class=atrisk>The <dfn title=dom-GetStyleUtils-rawComputedStyle><code>rawComputedStyle</code></dfn> attribute must return a live <span>CSS declaration |
simonp@8916 | 2986 | block</span> with the following properties: |
simonp@8916 | 2987 | <dl> |
simonp@8916 | 2988 | <dt><span title=concept-css-declaration-block-readonly-flag>readonly flag</span> |
simonp@8916 | 2989 | <dd><p>Set. |
simonp@8916 | 2990 | <dt><span title=concept-css-declaration-block-declarations>declarations</span> |
simonp@8959 | 2991 | <dd><p>All longhand properties that are <span title="supported CSS property">supported CSS properties</span>, in lexicographical order, with the value being |
simonp@8959 | 2992 | the <span>computed value</span> computed for the <span data-anolis-spec=dom>context object</span> using the style rules associated with the |
simonp@8959 | 2993 | <span data-anolis-spec=dom>context object</span>'s <span>associated document</span>.</p> |
simonp@8916 | 2994 | <dt><span title=contept-css-declaration-block-parent-css-rule>parent CSS rule</span> |
simonp@8916 | 2995 | <dd><p>Null. |
simonp@8916 | 2996 | <dt><span title=concept-css-declaration-block-owner-node>owner node</span> |
simonp@8916 | 2997 | <dd><p>The <span data-anolis-spec=dom>context object</span>. |
simonp@8916 | 2998 | </dl> |
simonp@8226 | 2999 | |
simonp@8822 | 3000 | <p class=atrisk>The <dfn title=dom-GetStyleUtils-usedStyle><code>usedStyle</code></dfn> attribute must return a live <span>CSS declaration block</span> with the |
simonp@8916 | 3001 | following properties: |
simonp@8916 | 3002 | <dl> |
simonp@8916 | 3003 | <dt><span title=concept-css-declaration-block-readonly-flag>readonly flag</span> |
simonp@8916 | 3004 | <dd><p>Set. |
simonp@8916 | 3005 | <dt><span title=concept-css-declaration-block-declarations>declarations</span> |
simonp@8959 | 3006 | <dd><p>All longhand properties that are <span title="supported CSS property">supported CSS properties</span>, in lexicographical order, with the value being |
simonp@8959 | 3007 | the <span>used value</span> computed for the <span data-anolis-spec=dom>context object</span> using the style rules associated with the |
simonp@8959 | 3008 | <span data-anolis-spec=dom>context object</span>'s <span>associated document</span>.</p> |
simonp@8916 | 3009 | <dt><span title=contept-css-declaration-block-parent-css-rule>parent CSS rule</span> |
simonp@8916 | 3010 | <dd><p>Null. |
simonp@8916 | 3011 | <dt><span title=concept-css-declaration-block-owner-node>owner node</span> |
simonp@8916 | 3012 | <dd><p>The <span data-anolis-spec=dom>context object</span>. |
simonp@8916 | 3013 | </dl> |
simonp@8226 | 3014 | |
simonp@8813 | 3015 | <p class=warning>The <code title=dom-GetStyleUtils-cascadedStyle>cascadedStyle</code>, <code title=dom-GetStyleUtils-rawComputedStyle>rawComputedStyle</code> |
simonp@8813 | 3016 | and <code title=dom-GetStyleUtils-usedStyle>usedStyle</code> methods expose information from <span title="CSS style sheet">CSS style sheets</span> with the |
simonp@8552 | 3017 | <span title=concept-css-style-sheet-origin-clean-flag>origin-clean flag</span> unset. |
simonp@8226 | 3018 | |
simonp@8226 | 3019 | |
simonp@8244 | 3020 | <h3>Extensions to the <code title>Element</code> Interface</h3> |
simonp@8226 | 3021 | |
simonp@8226 | 3022 | <pre class=idl>partial interface <span data-anolis-spec=dom>Element</span> { |
simonp@8226 | 3023 | <span>PseudoElement</span>? <span title=dom-Element-pseudo>pseudo</span>(DOMString pseudoElt); |
simonp@8226 | 3024 | }; |
simonp@8226 | 3025 | |
simonp@8226 | 3026 | <span data-anolis-spec=dom>Element</span> implements <span>GetStyleUtils</span>;</pre> |
simonp@8226 | 3027 | |
simonp@8406 | 3028 | <p class=atrisk>The <dfn title=dom-Element-pseudo><code>pseudo(<var>pseudoElt</var>)</code></dfn> method, when invoked, must run the following steps: |
simonp@8226 | 3029 | <ol> |
simonp@8406 | 3030 | <li><p>If <var>pseudoElt</var> is as an <span data-anolis-spec=dom>ASCII case-insensitive</span> match for either ':before' or |
simonp@8346 | 3031 | '::before' return the <code>PseudoElement</code> representing the <span>::before pseudo-element</span> of the |
simonp@8329 | 3032 | <span data-anolis-spec=dom>context object</span>.</p></li> |
simonp@8406 | 3033 | <li><p>If <var>pseudoElt</var> is as an <span data-anolis-spec=dom>ASCII case-insensitive</span> match for either ':after' or |
simonp@8346 | 3034 | '::after' return the <code>PseudoElement</code> representing the <span>::after pseudo-element</span> of the |
simonp@8329 | 3035 | <span data-anolis-spec=dom>context object</span>.</p></li> |
simonp@8226 | 3036 | <li><p>Return null.</p></li> |
simonp@8226 | 3037 | </ol> |
simonp@8226 | 3038 | <p>When invoked with an argument that returns a <code>PseudoElement</code> object representing a particular pseudo-element, the same object must be |
simonp@8226 | 3039 | returned as returned by an earlier call that represent the same pseudo-element.</p> |
simonp@8226 | 3040 | |
simonp@8226 | 3041 | |
simonp@8226 | 3042 | |
simonp@8244 | 3043 | <h3>The <code title>PseudoElement</code> Interface</h3> |
simonp@9661 | 3044 | |
simonp@8336 | 3045 | <p class=atrisk>The <code>PseudoElement</code> interface is used for representing CSS pseudo-elements. A <code>PseudoElement</code> object is associated with an |
simonp@8304 | 3046 | <code data-anolis-spec=dom>Element</code> object.</p> |
simonp@8226 | 3047 | |
simonp@8226 | 3048 | <pre class=idl>interface <dfn>PseudoElement</dfn> { |
simonp@8226 | 3049 | }; |
simonp@8226 | 3050 | |
simonp@8226 | 3051 | <span>PseudoElement</span> implements <span>GetStyleUtils</span>;</pre> |
simonp@8226 | 3052 | |
simonp@8226 | 3053 | |
simonp@9368 | 3054 | <h2>Utility APIs</h2> |
simonp@9368 | 3055 | |
simonp@9368 | 3056 | <h3>The <code title>CSS.escape()</code> Method</h3> |
simonp@9368 | 3057 | |
simonp@9368 | 3058 | <p>The <code title>CSS</code> interface is defined in CSS Conditional Rules Module. <span data-anolis-ref>CSSCONDITIONAL</span> |
simonp@9368 | 3059 | |
simonp@9368 | 3060 | <pre class=idl>partial interface CSS { |
simonp@9368 | 3061 | static DOMString <span title=dom-CSS-escape>escape</span>(DOMString ident); |
simonp@9368 | 3062 | };</pre> |
simonp@9368 | 3063 | |
simonp@9368 | 3064 | <p>The <dfn title=dom-CSS-escape><code>escape(<var>ident</var>)</code></dfn> method must return the result of invoking <span>serialize an identifier</span> of |
simonp@9368 | 3065 | <var>ident</var>. Any exceptions thrown must be re-thrown. |
simonp@9368 | 3066 | |
simonp@9368 | 3067 | <div class=example> |
simonp@9368 | 3068 | <p>For example, to escape a string for use as part of a selector, the <code title=dom-CSS-escape>escape()</code> method can be used: |
simonp@9368 | 3069 | <pre>var element = document.querySelector('#' + CSS.escape(id) + ' > img');</pre> |
simonp@9368 | 3070 | </div> |
simonp@9368 | 3071 | |
simonp@9368 | 3072 | <div class=example> |
simonp@9368 | 3073 | <p>The <code title=dom-CSS-escape>escape()</code> method can also be used for escaping strings, although it escapes characters that don't strictly need to be |
simonp@9368 | 3074 | escaped: |
simonp@9368 | 3075 | <pre>var element = document.querySelector('a[href="#' + CSS.escape(fragment) + '"]');</pre> |
simonp@9368 | 3076 | </div> |
simonp@9368 | 3077 | |
simonp@9368 | 3078 | |
simonp@8244 | 3079 | <h2>Resolved Values</h2> |
simonp@8244 | 3080 | |
simonp@8244 | 3081 | <p><code title="dom-Window-getComputedStyle">getComputedStyle()</code> was |
simonp@8244 | 3082 | historically defined to return the "computed value" of an element or |
simonp@8244 | 3083 | pseudo-element. However, the concept of "computed value" changed between |
simonp@8244 | 3084 | revisions of CSS while the implementation of |
simonp@8244 | 3085 | <code title="dom-Window-getComputedStyle">getComputedStyle()</code> had to |
simonp@8244 | 3086 | remain the same for compatibility with deployed scripts. To address this |
simonp@8244 | 3087 | issue this specification introduces the concept of a |
simonp@8244 | 3088 | <dfn>resolved value</dfn>.</p> |
simonp@8244 | 3089 | |
simonp@8244 | 3090 | <p>The <span>resolved value</span> for a given property can be determined |
simonp@8244 | 3091 | as follows:</p> |
simonp@8244 | 3092 | |
simonp@8244 | 3093 | <dl class="switch"> |
simonp@8244 | 3094 | <!-- |
simonp@8244 | 3095 | We want to treat shorthand properties like any other value basically. |
simonp@8244 | 3096 | |
simonp@8346 | 3097 | <dt>'background' |
simonp@8346 | 3098 | <dt>'border' |
simonp@8346 | 3099 | <dt>'border-collapse' |
simonp@8346 | 3100 | <dt>'border-color' |
simonp@8346 | 3101 | <dt>'border-spacing' |
simonp@8346 | 3102 | <dt>'border-style' |
simonp@8346 | 3103 | <dt>'border-top' |
simonp@8346 | 3104 | <dt>'border-right' |
simonp@8346 | 3105 | <dt>'border-bottom' |
simonp@8346 | 3106 | <dt>'border-left' |
simonp@8346 | 3107 | <dt>'border-width' |
simonp@8346 | 3108 | <dt>'font' |
simonp@8346 | 3109 | <dt>'list-style' |
simonp@8346 | 3110 | <dt>'margin' |
simonp@8346 | 3111 | <dt>'outline' |
simonp@8244 | 3112 | <!- - overflow is not - -> |
simonp@8346 | 3113 | <dt>'padding' |
simonp@8346 | 3114 | <dt>'pause' |
simonp@8244 | 3115 | <dd> |
simonp@8244 | 3116 | <p>There is no <span>resolved value</span>.</p> |
simonp@8244 | 3117 | </dd> |
simonp@8244 | 3118 | --> |
simonp@8244 | 3119 | |
simonp@8346 | 3120 | <dt>'line-height'</dt> |
simonp@8327 | 3121 | <dd><p>The <span>resolved value</span> is the <span>used value</span>.</p></dd> |
simonp@8244 | 3122 | |
simonp@8346 | 3123 | <dt>'height'</dt> |
simonp@8346 | 3124 | <dt>'margin'</dt> |
simonp@8346 | 3125 | <dt>'margin-bottom'</dt> |
simonp@8346 | 3126 | <dt>'margin-left'</dt> |
simonp@8346 | 3127 | <dt>'margin-right'</dt> |
simonp@8346 | 3128 | <dt>'margin-top'</dt> |
simonp@8346 | 3129 | <dt>'padding'</dt> |
simonp@8346 | 3130 | <dt>'padding-bottom'</dt> |
simonp@8346 | 3131 | <dt>'padding-left'</dt> |
simonp@8346 | 3132 | <dt>'padding-right'</dt> |
simonp@8346 | 3133 | <dt>'padding-top'</dt> |
simonp@8346 | 3134 | <dt>'width'</dt> |
simonp@8244 | 3135 | <dd><p>If the property applies to the element or pseudo-element and the |
simonp@8346 | 3136 | <span>resolved value</span> of the 'display' property is not |
simonp@8346 | 3137 | 'none', the <span>resolved value</span> is the |
simonp@8244 | 3138 | <span>used value</span>. Otherwise the <span>resolved value</span> is the |
simonp@8327 | 3139 | <span>computed value</span>.</p></dd> |
simonp@8244 | 3140 | |
simonp@8346 | 3141 | <dt>'bottom'</dt> |
simonp@8346 | 3142 | <dt>'left'</dt> |
simonp@8346 | 3143 | <dt>'right'</dt> |
simonp@8346 | 3144 | <dt>'top'</dt> |
simonp@8244 | 3145 | <dd><p>If the property applies to a positioned element and the |
simonp@8346 | 3146 | <span>resolved value</span> of the 'display' property is not |
simonp@8346 | 3147 | 'none', the <span>resolved value</span> is the |
simonp@8244 | 3148 | <span>used value</span>. Otherwise the <span>resolved value</span> is the |
simonp@8244 | 3149 | computed value.</p></dd> |
simonp@8244 | 3150 | |
simonp@8244 | 3151 | <dt>Any other property</dt> |
simonp@8327 | 3152 | <dd><p>The <span>resolved value</span> is the <span>computed value</span>.</p></dd> |
simonp@8244 | 3153 | </dl> |
simonp@8244 | 3154 | |
simonp@8244 | 3155 | |
simonp@8244 | 3156 | <h2>IANA Considerations</h2> |
simonp@8244 | 3157 | |
simonp@8244 | 3158 | |
simonp@8406 | 3159 | <h3><dfn title="http-default-style"><code title>Default-Style</code></dfn></h3> |
simonp@8244 | 3160 | |
simonp@8244 | 3161 | <p>This section describes a header field for registration in the Permanent |
simonp@8244 | 3162 | Message Header Field Registry. |
simonp@8435 | 3163 | <!--<a href="issue">[RFC3864]</a>--></p> |
simonp@8244 | 3164 | |
simonp@8244 | 3165 | <dl> |
simonp@8244 | 3166 | <dt>Header field name</dt> |
simonp@8244 | 3167 | <dd>Default-Style</dd> |
simonp@8244 | 3168 | <dt>Applicable protocol</dt> |
simonp@8244 | 3169 | <dd>http</dd> |
simonp@8244 | 3170 | <dt>Status</dt> |
simonp@8244 | 3171 | <dd>standard</dd> |
simonp@8244 | 3172 | <dt>Author/Change controller</dt> |
simonp@8244 | 3173 | <dd>W3C</dd> |
simonp@8244 | 3174 | <dt>Specification document(s)</dt> |
simonp@8244 | 3175 | <dd>This document is the relevant specification.</dd> |
simonp@8244 | 3176 | <dt>Related information</dt> |
simonp@8244 | 3177 | <dd>None.</dd> |
simonp@8244 | 3178 | </dl> |
simonp@8244 | 3179 | |
simonp@8244 | 3180 | |
simonp@8244 | 3181 | <h2 class=no-num>References</h2> |
simonp@8244 | 3182 | |
simonp@8244 | 3183 | <div id=anolis-references></div> |
simonp@8244 | 3184 | |
simonp@9717 | 3185 | <h2 class="no-num">Change History</h2> |
simonp@9717 | 3186 | |
simonp@9717 | 3187 | <p>This section documents some of the changes between publications of this specification. This section is not exhaustive. Bug fixes and editorial changes are |
simonp@9717 | 3188 | generally not listed.</p> |
simonp@9717 | 3189 | |
simonp@9717 | 3190 | <h3 class=no-num>Changes From 12 July 2011 To 5 December 2013</h3> |
simonp@9717 | 3191 | |
simonp@9717 | 3192 | <ul> |
simonp@9717 | 3193 | <li>Cross-origin stylesheets are not allowed to be read or changed. |
simonp@9717 | 3194 | |
simonp@9717 | 3195 | <li><code>CSSCharsetRule</code> is re-introduced. |
simonp@9717 | 3196 | |
simonp@9717 | 3197 | <li><code>CSSGroupingRule</code> and <code>CSSMarginRule</code> are introduced. |
simonp@9717 | 3198 | |
simonp@9717 | 3199 | <li><code>CSSNamespaceRule</code> is now mutable. |
simonp@9717 | 3200 | |
simonp@9717 | 3201 | <li><span title="parse a CSS declaration block">Parse</span> and <span title="serialize a CSS declaration block">serialize</span> a CSS declaration block is |
simonp@9717 | 3202 | now defined. |
simonp@9717 | 3203 | |
simonp@9717 | 3204 | <li>Shorthands are now supported in <code title=dom-CSSStyleDeclaration-setProperty>setProperty</code>, |
simonp@9717 | 3205 | <code title=dom-CSSStyleDeclaration-setProperty>getPropertyValue</code>, et al. |
simonp@9717 | 3206 | |
simonp@9717 | 3207 | <li><code title=dom-CSSStyleDeclaration-setPropertyValue>setPropertyValue()</code> and |
simonp@9717 | 3208 | <code title=dom-CSSStyleDeclaration-setPropertyPriority>setPropertyPriority()</code> are introduced. |
simonp@9717 | 3209 | |
simonp@9717 | 3210 | <li>The <code title>style</code> and <code title>media</code> attributes of various interfaces are annotated with the <code title>[PutForwards]</code> WebIDL |
simonp@9717 | 3211 | extended attribute. |
simonp@9717 | 3212 | |
simonp@9717 | 3213 | <li>The <code title=dom-Element-pseudo>pseudo()</code> method on <code data-anolis-spec=dom>Element</code> is introduced. |
simonp@9717 | 3214 | |
simonp@9717 | 3215 | <li>The <code>PseudoElement</code> interface is introduced. |
simonp@9717 | 3216 | |
simonp@9717 | 3217 | <li>The <code title=dom-GetStyleUtils-cascadedStyle>cascadedStyle</code>, .<code title=dom-GetStyleUtils-rawComputedStyle>rawComputedStyle</code> and |
simonp@9717 | 3218 | <code title=dom-GetStyleUtils-usedStyle>usedStyle</code> attributes on <code data-anolis-spec=dom>Element</code> and <code>PseudoElement</code> are introduced. |
simonp@9717 | 3219 | |
simonp@9717 | 3220 | <li>The <code title=dom-CSS-escape>CSS.escape()</code> static method is introduced. |
simonp@9717 | 3221 | </ul> |
simonp@9717 | 3222 | |
simonp@9661 | 3223 | <!-- |
simonp@8244 | 3224 | <p>This section documents the primary technical changes of CSSOM related functionality, with a focus on changes to API signatures.</p> |
simonp@8244 | 3225 | |
simonp@8244 | 3226 | <h3 class="no-num">Changes From DOM-2 Style</h3> |
simonp@8244 | 3227 | |
simonp@8244 | 3228 | <ul> |
simonp@8304 | 3229 | <li><p>Remove definition of <code title>CSSRule.UNKNOWN_RULE</code>, reserving its value (0) to prevent future reuse.</p></li> |
simonp@8304 | 3230 | <li><p>Remove definition of <code title>DOMImplementationCSS</code> interface.</p></li> |
simonp@8244 | 3231 | </ul> |
simonp@9661 | 3232 | --> |
simonp@8244 | 3233 | |
simonp@8244 | 3234 | <h2 class="no-num">Acknowledgments</h2> |
simonp@8244 | 3235 | |
simonp@8244 | 3236 | <p>The editors would like to thank |
simonp@8244 | 3237 | |
simonp@8244 | 3238 | Alexey Feldgendler, |
simonp@8244 | 3239 | Björn Höhrmann, |
simonp@8244 | 3240 | Boris Zbasky, |
simonp@8244 | 3241 | Brian Kardell, |
simonp@8244 | 3242 | Christian Krebs, |
simonp@8244 | 3243 | Daniel Glazman, |
simonp@8244 | 3244 | David Baron, |
simonp@8244 | 3245 | <i>fantasai</i>, |
simonp@8244 | 3246 | Hallvord R. M. Steen, |
simonp@8244 | 3247 | Ian Hickson, |
simonp@8244 | 3248 | John Daggett, |
simonp@8244 | 3249 | Lachlan Hunt, |
simonp@8810 | 3250 | Mike Sherov, |
simonp@8244 | 3251 | Morten Stenshorne, |
simonp@9342 | 3252 | Ms2ger, |
simonp@8596 | 3253 | Øyvind Stenhaug, |
simonp@8870 | 3254 | Peter Sloetjes, |
simonp@8244 | 3255 | Philip Taylor, |
simonp@8244 | 3256 | Robert O'Callahan, |
simonp@8807 | 3257 | Simon Sapin, |
simonp@8244 | 3258 | Sjoerd Visscher, |
simonp@8244 | 3259 | <!--Simon Pieters,--> |
simonp@8244 | 3260 | Sylvain Galineau, |
simonp@8244 | 3261 | Tarquin Wilton-Jones, and |
simonp@8244 | 3262 | Zack Weinberg |
simonp@8244 | 3263 | |
simonp@8244 | 3264 | for contributing to this specification.</p> |
simonp@8244 | 3265 | |
simonp@8244 | 3266 | <p>Additional thanks to Ian Hickson for writing the |
simonp@8244 | 3267 | initial version of the alternative style sheets API and canonicalization |
simonp@8244 | 3268 | (now serialization) rules for CSS values.</p> |
simonp@8244 | 3269 | |
simonp@8244 | 3270 | <!-- XXX NOTES |
simonp@8244 | 3271 | |
simonp@8244 | 3272 | <style type=text/css;charset=utf-8> does create a StyleSheet in Firefox |
simonp@8244 | 3273 | and Opera, but does not create a StyleSheet in IE. I prefer IE. |
simonp@8244 | 3274 | |
simonp@8244 | 3275 | <style type=TEXT/CSS> sets the style sheet type to text/css in Firefox and |
simonp@8244 | 3276 | TEXT/CSS in Opera and IE. I prefer Firefox. |
simonp@8244 | 3277 | |
simonp@8244 | 3278 | <style> sets the style sheet location to the document location Firefox, |
simonp@8244 | 3279 | the empty string in IE, and null in Opera. I prefer Opera |
simonp@8244 | 3280 | |
simonp@8244 | 3281 | <style media="x"> invokes .sheet.media.mediaText = "x" |
simonp@8244 | 3282 | |
simonp@8244 | 3283 | <style> does not "have" a title |
simonp@8244 | 3284 | |
simonp@8244 | 3285 | .cascadedStyle that returns less keywords than currentStyle, no inherit, |
simonp@8244 | 3286 | etc. |
simonp@8244 | 3287 | |
simonp@8244 | 3288 | Markup style: http://krijnhoetmer.nl/irc-logs/whatwg/20100204#l-529 |
simonp@8244 | 3289 | --> |
simonp@8226 | 3290 | </body> |
simonp@8226 | 3291 | </html> |
simonp@8226 | 3292 |