Thu, 07 Feb 2013 14:29:04 -0800
[css3-conditional] Describe requirements for conditionText getter on CSSSupportsRule.
This implements the resolution in
http://lists.w3.org/Archives/Public/www-style/2012Aug/0749.html
to address the second point in
http://lists.w3.org/Archives/Public/www-style/2013Feb/0228.html
which is Issue 8 in the Last Call Disposition of Comments.
It also adds a parenthetical to clarify the issue rejected in
http://lists.w3.org/Archives/Public/www-style/2012Dec/0102.html
dbaron@2974 | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" |
dbaron@2974 | 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
dbaron@2974 | 3 | |
dbaron@2974 | 4 | <html lang=en> |
jackalmage@6616 | 5 | <head |
jackalmage@6616 | 6 | profile="http://dublincore.org/documents/2008/08/04/dc-html/ http://www.w3.org/2006/03/hcard"> |
jackalmage@6616 | 7 | <meta content="text/html; charset=utf-8" http-equiv=Content-Type> |
jackalmage@6616 | 8 | <title>CSS Conditional Rules Module Level 3</title> |
dbaron@2974 | 9 | |
jackalmage@6829 | 10 | <link href="http://purl.org/dc/terms/" rel=schema.dcterms> |
jackalmage@6616 | 11 | <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" |
jackalmage@6829 | 12 | rel=dcterms.rights> |
jackalmage@6829 | 13 | <meta content="CSS Conditional Rules Module Level 3" name=dcterms.title> |
jackalmage@6829 | 14 | <meta content=text name=dcterms.type> |
dbaron@7381 | 15 | <meta content=2013-02-07 name=dcterms.issued> |
jackalmage@6829 | 16 | <meta content="http://dev.w3.org/csswg/css3-conditional/" |
jackalmage@6829 | 17 | name=dcterms.creator> |
jackalmage@6829 | 18 | <meta content=W3C name=dcterms.publisher> |
dbaron@7381 | 19 | <meta content="http://www.w3.org/TR/2013/ED-css3-conditional-20130207/" |
jackalmage@6829 | 20 | name=dcterms.identifier> |
dbaron@5292 | 21 | <link href="../default.css" rel=stylesheet type="text/css"> |
dbaron@7372 | 22 | <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon"> |
dbaron@7372 | 23 | <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet |
fantasai@7042 | 24 | type="text/css"><!-- |
fantasai@7042 | 25 | <script src="http://test.csswg.org/harness/annotate.js#CSS3-CONDITIONAL_DEV" |
fantasai@7042 | 26 | type="text/javascript" defer></script |
fantasai@7042 | 27 | --> |
dbaron@2974 | 28 | |
dbaron@2974 | 29 | <body> |
dbaron@2974 | 30 | <div class=head> <!--begin-logo--> |
dbaron@2974 | 31 | <p><a href="http://www.w3.org/"><img alt=W3C height=48 |
dbaron@2974 | 32 | src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> |
dbaron@2974 | 33 | |
dbaron@2974 | 34 | <h1>CSS Conditional Rules Module Level 3</h1> |
dbaron@2974 | 35 | |
dbaron@7381 | 36 | <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 7 February |
dbaron@7372 | 37 | 2013</h2> |
dbaron@2974 | 38 | |
dbaron@2974 | 39 | <dl> |
dbaron@2974 | 40 | <dt>This version: |
dbaron@2974 | 41 | |
dbaron@7381 | 42 | <dd><a href="http://www.w3.org/TR/2013/ED-css3-conditional-20130207/"> |
dbaron@7381 | 43 | http://www.w3.org/TR/2013/ED-css3-conditional-20130207/</a> |
dbaron@2974 | 44 | |
dbaron@2974 | 45 | <dt>Latest version: |
dbaron@2974 | 46 | |
dbaron@3415 | 47 | <dd><a |
dbaron@3415 | 48 | href="http://www.w3.org/TR/css3-conditional/">http://www.w3.org/TR/css3-conditional/</a> |
dbaron@2974 | 49 | |
dbaron@3245 | 50 | <dt>Editor's draft: |
dbaron@3245 | 51 | |
dbaron@3245 | 52 | <dd><a |
dbaron@3415 | 53 | href="http://dev.w3.org/csswg/css3-conditional/">http://dev.w3.org/csswg/css3-conditional/</a> |
dbaron@3245 | 54 | |
dbaron@2974 | 55 | <dt>Previous version: |
dbaron@2974 | 56 | |
dbaron@2974 | 57 | <dd><a |
fantasai@6831 | 58 | href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/">http://www.w3.org/TR/2012/WD-css3-conditional-20120911/</a> |
dbaron@2974 | 59 | |
dbaron@2974 | 60 | <dt>Editors: |
dbaron@2974 | 61 | |
dbaron@2974 | 62 | <dd class=vcard><a class=fn href="http://dbaron.org/">L. David Baron</a>, |
dbaron@6308 | 63 | <a class=org href="http://www.mozilla.org/">Mozilla</a> |
dbaron@3744 | 64 | |
dbaron@3744 | 65 | <dt>Issues list: |
dbaron@3744 | 66 | |
dbaron@3744 | 67 | <dd>Maintained in document (only editor's draft is current) |
dbaron@3744 | 68 | |
fantasai@6697 | 69 | <dt>Feedback: |
dbaron@3744 | 70 | |
fantasai@6697 | 71 | <dd><a |
fantasai@6697 | 72 | href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> |
fantasai@6697 | 73 | with subject line “<kbd>[css3-conditional] <var>… message topic |
fantasai@6697 | 74 | …</var></kbd>” |
dbaron@3744 | 75 | |
dbaron@3744 | 76 | <dt>Test suite: |
dbaron@3744 | 77 | |
dbaron@6115 | 78 | <dd><a |
dbaron@6115 | 79 | href="https://test.csswg.org/shepherd/search/spec/css3-conditional/">submitted |
dbaron@6115 | 80 | tests</a>; no built test suite yet |
dbaron@2974 | 81 | </dl> |
dbaron@2974 | 82 | <!--begin-copyright--> |
dbaron@2974 | 83 | <p class=copyright><a |
dbaron@2974 | 84 | href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" |
dbaron@7372 | 85 | rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr |
dbaron@6113 | 86 | title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a |
dbaron@5292 | 87 | href="http://www.csail.mit.edu/"><abbr |
dbaron@5292 | 88 | title="Massachusetts Institute of Technology">MIT</abbr></a>, <a |
dbaron@5292 | 89 | href="http://www.ercim.eu/"><abbr |
dbaron@5292 | 90 | title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, |
dbaron@7372 | 91 | <a href="http://www.keio.ac.jp/">Keio</a>, <a |
dbaron@7372 | 92 | href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a |
dbaron@2974 | 93 | href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, |
dbaron@2974 | 94 | <a |
dbaron@2974 | 95 | href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> |
dbaron@2974 | 96 | and <a |
dbaron@2974 | 97 | href="http://www.w3.org/Consortium/Legal/copyright-documents">document |
dbaron@2974 | 98 | use</a> rules apply.</p> |
dbaron@2974 | 99 | <!--end-copyright--> |
dbaron@2974 | 100 | <hr title="Separator for header"> |
dbaron@2974 | 101 | </div> |
dbaron@2974 | 102 | |
dbaron@2974 | 103 | <h2 class="no-num no-toc" id=abstract>Abstract</h2> |
dbaron@2974 | 104 | |
dbaron@2974 | 105 | <p>CSS is a language for describing the rendering of structured documents |
dbaron@2974 | 106 | (such as HTML and XML) on screen, on paper, in speech, etc. This module |
dbaron@2974 | 107 | contains the features of CSS for conditional processing of parts of style |
dbaron@2974 | 108 | sheets, conditioned on capabilities of the processor or the document the |
dbaron@2974 | 109 | style sheet is being applied to. It includes and extends the functionality |
dbaron@6113 | 110 | of CSS level 2 <a href="#CSS21" |
dbaron@6113 | 111 | rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, which builds on CSS level 1 |
dbaron@6113 | 112 | <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>. The main |
dbaron@6113 | 113 | extensions compared to level 2 are allowing nesting of certain at-rules |
jackalmage@6838 | 114 | inside ‘<code class=css>@media</code>’, and the addition of the |
jackalmage@6838 | 115 | ‘<code class=css>@supports</code>’ rule for conditional processing. |
dbaron@2974 | 116 | |
dbaron@2974 | 117 | <h2 class="no-num no-toc" id=status>Status of this document</h2> |
dbaron@2974 | 118 | <!--begin-status--> |
dbaron@2974 | 119 | |
dbaron@7372 | 120 | <p>This is a public copy of the editors' draft. It is provided for |
dbaron@7372 | 121 | discussion only and may change at any moment. Its publication here does |
dbaron@7372 | 122 | not imply endorsement of its contents by W3C. Don't cite this document |
dbaron@7372 | 123 | other than as work in progress. |
dbaron@2974 | 124 | |
dbaron@2974 | 125 | <p>The (<a |
dbaron@2974 | 126 | href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public |
dbaron@7372 | 127 | mailing list <a |
dbaron@7372 | 128 | href="mailto:www-style@w3.org?Subject=%5Bcss3-conditional%5D%20PUT%20SUBJECT%20HERE"> |
dbaron@7372 | 129 | www-style@w3.org</a> (see <a |
dbaron@7372 | 130 | href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for |
dbaron@7372 | 131 | discussion of this specification. When sending e-mail, please put the text |
dbaron@7372 | 132 | “css3-conditional” in the subject, preferably like this: |
dbaron@6113 | 133 | “[<!---->css3-conditional<!---->] <em>…summary of comment…</em>” |
dbaron@2974 | 134 | |
dbaron@7372 | 135 | <p>This document was produced by the <a href="/Style/CSS/members">CSS |
dbaron@7372 | 136 | Working Group</a> (part of the <a href="/Style/">Style Activity</a>). |
dbaron@2974 | 137 | |
dbaron@2974 | 138 | <p>This document was produced by a group operating under the <a |
dbaron@7372 | 139 | href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent |
dbaron@7372 | 140 | Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status" |
dbaron@2974 | 141 | rel=disclosure>public list of any patent disclosures</a> made in |
dbaron@2974 | 142 | connection with the deliverables of the group; that page also includes |
dbaron@2974 | 143 | instructions for disclosing a patent. An individual who has actual |
dbaron@2974 | 144 | knowledge of a patent which the individual believes contains <a |
dbaron@7372 | 145 | href="/Consortium/Patent-Policy-20040205/#def-essential">Essential |
dbaron@2974 | 146 | Claim(s)</a> must disclose the information in accordance with <a |
dbaron@7372 | 147 | href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the |
dbaron@7372 | 148 | W3C Patent Policy</a>.</p> |
dbaron@2974 | 149 | <!--end-status--> |
dbaron@2974 | 150 | |
dbaron@2974 | 151 | <p>The following features are at risk: |
dbaron@2974 | 152 | |
dbaron@2974 | 153 | <ul> |
dbaron@6113 | 154 | <li>The inclusion of ‘<code class=css>@font-face</code>’ rules and |
dbaron@6113 | 155 | ‘<code class=css>@keyframes</code>’ rules as allowed within all of |
dbaron@6113 | 156 | the @-rules in this specification is at risk, though only because of the |
dbaron@6113 | 157 | relative rates of advancement of specifications. If this specification is |
dbaron@6113 | 158 | able to advance faster than one or both of the specifications defining |
dbaron@6113 | 159 | those rules, then the inclusion of those rules will move from this |
dbaron@6113 | 160 | specification to the specification defining those rules. |
dbaron@2974 | 161 | |
dbaron@2974 | 162 | <li>The addition of support for @-rules inside of conditional grouping |
dbaron@2974 | 163 | rules is at risk; if interoperable implementations are not found, it may |
dbaron@2974 | 164 | be removed to advance the other features in this specification to |
dbaron@2974 | 165 | Proposed Recommendation. |
dbaron@2974 | 166 | |
jackalmage@6829 | 167 | <li>The ‘<code class=css>@supports</code>’ rule is at risk; if |
jackalmage@6829 | 168 | interoperable implementations are not found, it may be removed to advance |
jackalmage@6829 | 169 | the other features in this specification to Proposed Recommendation. |
jackalmage@6838 | 170 | </ul> |
fantasai@7042 | 171 | |
fantasai@7042 | 172 | <p>This is a <strong>Last Call Working Draft</strong>. The deadline for |
dbaron@7122 | 173 | comments is <strong>10 January 2013</strong>. <!-- |
jackalmage@6837 | 174 | |
jackalmage@6838 | 175 | Things to go in level 4: |
jackalmage@6838 | 176 | |
jackalmage@6838 | 177 | * Create some way to put these new conditional things on an @import. |
jackalmage@6838 | 178 | * The @document rule (commented out, down below). |
jackalmage@6838 | 179 | |
jackalmage@6838 | 180 | --> |
dbaron@2974 | 181 | |
jackalmage@6617 | 182 | <h2 class="no-num no-toc" id=contents>Table of contents</h2> |
dbaron@2974 | 183 | <!--begin-toc--> |
dbaron@2974 | 184 | |
dbaron@2974 | 185 | <ul class=toc> |
jackalmage@6617 | 186 | <li><a href="#introduction"><span class=secno>1. </span>Introduction</a> |
dbaron@2974 | 187 | <ul class=toc> |
jackalmage@6617 | 188 | <li><a href="#context"><span class=secno>1.1. </span>Background</a> |
dbaron@2974 | 189 | |
jackalmage@6617 | 190 | <li><a href="#placement"><span class=secno>1.2. </span>Module |
dbaron@2974 | 191 | Interactions</a> |
dbaron@2974 | 192 | |
jackalmage@6617 | 193 | <li><a href="#conventions"><span class=secno>1.3. </span>Document |
jackalmage@6617 | 194 | Conventions</a> |
dbaron@2974 | 195 | </ul> |
dbaron@2974 | 196 | |
jackalmage@6617 | 197 | <li><a href="#processing"><span class=secno>2. </span>Processing of |
dbaron@2974 | 198 | conditional group rules</a> |
dbaron@2974 | 199 | |
jackalmage@6617 | 200 | <li><a href="#contents-of"><span class=secno>3. </span>Contents of |
jackalmage@6617 | 201 | conditional group rules</a> |
dbaron@2974 | 202 | |
jackalmage@6617 | 203 | <li><a href="#use"><span class=secno>4. </span>Placement of conditional |
jackalmage@6617 | 204 | group rules</a> |
jackalmage@6617 | 205 | |
jackalmage@6617 | 206 | <li><a href="#at-media"><span class=secno>5. </span>Media-specific style |
jackalmage@6617 | 207 | sheets: the ‘<code class=css>@media</code>’ rule</a> |
jackalmage@6617 | 208 | |
jackalmage@6617 | 209 | <li><a href="#at-supports"><span class=secno>6. </span>Feature queries: |
jackalmage@6617 | 210 | the ‘<code class=css>@supports</code>’ rule</a> |
dbaron@3021 | 211 | <ul class=toc> |
jackalmage@6617 | 212 | <li><a href="#support-definition"><span class=secno>6.1. |
dbaron@3021 | 213 | </span>Definition of support</a> |
dbaron@3021 | 214 | </ul> |
dbaron@2974 | 215 | |
jackalmage@6838 | 216 | <li><a href="#apis"><span class=secno>7. </span>APIs</a> |
jackalmage@6315 | 217 | <ul class=toc> |
jackalmage@6838 | 218 | <li><a href="#extentions-to-cssrule-interface"><span class=secno>7.1. |
jackalmage@6617 | 219 | </span> Extensions to the <code>CSSRule</code> interface</a> |
jackalmage@6315 | 220 | |
jackalmage@6838 | 221 | <li><a href="#the-cssgroupingrule-interface"><span class=secno>7.2. |
jackalmage@6655 | 222 | </span> The <code>CSSGroupingRule</code> interface</a> |
jackalmage@6655 | 223 | |
jackalmage@6838 | 224 | <li><a href="#the-cssconditionrule-interface"><span class=secno>7.3. |
jackalmage@6618 | 225 | </span> The <code>CSSConditionRule</code> interface</a> |
jackalmage@6618 | 226 | |
jackalmage@6838 | 227 | <li><a href="#the-cssmediarule-interface"><span class=secno>7.4. </span> |
jackalmage@6618 | 228 | The <code>CSSMediaRule</code> interface</a> |
jackalmage@6618 | 229 | |
jackalmage@6838 | 230 | <li><a href="#the-csssupportsrule-interface"><span class=secno>7.5. |
jackalmage@6617 | 231 | </span> The <code>CSSSupportsRule</code> interface</a> |
jackalmage@6617 | 232 | |
jackalmage@6838 | 233 | <li><a href="#the-css-interface"><span class=secno>7.6. </span> The |
jackalmage@6620 | 234 | <code>CSS</code> interface, and the <code title="">supports()</code> |
jackalmage@6617 | 235 | function</a> |
jackalmage@6315 | 236 | </ul> |
dbaron@3416 | 237 | |
fantasai@6831 | 238 | <li class=no-num><a href="#grammar">Grammar</a> |
fantasai@6831 | 239 | |
jackalmage@6838 | 240 | <li><a href="#conformance"><span class=secno>8. </span>Conformance</a> |
dbaron@2974 | 241 | <ul class=toc> |
jackalmage@6838 | 242 | <li><a href="#base-modules"><span class=secno>8.1. </span>Base |
dbaron@3022 | 243 | Modules</a> |
dbaron@3022 | 244 | |
jackalmage@6838 | 245 | <li><a href="#conformance-classes"><span class=secno>8.2. |
dbaron@2974 | 246 | </span>Conformance Classes</a> |
dbaron@2974 | 247 | |
jackalmage@6838 | 248 | <li><a href="#partial"><span class=secno>8.3. </span> Partial |
dbaron@2974 | 249 | Implementations</a> |
dbaron@2974 | 250 | |
jackalmage@6838 | 251 | <li><a href="#experimental"><span class=secno>8.4. </span>Experimental |
jackalmage@6617 | 252 | Implementations</a> |
dbaron@2974 | 253 | |
jackalmage@6838 | 254 | <li><a href="#cr-exit-criteria"><span class=secno>8.5. </span>CR Exit |
jackalmage@6617 | 255 | Criteria</a> |
dbaron@2974 | 256 | </ul> |
dbaron@2974 | 257 | |
jackalmage@6838 | 258 | <li><a href="#changes"><span class=secno>9. </span> Changes</a> |
dbaron@2974 | 259 | |
dbaron@2974 | 260 | <li class=no-num><a href="#acknowledgments">Acknowledgments</a> |
dbaron@2974 | 261 | |
dbaron@2974 | 262 | <li class=no-num><a href="#references">References</a> |
dbaron@2974 | 263 | <ul class=toc> |
jackalmage@6617 | 264 | <li class=no-num><a href="#normative-references">Normative |
dbaron@2974 | 265 | references</a> |
dbaron@2974 | 266 | |
jackalmage@6617 | 267 | <li class=no-num><a href="#other-references">Other references</a> |
dbaron@2974 | 268 | </ul> |
dbaron@2974 | 269 | |
jackalmage@6617 | 270 | <li class=no-num><a href="#index">Index</a> |
dbaron@2974 | 271 | </ul> |
dbaron@2974 | 272 | <!--end-toc--> |
dbaron@2974 | 273 | |
jackalmage@6617 | 274 | <h2 id=introduction><span class=secno>1. </span>Introduction</h2> |
dbaron@2974 | 275 | |
jackalmage@6617 | 276 | <h3 id=context><span class=secno>1.1. </span>Background</h3> |
dbaron@2974 | 277 | |
dbaron@2974 | 278 | <p><em>This section is not normative.</em> |
dbaron@2974 | 279 | |
dbaron@2974 | 280 | <p><a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> defines |
dbaron@6113 | 281 | one type of conditional group rule, the ‘<code |
dbaron@6113 | 282 | class=css>@media</code>’ rule, and allows only rulesets (not other |
dbaron@6113 | 283 | @-rules) inside of it. The ‘<code class=css>@media</code>’ rule |
dbaron@6113 | 284 | provides the ability to have media-specific style sheets, which is also |
dbaron@6113 | 285 | provided by style sheet linking features such as ‘<code |
dbaron@6113 | 286 | class=css>@import</code>’ and <code class=html><link></code>. The |
dbaron@6113 | 287 | restrictions on the contents of ‘<code class=css>@media</code>’ rules |
dbaron@6113 | 288 | made them less useful; they have forced authors using CSS features |
dbaron@6113 | 289 | involving @-rules in media-specific style sheets to use separate style |
dbaron@6113 | 290 | sheets for each medium. |
dbaron@2974 | 291 | |
dbaron@2974 | 292 | <p>This specification extends the rules for the contents of conditional |
dbaron@2974 | 293 | group rules to allow other @-rules, which enables authors to combine CSS |
dbaron@2974 | 294 | features involving @-rules with media specific style sheets within a |
dbaron@2974 | 295 | single style sheet. |
dbaron@2974 | 296 | |
jackalmage@6838 | 297 | <p>This specification also defines an additional type of conditional group |
jackalmage@6838 | 298 | rule, ‘<code class=css>@supports</code>’, to address author and user |
jackalmage@6838 | 299 | requirements. |
dbaron@2974 | 300 | |
jackalmage@6829 | 301 | <p>The ‘<code class=css>@supports</code>’ rule allows CSS to be |
jackalmage@6829 | 302 | conditioned on implementation support for CSS properties and values. This |
jackalmage@6829 | 303 | rule makes it much easier for authors to use new CSS features and provide |
jackalmage@6829 | 304 | good fallback for implementations that do not support those features. This |
jackalmage@6829 | 305 | is particularly important for CSS features that provide new layout |
jackalmage@6829 | 306 | mechanisms, and for other cases where a set of related styles needs to be |
jackalmage@6829 | 307 | conditioned on property support. |
dbaron@2974 | 308 | |
jackalmage@6617 | 309 | <h3 id=placement><span class=secno>1.2. </span>Module Interactions</h3> |
dbaron@2974 | 310 | |
dbaron@6113 | 311 | <p>This module replaces and extends the ‘<code class=css>@media</code>’ |
dbaron@6113 | 312 | rule feature defined in <a href="#CSS21" |
dbaron@2983 | 313 | rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> section <var>7.2.1</var> and |
dbaron@2983 | 314 | incorporates the modifications previously made non-normatively by <a |
dbaron@2983 | 315 | href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a> section |
dbaron@2983 | 316 | <var>1</var>. |
dbaron@2974 | 317 | |
dbaron@3462 | 318 | <p>Its current definition depends on @-rules defined in <a |
dbaron@3462 | 319 | href="#CSS3-FONTS" rel=biblioentry>[CSS3-FONTS]<!--{{!CSS3-FONTS}}--></a> |
dbaron@3462 | 320 | and <a href="#CSS3-ANIMATIONS" |
dbaron@2974 | 321 | rel=biblioentry>[CSS3-ANIMATIONS]<!--{{!CSS3-ANIMATIONS}}--></a>, but that |
dbaron@2974 | 322 | dependency is only on the assumption that those modules will advance ahead |
dbaron@2974 | 323 | of this one. If this module advances faster, then the dependency will be |
dbaron@2974 | 324 | reversed. |
dbaron@2974 | 325 | |
jackalmage@6617 | 326 | <h3 id=conventions><span class=secno>1.3. </span>Document Conventions</h3> |
dbaron@2974 | 327 | |
dbaron@2974 | 328 | <p>Conformance requirements are expressed with a combination of descriptive |
dbaron@2974 | 329 | assertions and RFC 2119 terminology. The key words “MUST”, “MUST |
dbaron@2974 | 330 | NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, |
dbaron@2974 | 331 | “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the |
dbaron@2974 | 332 | normative parts of this document are to be interpreted as described in RFC |
dbaron@2979 | 333 | 2119. However, for readability, these words do not appear in all uppercase |
dbaron@2979 | 334 | letters in this specification. |
dbaron@2974 | 335 | |
dbaron@2974 | 336 | <p>All of the text of this specification is normative except sections |
dbaron@2974 | 337 | explicitly marked as non-normative, examples, and notes. <a |
dbaron@2974 | 338 | href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a> |
dbaron@2974 | 339 | |
dbaron@2974 | 340 | <p>Examples in this specification are introduced with the words “for |
dbaron@2983 | 341 | example” or are set apart from the normative text with <code |
dbaron@2983 | 342 | class=html>class="example"</code>, like this: |
dbaron@2974 | 343 | |
dbaron@2974 | 344 | <div class=example> |
jackalmage@6616 | 345 | <p>This is an example of an informative example. |
dbaron@2974 | 346 | </div> |
dbaron@2974 | 347 | |
dbaron@2974 | 348 | <p>Informative notes begin with the word “Note” and are set apart from |
dbaron@2983 | 349 | the normative text with <code class=html>class="note"</code>, like this: |
dbaron@2974 | 350 | |
dbaron@2974 | 351 | <p class=note>Note, this is an informative note. |
dbaron@2974 | 352 | |
jackalmage@6617 | 353 | <h2 id=processing><span class=secno>2. </span>Processing of conditional |
jackalmage@6617 | 354 | group rules</h2> |
dbaron@2974 | 355 | |
dbaron@2974 | 356 | <p>This specification defines some CSS @-rules, called <dfn |
dbaron@2974 | 357 | id=conditional-group-rules>conditional group rules</dfn>, that associate a |
dbaron@2974 | 358 | condition with a group of other CSS rules. These different rules allow |
dbaron@2974 | 359 | testing different types of conditions, but share common behavior for how |
dbaron@2974 | 360 | their contents are used when the condition is true and when the condition |
dbaron@2974 | 361 | is false. |
dbaron@2974 | 362 | |
dbaron@2974 | 363 | <div class=example> |
jackalmage@6616 | 364 | <p>For example, this rule: |
dbaron@2974 | 365 | |
dbaron@2974 | 366 | <pre>@media print { |
dbaron@7381 | 367 | /* hide navigation controls when printing */ |
dbaron@2974 | 368 | #navigation { display: none } |
dbaron@2974 | 369 | }</pre> |
dbaron@2974 | 370 | |
dbaron@2974 | 371 | <p>causes a particular CSS rule (making elements with ID "navigation" be |
dbaron@2974 | 372 | display:none) apply only when the style sheet is used for a print medium. |
dbaron@2974 | 373 | </div> |
dbaron@2974 | 374 | |
dbaron@2974 | 375 | <p>Each conditional group rule has a condition, which at any time evaluates |
dbaron@2979 | 376 | to true or false. When the condition is true, CSS processors |
dbaron@2979 | 377 | <strong>must</strong> apply the rules inside the group rule as though they |
dbaron@2979 | 378 | were at the group rule's location; when the condition is false, CSS |
dbaron@3948 | 379 | processors <strong>must not</strong> apply any of rules inside the group |
dbaron@2979 | 380 | rule. The current state of the condition does not affect the CSS object |
dbaron@2979 | 381 | model, in which the contents of the group rule always remain within the |
dbaron@2979 | 382 | group rule. |
dbaron@2974 | 383 | |
dbaron@2974 | 384 | <p>This means that when multiple conditional group rules are nested, a rule |
dbaron@2974 | 385 | inside of both of them applies only when all of the rules' conditions are |
dbaron@2974 | 386 | true. |
dbaron@2974 | 387 | |
dbaron@2974 | 388 | <div class=example>For example, with this set of nested rules: |
dbaron@2974 | 389 | <pre>@media print { // rule (1) |
dbaron@7381 | 390 | /* hide navigation controls when printing */ |
dbaron@2974 | 391 | #navigation { display: none } |
dbaron@2974 | 392 | @media (max-width: 12cm) { // rule (2) |
dbaron@7381 | 393 | /* keep notes in flow when printing to narrow pages */ |
dbaron@2974 | 394 | .note { float: none } |
dbaron@2974 | 395 | } |
dbaron@2974 | 396 | }</pre> |
dbaron@2974 | 397 | the condition of the rule marked (1) is true for print media, and the |
dbaron@2974 | 398 | condition of the rule marked (2) is true when the width of the display |
dbaron@2974 | 399 | area (which for print media is the page box) is less than or equal to |
dbaron@6113 | 400 | 12cm. Thus the rule ‘<code class=css>#navigation { display: none |
dbaron@6113 | 401 | }</code>’ applies whenever this style sheet is applied to print media, |
dbaron@6113 | 402 | and the rule ‘<code class=css>.note { float: none }</code>’ is applied |
dbaron@6113 | 403 | only when the style sheet is applied to print media <em>and</em> the width |
dbaron@6113 | 404 | of the page box is less than or equal to 12 centimeters.</div> |
dbaron@2974 | 405 | |
dbaron@2974 | 406 | <p>When the condition for a conditional group rule changes, CSS processors |
dbaron@2979 | 407 | <strong>must</strong> reflect that the rules now apply or no longer apply, |
dbaron@2979 | 408 | except for properties whose definitions define effects of computed values |
dbaron@2979 | 409 | that persist past the lifetime of that value (such as for some properties |
dbaron@2979 | 410 | in <a href="#CSS3-TRANSITIONS" |
dbaron@2974 | 411 | rel=biblioentry>[CSS3-TRANSITIONS]<!--{{CSS3-TRANSITIONS}}--></a> and <a |
dbaron@2974 | 412 | href="#CSS3-ANIMATIONS" |
dbaron@2974 | 413 | rel=biblioentry>[CSS3-ANIMATIONS]<!--{{!CSS3-ANIMATIONS}}--></a>). |
dbaron@2974 | 414 | |
jackalmage@6617 | 415 | <h2 id=contents-of><span class=secno>3. </span>Contents of conditional |
jackalmage@6617 | 416 | group rules</h2> |
dbaron@2974 | 417 | |
dbaron@2974 | 418 | <p>The syntax of each conditional group rule consists of some syntax |
dbaron@2974 | 419 | specific to the type of rule followed by a <dfn id=group-rule-body>group |
dbaron@2974 | 420 | rule body</dfn>, which is a block (pair of braces) containing a sequence |
dbaron@2974 | 421 | of rules. |
dbaron@2974 | 422 | |
dbaron@2974 | 423 | <p>A group rule body is allowed to contain rulesets and any @-rules that |
dbaron@2974 | 424 | are allowed at the top level of a style sheet before and after a ruleset. |
dbaron@2974 | 425 | This means that @-rules that must occur at the beginning of the style |
dbaron@6113 | 426 | sheet (such as ‘<code class=css>@charset</code>’, ‘<code |
dbaron@6113 | 427 | class=css>@import</code>’, and ‘<code class=css>@namespace</code>’ |
dbaron@6113 | 428 | rules) are not allowed inside of conditional group rules. Conditional |
dbaron@6113 | 429 | group rules can be nested. |
dbaron@2974 | 430 | |
dbaron@2974 | 431 | <p>In terms of the grammar, this specification defines the following |
dbaron@2974 | 432 | productions for use in the grammar of conditional group rules: |
dbaron@2974 | 433 | |
dbaron@7032 | 434 | <pre><dfn id="nested_statement">nested_statement</dfn> |
dbaron@7032 | 435 | : ruleset | <a |
dbaron@7032 | 436 | href="#media"><i>media</i></a> | page | font_face_rule | keyframes_rule | |
dbaron@7032 | 437 | <a |
dbaron@7032 | 438 | href="#supports_rule"><i>supports_rule</i></a> |
dbaron@2974 | 439 | ; |
dbaron@2974 | 440 | |
dbaron@7032 | 441 | <dfn |
dbaron@7032 | 442 | id="group_rule_body">group_rule_body</dfn> |
dbaron@7032 | 443 | : '{' S* <a |
dbaron@7032 | 444 | href="#nested_statement"><i>nested_statement</i></a>* '}' S* |
dbaron@2974 | 445 | ;</pre> |
dbaron@2974 | 446 | |
bert@3405 | 447 | <p> in which all the productions are defined in that grammar with the |
jackalmage@6839 | 448 | exception of <code>font_face_rule</code> defined in <a href="#CSS3-FONTS" |
dbaron@3462 | 449 | rel=biblioentry>[CSS3-FONTS]<!--{{!CSS3-FONTS}}--></a>, |
dbaron@5294 | 450 | <code>keyframes_rule</code> defined in <a href="#CSS3-ANIMATIONS" |
dbaron@7032 | 451 | rel=biblioentry>[CSS3-ANIMATIONS]<!--{{!CSS3-ANIMATIONS}}--></a>, and <a |
dbaron@7032 | 452 | href="#media"><code>media</code></a> and <a |
jackalmage@6838 | 453 | href="#supports_rule"><code>supports_rule</code></a> defined in this |
jackalmage@6838 | 454 | specification. |
dbaron@2974 | 455 | |
dbaron@2974 | 456 | <p>In general, future CSS specifications that add new @-rules that are not |
dbaron@7032 | 457 | forbidden to occur after some other types of rules should modify this <a |
dbaron@7032 | 458 | href="#nested_statement"><code>nested_statement</code></a> production to |
dbaron@7032 | 459 | keep the grammar accurate. |
dbaron@2974 | 460 | |
dbaron@2979 | 461 | <p>Style sheets <strong>must not</strong> use rules other than the allowed |
dbaron@2979 | 462 | ones inside conditional group rules. |
dbaron@2974 | 463 | |
dbaron@3019 | 464 | <p>CSS processors <strong>must</strong> ignore rules that are not allowed |
dbaron@3019 | 465 | within a group rule, and <strong>must</strong> handle invalid rules inside |
dbaron@3019 | 466 | of group rules as described in <a |
dbaron@3019 | 467 | href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">section 4.2 |
dbaron@3019 | 468 | (Rules for handling parsing errors)</a>, <a |
dbaron@3019 | 469 | href="http://www.w3.org/TR/CSS21/syndata.html#at-rules">section 4.1.5 |
dbaron@3019 | 470 | (At-rules)</a>, and <a |
dbaron@3019 | 471 | href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">section 4.1.7 |
dbaron@3019 | 472 | (Rule sets, declaration blocks, and selectors)</a> of <a href="#CSS21" |
dbaron@3019 | 473 | rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. |
dbaron@2974 | 474 | |
jackalmage@6617 | 475 | <h2 id=use><span class=secno>4. </span>Placement of conditional group rules</h2> |
dbaron@2974 | 476 | |
dbaron@3019 | 477 | <p>Conditional group rules are allowed at the top-level of a style sheet, |
dbaron@3019 | 478 | and inside other conditional group rules. CSS processors |
dbaron@3019 | 479 | <strong>must</strong> process such rules as <a |
dbaron@3019 | 480 | href="#processing">described above</a>. |
dbaron@2974 | 481 | |
dbaron@6113 | 482 | <p>Any rules that are not allowed after a ruleset (e.g., ‘<code |
dbaron@6113 | 483 | class=css>@charset</code>’, ‘<code class=css>@import</code>’, or |
dbaron@6113 | 484 | ‘<code class=css>@namespace</code>’ rules) are also not allowed after |
dbaron@6113 | 485 | a conditional group rule. Therefore, style sheets <strong>must |
dbaron@6113 | 486 | not</strong> place such rules after a conditional group rules, and CSS |
dbaron@6113 | 487 | processors <strong>must</strong> ignore such rules. |
dbaron@3019 | 488 | |
jackalmage@6617 | 489 | <h2 id=at-media><span class=secno>5. </span>Media-specific style sheets: |
jackalmage@6617 | 490 | the ‘<code class=css>@media</code>’ rule</h2> |
dbaron@2974 | 491 | |
jackalmage@6829 | 492 | <p>The <dfn id=atmedia-rule>‘<code class=css>@media</code>’ rule</dfn> |
jackalmage@6829 | 493 | is a conditional group rule whose condition is a media query. It consists |
jackalmage@6829 | 494 | of the at-keyword ‘<code class=css>@media</code>’ followed by a |
jackalmage@6830 | 495 | (possibly empty) media query list (as defined in <a href="#MEDIAQ" |
dbaron@6113 | 496 | rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a>), followed by a group rule |
dbaron@6113 | 497 | body. The condition of the rule is the result of the media query. |
dbaron@2974 | 498 | |
dbaron@2974 | 499 | <div class=example> |
jackalmage@6616 | 500 | <p>This ‘<code class=css>@media</code>’ rule: |
dbaron@2974 | 501 | |
dbaron@7381 | 502 | <pre>@media screen and (min-width: 35em), |
dbaron@7381 | 503 | print and (min-width: 40em) { |
dbaron@7381 | 504 | #section_navigation { float: left; width: 10em; } |
dbaron@2974 | 505 | }</pre> |
dbaron@2974 | 506 | |
dbaron@7381 | 507 | <p>has the condition ‘<code class=css>screen and (min-width: 35em), |
dbaron@7381 | 508 | print and (min-width: 40em)</code>’, which is true for screen displays |
dbaron@7381 | 509 | whose viewport is at least 35 times the initial font size and for print |
dbaron@7381 | 510 | displays whose viewport is at least 40 times the initial font size. When |
dbaron@7381 | 511 | either of these is true, the condition of the rule is true, and the rule |
dbaron@7381 | 512 | ‘<code class=css>#section_navigation { float: left; width: 10em; |
dbaron@7381 | 513 | }</code>’ is applied. |
dbaron@2974 | 514 | </div> |
dbaron@2974 | 515 | |
dbaron@7032 | 516 | <p>In terms of the grammar, this specification extends the <a |
dbaron@7032 | 517 | href="#media"><code>media</code></a> production in the <a |
dbaron@2974 | 518 | href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a> (<a |
dbaron@2974 | 519 | href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, Appendix G) |
dbaron@2974 | 520 | into: |
dbaron@2974 | 521 | |
dbaron@7032 | 522 | <pre><dfn id=media>media</dfn> |
dbaron@7032 | 523 | : MEDIA_SYM S* media_query_list <a |
dbaron@7032 | 524 | href="#group_rule_body"><i>group_rule_body</i></a> |
dbaron@2974 | 525 | ;</pre> |
dbaron@2974 | 526 | |
dbaron@7032 | 527 | <p>where the <a href="#group_rule_body"><code>group_rule_body</code></a> |
dbaron@7032 | 528 | production is defined in this specification, the |
dbaron@7032 | 529 | <code>media_query_list</code> production is defined in <a href="#MEDIAQ" |
dbaron@7032 | 530 | rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a>, and the others are defined |
dbaron@7032 | 531 | in the <a href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS |
dbaron@7032 | 532 | 2.1</a> (<a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, |
dbaron@7032 | 533 | Appendix G). |
dbaron@2974 | 534 | |
jackalmage@6829 | 535 | <h2 id=at-supports><span class=secno>6. </span>Feature queries: the |
jackalmage@6829 | 536 | ‘<code class=css>@supports</code>’ rule</h2> |
dbaron@2974 | 537 | |
jackalmage@6829 | 538 | <p>The <dfn id=atsupports-rule>‘<code class=css>@supports</code>’ |
dbaron@2983 | 539 | rule</dfn> is a conditional group rule whose condition tests whether the |
dbaron@2983 | 540 | user agent supports CSS property:value pairs. Authors can use it to write |
dbaron@2983 | 541 | style sheets that use new features when available but degrade gracefully |
dbaron@2983 | 542 | when those features are not supported. CSS has existing mechanisms for |
dbaron@2983 | 543 | graceful degradation, such as ignoring unsupported properties or values, |
dbaron@2983 | 544 | but these are not always sufficient when large groups of styles need to be |
dbaron@2983 | 545 | tied to the support for certain features, as is the case for use of new |
dbaron@2983 | 546 | layout system features. |
dbaron@2974 | 547 | |
jackalmage@6829 | 548 | <p>The syntax of the condition in the ‘<code |
jackalmage@6829 | 549 | class=css>@supports</code>’ rule is slightly more complicated than for |
jackalmage@6829 | 550 | the other conditional group rules (though has some similarities to media |
jackalmage@6829 | 551 | queries) since: |
dbaron@2974 | 552 | |
dbaron@2974 | 553 | <ul> |
dbaron@2974 | 554 | <li>negation is needed so that the new-feature styles and the fallback |
dbaron@2974 | 555 | styles can be separated (within the forward-compatible grammar's rules |
dbaron@2974 | 556 | for the syntax of @-rules), and not required to override each other |
dbaron@2974 | 557 | |
dbaron@2974 | 558 | <li>conjunction (and) is needed so that multiple required features can be |
dbaron@2974 | 559 | tested |
dbaron@2974 | 560 | |
dbaron@2974 | 561 | <li>disjunction (or) is needed when there are multiple alternative |
dbaron@2974 | 562 | features for a set of styles, particularly when some of those |
dbaron@2974 | 563 | alternatives are vendor-prefixed properties or values |
dbaron@2974 | 564 | </ul> |
dbaron@2974 | 565 | |
jackalmage@6829 | 566 | <p>Therefore, the syntax of the ‘<code class=css>@supports</code>’ rule |
jackalmage@6829 | 567 | allows testing for property:value pairs, and arbitrary conjunctions (and), |
jackalmage@6829 | 568 | disjunctions (or), and negations (not) of them. |
dbaron@2974 | 569 | |
dbaron@2974 | 570 | <p>This extends the lexical scanner in the <a |
dbaron@2974 | 571 | href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a> (<a |
dbaron@2974 | 572 | href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, Appendix G) by |
dbaron@2974 | 573 | adding: |
dbaron@2974 | 574 | |
jackalmage@6832 | 575 | <pre> |
jackalmage@6832 | 576 | @{S}{U}{P}{P}{O}{R}{T}{S} {return SUPPORTS_SYM;} |
jackalmage@6832 | 577 | {O}{R} {return OR;} |
jackalmage@6832 | 578 | </pre> |
dbaron@2974 | 579 | |
dbaron@2974 | 580 | <p>and the grammar by adding |
dbaron@2974 | 581 | |
jackalmage@6829 | 582 | <pre><dfn id="supports_rule">supports_rule</dfn> |
jackalmage@6943 | 583 | : SUPPORTS_SYM S* <a |
dbaron@7374 | 584 | href="#supports_condition"><i>supports_condition</i></a> S* <a |
dbaron@7032 | 585 | href="#group_rule_body"><i>group_rule_body</i></a> |
dbaron@2974 | 586 | ; |
dbaron@2974 | 587 | |
jackalmage@6315 | 588 | <dfn |
jackalmage@6829 | 589 | id="supports_condition">supports_condition</dfn> |
dbaron@7032 | 590 | : <a |
dbaron@7032 | 591 | href="#supports_negation"><i>supports_negation</i></a> | <a |
dbaron@7032 | 592 | href="#supports_conjunction"><i>supports_conjunction</i></a> | <a |
dbaron@7032 | 593 | href="#supports_disjunction"><i>supports_disjunction</i></a> | |
dbaron@7032 | 594 | <a |
dbaron@7032 | 595 | href="#supports_condition_in_parens"><i>supports_condition_in_parens</i></a> |
dbaron@3957 | 596 | ; |
dbaron@3957 | 597 | |
jackalmage@6315 | 598 | <dfn |
jackalmage@6829 | 599 | id="supports_condition_in_parens">supports_condition_in_parens</dfn> |
dbaron@7032 | 600 | : ( '(' S* <a |
dbaron@7374 | 601 | href="#supports_condition"><i>supports_condition</i></a> S* ')' ) | <a |
dbaron@7032 | 602 | href="#supports_declaration_condition"><i>supports_declaration_condition</i></a> | |
dbaron@7032 | 603 | <a |
dbaron@7032 | 604 | href="#general_enclosed"><i>general_enclosed</i></a> |
dbaron@2974 | 605 | ; |
dbaron@2974 | 606 | |
jackalmage@6315 | 607 | <dfn |
jackalmage@6829 | 608 | id="supports_negation">supports_negation</dfn> |
dbaron@7374 | 609 | : NOT S+ <a |
dbaron@7032 | 610 | href="#supports_condition_in_parens"><i>supports_condition_in_parens</i></a> |
dbaron@2974 | 611 | ; |
dbaron@2974 | 612 | |
jackalmage@6315 | 613 | <dfn |
jackalmage@6829 | 614 | id="supports_conjunction">supports_conjunction</dfn> |
dbaron@7032 | 615 | : <a |
dbaron@7374 | 616 | href="#supports_condition_in_parens"><i>supports_condition_in_parens</i></a> ( S+ AND S+ <a |
dbaron@7032 | 617 | href="#supports_condition_in_parens"><i>supports_condition_in_parens</i></a> )+ |
dbaron@2974 | 618 | ; |
dbaron@2974 | 619 | |
jackalmage@6315 | 620 | <dfn |
jackalmage@6829 | 621 | id="supports_disjunction">supports_disjunction</dfn> |
dbaron@7032 | 622 | : <a |
dbaron@7374 | 623 | href="#supports_condition_in_parens"><i>supports_condition_in_parens</i></a> ( S+ OR S+ <a |
dbaron@7032 | 624 | href="#supports_condition_in_parens"><i>supports_condition_in_parens</i></a> )+ |
dbaron@2974 | 625 | ; |
dbaron@2974 | 626 | |
jackalmage@6315 | 627 | <dfn |
jackalmage@6829 | 628 | id="supports_declaration_condition">supports_declaration_condition</dfn> |
dbaron@7374 | 629 | : '(' S* declaration ')' |
jackalmage@6943 | 630 | ; |
jackalmage@6943 | 631 | |
jackalmage@6943 | 632 | <dfn |
dbaron@7031 | 633 | id="general_enclosed">general_enclosed</dfn> |
dbaron@7374 | 634 | : ( FUNCTION | '(' ) ( any | unused )* ')' |
dbaron@7373 | 635 | ; |
dbaron@7031 | 636 | </pre> |
dbaron@2974 | 637 | |
dbaron@7031 | 638 | <p>in which <code>declaration</code>, <code>any</code>, and |
dbaron@7031 | 639 | <code>unused</code> are the productions in the core syntax of CSS defined |
dbaron@7031 | 640 | in <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">section |
dbaron@7031 | 641 | 4.1.1 (Tokenization)</a> of <a href="#CSS21" |
jackalmage@6832 | 642 | rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, and the <code>AND</code> and |
jackalmage@6832 | 643 | <code>NOT</code> tokens are defined in the Media Queries specification <a |
jackalmage@6832 | 644 | href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a>. |
dbaron@3024 | 645 | |
dbaron@7038 | 646 | <p> Implementations <strong>must</strong> parse ‘<code |
dbaron@7038 | 647 | class=css>@supports</code>’ rules based on the above grammar, and when |
dbaron@7038 | 648 | interpreting the above grammar, <strong>must</strong> match the production |
dbaron@7038 | 649 | before an <code>|</code> operator in preference to the one after it. |
dbaron@7038 | 650 | |
dbaron@7031 | 651 | <p> The above grammar is purposely very loose for forwards-compatibility |
dbaron@7031 | 652 | reasons, since the <a |
dbaron@7031 | 653 | href="#general_enclosed"><code>general_enclosed</code></a> production |
dbaron@7031 | 654 | allows for substantial future extensibility. Any ‘<code |
dbaron@7031 | 655 | class=css>@supports</code>’ rule that does not parse according to the |
dbaron@7033 | 656 | grammar above (that is, a rule that does not match this loose grammar |
dbaron@7033 | 657 | which includes the general_enclosed production) is invalid. Style sheets |
dbaron@7033 | 658 | <strong>must not</strong> use such a rule and processors |
dbaron@7033 | 659 | <strong>must</strong> ignore such a rule (including all of its contents). |
dbaron@7031 | 660 | |
dbaron@3021 | 661 | <p>Each of these grammar terms is associated with a boolean result, as |
dbaron@3021 | 662 | follows: |
dbaron@2974 | 663 | |
dbaron@2974 | 664 | <dl> |
dbaron@2974 | 665 | <dt>supports_condition |
dbaron@2974 | 666 | |
dbaron@3021 | 667 | <dd> The result is the result of the single child term. |
dbaron@2974 | 668 | |
dbaron@3957 | 669 | <dt>supports_condition_in_parens |
dbaron@3957 | 670 | |
jackalmage@6315 | 671 | <dd> The result is the result of the single <a |
dbaron@7031 | 672 | href="#supports_condition"><code>supports_condition</code></a> or <a |
jackalmage@6829 | 673 | href="#supports_declaration_condition"><code>supports_declaration_condition</code></a> |
jackalmage@6315 | 674 | child term. |
dbaron@3957 | 675 | |
dbaron@2974 | 676 | <dt>supports_negation |
dbaron@2974 | 677 | |
jackalmage@6315 | 678 | <dd> The result is the <em>negation</em> of the result of the <a |
jackalmage@6829 | 679 | href="#supports_condition_in_parens"><code>supports_condition_in_parens</code></a> |
jackalmage@6315 | 680 | child term. |
dbaron@2974 | 681 | |
dbaron@2974 | 682 | <dt>supports_conjunction |
dbaron@2974 | 683 | |
jackalmage@6315 | 684 | <dd> The result is true if the result of <em>all</em> of the <a |
jackalmage@6829 | 685 | href="#supports_condition_in_parens"><code>supports_condition_in_parens</code></a> |
jackalmage@6315 | 686 | child terms is true; otherwise it is false. |
dbaron@2974 | 687 | |
dbaron@2974 | 688 | <dt>supports_disjunction |
dbaron@2974 | 689 | |
jackalmage@6315 | 690 | <dd> The result is true if the result of <em>any</em> of the <a |
jackalmage@6829 | 691 | href="#supports_condition_in_parens"><code>supports_condition_in_parens</code></a> |
jackalmage@6315 | 692 | child terms is true; otherwise it is false. |
dbaron@2974 | 693 | |
dbaron@2974 | 694 | <dt>supports_declaration_condition |
dbaron@2974 | 695 | |
jackalmage@6943 | 696 | <dd> The result is whether the CSS processor <a |
fantasai@6845 | 697 | href="#support-definition">supports</a> the declaration within the |
jackalmage@6943 | 698 | parentheses. |
jackalmage@6943 | 699 | |
dbaron@7031 | 700 | <dt>general_enclosed |
jackalmage@6943 | 701 | |
dbaron@7031 | 702 | <dd> The result is always false. Additionally, style sheets <strong>must |
dbaron@7031 | 703 | not</strong> write ‘<code class=css>@supports</code>’ rules that |
dbaron@7031 | 704 | match this grammar production. (In other words, this production exists |
dbaron@7031 | 705 | only for future extensibility, and is not part of the description of a |
dbaron@7031 | 706 | valid style sheet in this level of the specification.) <span |
dbaron@7031 | 707 | class=note>Note that future levels may define functions or other |
dbaron@7031 | 708 | parenthesized expressions that can evaluate to true.</span> |
dbaron@2974 | 709 | </dl> |
dbaron@2974 | 710 | |
jackalmage@6829 | 711 | <p>The condition of the ‘<code class=css>@supports</code>’ rule is the |
jackalmage@6829 | 712 | result of the <a |
dbaron@7031 | 713 | href="#supports_condition"><code>supports_condition</code></a> term that |
jackalmage@6829 | 714 | is a child of the <a href="#supports_rule"><code>supports_rule</code></a> |
jackalmage@6315 | 715 | term. |
dbaron@2974 | 716 | |
dbaron@2982 | 717 | <div class=example> |
jackalmage@6616 | 718 | <p>For example, the following rule |
dbaron@2974 | 719 | |
dbaron@2982 | 720 | <pre>@supports ( display: flexbox ) { |
dbaron@2982 | 721 | body, #navigation, #content { display: flexbox; } |
dbaron@2982 | 722 | #navigation { background: blue; color: white; } |
dbaron@2982 | 723 | #article { background: white; color: black; } |
dbaron@2974 | 724 | }</pre> |
dbaron@2974 | 725 | |
jackalmage@6829 | 726 | <p>applies the rules inside the ‘<code class=css>@supports</code>’ |
jackalmage@6829 | 727 | rule only when ‘<code class=css>display: flexbox</code>’ is |
jackalmage@6829 | 728 | supported. |
dbaron@2982 | 729 | </div> |
dbaron@2982 | 730 | |
dbaron@2982 | 731 | <div class=example> |
jackalmage@6829 | 732 | <p>The following example shows an additional ‘<code |
jackalmage@6829 | 733 | class=css>@supports</code>’ rule that can be used to provide an |
jackalmage@6829 | 734 | alternative for when ‘<code class=css>display: flexbox</code>’ is not |
jackalmage@6829 | 735 | supported: |
dbaron@2982 | 736 | |
dbaron@2982 | 737 | <pre>@supports not ( display: flexbox ) { |
dbaron@2982 | 738 | body { width: 100%; height: 100%; background: white; color: black; } |
dbaron@2982 | 739 | #navigation { width: 25%; } |
dbaron@2982 | 740 | #article { width: 75%; } |
dbaron@2982 | 741 | }</pre> |
dbaron@2982 | 742 | |
dbaron@6113 | 743 | <p>Note that the ‘<code class=property>width</code>’ declarations may |
dbaron@6113 | 744 | be harmful to the flexbox-based layout, so it is important that they be |
jackalmage@6616 | 745 | present only in the non-flexbox styles. |
dbaron@2982 | 746 | </div> |
dbaron@2982 | 747 | |
dbaron@2982 | 748 | <div class=example> |
dbaron@6113 | 749 | <p>The following example checks for support for the ‘<code |
dbaron@6113 | 750 | class=property>box-shadow</code>’ property, including checking for |
dbaron@2982 | 751 | support for vendor-prefixed versions of it. When the support is present, |
dbaron@6113 | 752 | it specifies both ‘<code class=property>box-shadow</code>’ (with the |
dbaron@6113 | 753 | prefixed versions) and ‘<code class=property>color</code>’ in a way |
dbaron@6113 | 754 | what would cause the text to become invisible were ‘<code |
jackalmage@6616 | 755 | class=property>box-shadow</code>’ not supported. |
dbaron@2982 | 756 | |
dbaron@2982 | 757 | <pre>@supports ( box-shadow: 2px 2px 2px black ) or |
dbaron@2982 | 758 | ( -moz-box-shadow: 2px 2px 2px black ) or |
dbaron@2974 | 759 | ( -webkit-box-shadow: 2px 2px 2px black ) or |
dbaron@2974 | 760 | ( -o-box-shadow: 2px 2px 2px black ) { |
dbaron@2982 | 761 | .outline { |
dbaron@2982 | 762 | color: white; |
dbaron@2982 | 763 | -moz-box-shadow: 2px 2px 2px black; |
dbaron@2982 | 764 | -webkit-box-shadow: 2px 2px 2px black; |
dbaron@2982 | 765 | -o-box-shadow: 2px 2px 2px black; |
dbaron@3960 | 766 | box-shadow: 2px 2px 2px black; /* unprefixed last */ |
dbaron@2982 | 767 | } |
dbaron@2974 | 768 | }</pre> |
dbaron@2982 | 769 | </div> |
dbaron@2974 | 770 | |
dbaron@6113 | 771 | <p>To avoid confusion between ‘<code class=css>and</code>’ and ‘<code |
dbaron@6113 | 772 | class=css>or</code>’, the syntax requires that both ‘<code |
dbaron@6113 | 773 | class=css>and</code>’ and ‘<code class=css>or</code>’ be specified |
dbaron@6113 | 774 | explicitly (rather than, say, using commas or spaces for one of them). |
dbaron@6113 | 775 | Likewise, to avoid confusion caused by precedence rules, the syntax does |
dbaron@6113 | 776 | not allow ‘<code class=css>and</code>’, ‘<code |
dbaron@6113 | 777 | class=css>or</code>’, and ‘<code class=css>not</code>’ operators to |
dbaron@6113 | 778 | be mixed without a layer of parentheses. |
dbaron@2984 | 779 | |
dbaron@2984 | 780 | <div class=example> |
dbaron@2984 | 781 | <p>For example, the following rule is not valid: |
dbaron@2984 | 782 | |
dbaron@3959 | 783 | <pre class=illegal>@supports (transition-property: color) or |
dbaron@2984 | 784 | (animation-name: foo) and |
dbaron@2984 | 785 | (transform: rotate(10deg)) { |
dbaron@2984 | 786 | // ... |
dbaron@2984 | 787 | }</pre> |
dbaron@2984 | 788 | |
jackalmage@6616 | 789 | <p>Instead, authors must write one of the following: |
dbaron@2984 | 790 | |
dbaron@2984 | 791 | <pre>@supports ((transition-property: color) or |
dbaron@2984 | 792 | (animation-name: foo)) and |
dbaron@2984 | 793 | (transform: rotate(10deg)) { |
dbaron@2984 | 794 | // ... |
dbaron@2984 | 795 | }</pre> |
dbaron@2984 | 796 | |
dbaron@2984 | 797 | <pre>@supports (transition-property: color) or |
dbaron@3430 | 798 | ((animation-name: foo) and |
dbaron@2984 | 799 | (transform: rotate(10deg))) { |
dbaron@2984 | 800 | // ... |
dbaron@2984 | 801 | }</pre> |
dbaron@2984 | 802 | </div> |
dbaron@2974 | 803 | |
dbaron@7374 | 804 | <p>Furthermore, whitespace is required after a ‘<code |
dbaron@7374 | 805 | class=css>not</code>’ and on both sides of an ‘<code |
dbaron@7374 | 806 | class=css>and</code>’ or ‘<code class=css>or</code>’. |
dbaron@7374 | 807 | |
dbaron@3957 | 808 | <p>The declaration being tested must always occur within parentheses, when |
dbaron@3957 | 809 | it is the only thing in the expression. |
dbaron@3957 | 810 | |
dbaron@3957 | 811 | <p> |
dbaron@3957 | 812 | |
dbaron@3957 | 813 | <div class=example> |
dbaron@3957 | 814 | <p>For example, the following rule is not valid: |
dbaron@3957 | 815 | |
dbaron@3959 | 816 | <pre class=illegal>@supports display: flexbox { |
dbaron@3957 | 817 | // ... |
dbaron@3957 | 818 | }</pre> |
dbaron@3957 | 819 | |
jackalmage@6616 | 820 | <p>Instead, authors must write: |
dbaron@3957 | 821 | |
dbaron@3957 | 822 | <pre>@supports (display: flexbox) { |
dbaron@3957 | 823 | // ... |
dbaron@3957 | 824 | }</pre> |
dbaron@3957 | 825 | </div> |
dbaron@3957 | 826 | |
dbaron@3957 | 827 | <p>The syntax allows extra parentheses when they are not needed. This |
dbaron@3957 | 828 | flexibility is sometimes useful for authors (for example, when commenting |
dbaron@3957 | 829 | out parts of an expression) and may also be useful for authoring tools. |
dbaron@3957 | 830 | |
dbaron@3957 | 831 | <div class=example> |
jackalmage@6616 | 832 | <p>For example, authors may write: |
dbaron@3957 | 833 | |
dbaron@3957 | 834 | <pre>@supports ((display: flexbox)) { |
dbaron@3957 | 835 | // ... |
dbaron@3957 | 836 | }</pre> |
dbaron@3957 | 837 | </div> |
dbaron@3957 | 838 | |
jackalmage@6793 | 839 | <p>A trailing ‘<code class=css>!important</code>’ on a declaration |
jackalmage@6793 | 840 | being tested is allowed, though it won't change the validity of the |
jackalmage@6793 | 841 | declaration. |
jackalmage@6793 | 842 | |
jackalmage@6793 | 843 | <div class=example> |
jackalmage@6793 | 844 | <p>For example, the following rule is valid: |
jackalmage@6793 | 845 | |
jackalmage@6793 | 846 | <pre>@supports (display: flexbox !important) { |
jackalmage@6793 | 847 | // ... |
jackalmage@6793 | 848 | }</pre> |
jackalmage@6793 | 849 | </div> |
dbaron@6306 | 850 | |
jackalmage@6617 | 851 | <h3 id=support-definition><span class=secno>6.1. </span>Definition of |
jackalmage@6617 | 852 | support</h3> |
dbaron@3021 | 853 | |
dbaron@3021 | 854 | <p>For forward-compatibility, <a |
dbaron@3021 | 855 | href="http://www.w3.org/TR/CSS21/syndata.html#declaration">section 4.1.8 |
dbaron@3021 | 856 | (Declarations and properties)</a> of <a href="#CSS21" |
dbaron@3021 | 857 | rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> defines rules for handling |
dbaron@6741 | 858 | invalid properties and values. CSS processors that do not implement or |
dbaron@6741 | 859 | partially implement a specification <strong>must</strong> treat any part |
dbaron@6741 | 860 | of a value that they do not implement, or do not have a usable level of |
dbaron@6741 | 861 | support for, as invalid according to this rule for handling invalid |
dbaron@6741 | 862 | properties and values, and therefore <strong>must</strong> discard the |
dbaron@6741 | 863 | declaration as a parse error. |
dbaron@3021 | 864 | |
dbaron@6741 | 865 | <p>A CSS processor is considered to <dfn id=dfn-support>support</dfn> a |
dbaron@6741 | 866 | declaration (consisting of a property and value) if it accepts that |
dbaron@6741 | 867 | declaration (rather than discarding it as a parse error). If a processor |
dbaron@6741 | 868 | does not implement, with a usable level of support, the value given, then |
dbaron@6741 | 869 | it <strong>must not</strong> accept the declaration or claim support for |
dbaron@6741 | 870 | it. |
dbaron@3021 | 871 | |
dbaron@7382 | 872 | <p class=note>Note that properties or values whose support is effectively |
dbaron@7382 | 873 | disabled by user preferences are still considered as supported by this |
dbaron@7382 | 874 | definition. For example, if a user has enabled a high-contrast mode that |
dbaron@7382 | 875 | causes colors to be overridden, the CSS processor is still considered to |
dbaron@7382 | 876 | support the ‘<code class=property>color</code>’ property even though |
dbaron@7382 | 877 | declarations of the ‘<code class=property>color</code>’ property may |
dbaron@7382 | 878 | have no effect. On the other hand, a developer-facing preference whose |
dbaron@7382 | 879 | purpose is to enable or disable support for an experimental CSS feature |
dbaron@7382 | 880 | does affect this definition of support. |
dbaron@7382 | 881 | |
dbaron@6742 | 882 | <p>These rules (and the equivalence between them) allow authors to use |
dbaron@6742 | 883 | fallback (either in the <a href="#CSS1" |
dbaron@6741 | 884 | rel=biblioentry>[CSS1]<!--{{CSS1}}--></a> sense of declarations that are |
dbaron@6741 | 885 | overridden by later declarations or with the new capabilities provided by |
jackalmage@6829 | 886 | the ‘<code class=css>@supports</code>’ rule in this specification) |
jackalmage@6829 | 887 | that works correctly for the features implemented. This applies especially |
jackalmage@6829 | 888 | to compound values; implementations must implement all parts of the value |
jackalmage@6829 | 889 | in order to consider the declaration supported, either inside a ruleset or |
jackalmage@6829 | 890 | in the declaration condition of an ‘<code class=css>@supports</code>’ |
jackalmage@6838 | 891 | rule.</p> |
jackalmage@6838 | 892 | <!-- |
jackalmage@6838 | 893 | <h2 id="at-document">Document queries: the '@document' rule</h2> |
dbaron@3021 | 894 | |
jackalmage@6838 | 895 | <p>The <dfn>'@document' rule</dfn> is a conditional group |
jackalmage@6838 | 896 | rule whose condition depends on the |
jackalmage@6838 | 897 | <a href="#url-of-doc">URL of the document being styled</a>. |
jackalmage@6838 | 898 | This allows style sheets, particularly user style sheets, to have styles |
jackalmage@6838 | 899 | that only apply to a set of pages rather than to all pages using the |
jackalmage@6838 | 900 | style sheet.</p> |
dbaron@2974 | 901 | |
jackalmage@6838 | 902 | <p class="issue">Given that this @-rule is intended primarily for user |
jackalmage@6838 | 903 | style sheets, what should this specification say about its use in author |
jackalmage@6838 | 904 | style sheets? Should it be forbidden? Should use instead be |
jackalmage@6838 | 905 | discouraged? Or should this specification remain neutral on the |
jackalmage@6838 | 906 | topic, since there are valid uses in author style sheets?</p> |
dbaron@2974 | 907 | |
jackalmage@6838 | 908 | <p id="url-of-doc">The <dfn>URL of the document being styled</dfn> is |
jackalmage@6838 | 909 | the URI at which the document is located, excluding any fragment |
jackalmage@6838 | 910 | identifiers. (This means, for example, that HTTP redirects have been |
jackalmage@6838 | 911 | followed.) If the styles are being applied inside a complete document |
jackalmage@6838 | 912 | embedded into the presentation of another (e.g., [[HTML5]]'s <code |
jackalmage@6838 | 913 | class="html">iframe</code>, <code class="html">object</code>, or <code |
jackalmage@6838 | 914 | class="html">img</code> elements), the relevant URI is that of the |
jackalmage@6838 | 915 | frame, not of its container. However, if content from other documents |
jackalmage@6838 | 916 | is mixed in via mechanisms that mix content from one document into |
jackalmage@6838 | 917 | another (e.g., [[SVG11]]'s <code>use</code> element), then the |
jackalmage@6838 | 918 | address of the container document is used.</p> |
dbaron@2974 | 919 | |
jackalmage@6838 | 920 | <p class="note">Note: In [[HTML5]], this is the |
jackalmage@6838 | 921 | <a href="http://dev.w3.org/html5/spec/dom.html#documents">document's address</a> |
jackalmage@6838 | 922 | of a document in a |
jackalmage@6838 | 923 | <a href="http://dev.w3.org/html5/spec/browsers.html#browsing-context">browsing context</a>.</p> |
dbaron@3027 | 924 | |
jackalmage@6838 | 925 | <div class="issue">What form of normalization is done on URLs and domains |
jackalmage@6838 | 926 | before matching? In particular, this specification needs to describe: |
jackalmage@6838 | 927 | <ul> |
jackalmage@6838 | 928 | <li>what form is used for the <a href="#url-of-doc">URL of the document |
jackalmage@6838 | 929 | being styled</a> (and what has been normalized in that form)</li> |
jackalmage@6838 | 930 | <li>what normalization (if any) happens to the argument of each of the match |
jackalmage@6838 | 931 | functions before the comparison that they describe and</li> |
jackalmage@6838 | 932 | <li>whether the |
jackalmage@6838 | 933 | comparison algorithm used is string comparison or some other URL |
jackalmage@6838 | 934 | comparison algorithm.</li></ul></div> |
dbaron@3027 | 935 | |
jackalmage@6838 | 936 | <p>The '@document' rule's condition is written as a |
jackalmage@6838 | 937 | comma-separated list of <dfn>URL matching functions</dfn>, and the |
jackalmage@6838 | 938 | condition evaluates to true whenever any one of those functions |
jackalmage@6838 | 939 | evaluates to true. The following URL matching functions are |
jackalmage@6838 | 940 | permitted:</p> |
dbaron@3240 | 941 | |
jackalmage@6838 | 942 | <dl> |
jackalmage@6838 | 943 | <dt><dfn id="url-exact" title="url()|URL matching functions::exact"><url></dfn></dt> |
dbaron@3240 | 944 | |
jackalmage@6838 | 945 | <dd> |
jackalmage@6838 | 946 | <p>The 'url()' function is the <dfn>exact url matching |
jackalmage@6838 | 947 | function</dfn>. It evaluates to true whenever the <a |
jackalmage@6838 | 948 | href="#url-of-doc">URL of the document being styled</a> is exactly |
jackalmage@6838 | 949 | the URL given.</p> |
dbaron@3027 | 950 | |
jackalmage@6838 | 951 | <p class="Note">The 'url()' function, since it is a core syntax |
jackalmage@6838 | 952 | element in CSS, is allowed (subject to different character |
jackalmage@6838 | 953 | limitations and thus escaping requirements) to contain an unquoted |
jackalmage@6838 | 954 | value (in addition to the string values that are allowed as |
jackalmage@6838 | 955 | arguments for all four functions).</p> |
dbaron@2974 | 956 | |
jackalmage@6838 | 957 | <div class="example"> |
jackalmage@6838 | 958 | <p>For example, this rule:</p> |
jackalmage@6838 | 959 | <pre>@document url("http://www.w3.org/Style/CSS/") { |
dbaron@2974 | 960 | #summary { background: yellow; color: black} |
dbaron@2974 | 961 | }</pre> |
jackalmage@6838 | 962 | <p>styles the <code class="html">summary</code> element on the page |
jackalmage@6838 | 963 | <code>http://www.w3.org/Style/CSS/</code>, but not on any other |
jackalmage@6838 | 964 | pages.</p> |
jackalmage@6838 | 965 | </div> |
jackalmage@6838 | 966 | </dd> |
dbaron@2974 | 967 | |
jackalmage@6838 | 968 | <dt><dfn id="url-prefix" title="url-prefix()|URL matching functions::prefix">url-prefix(<string>)</dfn></dt> |
dbaron@2974 | 969 | |
jackalmage@6838 | 970 | <dd> |
jackalmage@6838 | 971 | <p>The 'url-prefix()' function is the <dfn>url prefix |
jackalmage@6838 | 972 | matching function</dfn>. It evaluates to true whenever the |
jackalmage@6838 | 973 | <a href="#url-of-doc">URL of the document being styled</a> |
jackalmage@6838 | 974 | has the argument to the function as an |
jackalmage@6838 | 975 | initial substring (which is true when the two strings are equal). |
jackalmage@6838 | 976 | When the argument is the empty string, it evaluates to true for all |
jackalmage@6838 | 977 | documents.</p> |
jackalmage@6838 | 978 | <div class="example"> |
jackalmage@6838 | 979 | <p>For example, this rule:</p> |
jackalmage@6838 | 980 | <pre>@document url-prefix("http://www.w3.org/Style/CSS/") { |
dbaron@2974 | 981 | #summary { background: yellow; color: black} |
dbaron@2974 | 982 | }</pre> |
jackalmage@6838 | 983 | <p>styles the <code class="html">summary</code> element on the page |
jackalmage@6838 | 984 | <code>http://www.w3.org/Style/CSS/</code> and on the page |
jackalmage@6838 | 985 | <code>http://www.w3.org/Style/CSS/Test</code>, but it does not |
jackalmage@6838 | 986 | affect the page <code>http://www.w3.org/</code> or the page |
jackalmage@6838 | 987 | <code>http://www.example.com/Style/CSS/</code>.</p> |
jackalmage@6838 | 988 | </div> |
jackalmage@6838 | 989 | </dd> |
dbaron@2974 | 990 | |
jackalmage@6838 | 991 | <dt><dfn id="url-domain" title="domain()|URL matching functions::domain">domain(<string>)</dfn></dt> |
dbaron@2974 | 992 | |
jackalmage@6838 | 993 | <dd> |
jackalmage@6838 | 994 | <p>The 'domain()' function is the <dfn>domain |
jackalmage@6838 | 995 | matching function</dfn>. It evaluates to true whenever |
jackalmage@6838 | 996 | the <a href="#url-of-doc">URL of the document being styled</a> |
jackalmage@6838 | 997 | has a host subcomponent (as defined in [[!URI]]) |
jackalmage@6838 | 998 | and that host subcomponent is exactly the argument to the |
jackalmage@6838 | 999 | 'domain()' function or a final substring of the host |
jackalmage@6838 | 1000 | component is a period (U+002E) immediately followed by the argument |
jackalmage@6838 | 1001 | to the 'domain()' function.</p> |
jackalmage@6838 | 1002 | <div class="example"> |
jackalmage@6838 | 1003 | <p>For example, this rule:</p> |
jackalmage@6838 | 1004 | <pre>@document domain("w3.org") { |
dbaron@2974 | 1005 | body { font-size: 16px ! important } |
dbaron@2974 | 1006 | }</pre> |
jackalmage@6838 | 1007 | <p>changes the font size of the body element for pages such as |
dbaron@2974 | 1008 | <code>http://www.w3.org/Style/CSS/</code> and |
dbaron@2974 | 1009 | <code>http://w3.org/Style/CSS/</code> and |
jackalmage@6838 | 1010 | <code>http://lists.w3.org/Archives/Public/www-style/</code> |
jackalmage@6838 | 1011 | but it does not affect the page |
jackalmage@6838 | 1012 | <code>http://www.example.com/Style/CSS/</code>.</p> |
dbaron@2974 | 1013 | </div> |
jackalmage@6838 | 1014 | </dd> |
dbaron@2974 | 1015 | |
jackalmage@6838 | 1016 | <dt><dfn id="url-regexp" title="regexp()|URL matching functions::regular expression">regexp(<string>)</dfn></dt> |
dbaron@2974 | 1017 | |
jackalmage@6838 | 1018 | <dd> |
dbaron@2986 | 1019 | <p>The contents of the <string> argument <strong>must</strong> |
jackalmage@6838 | 1020 | match the JavaScript <code>Pattern</code> production |
jackalmage@6838 | 1021 | ([[!ECMA-262-5.1]], section 15.10.1). However, |
jackalmage@6838 | 1022 | failing to do so is not a CSS syntax error and does not trigger any |
jackalmage@6838 | 1023 | error handling for CSS syntax errors.</p> |
dbaron@2986 | 1024 | |
jackalmage@6838 | 1025 | <p>The ''regexp()'' function evaluates to true whenever the string |
jackalmage@6838 | 1026 | argument compiled as a JavaScript regular expression with the |
jackalmage@6838 | 1027 | <code>global</code>, <code>ignoreCase</code> and |
jackalmage@6838 | 1028 | <code>multiline</code> flags <em>disabled</em> |
jackalmage@6838 | 1029 | (see [[!ECMA-262-5.1]], sections 15.10.7.2 through 15.10.7.4) |
jackalmage@6838 | 1030 | compiles successfully and the resulting regular expression matches |
jackalmage@6838 | 1031 | the entirety of the |
jackalmage@6838 | 1032 | <a href="#url-of-doc">URL of the document being styled</a>.</p> |
dbaron@2986 | 1033 | |
jackalmage@6838 | 1034 | <p class="note">Note that regular expression must match the entire |
jackalmage@6838 | 1035 | URL, not just a part of it.</p> |
dbaron@2974 | 1036 | |
jackalmage@6838 | 1037 | <p class="note">Note that this definition intentionally matches the |
jackalmage@6838 | 1038 | behavior of the <a |
jackalmage@6838 | 1039 | href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#attr-input-pattern"><code class="html">pattern</code> |
jackalmage@6838 | 1040 | attribute</a> on the <code class="html">input</code> element |
jackalmage@6838 | 1041 | in [[HTML5]].</p> |
dbaron@2986 | 1042 | |
jackalmage@6838 | 1043 | <div class="example"> |
jackalmage@6838 | 1044 | <p>For example, this rule:</p> |
jackalmage@6838 | 1045 | <pre>@document regexp("http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/") { |
dbaron@2986 | 1046 | body { font-size: 20px ! important } |
dbaron@2986 | 1047 | }</pre> |
jackalmage@6838 | 1048 | <p>changes the font size of the body element for pages such as |
jackalmage@6838 | 1049 | <code>http://www.w3.org/TR/2011/PR-CSS2-20110412/</code>.</p> |
jackalmage@6838 | 1050 | <p class="note">Note that the backslashes in the regular |
jackalmage@6838 | 1051 | expression require CSS escaping as ''\\''.</p> |
jackalmage@6838 | 1052 | </div> |
jackalmage@6838 | 1053 | </dd> |
dbaron@2986 | 1054 | |
jackalmage@6838 | 1055 | </dl> |
dbaron@2986 | 1056 | |
jackalmage@6838 | 1057 | <p>Implementations <strong>must</strong> treat any unknown URL matching |
jackalmage@6838 | 1058 | functions as a syntax error, and thus ignore the '@document' rule. |
jackalmage@6838 | 1059 | <span class="issue">Should we instead have more complicated error |
jackalmage@6838 | 1060 | handling rules to make forward-compatibility work differently, or is |
jackalmage@6838 | 1061 | this rule the best solution for such future expansion anyway?</span></p> |
dbaron@2974 | 1062 | |
jackalmage@6838 | 1063 | <div class="issue">This syntax doesn't offer any ability to do negations, |
jackalmage@6838 | 1064 | which has been requested in <a |
jackalmage@6838 | 1065 | href="https://bugzilla.mozilla.org/show_bug.cgi?id=349813">Mozilla bug |
jackalmage@6838 | 1066 | 349813</a>. Use cases that people have wanted negations for |
jackalmage@6838 | 1067 | include: |
jackalmage@6838 | 1068 | <ul> |
jackalmage@6838 | 1069 | <li>User style sheets that want a particular rule in general, but know |
jackalmage@6838 | 1070 | that that rule does more harm than good on specific sites.</li> |
jackalmage@6838 | 1071 | <li>Authors who have a rule that they want to apply to most of their |
jackalmage@6838 | 1072 | pages, but wish to make a few exceptions for.</li> |
jackalmage@6838 | 1073 | </ul> |
jackalmage@6838 | 1074 | </div> |
dbaron@2974 | 1075 | |
jackalmage@6838 | 1076 | <p>This extends the lexical scanner in the |
jackalmage@6838 | 1077 | <a href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a> |
jackalmage@6838 | 1078 | ([[!CSS21]], Appendix G) by adding: |
jackalmage@6838 | 1079 | <pre>@{D}{O}{C}{U}{M}{E}{N}{T} {return DOCUMENT_SYM;}</pre> |
jackalmage@6838 | 1080 | <p>and the grammar by adding</p> |
dbaron@7032 | 1081 | <pre><dfn>document_rule</dfn> |
dbaron@7032 | 1082 | : DOCUMENT_SYM S+ <i>url_match_fn</i> ( "," S* <i>url_match_fn</i> )* <i>group_rule_body</i> |
dbaron@2974 | 1083 | ; |
dbaron@2974 | 1084 | |
dbaron@7032 | 1085 | <dfn>url_match_fn</dfn> |
dbaron@6740 | 1086 | : (URI | FUNCTION S* STRING S* ')' ) S* |
dbaron@2974 | 1087 | ;</pre> |
jackalmage@6838 | 1088 | --> |
dbaron@2974 | 1089 | |
jackalmage@6838 | 1090 | <h2 id=apis><span class=secno>7. </span>APIs</h2> |
dbaron@2974 | 1091 | |
jackalmage@6838 | 1092 | <h3 id=extentions-to-cssrule-interface><span class=secno>7.1. </span> |
jackalmage@6617 | 1093 | Extensions to the <code>CSSRule</code> interface</h3> |
dbaron@3416 | 1094 | |
jackalmage@6315 | 1095 | <p>The <code>CSSRule</code> interface is extended as follows: |
jackalmage@6315 | 1096 | |
jackalmage@6315 | 1097 | <pre class=idl>partial interface CSSRule { |
jackalmage@6315 | 1098 | const unsigned short SUPPORTS_RULE = 12; |
jackalmage@6838 | 1099 | <!-- |
jackalmage@6315 | 1100 | const unsigned short DOCUMENT_RULE = 13; |
jackalmage@6838 | 1101 | --> |
jackalmage@6315 | 1102 | }</pre> |
jackalmage@6315 | 1103 | |
jackalmage@6838 | 1104 | <h3 id=the-cssgroupingrule-interface><span class=secno>7.2. </span> The <a |
jackalmage@6655 | 1105 | href="#cssgroupingrule"><code>CSSGroupingRule</code></a> interface</h3> |
jackalmage@6655 | 1106 | |
jackalmage@6655 | 1107 | <p>The <dfn id=cssgroupingrule><code>CSSGroupingRule</code></dfn> interface |
jackalmage@6655 | 1108 | represents an at-rule that contains other rules nested inside itself. |
jackalmage@6655 | 1109 | |
jackalmage@6655 | 1110 | <pre class=idl>interface CSSGroupingRule : CSSRule { |
dbaron@7102 | 1111 | readonly attribute <a |
dbaron@7102 | 1112 | href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRuleList">CSSRuleList</a> cssRules; |
jackalmage@6655 | 1113 | unsigned long insertRule (DOMString rule, unsigned long index); |
jackalmage@6655 | 1114 | void deleteRule (unsigned long index); |
jackalmage@6655 | 1115 | }</pre> |
jackalmage@6655 | 1116 | |
jackalmage@6655 | 1117 | <dl class=idl-attributes> |
dbaron@7102 | 1118 | <dt><code>cssRules</code> of type <code><a |
dbaron@7102 | 1119 | href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRuleList">CSSRuleList</a></code>, |
dbaron@7102 | 1120 | readonly |
jackalmage@6655 | 1121 | |
jackalmage@6655 | 1122 | <dd>The <code>cssRules</code> attribute must return a |
jackalmage@6655 | 1123 | <code>CSSRuleList</code> object for the list of CSS rules nested inside |
jackalmage@6655 | 1124 | the grouping rule. |
jackalmage@6655 | 1125 | </dl> |
jackalmage@6655 | 1126 | |
jackalmage@6655 | 1127 | <dl class=idl-methods> |
jackalmage@6655 | 1128 | <dt><code>insertRule(DOMString rule, unsigned long index)</code>, returns |
jackalmage@6655 | 1129 | <code>unsigned long</code> |
jackalmage@6655 | 1130 | |
dbaron@7104 | 1131 | <dd> The <code>insertRule</code> operation must insert a CSS rule |
dbaron@7104 | 1132 | <var>rule</var> into the CSS rule list returned by <code>cssRules</code>, |
dbaron@7104 | 1133 | such that the inserted rule will be at position <var>index</var>, and any |
dbaron@7104 | 1134 | rules previously at <var>index</var> or higher will increase their index |
dbaron@7104 | 1135 | by one. It must throw INDEX_SIZE_ERR if index is greater than |
dbaron@7104 | 1136 | <code>cssRules.length</code>. It must throw SYNTAX_ERR if the rule has a |
dbaron@7104 | 1137 | syntax error and is unparseable; this does not include syntax errors |
dbaron@7104 | 1138 | handled by error handling rules for constructs inside of the rule. It |
dbaron@7104 | 1139 | must throw HIERARCHY_REQUEST_ERR if the rule cannot be inserted at the |
dbaron@7104 | 1140 | location specified, for example, if an ‘<code |
dbaron@7104 | 1141 | class=css>@import</code>’ rule is inserted inside a group rule. <span |
dbaron@7104 | 1142 | class=issue>This needs to specify what to do if <code>rule</code> is the |
dbaron@7104 | 1143 | empty string, if it contains more than one CSS rule, or if it contains |
dbaron@7104 | 1144 | garbage after a valid rule.</span> |
jackalmage@6655 | 1145 | |
jackalmage@6655 | 1146 | <dt><code>deleteRule (unsigned long index)</code>, return |
jackalmage@6655 | 1147 | <code>void</code> |
jackalmage@6655 | 1148 | |
dbaron@7104 | 1149 | <dd> The <code>deleteRule</code> operation must remove a CSS rule from the |
dbaron@7104 | 1150 | CSS rule list returned by <code>cssRules</code> at <var>index</var>. It |
dbaron@7104 | 1151 | must throw INDEX_SIZE_ERR if index is greater than or equal to |
dbaron@7104 | 1152 | <code>cssRules.length</code>. |
jackalmage@6655 | 1153 | </dl> |
jackalmage@6655 | 1154 | |
jackalmage@6838 | 1155 | <h3 id=the-cssconditionrule-interface><span class=secno>7.3. </span> The <a |
jackalmage@6618 | 1156 | href="#cssconditionrule"><code>CSSConditionRule</code></a> interface</h3> |
jackalmage@6315 | 1157 | |
jackalmage@6618 | 1158 | <p>The <dfn id=cssconditionrule><code>CSSConditionRule</code></dfn> |
jackalmage@6620 | 1159 | interface represents all the "conditional" at-rules, which consist of a |
jackalmage@6620 | 1160 | condition and a statement block. |
dbaron@6323 | 1161 | |
jackalmage@6655 | 1162 | <pre class=idl>interface CSSConditionRule : CSSGroupingRule { |
dbaron@6324 | 1163 | attribute DOMString conditionText; |
jackalmage@6315 | 1164 | }</pre> |
jackalmage@6315 | 1165 | |
jackalmage@6315 | 1166 | <dl class=idl-attributes> |
jackalmage@6619 | 1167 | <dt><code>conditionText</code> of type <code>DOMString</code> |
jackalmage@6315 | 1168 | |
dbaron@6732 | 1169 | <dd> |
dbaron@6732 | 1170 | <p>The <code>conditionText</code> attribute represents the condition of |
dbaron@6732 | 1171 | the rule. Since what this condition does varies between the derived |
dbaron@6732 | 1172 | interfaces of <a |
dbaron@6732 | 1173 | href="#cssconditionrule"><code>CSSConditionRule</code></a>, those |
dbaron@6732 | 1174 | derived interfaces may specify different behavior for this attribute |
dbaron@6732 | 1175 | (see, for example, <a href="#cssmediarule"><code>CSSMediaRule</code></a> |
dbaron@6732 | 1176 | below). In the absence of such rule-specific behavior, the following |
dbaron@6732 | 1177 | rules apply: |
dbaron@6732 | 1178 | |
dbaron@6732 | 1179 | <p>The <code>conditionText</code> attribute, on getting, must return the |
dbaron@6732 | 1180 | result of serializing the associated condition. |
dbaron@6732 | 1181 | |
dbaron@6324 | 1182 | <p>On setting the <code>conditionText</code> attribute these steps must |
dbaron@6324 | 1183 | be run: |
jackalmage@6315 | 1184 | |
jackalmage@6315 | 1185 | <ol> |
jackalmage@6315 | 1186 | <li>Trim the given value of white space. |
jackalmage@6315 | 1187 | |
jackalmage@6618 | 1188 | <li>If the given value matches the grammar of the appropriate condition |
jackalmage@6618 | 1189 | production for the given rule, replace the associated CSS condition |
jackalmage@6618 | 1190 | with the given value. |
jackalmage@6315 | 1191 | |
jackalmage@6315 | 1192 | <li>Otherwise, do nothing. |
jackalmage@6315 | 1193 | </ol> |
jackalmage@6315 | 1194 | </dl> |
jackalmage@6315 | 1195 | |
jackalmage@6838 | 1196 | <h3 id=the-cssmediarule-interface><span class=secno>7.4. </span> The <a |
jackalmage@6618 | 1197 | href="#cssmediarule"><code>CSSMediaRule</code></a> interface</h3> |
jackalmage@6315 | 1198 | |
jackalmage@6618 | 1199 | <p>The <dfn id=cssmediarule><code>CSSMediaRule</code></dfn> interface |
jackalmage@6618 | 1200 | represents a ‘<code class=css>@media</code>’ rule: |
jackalmage@6315 | 1201 | |
jackalmage@6618 | 1202 | <pre class=idl>interface CSSMediaRule : CSSConditionRule { |
dbaron@7102 | 1203 | readonly attribute <a |
dbaron@7102 | 1204 | href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-MediaList">MediaList</a> media; |
jackalmage@6618 | 1205 | }</pre> |
jackalmage@6618 | 1206 | |
jackalmage@6618 | 1207 | <dl class=idl-attributes> |
dbaron@7102 | 1208 | <dt><a href="#media"><code>media</code></a> of type <code><a |
dbaron@7102 | 1209 | href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-MediaList">MediaList</a></code>, |
dbaron@7102 | 1210 | readonly |
jackalmage@6618 | 1211 | |
dbaron@7032 | 1212 | <dd>The <a href="#media"><code>media</code></a> attribute must return a |
dbaron@7032 | 1213 | <code>MediaList</code> object for the list of media queries specified |
dbaron@7032 | 1214 | with the ‘<code class=css>@media</code>’ rule. |
jackalmage@6618 | 1215 | |
jackalmage@6619 | 1216 | <dt><code>conditionText</code> of type <code>DOMString</code> |
dbaron@7387 | 1217 | (CSSMediaRule-specific definition for attribute on CSSConditionRule) |
jackalmage@6618 | 1218 | |
jackalmage@6618 | 1219 | <dd>The <code>conditionText</code> attribute (defined on the <a |
jackalmage@6618 | 1220 | href="#cssconditionrule"><code>CSSConditionRule</code></a> parent rule), |
jackalmage@6618 | 1221 | on getting, must return the value of <code>media.mediaText</code> on the |
jackalmage@6618 | 1222 | rule. |
jackalmage@6621 | 1223 | <p>Setting the <code>conditionText</code> attribute must set the |
jackalmage@6621 | 1224 | <code>media.mediaText</code> attribute on the rule. |
jackalmage@6621 | 1225 | </dl> |
jackalmage@6618 | 1226 | |
jackalmage@6838 | 1227 | <h3 id=the-csssupportsrule-interface><span class=secno>7.5. </span> The <a |
jackalmage@6621 | 1228 | href="#csssupportsrule"><code>CSSSupportsRule</code></a> interface</h3> |
jackalmage@6618 | 1229 | |
jackalmage@6621 | 1230 | <p>The <dfn id=csssupportsrule><code>CSSSupportsRule</code></dfn> interface |
jackalmage@6829 | 1231 | represents a ‘<code class=css>@supports</code>’ rule. |
jackalmage@6618 | 1232 | |
jackalmage@6621 | 1233 | <pre class=idl>interface CSSSupportsRule : CSSConditionRule { |
jackalmage@6618 | 1234 | }</pre> |
dbaron@7387 | 1235 | |
dbaron@7387 | 1236 | <dl class=idl-attributes> |
dbaron@7387 | 1237 | <dt><code>conditionText</code> of type <code>DOMString</code> |
dbaron@7387 | 1238 | (CSSSupportsRule-specific definition for attribute on CSSConditionRule) |
dbaron@7387 | 1239 | |
dbaron@7387 | 1240 | <dd>The <code>conditionText</code> attribute (defined on the <a |
dbaron@7387 | 1241 | href="#cssconditionrule"><code>CSSConditionRule</code></a> parent rule), |
dbaron@7387 | 1242 | on getting, must return the condition that was specified, without any |
dbaron@7387 | 1243 | logical simplifications, so that the returned condition will evaluate to |
dbaron@7387 | 1244 | the same result as the specified condition in any conformant |
dbaron@7387 | 1245 | implementation of this specification (including implementations that |
dbaron@7387 | 1246 | implement future extensions allowed by the <a |
dbaron@7387 | 1247 | href="#general_enclosed"><i>general_enclosed</i></a> exensibility |
dbaron@7387 | 1248 | mechanism in this specification). In other words, token stream |
dbaron@7387 | 1249 | simplifications are allowed (such as reducing whitespace to a single |
dbaron@7387 | 1250 | space or omitting it in cases where it is known to be optional), but |
dbaron@7387 | 1251 | logical simplifications are not allowed. |
dbaron@7387 | 1252 | </dl> |
jackalmage@6838 | 1253 | <!-- |
jackalmage@6838 | 1254 | <h3 id="the-cssdocumentrule-interface"> |
jackalmage@6838 | 1255 | The <code>CSSDocumentRule</code> interface</h3> |
jackalmage@6618 | 1256 | |
jackalmage@6838 | 1257 | <p>The <dfn><code>CSSDocumentRule</code></dfn> interface represents a ''@document'' rule.</p> |
jackalmage@6618 | 1258 | |
jackalmage@6838 | 1259 | <pre class='idl'>interface CSSDocumentRule : CSSConditionRule { |
jackalmage@6838 | 1260 | }</pre> |
jackalmage@6838 | 1261 | --> |
jackalmage@6618 | 1262 | |
jackalmage@6838 | 1263 | <h3 id=the-css-interface><span class=secno>7.6. </span> The <a |
jackalmage@6621 | 1264 | href="#CSS-interface"><code>CSS</code></a> interface, and the <code |
jackalmage@6621 | 1265 | title="">supports()</code> function</h3> |
jackalmage@6618 | 1266 | |
jackalmage@6621 | 1267 | <p>The <dfn id=CSS-interface><code>CSS</code></dfn> interface holds useful |
jackalmage@6621 | 1268 | CSS-related functions that do not belong elsewhere. |
jackalmage@6315 | 1269 | |
jackalmage@6621 | 1270 | <pre class=idl>interface CSS { |
dbaron@7043 | 1271 | static boolean supports(DOMString property, DOMString value); |
dbaron@7105 | 1272 | static boolean supports(DOMString conditionText); |
jackalmage@6620 | 1273 | }</pre> |
jackalmage@6620 | 1274 | |
jackalmage@6621 | 1275 | <dl class=idl-methods> |
jackalmage@6621 | 1276 | <dt><code>supports(DOMString property, DOMString value)</code>, returns |
jackalmage@6621 | 1277 | <code>boolean</code> |
jackalmage@6620 | 1278 | |
jackalmage@6625 | 1279 | <dt><code>supports(DOMString conditionText)</code>, returns |
jackalmage@6621 | 1280 | <code>boolean</code> |
jackalmage@6620 | 1281 | |
jackalmage@6621 | 1282 | <dd> When the <code title="">supports()</code> method is invoked with two |
jackalmage@6621 | 1283 | arguments <var>property</var> and <var>value</var>, it must return |
jackalmage@6621 | 1284 | <code>true</code> if <var>property</var> is a literal match for the name |
jackalmage@6621 | 1285 | of a CSS property that the UA supports, and <var>value</var> would be |
jackalmage@6621 | 1286 | successfully parsed as a supported value for that property. Otherwise, it |
jackalmage@6621 | 1287 | must return <code>false</code>. |
jackalmage@6625 | 1288 | <p> When invoked with a single <var>conditionText</var> argument, it must |
jackalmage@6625 | 1289 | return <code>true</code> if <var>conditionText</var>, when parsed and |
jackalmage@6625 | 1290 | evaluated as a <a |
dbaron@7031 | 1291 | href="#supports_condition"><code>supports_condition</code></a>, would |
jackalmage@6625 | 1292 | return true. Otherwise, it must return <code>false</code>. |
jackalmage@6621 | 1293 | </dl> |
dbaron@3417 | 1294 | |
fantasai@6831 | 1295 | <h2 class=no-num id=grammar>Grammar</h2> |
fantasai@6831 | 1296 | |
fantasai@6831 | 1297 | <p>In order to allow these new @-rules in CSS style sheets, this |
fantasai@6831 | 1298 | specification modifies the <code>stylesheet</code> production in the <a |
fantasai@6831 | 1299 | href="http://www.w3.org/TR/CSS21/grammar.html">Appendix G</a> grammar of |
fantasai@6831 | 1300 | <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> by replacing |
dbaron@7032 | 1301 | the <a href="#media"><code>media</code></a> production defined in <a |
dbaron@7032 | 1302 | href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> with the <a |
dbaron@7032 | 1303 | href="#media"><code>media</code></a> production defined in this one, and |
dbaron@7032 | 1304 | additionally inserting <code>| supports_rule</code> alongside |
dbaron@7032 | 1305 | <code>ruleset | media | page</code>. |
fantasai@6831 | 1306 | |
jackalmage@6838 | 1307 | <h2 id=conformance><span class=secno>8. </span>Conformance</h2> |
dbaron@3416 | 1308 | |
jackalmage@6838 | 1309 | <h3 id=base-modules><span class=secno>8.1. </span>Base Modules</h3> |
dbaron@3022 | 1310 | |
jackalmage@6621 | 1311 | <p>This specification defines conformance in terms of base modules, which |
jackalmage@6621 | 1312 | are modules that this specification builds on top of. The base modules of |
jackalmage@6621 | 1313 | this module are: |
dbaron@3022 | 1314 | |
jackalmage@6621 | 1315 | <ul> |
jackalmage@6621 | 1316 | <li><a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> |
jackalmage@6621 | 1317 | </ul> |
jackalmage@6621 | 1318 | |
jackalmage@6621 | 1319 | <p>All of the conformance requirements of all base modules are incorporated |
jackalmage@6621 | 1320 | as conformance requirements of this module, except where overridden by |
jackalmage@6621 | 1321 | this module. |
jackalmage@6621 | 1322 | |
jackalmage@6621 | 1323 | <p>Additionally, all conformance requirements related to validity of syntax |
jackalmage@6621 | 1324 | in this module and all of its base modules are to be interpreted as though |
jackalmage@6621 | 1325 | all syntax in all of those modules is valid. |
jackalmage@6621 | 1326 | |
jackalmage@6621 | 1327 | <div class=example> |
jackalmage@6621 | 1328 | <p>For example, this means that grammar presented in modules other than <a |
jackalmage@6621 | 1329 | href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> must obey the |
jackalmage@6621 | 1330 | requirements that <a href="#CSS21" |
jackalmage@6621 | 1331 | rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> defines for the parsing of |
jackalmage@6621 | 1332 | properties, and that requirements for handling invalid syntax in <a |
jackalmage@6621 | 1333 | href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> do not treat |
jackalmage@6621 | 1334 | syntax added by other modules as invalid. |
jackalmage@6621 | 1335 | </div> |
jackalmage@6621 | 1336 | |
jackalmage@6621 | 1337 | <p>Additionally, the set of valid syntax can be increased by the |
jackalmage@6621 | 1338 | conformance of a style sheet or processor to additional modules; use of |
jackalmage@6621 | 1339 | such syntax does not make a style sheet nonconformant and failure to treat |
jackalmage@6621 | 1340 | such syntax as invalid does not make a processor nonconformant. |
jackalmage@6621 | 1341 | |
jackalmage@6838 | 1342 | <h3 id=conformance-classes><span class=secno>8.2. </span>Conformance |
jackalmage@6621 | 1343 | Classes</h3> |
jackalmage@6621 | 1344 | |
jackalmage@6621 | 1345 | <p>Conformance to the CSS Conditional Rules Module is defined for three |
jackalmage@6621 | 1346 | conformance classes: |
jackalmage@6621 | 1347 | |
jackalmage@6621 | 1348 | <dl> |
jackalmage@6621 | 1349 | <dt><dfn id=conform-style-sheet title="conformance::style sheet">style |
jackalmage@6621 | 1350 | sheet</dfn> |
jackalmage@6621 | 1351 | |
jackalmage@6621 | 1352 | <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS |
jackalmage@6621 | 1353 | style sheet</a>. |
jackalmage@6621 | 1354 | |
jackalmage@6621 | 1355 | <dt><dfn id=conform-processor |
jackalmage@6621 | 1356 | title="conformance::processor">processor</dfn> |
jackalmage@6621 | 1357 | |
jackalmage@6621 | 1358 | <dd>A tool that reads CSS style sheets: it may be a renderer or <a |
jackalmage@6621 | 1359 | href="http://www.w3.org/TR/CSS21/conform.html#user-agent">user-agent</a> |
jackalmage@6621 | 1360 | that interprets the semantics of a style sheet and renders documents that |
jackalmage@6621 | 1361 | use style sheets, or it may be a validator that checks style sheets. |
jackalmage@6621 | 1362 | |
jackalmage@6621 | 1363 | <dt><dfn id=conform-authoring-tool |
jackalmage@6621 | 1364 | title="conformance::authoring tool">authoring tool</dfn> |
jackalmage@6621 | 1365 | |
jackalmage@6621 | 1366 | <dd>A tool that writes a style sheet. |
jackalmage@6621 | 1367 | </dl> |
jackalmage@6621 | 1368 | |
jackalmage@6621 | 1369 | <p>A style sheet is conformant to the CSS Conditional Rules Module if it |
jackalmage@6621 | 1370 | meets all of the conformance requirements in the module that are described |
jackalmage@6621 | 1371 | as requirements of style sheets. |
jackalmage@6621 | 1372 | |
jackalmage@6621 | 1373 | <p>A processor is conformant to the CSS Conditional Rules Module if it |
jackalmage@6621 | 1374 | meets all applicable conformance requirements in the module that are |
jackalmage@6621 | 1375 | described as requirements of processors. In general, all requirements are |
jackalmage@6621 | 1376 | applicable to renderers. Requirements concerning a part of CSS not |
jackalmage@6621 | 1377 | performed by a processor are not applicable, e.g., requirements related to |
jackalmage@6621 | 1378 | rendering are not applicable to a validator. The inability of a processor |
jackalmage@6621 | 1379 | to correctly render a document due to limitations of the device does not |
jackalmage@6621 | 1380 | make it non-conformant. (For example, a renderer is not required to render |
jackalmage@6621 | 1381 | color on a monochrome monitor.) |
jackalmage@6621 | 1382 | |
jackalmage@6621 | 1383 | <p>An authoring tool is conformant to the CSS Conditional Rules Module if |
jackalmage@6621 | 1384 | it writes style sheets that conform to the module and (if it reads CSS) it |
jackalmage@6621 | 1385 | is a conformant processor. |
jackalmage@6621 | 1386 | |
jackalmage@6838 | 1387 | <h3 id=partial><span class=secno>8.3. </span> Partial Implementations</h3> |
jackalmage@6621 | 1388 | |
jackalmage@6621 | 1389 | <p>So that authors can exploit the forward-compatible parsing rules to |
jackalmage@6621 | 1390 | assign fallback values, CSS renderers <strong>must</strong> treat as |
jackalmage@6621 | 1391 | invalid (and <a |
jackalmage@6621 | 1392 | href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as |
jackalmage@6621 | 1393 | appropriate</a>) any at-rules, properties, property values, keywords, and |
jackalmage@6621 | 1394 | other syntactic constructs for which they have no usable level of support. |
jackalmage@6621 | 1395 | In particular, user agents <strong>must not</strong> selectively ignore |
jackalmage@6621 | 1396 | unsupported component values and honor supported values in a single |
jackalmage@6621 | 1397 | multi-value property declaration: if any value is considered invalid (as |
jackalmage@6621 | 1398 | unsupported values must be), CSS requires that the entire declaration be |
jackalmage@6621 | 1399 | ignored. |
jackalmage@6621 | 1400 | |
jackalmage@6838 | 1401 | <h3 id=experimental><span class=secno>8.4. </span>Experimental |
jackalmage@6621 | 1402 | Implementations</h3> |
jackalmage@6621 | 1403 | |
jackalmage@6621 | 1404 | <p>To avoid clashes with future CSS features, the CSS specifications |
jackalmage@6621 | 1405 | reserve a <a |
jackalmage@6621 | 1406 | href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed |
jackalmage@6621 | 1407 | syntax</a> for proprietary property and value extensions to CSS. The CSS |
jackalmage@6621 | 1408 | Working Group recommends that experimental implementations of features in |
jackalmage@6621 | 1409 | CSS Working Drafts also use vendor-prefixed property or value names. This |
jackalmage@6621 | 1410 | avoids any incompatibilities with future changes in the draft. Once a |
jackalmage@6621 | 1411 | specification reaches the Candidate Recommendation stage, implementors |
jackalmage@6621 | 1412 | should implement the non-prefixed syntax for any feature they consider to |
jackalmage@6621 | 1413 | be correctly implemented according to spec. |
jackalmage@6621 | 1414 | |
jackalmage@6838 | 1415 | <h3 id=cr-exit-criteria><span class=secno>8.5. </span>CR Exit Criteria</h3> |
jackalmage@6621 | 1416 | |
jackalmage@6621 | 1417 | <p>For this specification to be advanced to Proposed Recommendation, there |
jackalmage@6621 | 1418 | must be at least two independent, interoperable implementations of each |
jackalmage@6621 | 1419 | feature. Each feature may be implemented by a different set of products, |
jackalmage@6621 | 1420 | there is no requirement that all features be implemented by a single |
jackalmage@6621 | 1421 | product. For the purposes of this criterion, we define the following |
jackalmage@6621 | 1422 | terms: |
jackalmage@6621 | 1423 | |
jackalmage@6621 | 1424 | <dl> |
jackalmage@6621 | 1425 | <dt>independent |
jackalmage@6621 | 1426 | |
jackalmage@6621 | 1427 | <dd>each implementation must be developed by a different party and cannot |
jackalmage@6621 | 1428 | share, reuse, or derive from code used by another qualifying |
jackalmage@6621 | 1429 | implementation. Sections of code that have no bearing on the |
jackalmage@6621 | 1430 | implementation of this specification are exempt from this requirement. |
jackalmage@6621 | 1431 | |
jackalmage@6621 | 1432 | <dt>interoperable |
jackalmage@6621 | 1433 | |
jackalmage@6621 | 1434 | <dd>passing the respective test case(s) in the official CSS test suite, |
jackalmage@6621 | 1435 | or, if the implementation is not a Web browser, an equivalent test. Every |
jackalmage@6621 | 1436 | relevant test in the test suite should have an equivalent test created if |
jackalmage@6621 | 1437 | such a user agent (UA) is to be used to claim interoperability. In |
jackalmage@6621 | 1438 | addition if such a UA is to be used to claim interoperability, then there |
jackalmage@6621 | 1439 | must one or more additional UAs which can also pass those equivalent |
jackalmage@6621 | 1440 | tests in the same way for the purpose of interoperability. The equivalent |
jackalmage@6621 | 1441 | tests must be made publicly available for the purposes of peer review. |
jackalmage@6621 | 1442 | |
jackalmage@6621 | 1443 | <dt>implementation |
jackalmage@6621 | 1444 | |
jackalmage@6621 | 1445 | <dd>a user agent which: |
jackalmage@6621 | 1446 | <ol class=inline> |
jackalmage@6621 | 1447 | <li>implements the specification. |
jackalmage@6621 | 1448 | |
jackalmage@6621 | 1449 | <li>is available to the general public. The implementation may be a |
jackalmage@6621 | 1450 | shipping product or other publicly available version (i.e., beta |
jackalmage@6621 | 1451 | version, preview release, or “nightly build”). Non-shipping product |
jackalmage@6621 | 1452 | releases must have implemented the feature(s) for a period of at least |
jackalmage@6621 | 1453 | one month in order to demonstrate stability. |
jackalmage@6621 | 1454 | |
jackalmage@6621 | 1455 | <li>is not experimental (i.e., a version specifically designed to pass |
jackalmage@6621 | 1456 | the test suite and is not intended for normal usage going forward). |
jackalmage@6621 | 1457 | </ol> |
jackalmage@6621 | 1458 | </dl> |
jackalmage@6621 | 1459 | |
jackalmage@6621 | 1460 | <p>The specification will remain Candidate Recommendation for at least six |
jackalmage@6621 | 1461 | months. |
jackalmage@6621 | 1462 | |
jackalmage@6838 | 1463 | <h2 id=changes><span class=secno>9. </span> Changes</h2> |
jackalmage@6621 | 1464 | |
fantasai@6831 | 1465 | <p>The following (non-editorial) changes were made to this specification |
fantasai@6831 | 1466 | since the <a |
fantasai@6831 | 1467 | href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/">11 |
fantasai@6831 | 1468 | September 2012 Working Draft</a>: |
fantasai@6831 | 1469 | |
fantasai@6831 | 1470 | <ul> |
fantasai@6846 | 1471 | <li>Removed ‘<code class=css>@document</code>’ rule; it has been |
fantasai@6846 | 1472 | deferred to Level 4. |
fantasai@6846 | 1473 | |
fantasai@6845 | 1474 | <li>Allow functional notation in ‘<code class=css>@supports</code>’ |
fantasai@6845 | 1475 | queries to be valid (to allow for future extensions), but treat such |
fantasai@6845 | 1476 | notations as always being false. |
fantasai@6845 | 1477 | |
fantasai@6831 | 1478 | <li>Corrected the grammar as follows: |
fantasai@6831 | 1479 | <pre> |
fantasai@6831 | 1480 | - : SUPPORTS_SYM S+ supports_condition group_rule_body |
fantasai@6831 | 1481 | + : SUPPORTS_SYM S* supports_condition group_rule_body |
fantasai@6831 | 1482 | </pre> |
fantasai@6842 | 1483 | |
fantasai@6842 | 1484 | <pre> |
fantasai@6842 | 1485 | - : (URI | FUNCTION) S* |
fantasai@6842 | 1486 | + : (URI | FUNCTION S* STRING S* ')' ) S* |
fantasai@6842 | 1487 | </pre> |
fantasai@6842 | 1488 | |
fantasai@6842 | 1489 | <li>Switched "and", "or", and "not" keywords to use appropriate |
fantasai@6842 | 1490 | productions rather than literals. |
fantasai@6846 | 1491 | |
fantasai@6846 | 1492 | <li>Clarified definition of support used for interpreting ‘<code |
fantasai@6846 | 1493 | class=css>@support</code>’ rules and its relationship to CSS |
fantasai@6846 | 1494 | forwards-compatible parsing rules. |
fantasai@6831 | 1495 | </ul> |
jackalmage@6621 | 1496 | |
jackalmage@6621 | 1497 | <h2 class=no-num id=acknowledgments>Acknowledgments</h2> |
jackalmage@6621 | 1498 | |
jackalmage@6621 | 1499 | <p> Thanks to the ideas and feedback from Tab Atkins, <span lang=tr>Tantek |
jackalmage@6621 | 1500 | Çelik</span>, Alex Danilo, Elika Etemad, Pascal Germroth, <span |
dbaron@7044 | 1501 | lang=de>Björn Höhrmann</span>, Paul Irish, <span lang=nl>Anne van |
dbaron@7044 | 1502 | Kesteren</span>, Vitor Menezes, Alex Mogilevsky, Chris Moschini, Simon |
dbaron@7044 | 1503 | Sapin, Ben Ward, Zack Weinberg, Estelle Weyl, Boris Zbarsky, and all the |
dbaron@7044 | 1504 | rest of the <a |
jackalmage@6621 | 1505 | href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> |
jackalmage@6621 | 1506 | community. |
jackalmage@6621 | 1507 | |
jackalmage@6621 | 1508 | <h2 class=no-num id=references>References</h2> |
jackalmage@6621 | 1509 | |
jackalmage@6621 | 1510 | <h3 class=no-num id=normative-references>Normative references</h3> |
jackalmage@6621 | 1511 | <!--begin-normative--> |
jackalmage@6621 | 1512 | <!-- Sorted by label --> |
jackalmage@6621 | 1513 | |
jackalmage@6621 | 1514 | <dl class=bibliography> |
jackalmage@6621 | 1515 | <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> |
jackalmage@6621 | 1516 | <!----> |
jackalmage@6621 | 1517 | |
jackalmage@6621 | 1518 | <dt id=CSS21>[CSS21] |
jackalmage@6621 | 1519 | |
jackalmage@6621 | 1520 | <dd>Bert Bos; et al. <a |
dbaron@7122 | 1521 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style |
jackalmage@6621 | 1522 | Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June |
jackalmage@6621 | 1523 | 2011. W3C Recommendation. URL: <a |
dbaron@7122 | 1524 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a> |
jackalmage@6621 | 1525 | </dd> |
jackalmage@6621 | 1526 | <!----> |
jackalmage@6621 | 1527 | |
jackalmage@6621 | 1528 | <dt id=CSS3-ANIMATIONS>[CSS3-ANIMATIONS] |
jackalmage@6621 | 1529 | |
jackalmage@6621 | 1530 | <dd>Dean Jackson; et al. <a |
jackalmage@6621 | 1531 | href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/"><cite>CSS |
jackalmage@6621 | 1532 | Animations.</cite></a> 3 April 2012. W3C Working Draft. (Work in |
jackalmage@6621 | 1533 | progress.) URL: <a |
jackalmage@6621 | 1534 | href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/">http://www.w3.org/TR/2012/WD-css3-animations-20120403/</a> |
jackalmage@6621 | 1535 | </dd> |
jackalmage@6621 | 1536 | <!----> |
jackalmage@6621 | 1537 | |
jackalmage@6621 | 1538 | <dt id=CSS3-FONTS>[CSS3-FONTS] |
jackalmage@6621 | 1539 | |
jackalmage@6621 | 1540 | <dd>John Daggett. <a |
dbaron@7372 | 1541 | href="http://www.w3.org/TR/2012/WD-css3-fonts-20121211/"><cite>CSS Fonts |
dbaron@7372 | 1542 | Module Level 3.</cite></a> 11 December 2012. W3C Working Draft. (Work in |
jackalmage@6621 | 1543 | progress.) URL: <a |
dbaron@7372 | 1544 | href="http://www.w3.org/TR/2012/WD-css3-fonts-20121211/">http://www.w3.org/TR/2012/WD-css3-fonts-20121211/</a> |
jackalmage@6621 | 1545 | </dd> |
jackalmage@6621 | 1546 | <!----> |
jackalmage@6621 | 1547 | |
jackalmage@6621 | 1548 | <dt id=MEDIAQ>[MEDIAQ] |
jackalmage@6621 | 1549 | |
jackalmage@6621 | 1550 | <dd>Florian Rivoal. <a |
jackalmage@6621 | 1551 | href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media |
jackalmage@6621 | 1552 | Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a |
jackalmage@6621 | 1553 | href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a> |
jackalmage@6621 | 1554 | </dd> |
jackalmage@6621 | 1555 | <!----> |
jackalmage@6621 | 1556 | |
jackalmage@6621 | 1557 | <dt id=RFC2119>[RFC2119] |
jackalmage@6621 | 1558 | |
jackalmage@6621 | 1559 | <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key |
jackalmage@6621 | 1560 | words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet |
jackalmage@6621 | 1561 | RFC 2119. URL: <a |
jackalmage@6621 | 1562 | href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> |
jackalmage@6621 | 1563 | </dd> |
jackalmage@6621 | 1564 | <!----> |
jackalmage@6621 | 1565 | </dl> |
jackalmage@6621 | 1566 | <!--end-normative--> |
jackalmage@6621 | 1567 | |
jackalmage@6621 | 1568 | <h3 class=no-num id=other-references>Other references</h3> |
jackalmage@6621 | 1569 | <!--begin-informative--> |
jackalmage@6621 | 1570 | <!-- Sorted by label --> |
jackalmage@6621 | 1571 | |
jackalmage@6621 | 1572 | <dl class=bibliography> |
jackalmage@6621 | 1573 | <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> |
jackalmage@6621 | 1574 | <!----> |
jackalmage@6621 | 1575 | |
jackalmage@6621 | 1576 | <dt id=CSS1>[CSS1] |
jackalmage@6621 | 1577 | |
jackalmage@6621 | 1578 | <dd>Håkon Wium Lie; Bert Bos. <a |
jackalmage@6621 | 1579 | href="http://www.w3.org/TR/2008/REC-CSS1-20080411"><cite>Cascading Style |
jackalmage@6621 | 1580 | Sheets (CSS1) Level 1 Specification.</cite></a> 11 April 2008. W3C |
jackalmage@6621 | 1581 | Recommendation. URL: <a |
jackalmage@6621 | 1582 | href="http://www.w3.org/TR/2008/REC-CSS1-20080411">http://www.w3.org/TR/2008/REC-CSS1-20080411</a> |
jackalmage@6621 | 1583 | </dd> |
jackalmage@6621 | 1584 | <!----> |
jackalmage@6621 | 1585 | |
jackalmage@6621 | 1586 | <dt id=CSS3-TRANSITIONS>[CSS3-TRANSITIONS] |
jackalmage@6621 | 1587 | |
jackalmage@6621 | 1588 | <dd>Dean Jackson; et al. <a |
jackalmage@6621 | 1589 | href="http://www.w3.org/TR/2012/WD-css3-transitions-20120403/"><cite>CSS |
jackalmage@6621 | 1590 | Transitions.</cite></a> 3 April 2012. W3C Working Draft. (Work in |
jackalmage@6621 | 1591 | progress.) URL: <a |
jackalmage@6621 | 1592 | href="http://www.w3.org/TR/2012/WD-css3-transitions-20120403/">http://www.w3.org/TR/2012/WD-css3-transitions-20120403/</a> |
jackalmage@6621 | 1593 | </dd> |
jackalmage@6621 | 1594 | <!----> |
jackalmage@6621 | 1595 | </dl> |
jackalmage@6621 | 1596 | <!--end-informative--> |
jackalmage@6621 | 1597 | |
jackalmage@6621 | 1598 | <h2 class=no-num id=index>Index</h2> |
jackalmage@6621 | 1599 | <!--begin-index--> |
jackalmage@6621 | 1600 | |
jackalmage@6621 | 1601 | <ul class=indexlist> |
jackalmage@6621 | 1602 | <li>conditional group rules, <a href="#conditional-group-rules" |
dbaron@7102 | 1603 | title="section 2."><strong>2.</strong></a> |
jackalmage@6621 | 1604 | |
jackalmage@6621 | 1605 | <li>conformance |
dbaron@2988 | 1606 | <ul> |
jackalmage@6621 | 1607 | <li>authoring tool, <a href="#conform-authoring-tool" |
dbaron@7102 | 1608 | title="section 8.2."><strong>8.2.</strong></a> |
jackalmage@6621 | 1609 | |
jackalmage@6621 | 1610 | <li>processor, <a href="#conform-processor" |
dbaron@7102 | 1611 | title="section 8.2."><strong>8.2.</strong></a> |
jackalmage@6621 | 1612 | |
jackalmage@6621 | 1613 | <li>style sheet, <a href="#conform-style-sheet" |
dbaron@7102 | 1614 | title="section 8.2."><strong>8.2.</strong></a> |
dbaron@2988 | 1615 | </ul> |
dbaron@2988 | 1616 | |
jackalmage@6621 | 1617 | <li><a href="#CSS-interface"><code>CSS</code></a>, <a |
dbaron@7102 | 1618 | href="#CSS-interface" title="section 7.6."><strong>7.6.</strong></a> |
dbaron@2974 | 1619 | |
jackalmage@6621 | 1620 | <li><a href="#cssconditionrule"><code>CSSConditionRule</code></a>, <a |
dbaron@7102 | 1621 | href="#cssconditionrule" title="section 7.3."><strong>7.3.</strong></a> |
jackalmage@6655 | 1622 | |
jackalmage@6655 | 1623 | <li><a href="#cssgroupingrule"><code>CSSGroupingRule</code></a>, <a |
dbaron@7102 | 1624 | href="#cssgroupingrule" title="section 7.2."><strong>7.2.</strong></a> |
dbaron@2974 | 1625 | |
jackalmage@6621 | 1626 | <li><a href="#cssmediarule"><code>CSSMediaRule</code></a>, <a |
dbaron@7102 | 1627 | href="#cssmediarule" title="section 7.4."><strong>7.4.</strong></a> |
dbaron@2974 | 1628 | |
jackalmage@6621 | 1629 | <li><a href="#csssupportsrule"><code>CSSSupportsRule</code></a>, <a |
dbaron@7102 | 1630 | href="#csssupportsrule" title="section 7.5."><strong>7.5.</strong></a> |
jackalmage@6315 | 1631 | |
dbaron@7029 | 1632 | <li>general_enclosed, <a href="#general_enclosed" |
dbaron@7102 | 1633 | title="section 6."><strong>6.</strong></a> |
dbaron@7029 | 1634 | |
jackalmage@6621 | 1635 | <li>group rule body, <a href="#group-rule-body" |
dbaron@7102 | 1636 | title="section 3."><strong>3.</strong></a> |
jackalmage@6315 | 1637 | |
dbaron@7032 | 1638 | <li>group_rule_body, <a href="#group_rule_body" |
dbaron@7102 | 1639 | title="section 3."><strong>3.</strong></a> |
dbaron@7032 | 1640 | |
dbaron@7102 | 1641 | <li>media, <a href="#media" title="section 5."><strong>5.</strong></a> |
dbaron@7032 | 1642 | |
jackalmage@6829 | 1643 | <li>‘<code class=css>@media</code>’ rule, <a href="#atmedia-rule" |
dbaron@7102 | 1644 | title="section 5."><strong>5.</strong></a> |
jackalmage@6315 | 1645 | |
dbaron@7032 | 1646 | <li>nested_statement, <a href="#nested_statement" |
dbaron@7102 | 1647 | title="section 3."><strong>3.</strong></a> |
dbaron@7032 | 1648 | |
jackalmage@6621 | 1649 | <li>support, <a href="#dfn-support" |
dbaron@7102 | 1650 | title="section 6.1."><strong>6.1.</strong></a> |
jackalmage@6315 | 1651 | |
jackalmage@6829 | 1652 | <li>supports_condition, <a href="#supports_condition" |
dbaron@7102 | 1653 | title="section 6."><strong>6.</strong></a> |
jackalmage@6315 | 1654 | |
jackalmage@6829 | 1655 | <li>supports_condition_in_parens, <a href="#supports_condition_in_parens" |
dbaron@7102 | 1656 | title="section 6."><strong>6.</strong></a> |
dbaron@2974 | 1657 | |
jackalmage@6829 | 1658 | <li>supports_conjunction, <a href="#supports_conjunction" |
dbaron@7102 | 1659 | title="section 6."><strong>6.</strong></a> |
jackalmage@6315 | 1660 | |
jackalmage@6621 | 1661 | <li>supports_declaration_condition, <a |
jackalmage@6829 | 1662 | href="#supports_declaration_condition" |
dbaron@7102 | 1663 | title="section 6."><strong>6.</strong></a> |
dbaron@2988 | 1664 | |
jackalmage@6829 | 1665 | <li>supports_disjunction, <a href="#supports_disjunction" |
dbaron@7102 | 1666 | title="section 6."><strong>6.</strong></a> |
dbaron@2988 | 1667 | |
jackalmage@6829 | 1668 | <li>supports_negation, <a href="#supports_negation" |
dbaron@7102 | 1669 | title="section 6."><strong>6.</strong></a> |
dbaron@2988 | 1670 | |
jackalmage@6829 | 1671 | <li>‘<code class=css>@supports</code>’ rule, <a |
dbaron@7102 | 1672 | href="#atsupports-rule" title="section 6."><strong>6.</strong></a> |
dbaron@2988 | 1673 | |
jackalmage@6829 | 1674 | <li>supports_rule, <a href="#supports_rule" |
dbaron@7102 | 1675 | title="section 6."><strong>6.</strong></a> |
jackalmage@6621 | 1676 | </ul> |
jackalmage@6621 | 1677 | <!--end-index--> |
dbaron@2974 | 1678 | </html> |
dbaron@2974 | 1679 | <!-- Keep this comment at the end of the file |
dbaron@2974 | 1680 | Local variables: |
dbaron@2974 | 1681 | mode: sgml |
dbaron@2974 | 1682 | sgml-declaration:"~/SGML/HTML4.decl" |
dbaron@2974 | 1683 | sgml-default-doctype-name:"html" |
dbaron@2974 | 1684 | sgml-minimize-attributes:t |
dbaron@2974 | 1685 | sgml-nofill-elements:("pre" "style" "br") |
dbaron@2974 | 1686 | sgml-live-element-indicator:t |
dbaron@2974 | 1687 | sgml-omittag:nil |
dbaron@2974 | 1688 | sgml-shorttag:nil |
dbaron@2974 | 1689 | sgml-namecase-general:t |
dbaron@2974 | 1690 | sgml-general-insert-case:lower |
dbaron@2974 | 1691 | sgml-always-quote-attributes:t |
dbaron@2974 | 1692 | sgml-indent-step:nil |
dbaron@2974 | 1693 | sgml-indent-data:t |
dbaron@2974 | 1694 | sgml-parent-document:nil |
dbaron@2974 | 1695 | sgml-exposed-tags:nil |
dbaron@2974 | 1696 | sgml-local-catalogs:nil |
dbaron@2974 | 1697 | sgml-local-ecat-files:nil |
dbaron@2974 | 1698 | End: |
dbaron@2974 | 1699 | --> |