css3-conditional/Overview.html

Wed, 06 Feb 2013 23:47:11 -0800

author
L. David Baron <dbaron@dbaron.org>
date
Wed, 06 Feb 2013 23:47:11 -0800
changeset 7381
06244e910e27
parent 7374
34b185ae3bac
child 7382
6e5d9a1539bd
permissions
-rw-r--r--

[css3-conditional] Make examples represent slighty better practices.

Addresses issue raised in
http://lists.w3.org/Archives/Public/www-style/2012Dec/0224.html
which is issue 1 in the LCWD disposition of comments.

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>&lt;link&gt;</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@6742 872 <p>These rules (and the equivalence between them) allow authors to use
dbaron@6742 873 fallback (either in the <a href="#CSS1"
dbaron@6741 874 rel=biblioentry>[CSS1]<!--{{CSS1}}--></a> sense of declarations that are
dbaron@6741 875 overridden by later declarations or with the new capabilities provided by
jackalmage@6829 876 the ‘<code class=css>@supports</code>’ rule in this specification)
jackalmage@6829 877 that works correctly for the features implemented. This applies especially
jackalmage@6829 878 to compound values; implementations must implement all parts of the value
jackalmage@6829 879 in order to consider the declaration supported, either inside a ruleset or
jackalmage@6829 880 in the declaration condition of an ‘<code class=css>@supports</code>’
jackalmage@6838 881 rule.</p>
jackalmage@6838 882 <!--
jackalmage@6838 883 <h2 id="at-document">Document queries: the '@document' rule</h2>
dbaron@3021 884
jackalmage@6838 885 <p>The <dfn>'@document' rule</dfn> is a conditional group
jackalmage@6838 886 rule whose condition depends on the
jackalmage@6838 887 <a href="#url-of-doc">URL of the document being styled</a>.
jackalmage@6838 888 This allows style sheets, particularly user style sheets, to have styles
jackalmage@6838 889 that only apply to a set of pages rather than to all pages using the
jackalmage@6838 890 style sheet.</p>
dbaron@2974 891
jackalmage@6838 892 <p class="issue">Given that this @-rule is intended primarily for user
jackalmage@6838 893 style sheets, what should this specification say about its use in author
jackalmage@6838 894 style sheets? Should it be forbidden? Should use instead be
jackalmage@6838 895 discouraged? Or should this specification remain neutral on the
jackalmage@6838 896 topic, since there are valid uses in author style sheets?</p>
dbaron@2974 897
jackalmage@6838 898 <p id="url-of-doc">The <dfn>URL of the document being styled</dfn> is
jackalmage@6838 899 the URI at which the document is located, excluding any fragment
jackalmage@6838 900 identifiers. (This means, for example, that HTTP redirects have been
jackalmage@6838 901 followed.) If the styles are being applied inside a complete document
jackalmage@6838 902 embedded into the presentation of another (e.g., [[HTML5]]'s <code
jackalmage@6838 903 class="html">iframe</code>, <code class="html">object</code>, or <code
jackalmage@6838 904 class="html">img</code> elements), the relevant URI is that of the
jackalmage@6838 905 frame, not of its container. However, if content from other documents
jackalmage@6838 906 is mixed in via mechanisms that mix content from one document into
jackalmage@6838 907 another (e.g., [[SVG11]]'s <code>use</code> element), then the
jackalmage@6838 908 address of the container document is used.</p>
dbaron@2974 909
jackalmage@6838 910 <p class="note">Note: In [[HTML5]], this is the
jackalmage@6838 911 <a href="http://dev.w3.org/html5/spec/dom.html#documents">document's address</a>
jackalmage@6838 912 of a document in a
jackalmage@6838 913 <a href="http://dev.w3.org/html5/spec/browsers.html#browsing-context">browsing context</a>.</p>
dbaron@3027 914
jackalmage@6838 915 <div class="issue">What form of normalization is done on URLs and domains
jackalmage@6838 916 before matching? In particular, this specification needs to describe:
jackalmage@6838 917 <ul>
jackalmage@6838 918 <li>what form is used for the <a href="#url-of-doc">URL of the document
jackalmage@6838 919 being styled</a> (and what has been normalized in that form)</li>
jackalmage@6838 920 <li>what normalization (if any) happens to the argument of each of the match
jackalmage@6838 921 functions before the comparison that they describe and</li>
jackalmage@6838 922 <li>whether the
jackalmage@6838 923 comparison algorithm used is string comparison or some other URL
jackalmage@6838 924 comparison algorithm.</li></ul></div>
dbaron@3027 925
jackalmage@6838 926 <p>The '@document' rule's condition is written as a
jackalmage@6838 927 comma-separated list of <dfn>URL matching functions</dfn>, and the
jackalmage@6838 928 condition evaluates to true whenever any one of those functions
jackalmage@6838 929 evaluates to true. The following URL matching functions are
jackalmage@6838 930 permitted:</p>
dbaron@3240 931
jackalmage@6838 932 <dl>
jackalmage@6838 933 <dt><dfn id="url-exact" title="url()|URL matching functions::exact">&lt;url&gt;</dfn></dt>
dbaron@3240 934
jackalmage@6838 935 <dd>
jackalmage@6838 936 <p>The 'url()' function is the <dfn>exact url matching
jackalmage@6838 937 function</dfn>. It evaluates to true whenever the <a
jackalmage@6838 938 href="#url-of-doc">URL of the document being styled</a> is exactly
jackalmage@6838 939 the URL given.</p>
dbaron@3027 940
jackalmage@6838 941 <p class="Note">The 'url()' function, since it is a core syntax
jackalmage@6838 942 element in CSS, is allowed (subject to different character
jackalmage@6838 943 limitations and thus escaping requirements) to contain an unquoted
jackalmage@6838 944 value (in addition to the string values that are allowed as
jackalmage@6838 945 arguments for all four functions).</p>
dbaron@2974 946
jackalmage@6838 947 <div class="example">
jackalmage@6838 948 <p>For example, this rule:</p>
jackalmage@6838 949 <pre>@document url("http://www.w3.org/Style/CSS/") {
dbaron@2974 950 #summary { background: yellow; color: black}
dbaron@2974 951 }</pre>
jackalmage@6838 952 <p>styles the <code class="html">summary</code> element on the page
jackalmage@6838 953 <code>http://www.w3.org/Style/CSS/</code>, but not on any other
jackalmage@6838 954 pages.</p>
jackalmage@6838 955 </div>
jackalmage@6838 956 </dd>
dbaron@2974 957
jackalmage@6838 958 <dt><dfn id="url-prefix" title="url-prefix()|URL matching functions::prefix">url-prefix(&lt;string&gt;)</dfn></dt>
dbaron@2974 959
jackalmage@6838 960 <dd>
jackalmage@6838 961 <p>The 'url-prefix()' function is the <dfn>url prefix
jackalmage@6838 962 matching function</dfn>. It evaluates to true whenever the
jackalmage@6838 963 <a href="#url-of-doc">URL of the document being styled</a>
jackalmage@6838 964 has the argument to the function as an
jackalmage@6838 965 initial substring (which is true when the two strings are equal).
jackalmage@6838 966 When the argument is the empty string, it evaluates to true for all
jackalmage@6838 967 documents.</p>
jackalmage@6838 968 <div class="example">
jackalmage@6838 969 <p>For example, this rule:</p>
jackalmage@6838 970 <pre>@document url-prefix("http://www.w3.org/Style/CSS/") {
dbaron@2974 971 #summary { background: yellow; color: black}
dbaron@2974 972 }</pre>
jackalmage@6838 973 <p>styles the <code class="html">summary</code> element on the page
jackalmage@6838 974 <code>http://www.w3.org/Style/CSS/</code> and on the page
jackalmage@6838 975 <code>http://www.w3.org/Style/CSS/Test</code>, but it does not
jackalmage@6838 976 affect the page <code>http://www.w3.org/</code> or the page
jackalmage@6838 977 <code>http://www.example.com/Style/CSS/</code>.</p>
jackalmage@6838 978 </div>
jackalmage@6838 979 </dd>
dbaron@2974 980
jackalmage@6838 981 <dt><dfn id="url-domain" title="domain()|URL matching functions::domain">domain(&lt;string&gt;)</dfn></dt>
dbaron@2974 982
jackalmage@6838 983 <dd>
jackalmage@6838 984 <p>The 'domain()' function is the <dfn>domain
jackalmage@6838 985 matching function</dfn>. It evaluates to true whenever
jackalmage@6838 986 the <a href="#url-of-doc">URL of the document being styled</a>
jackalmage@6838 987 has a host subcomponent (as defined in [[!URI]])
jackalmage@6838 988 and that host subcomponent is exactly the argument to the
jackalmage@6838 989 'domain()' function or a final substring of the host
jackalmage@6838 990 component is a period (U+002E) immediately followed by the argument
jackalmage@6838 991 to the 'domain()' function.</p>
jackalmage@6838 992 <div class="example">
jackalmage@6838 993 <p>For example, this rule:</p>
jackalmage@6838 994 <pre>@document domain("w3.org") {
dbaron@2974 995 body { font-size: 16px ! important }
dbaron@2974 996 }</pre>
jackalmage@6838 997 <p>changes the font size of the body element for pages such as
dbaron@2974 998 <code>http://www.w3.org/Style/CSS/</code> and
dbaron@2974 999 <code>http://w3.org/Style/CSS/</code> and
jackalmage@6838 1000 <code>http://lists.w3.org/Archives/Public/www-style/</code>
jackalmage@6838 1001 but it does not affect the page
jackalmage@6838 1002 <code>http://www.example.com/Style/CSS/</code>.</p>
dbaron@2974 1003 </div>
jackalmage@6838 1004 </dd>
dbaron@2974 1005
jackalmage@6838 1006 <dt><dfn id="url-regexp" title="regexp()|URL matching functions::regular expression">regexp(&lt;string&gt;)</dfn></dt>
dbaron@2974 1007
jackalmage@6838 1008 <dd>
dbaron@2986 1009 <p>The contents of the &lt;string&gt; argument <strong>must</strong>
jackalmage@6838 1010 match the JavaScript <code>Pattern</code> production
jackalmage@6838 1011 ([[!ECMA-262-5.1]], section 15.10.1). However,
jackalmage@6838 1012 failing to do so is not a CSS syntax error and does not trigger any
jackalmage@6838 1013 error handling for CSS syntax errors.</p>
dbaron@2986 1014
jackalmage@6838 1015 <p>The ''regexp()'' function evaluates to true whenever the string
jackalmage@6838 1016 argument compiled as a JavaScript regular expression with the
jackalmage@6838 1017 <code>global</code>, <code>ignoreCase</code> and
jackalmage@6838 1018 <code>multiline</code> flags <em>disabled</em>
jackalmage@6838 1019 (see [[!ECMA-262-5.1]], sections 15.10.7.2 through 15.10.7.4)
jackalmage@6838 1020 compiles successfully and the resulting regular expression matches
jackalmage@6838 1021 the entirety of the
jackalmage@6838 1022 <a href="#url-of-doc">URL of the document being styled</a>.</p>
dbaron@2986 1023
jackalmage@6838 1024 <p class="note">Note that regular expression must match the entire
jackalmage@6838 1025 URL, not just a part of it.</p>
dbaron@2974 1026
jackalmage@6838 1027 <p class="note">Note that this definition intentionally matches the
jackalmage@6838 1028 behavior of the <a
jackalmage@6838 1029 href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#attr-input-pattern"><code class="html">pattern</code>
jackalmage@6838 1030 attribute</a> on the <code class="html">input</code> element
jackalmage@6838 1031 in [[HTML5]].</p>
dbaron@2986 1032
jackalmage@6838 1033 <div class="example">
jackalmage@6838 1034 <p>For example, this rule:</p>
jackalmage@6838 1035 <pre>@document regexp("http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/") {
dbaron@2986 1036 body { font-size: 20px ! important }
dbaron@2986 1037 }</pre>
jackalmage@6838 1038 <p>changes the font size of the body element for pages such as
jackalmage@6838 1039 <code>http://www.w3.org/TR/2011/PR-CSS2-20110412/</code>.</p>
jackalmage@6838 1040 <p class="note">Note that the backslashes in the regular
jackalmage@6838 1041 expression require CSS escaping as ''\\''.</p>
jackalmage@6838 1042 </div>
jackalmage@6838 1043 </dd>
dbaron@2986 1044
jackalmage@6838 1045 </dl>
dbaron@2986 1046
jackalmage@6838 1047 <p>Implementations <strong>must</strong> treat any unknown URL matching
jackalmage@6838 1048 functions as a syntax error, and thus ignore the '@document' rule.
jackalmage@6838 1049 <span class="issue">Should we instead have more complicated error
jackalmage@6838 1050 handling rules to make forward-compatibility work differently, or is
jackalmage@6838 1051 this rule the best solution for such future expansion anyway?</span></p>
dbaron@2974 1052
jackalmage@6838 1053 <div class="issue">This syntax doesn't offer any ability to do negations,
jackalmage@6838 1054 which has been requested in <a
jackalmage@6838 1055 href="https://bugzilla.mozilla.org/show_bug.cgi?id=349813">Mozilla bug
jackalmage@6838 1056 349813</a>. Use cases that people have wanted negations for
jackalmage@6838 1057 include:
jackalmage@6838 1058 <ul>
jackalmage@6838 1059 <li>User style sheets that want a particular rule in general, but know
jackalmage@6838 1060 that that rule does more harm than good on specific sites.</li>
jackalmage@6838 1061 <li>Authors who have a rule that they want to apply to most of their
jackalmage@6838 1062 pages, but wish to make a few exceptions for.</li>
jackalmage@6838 1063 </ul>
jackalmage@6838 1064 </div>
dbaron@2974 1065
jackalmage@6838 1066 <p>This extends the lexical scanner in the
jackalmage@6838 1067 <a href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a>
jackalmage@6838 1068 ([[!CSS21]], Appendix G) by adding:
jackalmage@6838 1069 <pre>@{D}{O}{C}{U}{M}{E}{N}{T} {return DOCUMENT_SYM;}</pre>
jackalmage@6838 1070 <p>and the grammar by adding</p>
dbaron@7032 1071 <pre><dfn>document_rule</dfn>
dbaron@7032 1072 : DOCUMENT_SYM S+ <i>url_match_fn</i> ( "," S* <i>url_match_fn</i> )* <i>group_rule_body</i>
dbaron@2974 1073 ;
dbaron@2974 1074
dbaron@7032 1075 <dfn>url_match_fn</dfn>
dbaron@6740 1076 : (URI | FUNCTION S* STRING S* ')' ) S*
dbaron@2974 1077 ;</pre>
jackalmage@6838 1078 -->
dbaron@2974 1079
jackalmage@6838 1080 <h2 id=apis><span class=secno>7. </span>APIs</h2>
dbaron@2974 1081
jackalmage@6838 1082 <h3 id=extentions-to-cssrule-interface><span class=secno>7.1. </span>
jackalmage@6617 1083 Extensions to the <code>CSSRule</code> interface</h3>
dbaron@3416 1084
jackalmage@6315 1085 <p>The <code>CSSRule</code> interface is extended as follows:
jackalmage@6315 1086
jackalmage@6315 1087 <pre class=idl>partial interface CSSRule {
jackalmage@6315 1088 const unsigned short SUPPORTS_RULE = 12;
jackalmage@6838 1089 <!--
jackalmage@6315 1090 const unsigned short DOCUMENT_RULE = 13;
jackalmage@6838 1091 -->
jackalmage@6315 1092 }</pre>
jackalmage@6315 1093
jackalmage@6838 1094 <h3 id=the-cssgroupingrule-interface><span class=secno>7.2. </span> The <a
jackalmage@6655 1095 href="#cssgroupingrule"><code>CSSGroupingRule</code></a> interface</h3>
jackalmage@6655 1096
jackalmage@6655 1097 <p>The <dfn id=cssgroupingrule><code>CSSGroupingRule</code></dfn> interface
jackalmage@6655 1098 represents an at-rule that contains other rules nested inside itself.
jackalmage@6655 1099
jackalmage@6655 1100 <pre class=idl>interface CSSGroupingRule : CSSRule {
dbaron@7102 1101 readonly attribute <a
dbaron@7102 1102 href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRuleList">CSSRuleList</a> cssRules;
jackalmage@6655 1103 unsigned long insertRule (DOMString rule, unsigned long index);
jackalmage@6655 1104 void deleteRule (unsigned long index);
jackalmage@6655 1105 }</pre>
jackalmage@6655 1106
jackalmage@6655 1107 <dl class=idl-attributes>
dbaron@7102 1108 <dt><code>cssRules</code> of type <code><a
dbaron@7102 1109 href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRuleList">CSSRuleList</a></code>,
dbaron@7102 1110 readonly
jackalmage@6655 1111
jackalmage@6655 1112 <dd>The <code>cssRules</code> attribute must return a
jackalmage@6655 1113 <code>CSSRuleList</code> object for the list of CSS rules nested inside
jackalmage@6655 1114 the grouping rule.
jackalmage@6655 1115 </dl>
jackalmage@6655 1116
jackalmage@6655 1117 <dl class=idl-methods>
jackalmage@6655 1118 <dt><code>insertRule(DOMString rule, unsigned long index)</code>, returns
jackalmage@6655 1119 <code>unsigned long</code>
jackalmage@6655 1120
dbaron@7104 1121 <dd> The <code>insertRule</code> operation must insert a CSS rule
dbaron@7104 1122 <var>rule</var> into the CSS rule list returned by <code>cssRules</code>,
dbaron@7104 1123 such that the inserted rule will be at position <var>index</var>, and any
dbaron@7104 1124 rules previously at <var>index</var> or higher will increase their index
dbaron@7104 1125 by one. It must throw INDEX_SIZE_ERR if index is greater than
dbaron@7104 1126 <code>cssRules.length</code>. It must throw SYNTAX_ERR if the rule has a
dbaron@7104 1127 syntax error and is unparseable; this does not include syntax errors
dbaron@7104 1128 handled by error handling rules for constructs inside of the rule. It
dbaron@7104 1129 must throw HIERARCHY_REQUEST_ERR if the rule cannot be inserted at the
dbaron@7104 1130 location specified, for example, if an ‘<code
dbaron@7104 1131 class=css>@import</code>’ rule is inserted inside a group rule. <span
dbaron@7104 1132 class=issue>This needs to specify what to do if <code>rule</code> is the
dbaron@7104 1133 empty string, if it contains more than one CSS rule, or if it contains
dbaron@7104 1134 garbage after a valid rule.</span>
jackalmage@6655 1135
jackalmage@6655 1136 <dt><code>deleteRule (unsigned long index)</code>, return
jackalmage@6655 1137 <code>void</code>
jackalmage@6655 1138
dbaron@7104 1139 <dd> The <code>deleteRule</code> operation must remove a CSS rule from the
dbaron@7104 1140 CSS rule list returned by <code>cssRules</code> at <var>index</var>. It
dbaron@7104 1141 must throw INDEX_SIZE_ERR if index is greater than or equal to
dbaron@7104 1142 <code>cssRules.length</code>.
jackalmage@6655 1143 </dl>
jackalmage@6655 1144
jackalmage@6838 1145 <h3 id=the-cssconditionrule-interface><span class=secno>7.3. </span> The <a
jackalmage@6618 1146 href="#cssconditionrule"><code>CSSConditionRule</code></a> interface</h3>
jackalmage@6315 1147
jackalmage@6618 1148 <p>The <dfn id=cssconditionrule><code>CSSConditionRule</code></dfn>
jackalmage@6620 1149 interface represents all the "conditional" at-rules, which consist of a
jackalmage@6620 1150 condition and a statement block.
dbaron@6323 1151
jackalmage@6655 1152 <pre class=idl>interface CSSConditionRule : CSSGroupingRule {
dbaron@6324 1153 attribute DOMString conditionText;
jackalmage@6315 1154 }</pre>
jackalmage@6315 1155
jackalmage@6315 1156 <dl class=idl-attributes>
jackalmage@6619 1157 <dt><code>conditionText</code> of type <code>DOMString</code>
jackalmage@6315 1158
dbaron@6732 1159 <dd>
dbaron@6732 1160 <p>The <code>conditionText</code> attribute represents the condition of
dbaron@6732 1161 the rule. Since what this condition does varies between the derived
dbaron@6732 1162 interfaces of <a
dbaron@6732 1163 href="#cssconditionrule"><code>CSSConditionRule</code></a>, those
dbaron@6732 1164 derived interfaces may specify different behavior for this attribute
dbaron@6732 1165 (see, for example, <a href="#cssmediarule"><code>CSSMediaRule</code></a>
dbaron@6732 1166 below). In the absence of such rule-specific behavior, the following
dbaron@6732 1167 rules apply:
dbaron@6732 1168
dbaron@6732 1169 <p>The <code>conditionText</code> attribute, on getting, must return the
dbaron@6732 1170 result of serializing the associated condition.
dbaron@6732 1171
dbaron@6324 1172 <p>On setting the <code>conditionText</code> attribute these steps must
dbaron@6324 1173 be run:
jackalmage@6315 1174
jackalmage@6315 1175 <ol>
jackalmage@6315 1176 <li>Trim the given value of white space.
jackalmage@6315 1177
jackalmage@6618 1178 <li>If the given value matches the grammar of the appropriate condition
jackalmage@6618 1179 production for the given rule, replace the associated CSS condition
jackalmage@6618 1180 with the given value.
jackalmage@6315 1181
jackalmage@6315 1182 <li>Otherwise, do nothing.
jackalmage@6315 1183 </ol>
jackalmage@6315 1184 </dl>
jackalmage@6315 1185
jackalmage@6838 1186 <h3 id=the-cssmediarule-interface><span class=secno>7.4. </span> The <a
jackalmage@6618 1187 href="#cssmediarule"><code>CSSMediaRule</code></a> interface</h3>
jackalmage@6315 1188
jackalmage@6618 1189 <p>The <dfn id=cssmediarule><code>CSSMediaRule</code></dfn> interface
jackalmage@6618 1190 represents a ‘<code class=css>@media</code>’ rule:
jackalmage@6315 1191
jackalmage@6618 1192 <pre class=idl>interface CSSMediaRule : CSSConditionRule {
dbaron@7102 1193 readonly attribute <a
dbaron@7102 1194 href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-MediaList">MediaList</a> media;
jackalmage@6618 1195 }</pre>
jackalmage@6618 1196
jackalmage@6618 1197 <dl class=idl-attributes>
dbaron@7102 1198 <dt><a href="#media"><code>media</code></a> of type <code><a
dbaron@7102 1199 href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-MediaList">MediaList</a></code>,
dbaron@7102 1200 readonly
jackalmage@6618 1201
dbaron@7032 1202 <dd>The <a href="#media"><code>media</code></a> attribute must return a
dbaron@7032 1203 <code>MediaList</code> object for the list of media queries specified
dbaron@7032 1204 with the ‘<code class=css>@media</code>’ rule.
jackalmage@6618 1205
jackalmage@6619 1206 <dt><code>conditionText</code> of type <code>DOMString</code>
jackalmage@6618 1207
jackalmage@6618 1208 <dd>The <code>conditionText</code> attribute (defined on the <a
jackalmage@6618 1209 href="#cssconditionrule"><code>CSSConditionRule</code></a> parent rule),
jackalmage@6618 1210 on getting, must return the value of <code>media.mediaText</code> on the
jackalmage@6618 1211 rule.
jackalmage@6621 1212 <p>Setting the <code>conditionText</code> attribute must set the
jackalmage@6621 1213 <code>media.mediaText</code> attribute on the rule.
jackalmage@6621 1214 </dl>
jackalmage@6618 1215
jackalmage@6838 1216 <h3 id=the-csssupportsrule-interface><span class=secno>7.5. </span> The <a
jackalmage@6621 1217 href="#csssupportsrule"><code>CSSSupportsRule</code></a> interface</h3>
jackalmage@6618 1218
jackalmage@6621 1219 <p>The <dfn id=csssupportsrule><code>CSSSupportsRule</code></dfn> interface
jackalmage@6829 1220 represents a ‘<code class=css>@supports</code>’ rule.
jackalmage@6618 1221
jackalmage@6621 1222 <pre class=idl>interface CSSSupportsRule : CSSConditionRule {
jackalmage@6618 1223 }</pre>
jackalmage@6838 1224 <!--
jackalmage@6838 1225 <h3 id="the-cssdocumentrule-interface">
jackalmage@6838 1226 The <code>CSSDocumentRule</code> interface</h3>
jackalmage@6618 1227
jackalmage@6838 1228 <p>The <dfn><code>CSSDocumentRule</code></dfn> interface represents a ''@document'' rule.</p>
jackalmage@6618 1229
jackalmage@6838 1230 <pre class='idl'>interface CSSDocumentRule : CSSConditionRule {
jackalmage@6838 1231 }</pre>
jackalmage@6838 1232 -->
jackalmage@6618 1233
jackalmage@6838 1234 <h3 id=the-css-interface><span class=secno>7.6. </span> The <a
jackalmage@6621 1235 href="#CSS-interface"><code>CSS</code></a> interface, and the <code
jackalmage@6621 1236 title="">supports()</code> function</h3>
jackalmage@6618 1237
jackalmage@6621 1238 <p>The <dfn id=CSS-interface><code>CSS</code></dfn> interface holds useful
jackalmage@6621 1239 CSS-related functions that do not belong elsewhere.
jackalmage@6315 1240
jackalmage@6621 1241 <pre class=idl>interface CSS {
dbaron@7043 1242 static boolean supports(DOMString property, DOMString value);
dbaron@7105 1243 static boolean supports(DOMString conditionText);
jackalmage@6620 1244 }</pre>
jackalmage@6620 1245
jackalmage@6621 1246 <dl class=idl-methods>
jackalmage@6621 1247 <dt><code>supports(DOMString property, DOMString value)</code>, returns
jackalmage@6621 1248 <code>boolean</code>
jackalmage@6620 1249
jackalmage@6625 1250 <dt><code>supports(DOMString conditionText)</code>, returns
jackalmage@6621 1251 <code>boolean</code>
jackalmage@6620 1252
jackalmage@6621 1253 <dd> When the <code title="">supports()</code> method is invoked with two
jackalmage@6621 1254 arguments <var>property</var> and <var>value</var>, it must return
jackalmage@6621 1255 <code>true</code> if <var>property</var> is a literal match for the name
jackalmage@6621 1256 of a CSS property that the UA supports, and <var>value</var> would be
jackalmage@6621 1257 successfully parsed as a supported value for that property. Otherwise, it
jackalmage@6621 1258 must return <code>false</code>.
jackalmage@6625 1259 <p> When invoked with a single <var>conditionText</var> argument, it must
jackalmage@6625 1260 return <code>true</code> if <var>conditionText</var>, when parsed and
jackalmage@6625 1261 evaluated as a <a
dbaron@7031 1262 href="#supports_condition"><code>supports_condition</code></a>, would
jackalmage@6625 1263 return true. Otherwise, it must return <code>false</code>.
jackalmage@6621 1264 </dl>
dbaron@3417 1265
fantasai@6831 1266 <h2 class=no-num id=grammar>Grammar</h2>
fantasai@6831 1267
fantasai@6831 1268 <p>In order to allow these new @-rules in CSS style sheets, this
fantasai@6831 1269 specification modifies the <code>stylesheet</code> production in the <a
fantasai@6831 1270 href="http://www.w3.org/TR/CSS21/grammar.html">Appendix G</a> grammar of
fantasai@6831 1271 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> by replacing
dbaron@7032 1272 the <a href="#media"><code>media</code></a> production defined in <a
dbaron@7032 1273 href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> with the <a
dbaron@7032 1274 href="#media"><code>media</code></a> production defined in this one, and
dbaron@7032 1275 additionally inserting <code>| supports_rule</code> alongside
dbaron@7032 1276 <code>ruleset | media | page</code>.
fantasai@6831 1277
jackalmage@6838 1278 <h2 id=conformance><span class=secno>8. </span>Conformance</h2>
dbaron@3416 1279
jackalmage@6838 1280 <h3 id=base-modules><span class=secno>8.1. </span>Base Modules</h3>
dbaron@3022 1281
jackalmage@6621 1282 <p>This specification defines conformance in terms of base modules, which
jackalmage@6621 1283 are modules that this specification builds on top of. The base modules of
jackalmage@6621 1284 this module are:
dbaron@3022 1285
jackalmage@6621 1286 <ul>
jackalmage@6621 1287 <li><a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
jackalmage@6621 1288 </ul>
jackalmage@6621 1289
jackalmage@6621 1290 <p>All of the conformance requirements of all base modules are incorporated
jackalmage@6621 1291 as conformance requirements of this module, except where overridden by
jackalmage@6621 1292 this module.
jackalmage@6621 1293
jackalmage@6621 1294 <p>Additionally, all conformance requirements related to validity of syntax
jackalmage@6621 1295 in this module and all of its base modules are to be interpreted as though
jackalmage@6621 1296 all syntax in all of those modules is valid.
jackalmage@6621 1297
jackalmage@6621 1298 <div class=example>
jackalmage@6621 1299 <p>For example, this means that grammar presented in modules other than <a
jackalmage@6621 1300 href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> must obey the
jackalmage@6621 1301 requirements that <a href="#CSS21"
jackalmage@6621 1302 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> defines for the parsing of
jackalmage@6621 1303 properties, and that requirements for handling invalid syntax in <a
jackalmage@6621 1304 href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> do not treat
jackalmage@6621 1305 syntax added by other modules as invalid.
jackalmage@6621 1306 </div>
jackalmage@6621 1307
jackalmage@6621 1308 <p>Additionally, the set of valid syntax can be increased by the
jackalmage@6621 1309 conformance of a style sheet or processor to additional modules; use of
jackalmage@6621 1310 such syntax does not make a style sheet nonconformant and failure to treat
jackalmage@6621 1311 such syntax as invalid does not make a processor nonconformant.
jackalmage@6621 1312
jackalmage@6838 1313 <h3 id=conformance-classes><span class=secno>8.2. </span>Conformance
jackalmage@6621 1314 Classes</h3>
jackalmage@6621 1315
jackalmage@6621 1316 <p>Conformance to the CSS Conditional Rules Module is defined for three
jackalmage@6621 1317 conformance classes:
jackalmage@6621 1318
jackalmage@6621 1319 <dl>
jackalmage@6621 1320 <dt><dfn id=conform-style-sheet title="conformance::style sheet">style
jackalmage@6621 1321 sheet</dfn>
jackalmage@6621 1322
jackalmage@6621 1323 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
jackalmage@6621 1324 style sheet</a>.
jackalmage@6621 1325
jackalmage@6621 1326 <dt><dfn id=conform-processor
jackalmage@6621 1327 title="conformance::processor">processor</dfn>
jackalmage@6621 1328
jackalmage@6621 1329 <dd>A tool that reads CSS style sheets: it may be a renderer or <a
jackalmage@6621 1330 href="http://www.w3.org/TR/CSS21/conform.html#user-agent">user-agent</a>
jackalmage@6621 1331 that interprets the semantics of a style sheet and renders documents that
jackalmage@6621 1332 use style sheets, or it may be a validator that checks style sheets.
jackalmage@6621 1333
jackalmage@6621 1334 <dt><dfn id=conform-authoring-tool
jackalmage@6621 1335 title="conformance::authoring tool">authoring tool</dfn>
jackalmage@6621 1336
jackalmage@6621 1337 <dd>A tool that writes a style sheet.
jackalmage@6621 1338 </dl>
jackalmage@6621 1339
jackalmage@6621 1340 <p>A style sheet is conformant to the CSS Conditional Rules Module if it
jackalmage@6621 1341 meets all of the conformance requirements in the module that are described
jackalmage@6621 1342 as requirements of style sheets.
jackalmage@6621 1343
jackalmage@6621 1344 <p>A processor is conformant to the CSS Conditional Rules Module if it
jackalmage@6621 1345 meets all applicable conformance requirements in the module that are
jackalmage@6621 1346 described as requirements of processors. In general, all requirements are
jackalmage@6621 1347 applicable to renderers. Requirements concerning a part of CSS not
jackalmage@6621 1348 performed by a processor are not applicable, e.g., requirements related to
jackalmage@6621 1349 rendering are not applicable to a validator. The inability of a processor
jackalmage@6621 1350 to correctly render a document due to limitations of the device does not
jackalmage@6621 1351 make it non-conformant. (For example, a renderer is not required to render
jackalmage@6621 1352 color on a monochrome monitor.)
jackalmage@6621 1353
jackalmage@6621 1354 <p>An authoring tool is conformant to the CSS Conditional Rules Module if
jackalmage@6621 1355 it writes style sheets that conform to the module and (if it reads CSS) it
jackalmage@6621 1356 is a conformant processor.
jackalmage@6621 1357
jackalmage@6838 1358 <h3 id=partial><span class=secno>8.3. </span> Partial Implementations</h3>
jackalmage@6621 1359
jackalmage@6621 1360 <p>So that authors can exploit the forward-compatible parsing rules to
jackalmage@6621 1361 assign fallback values, CSS renderers <strong>must</strong> treat as
jackalmage@6621 1362 invalid (and <a
jackalmage@6621 1363 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
jackalmage@6621 1364 appropriate</a>) any at-rules, properties, property values, keywords, and
jackalmage@6621 1365 other syntactic constructs for which they have no usable level of support.
jackalmage@6621 1366 In particular, user agents <strong>must not</strong> selectively ignore
jackalmage@6621 1367 unsupported component values and honor supported values in a single
jackalmage@6621 1368 multi-value property declaration: if any value is considered invalid (as
jackalmage@6621 1369 unsupported values must be), CSS requires that the entire declaration be
jackalmage@6621 1370 ignored.
jackalmage@6621 1371
jackalmage@6838 1372 <h3 id=experimental><span class=secno>8.4. </span>Experimental
jackalmage@6621 1373 Implementations</h3>
jackalmage@6621 1374
jackalmage@6621 1375 <p>To avoid clashes with future CSS features, the CSS specifications
jackalmage@6621 1376 reserve a <a
jackalmage@6621 1377 href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
jackalmage@6621 1378 syntax</a> for proprietary property and value extensions to CSS. The CSS
jackalmage@6621 1379 Working Group recommends that experimental implementations of features in
jackalmage@6621 1380 CSS Working Drafts also use vendor-prefixed property or value names. This
jackalmage@6621 1381 avoids any incompatibilities with future changes in the draft. Once a
jackalmage@6621 1382 specification reaches the Candidate Recommendation stage, implementors
jackalmage@6621 1383 should implement the non-prefixed syntax for any feature they consider to
jackalmage@6621 1384 be correctly implemented according to spec.
jackalmage@6621 1385
jackalmage@6838 1386 <h3 id=cr-exit-criteria><span class=secno>8.5. </span>CR Exit Criteria</h3>
jackalmage@6621 1387
jackalmage@6621 1388 <p>For this specification to be advanced to Proposed Recommendation, there
jackalmage@6621 1389 must be at least two independent, interoperable implementations of each
jackalmage@6621 1390 feature. Each feature may be implemented by a different set of products,
jackalmage@6621 1391 there is no requirement that all features be implemented by a single
jackalmage@6621 1392 product. For the purposes of this criterion, we define the following
jackalmage@6621 1393 terms:
jackalmage@6621 1394
jackalmage@6621 1395 <dl>
jackalmage@6621 1396 <dt>independent
jackalmage@6621 1397
jackalmage@6621 1398 <dd>each implementation must be developed by a different party and cannot
jackalmage@6621 1399 share, reuse, or derive from code used by another qualifying
jackalmage@6621 1400 implementation. Sections of code that have no bearing on the
jackalmage@6621 1401 implementation of this specification are exempt from this requirement.
jackalmage@6621 1402
jackalmage@6621 1403 <dt>interoperable
jackalmage@6621 1404
jackalmage@6621 1405 <dd>passing the respective test case(s) in the official CSS test suite,
jackalmage@6621 1406 or, if the implementation is not a Web browser, an equivalent test. Every
jackalmage@6621 1407 relevant test in the test suite should have an equivalent test created if
jackalmage@6621 1408 such a user agent (UA) is to be used to claim interoperability. In
jackalmage@6621 1409 addition if such a UA is to be used to claim interoperability, then there
jackalmage@6621 1410 must one or more additional UAs which can also pass those equivalent
jackalmage@6621 1411 tests in the same way for the purpose of interoperability. The equivalent
jackalmage@6621 1412 tests must be made publicly available for the purposes of peer review.
jackalmage@6621 1413
jackalmage@6621 1414 <dt>implementation
jackalmage@6621 1415
jackalmage@6621 1416 <dd>a user agent which:
jackalmage@6621 1417 <ol class=inline>
jackalmage@6621 1418 <li>implements the specification.
jackalmage@6621 1419
jackalmage@6621 1420 <li>is available to the general public. The implementation may be a
jackalmage@6621 1421 shipping product or other publicly available version (i.e., beta
jackalmage@6621 1422 version, preview release, or “nightly build”). Non-shipping product
jackalmage@6621 1423 releases must have implemented the feature(s) for a period of at least
jackalmage@6621 1424 one month in order to demonstrate stability.
jackalmage@6621 1425
jackalmage@6621 1426 <li>is not experimental (i.e., a version specifically designed to pass
jackalmage@6621 1427 the test suite and is not intended for normal usage going forward).
jackalmage@6621 1428 </ol>
jackalmage@6621 1429 </dl>
jackalmage@6621 1430
jackalmage@6621 1431 <p>The specification will remain Candidate Recommendation for at least six
jackalmage@6621 1432 months.
jackalmage@6621 1433
jackalmage@6838 1434 <h2 id=changes><span class=secno>9. </span> Changes</h2>
jackalmage@6621 1435
fantasai@6831 1436 <p>The following (non-editorial) changes were made to this specification
fantasai@6831 1437 since the <a
fantasai@6831 1438 href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/">11
fantasai@6831 1439 September 2012 Working Draft</a>:
fantasai@6831 1440
fantasai@6831 1441 <ul>
fantasai@6846 1442 <li>Removed ‘<code class=css>@document</code>’ rule; it has been
fantasai@6846 1443 deferred to Level 4.
fantasai@6846 1444
fantasai@6845 1445 <li>Allow functional notation in ‘<code class=css>@supports</code>’
fantasai@6845 1446 queries to be valid (to allow for future extensions), but treat such
fantasai@6845 1447 notations as always being false.
fantasai@6845 1448
fantasai@6831 1449 <li>Corrected the grammar as follows:
fantasai@6831 1450 <pre>
fantasai@6831 1451 - : SUPPORTS_SYM S+ supports_condition group_rule_body
fantasai@6831 1452 + : SUPPORTS_SYM S* supports_condition group_rule_body
fantasai@6831 1453 </pre>
fantasai@6842 1454
fantasai@6842 1455 <pre>
fantasai@6842 1456 - : (URI | FUNCTION) S*
fantasai@6842 1457 + : (URI | FUNCTION S* STRING S* ')' ) S*
fantasai@6842 1458 </pre>
fantasai@6842 1459
fantasai@6842 1460 <li>Switched "and", "or", and "not" keywords to use appropriate
fantasai@6842 1461 productions rather than literals.
fantasai@6846 1462
fantasai@6846 1463 <li>Clarified definition of support used for interpreting ‘<code
fantasai@6846 1464 class=css>@support</code>’ rules and its relationship to CSS
fantasai@6846 1465 forwards-compatible parsing rules.
fantasai@6831 1466 </ul>
jackalmage@6621 1467
jackalmage@6621 1468 <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
jackalmage@6621 1469
jackalmage@6621 1470 <p> Thanks to the ideas and feedback from Tab Atkins, <span lang=tr>Tantek
jackalmage@6621 1471 Çelik</span>, Alex Danilo, Elika Etemad, Pascal Germroth, <span
dbaron@7044 1472 lang=de>Björn Höhrmann</span>, Paul Irish, <span lang=nl>Anne van
dbaron@7044 1473 Kesteren</span>, Vitor Menezes, Alex Mogilevsky, Chris Moschini, Simon
dbaron@7044 1474 Sapin, Ben Ward, Zack Weinberg, Estelle Weyl, Boris Zbarsky, and all the
dbaron@7044 1475 rest of the <a
jackalmage@6621 1476 href="http://lists.w3.org/Archives/Public/www-style/">www-style</a>
jackalmage@6621 1477 community.
jackalmage@6621 1478
jackalmage@6621 1479 <h2 class=no-num id=references>References</h2>
jackalmage@6621 1480
jackalmage@6621 1481 <h3 class=no-num id=normative-references>Normative references</h3>
jackalmage@6621 1482 <!--begin-normative-->
jackalmage@6621 1483 <!-- Sorted by label -->
jackalmage@6621 1484
jackalmage@6621 1485 <dl class=bibliography>
jackalmage@6621 1486 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
jackalmage@6621 1487 <!---->
jackalmage@6621 1488
jackalmage@6621 1489 <dt id=CSS21>[CSS21]
jackalmage@6621 1490
jackalmage@6621 1491 <dd>Bert Bos; et al. <a
dbaron@7122 1492 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
jackalmage@6621 1493 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
jackalmage@6621 1494 2011. W3C Recommendation. URL: <a
dbaron@7122 1495 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
jackalmage@6621 1496 </dd>
jackalmage@6621 1497 <!---->
jackalmage@6621 1498
jackalmage@6621 1499 <dt id=CSS3-ANIMATIONS>[CSS3-ANIMATIONS]
jackalmage@6621 1500
jackalmage@6621 1501 <dd>Dean Jackson; et al. <a
jackalmage@6621 1502 href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/"><cite>CSS
jackalmage@6621 1503 Animations.</cite></a> 3 April 2012. W3C Working Draft. (Work in
jackalmage@6621 1504 progress.) URL: <a
jackalmage@6621 1505 href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/">http://www.w3.org/TR/2012/WD-css3-animations-20120403/</a>
jackalmage@6621 1506 </dd>
jackalmage@6621 1507 <!---->
jackalmage@6621 1508
jackalmage@6621 1509 <dt id=CSS3-FONTS>[CSS3-FONTS]
jackalmage@6621 1510
jackalmage@6621 1511 <dd>John Daggett. <a
dbaron@7372 1512 href="http://www.w3.org/TR/2012/WD-css3-fonts-20121211/"><cite>CSS Fonts
dbaron@7372 1513 Module Level 3.</cite></a> 11 December 2012. W3C Working Draft. (Work in
jackalmage@6621 1514 progress.) URL: <a
dbaron@7372 1515 href="http://www.w3.org/TR/2012/WD-css3-fonts-20121211/">http://www.w3.org/TR/2012/WD-css3-fonts-20121211/</a>
jackalmage@6621 1516 </dd>
jackalmage@6621 1517 <!---->
jackalmage@6621 1518
jackalmage@6621 1519 <dt id=MEDIAQ>[MEDIAQ]
jackalmage@6621 1520
jackalmage@6621 1521 <dd>Florian Rivoal. <a
jackalmage@6621 1522 href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media
jackalmage@6621 1523 Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a
jackalmage@6621 1524 href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a>
jackalmage@6621 1525 </dd>
jackalmage@6621 1526 <!---->
jackalmage@6621 1527
jackalmage@6621 1528 <dt id=RFC2119>[RFC2119]
jackalmage@6621 1529
jackalmage@6621 1530 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
jackalmage@6621 1531 words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
jackalmage@6621 1532 RFC 2119. URL: <a
jackalmage@6621 1533 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
jackalmage@6621 1534 </dd>
jackalmage@6621 1535 <!---->
jackalmage@6621 1536 </dl>
jackalmage@6621 1537 <!--end-normative-->
jackalmage@6621 1538
jackalmage@6621 1539 <h3 class=no-num id=other-references>Other references</h3>
jackalmage@6621 1540 <!--begin-informative-->
jackalmage@6621 1541 <!-- Sorted by label -->
jackalmage@6621 1542
jackalmage@6621 1543 <dl class=bibliography>
jackalmage@6621 1544 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
jackalmage@6621 1545 <!---->
jackalmage@6621 1546
jackalmage@6621 1547 <dt id=CSS1>[CSS1]
jackalmage@6621 1548
jackalmage@6621 1549 <dd>Håkon Wium Lie; Bert Bos. <a
jackalmage@6621 1550 href="http://www.w3.org/TR/2008/REC-CSS1-20080411"><cite>Cascading Style
jackalmage@6621 1551 Sheets (CSS1) Level 1 Specification.</cite></a> 11 April 2008. W3C
jackalmage@6621 1552 Recommendation. URL: <a
jackalmage@6621 1553 href="http://www.w3.org/TR/2008/REC-CSS1-20080411">http://www.w3.org/TR/2008/REC-CSS1-20080411</a>
jackalmage@6621 1554 </dd>
jackalmage@6621 1555 <!---->
jackalmage@6621 1556
jackalmage@6621 1557 <dt id=CSS3-TRANSITIONS>[CSS3-TRANSITIONS]
jackalmage@6621 1558
jackalmage@6621 1559 <dd>Dean Jackson; et al. <a
jackalmage@6621 1560 href="http://www.w3.org/TR/2012/WD-css3-transitions-20120403/"><cite>CSS
jackalmage@6621 1561 Transitions.</cite></a> 3 April 2012. W3C Working Draft. (Work in
jackalmage@6621 1562 progress.) URL: <a
jackalmage@6621 1563 href="http://www.w3.org/TR/2012/WD-css3-transitions-20120403/">http://www.w3.org/TR/2012/WD-css3-transitions-20120403/</a>
jackalmage@6621 1564 </dd>
jackalmage@6621 1565 <!---->
jackalmage@6621 1566 </dl>
jackalmage@6621 1567 <!--end-informative-->
jackalmage@6621 1568
jackalmage@6621 1569 <h2 class=no-num id=index>Index</h2>
jackalmage@6621 1570 <!--begin-index-->
jackalmage@6621 1571
jackalmage@6621 1572 <ul class=indexlist>
jackalmage@6621 1573 <li>conditional group rules, <a href="#conditional-group-rules"
dbaron@7102 1574 title="section 2."><strong>2.</strong></a>
jackalmage@6621 1575
jackalmage@6621 1576 <li>conformance
dbaron@2988 1577 <ul>
jackalmage@6621 1578 <li>authoring tool, <a href="#conform-authoring-tool"
dbaron@7102 1579 title="section 8.2."><strong>8.2.</strong></a>
jackalmage@6621 1580
jackalmage@6621 1581 <li>processor, <a href="#conform-processor"
dbaron@7102 1582 title="section 8.2."><strong>8.2.</strong></a>
jackalmage@6621 1583
jackalmage@6621 1584 <li>style sheet, <a href="#conform-style-sheet"
dbaron@7102 1585 title="section 8.2."><strong>8.2.</strong></a>
dbaron@2988 1586 </ul>
dbaron@2988 1587
jackalmage@6621 1588 <li><a href="#CSS-interface"><code>CSS</code></a>, <a
dbaron@7102 1589 href="#CSS-interface" title="section 7.6."><strong>7.6.</strong></a>
dbaron@2974 1590
jackalmage@6621 1591 <li><a href="#cssconditionrule"><code>CSSConditionRule</code></a>, <a
dbaron@7102 1592 href="#cssconditionrule" title="section 7.3."><strong>7.3.</strong></a>
jackalmage@6655 1593
jackalmage@6655 1594 <li><a href="#cssgroupingrule"><code>CSSGroupingRule</code></a>, <a
dbaron@7102 1595 href="#cssgroupingrule" title="section 7.2."><strong>7.2.</strong></a>
dbaron@2974 1596
jackalmage@6621 1597 <li><a href="#cssmediarule"><code>CSSMediaRule</code></a>, <a
dbaron@7102 1598 href="#cssmediarule" title="section 7.4."><strong>7.4.</strong></a>
dbaron@2974 1599
jackalmage@6621 1600 <li><a href="#csssupportsrule"><code>CSSSupportsRule</code></a>, <a
dbaron@7102 1601 href="#csssupportsrule" title="section 7.5."><strong>7.5.</strong></a>
jackalmage@6315 1602
dbaron@7029 1603 <li>general_enclosed, <a href="#general_enclosed"
dbaron@7102 1604 title="section 6."><strong>6.</strong></a>
dbaron@7029 1605
jackalmage@6621 1606 <li>group rule body, <a href="#group-rule-body"
dbaron@7102 1607 title="section 3."><strong>3.</strong></a>
jackalmage@6315 1608
dbaron@7032 1609 <li>group_rule_body, <a href="#group_rule_body"
dbaron@7102 1610 title="section 3."><strong>3.</strong></a>
dbaron@7032 1611
dbaron@7102 1612 <li>media, <a href="#media" title="section 5."><strong>5.</strong></a>
dbaron@7032 1613
jackalmage@6829 1614 <li>‘<code class=css>@media</code>’ rule, <a href="#atmedia-rule"
dbaron@7102 1615 title="section 5."><strong>5.</strong></a>
jackalmage@6315 1616
dbaron@7032 1617 <li>nested_statement, <a href="#nested_statement"
dbaron@7102 1618 title="section 3."><strong>3.</strong></a>
dbaron@7032 1619
jackalmage@6621 1620 <li>support, <a href="#dfn-support"
dbaron@7102 1621 title="section 6.1."><strong>6.1.</strong></a>
jackalmage@6315 1622
jackalmage@6829 1623 <li>supports_condition, <a href="#supports_condition"
dbaron@7102 1624 title="section 6."><strong>6.</strong></a>
jackalmage@6315 1625
jackalmage@6829 1626 <li>supports_condition_in_parens, <a href="#supports_condition_in_parens"
dbaron@7102 1627 title="section 6."><strong>6.</strong></a>
dbaron@2974 1628
jackalmage@6829 1629 <li>supports_conjunction, <a href="#supports_conjunction"
dbaron@7102 1630 title="section 6."><strong>6.</strong></a>
jackalmage@6315 1631
jackalmage@6621 1632 <li>supports_declaration_condition, <a
jackalmage@6829 1633 href="#supports_declaration_condition"
dbaron@7102 1634 title="section 6."><strong>6.</strong></a>
dbaron@2988 1635
jackalmage@6829 1636 <li>supports_disjunction, <a href="#supports_disjunction"
dbaron@7102 1637 title="section 6."><strong>6.</strong></a>
dbaron@2988 1638
jackalmage@6829 1639 <li>supports_negation, <a href="#supports_negation"
dbaron@7102 1640 title="section 6."><strong>6.</strong></a>
dbaron@2988 1641
jackalmage@6829 1642 <li>‘<code class=css>@supports</code>’ rule, <a
dbaron@7102 1643 href="#atsupports-rule" title="section 6."><strong>6.</strong></a>
dbaron@2988 1644
jackalmage@6829 1645 <li>supports_rule, <a href="#supports_rule"
dbaron@7102 1646 title="section 6."><strong>6.</strong></a>
jackalmage@6621 1647 </ul>
jackalmage@6621 1648 <!--end-index-->
dbaron@2974 1649 </html>
dbaron@2974 1650 <!-- Keep this comment at the end of the file
dbaron@2974 1651 Local variables:
dbaron@2974 1652 mode: sgml
dbaron@2974 1653 sgml-declaration:"~/SGML/HTML4.decl"
dbaron@2974 1654 sgml-default-doctype-name:"html"
dbaron@2974 1655 sgml-minimize-attributes:t
dbaron@2974 1656 sgml-nofill-elements:("pre" "style" "br")
dbaron@2974 1657 sgml-live-element-indicator:t
dbaron@2974 1658 sgml-omittag:nil
dbaron@2974 1659 sgml-shorttag:nil
dbaron@2974 1660 sgml-namecase-general:t
dbaron@2974 1661 sgml-general-insert-case:lower
dbaron@2974 1662 sgml-always-quote-attributes:t
dbaron@2974 1663 sgml-indent-step:nil
dbaron@2974 1664 sgml-indent-data:t
dbaron@2974 1665 sgml-parent-document:nil
dbaron@2974 1666 sgml-exposed-tags:nil
dbaron@2974 1667 sgml-local-catalogs:nil
dbaron@2974 1668 sgml-local-ecat-files:nil
dbaron@2974 1669 End:
dbaron@2974 1670 -->

mercurial