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