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