cssom/Overview.html

Mon, 01 Oct 2012 12:17:55 +0800

author
Glenn Adams <glenn@skynav.com>
date
Mon, 01 Oct 2012 12:17:55 +0800
changeset 6802
0d2a6c814dd1
parent 6794
7c881a97c919
child 6809
380501b9292e
permissions
-rw-r--r--

[cssom] first draft of color serialization rules

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

mercurial