drafts: css3-conditional/Overview.html@7dace721dff3

[css3-conditional] Describe requirements for conditionText getter on CSSSupportsRule.

This implements the resolution in
http://lists.w3.org/Archives/Public/www-style/2012Aug/0749.html
to address the second point in
http://lists.w3.org/Archives/Public/www-style/2013Feb/0228.html
which is Issue 8 in the Last Call Disposition of Comments.

It also adds a parenthetical to clarify the issue rejected in
http://lists.w3.org/Archives/Public/www-style/2012Dec/0102.html

     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-07 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-20130207/"

    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 7 February

    37     2013</h2>

    39    <dl>

    40     <dt>This version:

    42     <dd><a href="http://www.w3.org/TR/2013/ED-css3-conditional-20130207/">

    43      http://www.w3.org/TR/2013/ED-css3-conditional-20130207/</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>&lt;link&gt;</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 SUPPORTS_SYM;}

   577 {O}{R}                    {return OR;}

   578 </pre>

   580   <p>and the grammar by adding

   582   <pre><dfn id="supports_rule">supports_rule</dfn>

   583   : SUPPORTS_SYM S* <a

   584    href="#supports_condition"><i>supports_condition</i></a> S* <a

   585    href="#group_rule_body"><i>group_rule_body</i></a>

   586   ;

   588 <dfn

   589    id="supports_condition">supports_condition</dfn>

   590   : <a

   591    href="#supports_negation"><i>supports_negation</i></a> | <a

   592    href="#supports_conjunction"><i>supports_conjunction</i></a> | <a

   593    href="#supports_disjunction"><i>supports_disjunction</i></a> |

   594     <a

   595    href="#supports_condition_in_parens"><i>supports_condition_in_parens</i></a>

   596   ;

   598 <dfn

   599    id="supports_condition_in_parens">supports_condition_in_parens</dfn>

   600   : ( '(' S* <a

   601    href="#supports_condition"><i>supports_condition</i></a> S* ')' ) | <a

   602    href="#supports_declaration_condition"><i>supports_declaration_condition</i></a> |

   603     <a

   604    href="#general_enclosed"><i>general_enclosed</i></a>

   605   ;

   607 <dfn

   608    id="supports_negation">supports_negation</dfn>

   609   : NOT S+ <a

   610    href="#supports_condition_in_parens"><i>supports_condition_in_parens</i></a>

   611   ;

   613 <dfn

   614    id="supports_conjunction">supports_conjunction</dfn>

   615   : <a

   616    href="#supports_condition_in_parens"><i>supports_condition_in_parens</i></a> ( S+ AND S+ <a

   617    href="#supports_condition_in_parens"><i>supports_condition_in_parens</i></a> )+

   618   ;

   620 <dfn

   621    id="supports_disjunction">supports_disjunction</dfn>

   622   : <a

   623    href="#supports_condition_in_parens"><i>supports_condition_in_parens</i></a> ( S+ OR S+ <a

   624    href="#supports_condition_in_parens"><i>supports_condition_in_parens</i></a> )+

   625   ;

   627 <dfn

   628    id="supports_declaration_condition">supports_declaration_condition</dfn>

   629   : '(' S* declaration ')'

   630   ;

   632 <dfn

   633    id="general_enclosed">general_enclosed</dfn>

   634   : ( FUNCTION | '(' ) ( any | unused )* ')'

   635   ;

   636 </pre>

   638   <p>in which <code>declaration</code>, <code>any</code>, and

   639    <code>unused</code> are the productions in the core syntax of CSS defined

   640    in <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">section

   641    4.1.1 (Tokenization)</a> of <a href="#CSS21"

   642    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, and the <code>AND</code> and

   643    <code>NOT</code> tokens are defined in the Media Queries specification <a

   644    href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a>.

   646   <p> Implementations <strong>must</strong> parse ‘<code

   647    class=css>@supports</code>’ rules based on the above grammar, and when

   648    interpreting the above grammar, <strong>must</strong> match the production

   649    before an <code>|</code> operator in preference to the one after it.

   651   <p> The above grammar is purposely very loose for forwards-compatibility

   652    reasons, since the <a

   653    href="#general_enclosed"><code>general_enclosed</code></a> production

   654    allows for substantial future extensibility. Any ‘<code

   655    class=css>@supports</code>’ rule that does not parse according to the

   656    grammar above (that is, a rule that does not match this loose grammar

   657    which includes the general_enclosed production) is invalid. Style sheets

   658    <strong>must not</strong> use such a rule and processors

   659    <strong>must</strong> ignore such a rule (including all of its contents).

   661   <p>Each of these grammar terms is associated with a boolean result, as

   662    follows:

   664   <dl>

   665    <dt>supports_condition

   667    <dd> The result is the result of the single child term.

   669    <dt>supports_condition_in_parens

   671    <dd> The result is the result of the single <a

   672     href="#supports_condition"><code>supports_condition</code></a> or <a

   673     href="#supports_declaration_condition"><code>supports_declaration_condition</code></a>

   674     child term.

   676    <dt>supports_negation

   678    <dd> The result is the <em>negation</em> of the result of the <a

   679     href="#supports_condition_in_parens"><code>supports_condition_in_parens</code></a>

   680     child term.

   682    <dt>supports_conjunction

   684    <dd> The result is true if the result of <em>all</em> of the <a

   685     href="#supports_condition_in_parens"><code>supports_condition_in_parens</code></a>

   686     child terms is true; otherwise it is false.

   688    <dt>supports_disjunction

   690    <dd> The result is true if the result of <em>any</em> of the <a

   691     href="#supports_condition_in_parens"><code>supports_condition_in_parens</code></a>

   692     child terms is true; otherwise it is false.

   694    <dt>supports_declaration_condition

   696    <dd> The result is whether the CSS processor <a

   697     href="#support-definition">supports</a> the declaration within the

   698     parentheses.

   700    <dt>general_enclosed

   702    <dd> The result is always false. Additionally, style sheets <strong>must

   703     not</strong> write ‘<code class=css>@supports</code>’ rules that

   704     match this grammar production. (In other words, this production exists

   705     only for future extensibility, and is not part of the description of a

   706     valid style sheet in this level of the specification.) <span

   707     class=note>Note that future levels may define functions or other

   708     parenthesized expressions that can evaluate to true.</span>

   709   </dl>

   711   <p>The condition of the ‘<code class=css>@supports</code>’ rule is the

   712    result of the <a

   713    href="#supports_condition"><code>supports_condition</code></a> term that

   714    is a child of the <a href="#supports_rule"><code>supports_rule</code></a>

   715    term.

   717   <div class=example>

   718    <p>For example, the following rule

   720    <pre>@supports ( display: flexbox ) {

   721   body, #navigation, #content { display: flexbox; }

   722   #navigation { background: blue; color: white; }

   723   #article { background: white; color: black; }

   724 }</pre>

   726    <p>applies the rules inside the ‘<code class=css>@supports</code>’

   727     rule only when ‘<code class=css>display: flexbox</code>’ is

   728     supported.

   729   </div>

   731   <div class=example>

   732    <p>The following example shows an additional ‘<code

   733     class=css>@supports</code>’ rule that can be used to provide an

   734     alternative for when ‘<code class=css>display: flexbox</code>’ is not

   735     supported:

   737    <pre>@supports not ( display: flexbox ) {

   738   body { width: 100%; height: 100%; background: white; color: black; }

   739   #navigation { width: 25%; }

   740   #article { width: 75%; }

   741 }</pre>

   743    <p>Note that the ‘<code class=property>width</code>’ declarations may

   744     be harmful to the flexbox-based layout, so it is important that they be

   745     present only in the non-flexbox styles.

   746   </div>

   748   <div class=example>

   749    <p>The following example checks for support for the ‘<code

   750     class=property>box-shadow</code>’ property, including checking for

   751     support for vendor-prefixed versions of it. When the support is present,

   752     it specifies both ‘<code class=property>box-shadow</code>’ (with the

   753     prefixed versions) and ‘<code class=property>color</code>’ in a way

   754     what would cause the text to become invisible were ‘<code

   755     class=property>box-shadow</code>’ not supported.

   757    <pre>@supports ( box-shadow: 2px 2px 2px black ) or

   758           ( -moz-box-shadow: 2px 2px 2px black ) or

   759           ( -webkit-box-shadow: 2px 2px 2px black ) or

   760           ( -o-box-shadow: 2px 2px 2px black ) {

   761   .outline {

   762     color: white;

   763     -moz-box-shadow: 2px 2px 2px black;

   764     -webkit-box-shadow: 2px 2px 2px black;

   765     -o-box-shadow: 2px 2px 2px black;

   766     box-shadow: 2px 2px 2px black; /* unprefixed last */

   767   }

   768 }</pre>

   769   </div>

   771   <p>To avoid confusion between ‘<code class=css>and</code>’ and ‘<code

   772    class=css>or</code>’, the syntax requires that both ‘<code

   773    class=css>and</code>’ and ‘<code class=css>or</code>’ be specified

   774    explicitly (rather than, say, using commas or spaces for one of them).

   775    Likewise, to avoid confusion caused by precedence rules, the syntax does

   776    not allow ‘<code class=css>and</code>’, ‘<code

   777    class=css>or</code>’, and ‘<code class=css>not</code>’ operators to

   778    be mixed without a layer of parentheses.

   780   <div class=example>

   781    <p>For example, the following rule is not valid:

   783    <pre class=illegal>@supports (transition-property: color) or

   784           (animation-name: foo) and

   785           (transform: rotate(10deg)) {

   786   // ...

   787 }</pre>

   789    <p>Instead, authors must write one of the following:

   791    <pre>@supports ((transition-property: color) or

   792            (animation-name: foo)) and

   793           (transform: rotate(10deg)) {

   794   // ...

   795 }</pre>

   797    <pre>@supports (transition-property: color) or

   798           ((animation-name: foo) and

   799            (transform: rotate(10deg))) {

   800   // ...

   801 }</pre>

   802   </div>

   804   <p>Furthermore, whitespace is required after a ‘<code

   805    class=css>not</code>’ and on both sides of an ‘<code

   806    class=css>and</code>’ or ‘<code class=css>or</code>’.

   808   <p>The declaration being tested must always occur within parentheses, when

   809    it is the only thing in the expression.

   811   <p>

   813   <div class=example>

   814    <p>For example, the following rule is not valid:

   816    <pre class=illegal>@supports display: flexbox {

   817   // ...

   818 }</pre>

   820    <p>Instead, authors must write:

   822    <pre>@supports (display: flexbox) {

   823   // ...

   824 }</pre>

   825   </div>

   827   <p>The syntax allows extra parentheses when they are not needed. This

   828    flexibility is sometimes useful for authors (for example, when commenting

   829    out parts of an expression) and may also be useful for authoring tools.

   831   <div class=example>

   832    <p>For example, authors may write:

   834    <pre>@supports ((display: flexbox)) {

   835   // ...

   836 }</pre>

   837   </div>

   839   <p>A trailing ‘<code class=css>!important</code>’ on a declaration

   840    being tested is allowed, though it won't change the validity of the

   841    declaration.

   843   <div class=example>

   844    <p>For example, the following rule is valid:

   846    <pre>@supports (display: flexbox !important) {

   847   // ...

   848 }</pre>

   849   </div>

   851   <h3 id=support-definition><span class=secno>6.1. </span>Definition of

   852    support</h3>

   854   <p>For forward-compatibility, <a

   855    href="http://www.w3.org/TR/CSS21/syndata.html#declaration">section 4.1.8

   856    (Declarations and properties)</a> of <a href="#CSS21"

   857    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> defines rules for handling

   858    invalid properties and values. CSS processors that do not implement or

   859    partially implement a specification <strong>must</strong> treat any part

   860    of a value that they do not implement, or do not have a usable level of

   861    support for, as invalid according to this rule for handling invalid

   862    properties and values, and therefore <strong>must</strong> discard the

   863    declaration as a parse error.

   865   <p>A CSS processor is considered to <dfn id=dfn-support>support</dfn> a

   866    declaration (consisting of a property and value) if it accepts that

   867    declaration (rather than discarding it as a parse error). If a processor

   868    does not implement, with a usable level of support, the value given, then

   869    it <strong>must not</strong> accept the declaration or claim support for

   870    it.

   872   <p class=note>Note that properties or values whose support is effectively

   873    disabled by user preferences are still considered as supported by this

   874    definition. For example, if a user has enabled a high-contrast mode that

   875    causes colors to be overridden, the CSS processor is still considered to

   876    support the ‘<code class=property>color</code>’ property even though

   877    declarations of the ‘<code class=property>color</code>’ property may

   878    have no effect. On the other hand, a developer-facing preference whose

   879    purpose is to enable or disable support for an experimental CSS feature

   880    does affect this definition of support.

   882   <p>These rules (and the equivalence between them) allow authors to use

   883    fallback (either in the <a href="#CSS1"

   884    rel=biblioentry>[CSS1]<!--{{CSS1}}--></a> sense of declarations that are

   885    overridden by later declarations or with the new capabilities provided by

   886    the ‘<code class=css>@supports</code>’ rule in this specification)

   887    that works correctly for the features implemented. This applies especially

   888    to compound values; implementations must implement all parts of the value

   889    in order to consider the declaration supported, either inside a ruleset or

   890    in the declaration condition of an ‘<code class=css>@supports</code>’

   891    rule.</p>

   892   <!--

   893 <h2 id="at-document">Document queries: the '@document' rule</h2>

   895 <p>The <dfn>'@document' rule</dfn> is a conditional group

   896 rule whose condition depends on the

   897 <a href="#url-of-doc">URL of the document being styled</a>.

   898 This allows style sheets, particularly user style sheets, to have styles

   899 that only apply to a set of pages rather than to all pages using the

   900 style sheet.</p>

   902 <p class="issue">Given that this @-rule is intended primarily for user

   903 style sheets, what should this specification say about its use in author

   904 style sheets?  Should it be forbidden?  Should use instead be

   905 discouraged?  Or should this specification remain neutral on the

   906 topic, since there are valid uses in author style sheets?</p>

   908 <p id="url-of-doc">The <dfn>URL of the document being styled</dfn> is

   909 the URI at which the document is located, excluding any fragment

   910 identifiers.  (This means, for example, that HTTP redirects have been

   911 followed.)  If the styles are being applied inside a complete document

   912 embedded into the presentation of another (e.g., [[HTML5]]'s <code

   913 class="html">iframe</code>, <code class="html">object</code>, or <code

   914 class="html">img</code> elements), the relevant URI is that of the

   915 frame, not of its container.  However, if content from other documents

   916 is mixed in via mechanisms that mix content from one document into

   917 another (e.g., [[SVG11]]'s <code>use</code> element), then the

   918 address of the container document is used.</p>

   920 <p class="note">Note:  In [[HTML5]], this is the

   921 <a href="http://dev.w3.org/html5/spec/dom.html#documents">document's address</a>

   922 of a document in a

   923 <a href="http://dev.w3.org/html5/spec/browsers.html#browsing-context">browsing context</a>.</p>

   925 <div class="issue">What form of normalization is done on URLs and domains

   926 before matching?  In particular, this specification needs to describe:

   927 <ul>

   928 <li>what form is used for the <a href="#url-of-doc">URL of the document

   929 being styled</a> (and what has been normalized in that form)</li>

   930 <li>what normalization (if any) happens to the argument of each of the match

   931 functions before the comparison that they describe and</li>

   932 <li>whether the

   933 comparison algorithm used is string comparison or some other URL

   934 comparison algorithm.</li></ul></div>

   936 <p>The '@document' rule's condition is written as a

   937 comma-separated list of <dfn>URL matching functions</dfn>, and the

   938 condition evaluates to true whenever any one of those functions

   939 evaluates to true.  The following URL matching functions are

   940 permitted:</p>

   942 <dl>

   943   <dt><dfn id="url-exact" title="url()|URL matching functions::exact">&lt;url&gt;</dfn></dt>

   945   <dd>

   946     <p>The 'url()' function is the <dfn>exact url matching

   947     function</dfn>.  It evaluates to true whenever the <a

   948     href="#url-of-doc">URL of the document being styled</a> is exactly

   949     the URL given.</p>

   951     <p class="Note">The 'url()' function, since it is a core syntax

   952     element in CSS, is allowed (subject to different character

   953     limitations and thus escaping requirements) to contain an unquoted

   954     value (in addition to the string values that are allowed as

   955     arguments for all four functions).</p>

   957     <div class="example">

   958       <p>For example, this rule:</p>

   959 <pre>@document url("http://www.w3.org/Style/CSS/") {

   960   #summary { background: yellow; color: black}

   961 }</pre>

   962       <p>styles the <code class="html">summary</code> element on the page

   963       <code>http://www.w3.org/Style/CSS/</code>, but not on any other

   964       pages.</p>

   965     </div>

   966   </dd>

   968   <dt><dfn id="url-prefix" title="url-prefix()|URL matching functions::prefix">url-prefix(&lt;string&gt;)</dfn></dt>

   970   <dd>

   971     <p>The 'url-prefix()' function is the <dfn>url prefix

   972     matching function</dfn>.  It evaluates to true whenever the

   973     <a href="#url-of-doc">URL of the document being styled</a>

   974     has the argument to the function as an

   975     initial substring (which is true when the two strings are equal).

   976     When the argument is the empty string, it evaluates to true for all

   977     documents.</p>

   978     <div class="example">

   979       <p>For example, this rule:</p>

   980 <pre>@document url-prefix("http://www.w3.org/Style/CSS/") {

   981   #summary { background: yellow; color: black}

   982 }</pre>

   983       <p>styles the <code class="html">summary</code> element on the page

   984       <code>http://www.w3.org/Style/CSS/</code> and on the page

   985       <code>http://www.w3.org/Style/CSS/Test</code>, but it does not

   986       affect the page <code>http://www.w3.org/</code> or the page

   987       <code>http://www.example.com/Style/CSS/</code>.</p>

   988     </div>

   989   </dd>

   991   <dt><dfn id="url-domain" title="domain()|URL matching functions::domain">domain(&lt;string&gt;)</dfn></dt>

   993   <dd>

   994     <p>The 'domain()' function is the <dfn>domain

   995     matching function</dfn>.  It evaluates to true whenever

   996     the <a href="#url-of-doc">URL of the document being styled</a>

   997     has a host subcomponent (as defined in [[!URI]])

   998     and that host subcomponent is exactly the argument to the

   999     'domain()' function or a final substring of the host

  1000     component is a period (U+002E) immediately followed by the argument

  1001     to the 'domain()' function.</p>

  1002     <div class="example">

  1003       <p>For example, this rule:</p>

  1004 <pre>@document domain("w3.org") {

  1005   body { font-size: 16px ! important }

  1006 }</pre>

  1007       <p>changes the font size of the body element for pages such as

  1008       <code>http://www.w3.org/Style/CSS/</code> and

  1009       <code>http://w3.org/Style/CSS/</code> and

  1010       <code>http://lists.w3.org/Archives/Public/www-style/</code>

  1011       but it does not affect the page

  1012       <code>http://www.example.com/Style/CSS/</code>.</p>

  1013     </div>

  1014   </dd>

  1016   <dt><dfn id="url-regexp" title="regexp()|URL matching functions::regular expression">regexp(&lt;string&gt;)</dfn></dt>

  1018   <dd>

  1019     <p>The contents of the &lt;string&gt; argument <strong>must</strong>

  1020     match the JavaScript <code>Pattern</code> production

  1021     ([[!ECMA-262-5.1]], section 15.10.1).  However,

  1022     failing to do so is not a CSS syntax error and does not trigger any

  1023     error handling for CSS syntax errors.</p>

  1025     <p>The ''regexp()'' function evaluates to true whenever the string

  1026     argument compiled as a JavaScript regular expression with the

  1027     <code>global</code>, <code>ignoreCase</code> and

  1028     <code>multiline</code> flags <em>disabled</em>

  1029     (see [[!ECMA-262-5.1]], sections 15.10.7.2 through 15.10.7.4)

  1030     compiles successfully and the resulting regular expression matches

  1031     the entirety of the

  1032     <a href="#url-of-doc">URL of the document being styled</a>.</p>

  1034     <p class="note">Note that regular expression must match the entire

  1035     URL, not just a part of it.</p>

  1037     <p class="note">Note that this definition intentionally matches the

  1038     behavior of the <a

  1039     href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#attr-input-pattern"><code class="html">pattern</code>

  1040     attribute</a> on the <code class="html">input</code> element

  1041     in [[HTML5]].</p>

  1043     <div class="example">

  1044       <p>For example, this rule:</p>

  1045 <pre>@document regexp("http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/") {

  1046   body { font-size: 20px ! important }

  1047 }</pre>

  1048       <p>changes the font size of the body element for pages such as

  1049       <code>http://www.w3.org/TR/2011/PR-CSS2-20110412/</code>.</p>

  1050       <p class="note">Note that the backslashes in the regular

  1051       expression require CSS escaping as ''\\''.</p>

  1052     </div>

  1053   </dd>

  1055 </dl>

  1057 <p>Implementations <strong>must</strong> treat any unknown URL matching

  1058 functions as a syntax error, and thus ignore the '@document' rule.

  1059 <span class="issue">Should we instead have more complicated error

  1060 handling rules to make forward-compatibility work differently, or is

  1061 this rule the best solution for such future expansion anyway?</span></p>

  1063 <div class="issue">This syntax doesn't offer any ability to do negations,

  1064 which has been requested in <a

  1065 href="https://bugzilla.mozilla.org/show_bug.cgi?id=349813">Mozilla bug

  1066 349813</a>.  Use cases that people have wanted negations for

  1067 include:

  1068 <ul>

  1069   <li>User style sheets that want a particular rule in general, but know

  1070   that that rule does more harm than good on specific sites.</li>

  1071   <li>Authors who have a rule that they want to apply to most of their

  1072   pages, but wish to make a few exceptions for.</li>

  1073 </ul>

  1074 </div>

  1076 <p>This extends the lexical scanner in the

  1077 <a href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a>

  1078 ([[!CSS21]], Appendix G) by adding:

  1079 <pre>@{D}{O}{C}{U}{M}{E}{N}{T}	{return DOCUMENT_SYM;}</pre>

  1080 <p>and the grammar by adding</p>

  1081 <pre><dfn>document_rule</dfn>

  1082   : DOCUMENT_SYM S+ <i>url_match_fn</i> ( "," S* <i>url_match_fn</i> )* <i>group_rule_body</i>

  1083   ;

  1085 <dfn>url_match_fn</dfn>

  1086   : (URI | FUNCTION S* STRING S* ')' ) S*

  1087   ;</pre>

  1088 -->

  1090   <h2 id=apis><span class=secno>7. </span>APIs</h2>

  1092   <h3 id=extentions-to-cssrule-interface><span class=secno>7.1. </span>

  1093    Extensions to the <code>CSSRule</code> interface</h3>

  1095   <p>The <code>CSSRule</code> interface is extended as follows:

  1097   <pre class=idl>partial interface CSSRule {

  1098     const unsigned short SUPPORTS_RULE = 12;

  1099     <!--

  1100     const unsigned short DOCUMENT_RULE = 13;

  1101     -->

  1102 }</pre>

  1104   <h3 id=the-cssgroupingrule-interface><span class=secno>7.2. </span> The <a

  1105    href="#cssgroupingrule"><code>CSSGroupingRule</code></a> interface</h3>

  1107   <p>The <dfn id=cssgroupingrule><code>CSSGroupingRule</code></dfn> interface

  1108    represents an at-rule that contains other rules nested inside itself.

  1110   <pre class=idl>interface CSSGroupingRule : CSSRule {

  1111     readonly attribute <a

  1112    href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRuleList">CSSRuleList</a> cssRules;

  1113     unsigned long insertRule (DOMString rule, unsigned long index);

  1114     void deleteRule (unsigned long index);

  1115 }</pre>

  1117   <dl class=idl-attributes>

  1118    <dt><code>cssRules</code> of type <code><a

  1119     href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRuleList">CSSRuleList</a></code>,

  1120     readonly

  1122    <dd>The <code>cssRules</code> attribute must return a

  1123     <code>CSSRuleList</code> object for the list of CSS rules nested inside

  1124     the grouping rule.

  1125   </dl>

  1127   <dl class=idl-methods>

  1128    <dt><code>insertRule(DOMString rule, unsigned long index)</code>, returns

  1129     <code>unsigned long</code>

  1131    <dd> The <code>insertRule</code> operation must insert a CSS rule

  1132     <var>rule</var> into the CSS rule list returned by <code>cssRules</code>,

  1133     such that the inserted rule will be at position <var>index</var>, and any

  1134     rules previously at <var>index</var> or higher will increase their index

  1135     by one. It must throw INDEX_SIZE_ERR if index is greater than

  1136     <code>cssRules.length</code>. It must throw SYNTAX_ERR if the rule has a

  1137     syntax error and is unparseable; this does not include syntax errors

  1138     handled by error handling rules for constructs inside of the rule. It

  1139     must throw HIERARCHY_REQUEST_ERR if the rule cannot be inserted at the

  1140     location specified, for example, if an ‘<code

  1141     class=css>@import</code>’ rule is inserted inside a group rule. <span

  1142     class=issue>This needs to specify what to do if <code>rule</code> is the

  1143     empty string, if it contains more than one CSS rule, or if it contains

  1144     garbage after a valid rule.</span>

  1146    <dt><code>deleteRule (unsigned long index)</code>, return

  1147     <code>void</code>

  1149    <dd> The <code>deleteRule</code> operation must remove a CSS rule from the

  1150     CSS rule list returned by <code>cssRules</code> at <var>index</var>. It

  1151     must throw INDEX_SIZE_ERR if index is greater than or equal to

  1152     <code>cssRules.length</code>.

  1153   </dl>

  1155   <h3 id=the-cssconditionrule-interface><span class=secno>7.3. </span> The <a

  1156    href="#cssconditionrule"><code>CSSConditionRule</code></a> interface</h3>

  1158   <p>The <dfn id=cssconditionrule><code>CSSConditionRule</code></dfn>

  1159    interface represents all the "conditional" at-rules, which consist of a

  1160    condition and a statement block.

  1162   <pre class=idl>interface CSSConditionRule : CSSGroupingRule {

  1163     attribute DOMString conditionText;

  1164 }</pre>

  1166   <dl class=idl-attributes>

  1167    <dt><code>conditionText</code> of type <code>DOMString</code>

  1169    <dd>

  1170     <p>The <code>conditionText</code> attribute represents the condition of

  1171      the rule. Since what this condition does varies between the derived

  1172      interfaces of <a

  1173      href="#cssconditionrule"><code>CSSConditionRule</code></a>, those

  1174      derived interfaces may specify different behavior for this attribute

  1175      (see, for example, <a href="#cssmediarule"><code>CSSMediaRule</code></a>

  1176      below). In the absence of such rule-specific behavior, the following

  1177      rules apply:

  1179     <p>The <code>conditionText</code> attribute, on getting, must return the

  1180      result of serializing the associated condition.

  1182     <p>On setting the <code>conditionText</code> attribute these steps must

  1183      be run:

  1185     <ol>

  1186      <li>Trim the given value of white space.

  1188      <li>If the given value matches the grammar of the appropriate condition

  1189       production for the given rule, replace the associated CSS condition

  1190       with the given value.

  1192      <li>Otherwise, do nothing.

  1193     </ol>

  1194   </dl>

  1196   <h3 id=the-cssmediarule-interface><span class=secno>7.4. </span> The <a

  1197    href="#cssmediarule"><code>CSSMediaRule</code></a> interface</h3>

  1199   <p>The <dfn id=cssmediarule><code>CSSMediaRule</code></dfn> interface

  1200    represents a ‘<code class=css>@media</code>’ rule:

  1202   <pre class=idl>interface CSSMediaRule : CSSConditionRule {

  1203     readonly attribute <a

  1204    href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-MediaList">MediaList</a> media;

  1205 }</pre>

  1207   <dl class=idl-attributes>

  1208    <dt><a href="#media"><code>media</code></a> of type <code><a

  1209     href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-MediaList">MediaList</a></code>,

  1210     readonly

  1212    <dd>The <a href="#media"><code>media</code></a> attribute must return a

  1213     <code>MediaList</code> object for the list of media queries specified

  1214     with the ‘<code class=css>@media</code>’ rule.

  1216    <dt><code>conditionText</code> of type <code>DOMString</code>

  1217     (CSSMediaRule-specific definition for attribute on CSSConditionRule)

  1219    <dd>The <code>conditionText</code> attribute (defined on the <a

  1220     href="#cssconditionrule"><code>CSSConditionRule</code></a> parent rule),

  1221     on getting, must return the value of <code>media.mediaText</code> on the

  1222     rule.

  1223     <p>Setting the <code>conditionText</code> attribute must set the

  1224      <code>media.mediaText</code> attribute on the rule.

  1225   </dl>

  1227   <h3 id=the-csssupportsrule-interface><span class=secno>7.5. </span> The <a

  1228    href="#csssupportsrule"><code>CSSSupportsRule</code></a> interface</h3>

  1230   <p>The <dfn id=csssupportsrule><code>CSSSupportsRule</code></dfn> interface

  1231    represents a ‘<code class=css>@supports</code>’ rule.

  1233   <pre class=idl>interface CSSSupportsRule : CSSConditionRule {

  1234 }</pre>

  1236   <dl class=idl-attributes>

  1237    <dt><code>conditionText</code> of type <code>DOMString</code>

  1238     (CSSSupportsRule-specific definition for attribute on CSSConditionRule)

  1240    <dd>The <code>conditionText</code> attribute (defined on the <a

  1241     href="#cssconditionrule"><code>CSSConditionRule</code></a> parent rule),

  1242     on getting, must return the condition that was specified, without any

  1243     logical simplifications, so that the returned condition will evaluate to

  1244     the same result as the specified condition in any conformant

  1245     implementation of this specification (including implementations that

  1246     implement future extensions allowed by the <a

  1247     href="#general_enclosed"><i>general_enclosed</i></a> exensibility

  1248     mechanism in this specification). In other words, token stream

  1249     simplifications are allowed (such as reducing whitespace to a single

  1250     space or omitting it in cases where it is known to be optional), but

  1251     logical simplifications are not allowed.

  1252   </dl>

  1253   <!--

  1254 <h3 id="the-cssdocumentrule-interface">

  1255 The <code>CSSDocumentRule</code> interface</h3>

  1257 <p>The <dfn><code>CSSDocumentRule</code></dfn> interface represents a ''@document'' rule.</p>

  1259 <pre class='idl'>interface CSSDocumentRule : CSSConditionRule {

  1260 }</pre>

  1261 -->

  1263   <h3 id=the-css-interface><span class=secno>7.6. </span> The <a

  1264    href="#CSS-interface"><code>CSS</code></a> interface, and the <code

  1265    title="">supports()</code> function</h3>

  1267   <p>The <dfn id=CSS-interface><code>CSS</code></dfn> interface holds useful

  1268    CSS-related functions that do not belong elsewhere.

  1270   <pre class=idl>interface CSS {

  1271   static boolean supports(DOMString property, DOMString value);

  1272   static boolean supports(DOMString conditionText);

  1273 }</pre>

  1275   <dl class=idl-methods>

  1276    <dt><code>supports(DOMString property, DOMString value)</code>, returns

  1277     <code>boolean</code>

  1279    <dt><code>supports(DOMString conditionText)</code>, returns

  1280     <code>boolean</code>

  1282    <dd> When the <code title="">supports()</code> method is invoked with two

  1283     arguments <var>property</var> and <var>value</var>, it must return

  1284     <code>true</code> if <var>property</var> is a literal match for the name

  1285     of a CSS property that the UA supports, and <var>value</var> would be

  1286     successfully parsed as a supported value for that property. Otherwise, it

  1287     must return <code>false</code>.

  1288     <p> When invoked with a single <var>conditionText</var> argument, it must

  1289      return <code>true</code> if <var>conditionText</var>, when parsed and

  1290      evaluated as a <a

  1291      href="#supports_condition"><code>supports_condition</code></a>, would

  1292      return true. Otherwise, it must return <code>false</code>.

  1293   </dl>

  1295   <h2 class=no-num id=grammar>Grammar</h2>

  1297   <p>In order to allow these new @-rules in CSS style sheets, this

  1298    specification modifies the <code>stylesheet</code> production in the <a

  1299    href="http://www.w3.org/TR/CSS21/grammar.html">Appendix G</a> grammar of

  1300    <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> by replacing

  1301    the <a href="#media"><code>media</code></a> production defined in <a

  1302    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> with the <a

  1303    href="#media"><code>media</code></a> production defined in this one, and

  1304    additionally inserting <code>| supports_rule</code> alongside

  1305    <code>ruleset | media | page</code>.

  1307   <h2 id=conformance><span class=secno>8. </span>Conformance</h2>

  1309   <h3 id=base-modules><span class=secno>8.1. </span>Base Modules</h3>

  1311   <p>This specification defines conformance in terms of base modules, which

  1312    are modules that this specification builds on top of. The base modules of

  1313    this module are:

  1315   <ul>

  1316    <li><a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

  1317   </ul>

  1319   <p>All of the conformance requirements of all base modules are incorporated

  1320    as conformance requirements of this module, except where overridden by

  1321    this module.

  1323   <p>Additionally, all conformance requirements related to validity of syntax

  1324    in this module and all of its base modules are to be interpreted as though

  1325    all syntax in all of those modules is valid.

  1327   <div class=example>

  1328    <p>For example, this means that grammar presented in modules other than <a

  1329     href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> must obey the

  1330     requirements that <a href="#CSS21"

  1331     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> defines for the parsing of

  1332     properties, and that requirements for handling invalid syntax in <a

  1333     href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> do not treat

  1334     syntax added by other modules as invalid.

  1335   </div>

  1337   <p>Additionally, the set of valid syntax can be increased by the

  1338    conformance of a style sheet or processor to additional modules; use of

  1339    such syntax does not make a style sheet nonconformant and failure to treat

  1340    such syntax as invalid does not make a processor nonconformant.

  1342   <h3 id=conformance-classes><span class=secno>8.2. </span>Conformance

  1343    Classes</h3>

  1345   <p>Conformance to the CSS Conditional Rules Module is defined for three

  1346    conformance classes:

  1348   <dl>

  1349    <dt><dfn id=conform-style-sheet title="conformance::style sheet">style

  1350     sheet</dfn>

  1352    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS

  1353     style sheet</a>.

  1355    <dt><dfn id=conform-processor

  1356     title="conformance::processor">processor</dfn>

  1358    <dd>A tool that reads CSS style sheets: it may be a renderer or <a

  1359     href="http://www.w3.org/TR/CSS21/conform.html#user-agent">user-agent</a>

  1360     that interprets the semantics of a style sheet and renders documents that

  1361     use style sheets, or it may be a validator that checks style sheets.

  1363    <dt><dfn id=conform-authoring-tool

  1364     title="conformance::authoring tool">authoring tool</dfn>

  1366    <dd>A tool that writes a style sheet.

  1367   </dl>

  1369   <p>A style sheet is conformant to the CSS Conditional Rules Module if it

  1370    meets all of the conformance requirements in the module that are described

  1371    as requirements of style sheets.

  1373   <p>A processor is conformant to the CSS Conditional Rules Module if it

  1374    meets all applicable conformance requirements in the module that are

  1375    described as requirements of processors. In general, all requirements are

  1376    applicable to renderers. Requirements concerning a part of CSS not

  1377    performed by a processor are not applicable, e.g., requirements related to

  1378    rendering are not applicable to a validator. The inability of a processor

  1379    to correctly render a document due to limitations of the device does not

  1380    make it non-conformant. (For example, a renderer is not required to render

  1381    color on a monochrome monitor.)

  1383   <p>An authoring tool is conformant to the CSS Conditional Rules Module if

  1384    it writes style sheets that conform to the module and (if it reads CSS) it

  1385    is a conformant processor.

  1387   <h3 id=partial><span class=secno>8.3. </span> Partial Implementations</h3>

  1389   <p>So that authors can exploit the forward-compatible parsing rules to

  1390    assign fallback values, CSS renderers <strong>must</strong> treat as

  1391    invalid (and <a

  1392    href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as

  1393    appropriate</a>) any at-rules, properties, property values, keywords, and

  1394    other syntactic constructs for which they have no usable level of support.

  1395    In particular, user agents <strong>must not</strong> selectively ignore

  1396    unsupported component values and honor supported values in a single

  1397    multi-value property declaration: if any value is considered invalid (as

  1398    unsupported values must be), CSS requires that the entire declaration be

  1399    ignored.

  1401   <h3 id=experimental><span class=secno>8.4. </span>Experimental

  1402    Implementations</h3>

  1404   <p>To avoid clashes with future CSS features, the CSS specifications

  1405    reserve a <a

  1406    href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed

  1407    syntax</a> for proprietary property and value extensions to CSS. The CSS

  1408    Working Group recommends that experimental implementations of features in

  1409    CSS Working Drafts also use vendor-prefixed property or value names. This

  1410    avoids any incompatibilities with future changes in the draft. Once a

  1411    specification reaches the Candidate Recommendation stage, implementors

  1412    should implement the non-prefixed syntax for any feature they consider to

  1413    be correctly implemented according to spec.

  1415   <h3 id=cr-exit-criteria><span class=secno>8.5. </span>CR Exit Criteria</h3>

  1417   <p>For this specification to be advanced to Proposed Recommendation, there

  1418    must be at least two independent, interoperable implementations of each

  1419    feature. Each feature may be implemented by a different set of products,

  1420    there is no requirement that all features be implemented by a single

  1421    product. For the purposes of this criterion, we define the following

  1422    terms:

  1424   <dl>

  1425    <dt>independent

  1427    <dd>each implementation must be developed by a different party and cannot

  1428     share, reuse, or derive from code used by another qualifying

  1429     implementation. Sections of code that have no bearing on the

  1430     implementation of this specification are exempt from this requirement.

  1432    <dt>interoperable

  1434    <dd>passing the respective test case(s) in the official CSS test suite,

  1435     or, if the implementation is not a Web browser, an equivalent test. Every

  1436     relevant test in the test suite should have an equivalent test created if

  1437     such a user agent (UA) is to be used to claim interoperability. In

  1438     addition if such a UA is to be used to claim interoperability, then there

  1439     must one or more additional UAs which can also pass those equivalent

  1440     tests in the same way for the purpose of interoperability. The equivalent

  1441     tests must be made publicly available for the purposes of peer review.

  1443    <dt>implementation

  1445    <dd>a user agent which:

  1446     <ol class=inline>

  1447      <li>implements the specification.

  1449      <li>is available to the general public. The implementation may be a

  1450       shipping product or other publicly available version (i.e., beta

  1451       version, preview release, or “nightly build”). Non-shipping product

  1452       releases must have implemented the feature(s) for a period of at least

  1453       one month in order to demonstrate stability.

  1455      <li>is not experimental (i.e., a version specifically designed to pass

  1456       the test suite and is not intended for normal usage going forward).

  1457     </ol>

  1458   </dl>

  1460   <p>The specification will remain Candidate Recommendation for at least six

  1461    months.

  1463   <h2 id=changes><span class=secno>9. </span> Changes</h2>

  1465   <p>The following (non-editorial) changes were made to this specification

  1466    since the <a

  1467    href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/">11

  1468    September 2012 Working Draft</a>:

  1470   <ul>

  1471    <li>Removed ‘<code class=css>@document</code>’ rule; it has been

  1472     deferred to Level 4.

  1474    <li>Allow functional notation in ‘<code class=css>@supports</code>’

  1475     queries to be valid (to allow for future extensions), but treat such

  1476     notations as always being false.

  1478    <li>Corrected the grammar as follows:

  1479     <pre>

  1480 -  : SUPPORTS_SYM S+ supports_condition group_rule_body

  1481 +  : SUPPORTS_SYM S* supports_condition group_rule_body

  1482 </pre>

  1484     <pre>

  1485 -  : (URI | FUNCTION) S*

  1486 +  : (URI | FUNCTION S* STRING S* ')' ) S*

  1487 </pre>

  1489    <li>Switched "and", "or", and "not" keywords to use appropriate

  1490     productions rather than literals.

  1492    <li>Clarified definition of support used for interpreting ‘<code

  1493     class=css>@support</code>’ rules and its relationship to CSS

  1494     forwards-compatible parsing rules.

  1495   </ul>

  1497   <h2 class=no-num id=acknowledgments>Acknowledgments</h2>

  1499   <p> Thanks to the ideas and feedback from Tab Atkins, <span lang=tr>Tantek

  1500    Çelik</span>, Alex Danilo, Elika Etemad, Pascal Germroth, <span

  1501    lang=de>Björn Höhrmann</span>, Paul Irish, <span lang=nl>Anne van

  1502    Kesteren</span>, Vitor Menezes, Alex Mogilevsky, Chris Moschini, Simon

  1503    Sapin, Ben Ward, Zack Weinberg, Estelle Weyl, Boris Zbarsky, and all the

  1504    rest of the <a

  1505    href="http://lists.w3.org/Archives/Public/www-style/">www-style</a>

  1506    community.

  1508   <h2 class=no-num id=references>References</h2>

  1510   <h3 class=no-num id=normative-references>Normative references</h3>

  1511   <!--begin-normative-->

  1512   <!-- Sorted by label -->

  1514   <dl class=bibliography>

  1515    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->

  1516     <!---->

  1518    <dt id=CSS21>[CSS21]

  1520    <dd>Bert Bos; et al. <a

  1521     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style

  1522     Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June

  1523     2011. W3C Recommendation. URL: <a

  1524     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>

  1525    </dd>

  1526    <!---->

  1528    <dt id=CSS3-ANIMATIONS>[CSS3-ANIMATIONS]

  1530    <dd>Dean Jackson; et al. <a

  1531     href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/"><cite>CSS

  1532     Animations.</cite></a> 3 April 2012. W3C Working Draft. (Work in

  1533     progress.) URL: <a

  1534     href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/">http://www.w3.org/TR/2012/WD-css3-animations-20120403/</a>

  1535    </dd>

  1536    <!---->

  1538    <dt id=CSS3-FONTS>[CSS3-FONTS]

  1540    <dd>John Daggett. <a

  1541     href="http://www.w3.org/TR/2012/WD-css3-fonts-20121211/"><cite>CSS Fonts

  1542     Module Level 3.</cite></a> 11 December 2012. W3C Working Draft. (Work in

  1543     progress.) URL: <a

  1544     href="http://www.w3.org/TR/2012/WD-css3-fonts-20121211/">http://www.w3.org/TR/2012/WD-css3-fonts-20121211/</a>

  1545    </dd>

  1546    <!---->

  1548    <dt id=MEDIAQ>[MEDIAQ]

  1550    <dd>Florian Rivoal. <a

  1551     href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media

  1552     Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a

  1553     href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a>

  1554    </dd>

  1555    <!---->

  1557    <dt id=RFC2119>[RFC2119]

  1559    <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key

  1560     words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet

  1561     RFC 2119. URL: <a

  1562     href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>

  1563    </dd>

  1564    <!---->

  1565   </dl>

  1566   <!--end-normative-->

  1568   <h3 class=no-num id=other-references>Other references</h3>

  1569   <!--begin-informative-->

  1570   <!-- Sorted by label -->

  1572   <dl class=bibliography>

  1573    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->

  1574     <!---->

  1576    <dt id=CSS1>[CSS1]

  1578    <dd>Håkon Wium Lie; Bert Bos. <a

  1579     href="http://www.w3.org/TR/2008/REC-CSS1-20080411"><cite>Cascading Style

  1580     Sheets (CSS1) Level 1 Specification.</cite></a> 11 April 2008. W3C

  1581     Recommendation. URL: <a

  1582     href="http://www.w3.org/TR/2008/REC-CSS1-20080411">http://www.w3.org/TR/2008/REC-CSS1-20080411</a>

  1583    </dd>

  1584    <!---->

  1586    <dt id=CSS3-TRANSITIONS>[CSS3-TRANSITIONS]

  1588    <dd>Dean Jackson; et al. <a

  1589     href="http://www.w3.org/TR/2012/WD-css3-transitions-20120403/"><cite>CSS

  1590     Transitions.</cite></a> 3 April 2012. W3C Working Draft. (Work in

  1591     progress.) URL: <a

  1592     href="http://www.w3.org/TR/2012/WD-css3-transitions-20120403/">http://www.w3.org/TR/2012/WD-css3-transitions-20120403/</a>

  1593    </dd>

  1594    <!---->

  1595   </dl>

  1596   <!--end-informative-->

  1598   <h2 class=no-num id=index>Index</h2>

  1599   <!--begin-index-->

  1601   <ul class=indexlist>

  1602    <li>conditional group rules, <a href="#conditional-group-rules"

  1603     title="section 2."><strong>2.</strong></a>

  1605    <li>conformance

  1606     <ul>

  1607      <li>authoring tool, <a href="#conform-authoring-tool"

  1608       title="section 8.2."><strong>8.2.</strong></a>

  1610      <li>processor, <a href="#conform-processor"

  1611       title="section 8.2."><strong>8.2.</strong></a>

  1613      <li>style sheet, <a href="#conform-style-sheet"

  1614       title="section 8.2."><strong>8.2.</strong></a>

  1615     </ul>

  1617    <li><a href="#CSS-interface"><code>CSS</code></a>, <a

  1618     href="#CSS-interface" title="section 7.6."><strong>7.6.</strong></a>

  1620    <li><a href="#cssconditionrule"><code>CSSConditionRule</code></a>, <a

  1621     href="#cssconditionrule" title="section 7.3."><strong>7.3.</strong></a>

  1623    <li><a href="#cssgroupingrule"><code>CSSGroupingRule</code></a>, <a

  1624     href="#cssgroupingrule" title="section 7.2."><strong>7.2.</strong></a>

  1626    <li><a href="#cssmediarule"><code>CSSMediaRule</code></a>, <a

  1627     href="#cssmediarule" title="section 7.4."><strong>7.4.</strong></a>

  1629    <li><a href="#csssupportsrule"><code>CSSSupportsRule</code></a>, <a

  1630     href="#csssupportsrule" title="section 7.5."><strong>7.5.</strong></a>

  1632    <li>general_enclosed, <a href="#general_enclosed"

  1633     title="section 6."><strong>6.</strong></a>

  1635    <li>group rule body, <a href="#group-rule-body"

  1636     title="section 3."><strong>3.</strong></a>

  1638    <li>group_rule_body, <a href="#group_rule_body"

  1639     title="section 3."><strong>3.</strong></a>

  1641    <li>media, <a href="#media" title="section 5."><strong>5.</strong></a>

  1643    <li>‘<code class=css>@media</code>’ rule, <a href="#atmedia-rule"

  1644     title="section 5."><strong>5.</strong></a>

  1646    <li>nested_statement, <a href="#nested_statement"

  1647     title="section 3."><strong>3.</strong></a>

  1649    <li>support, <a href="#dfn-support"

  1650     title="section 6.1."><strong>6.1.</strong></a>

  1652    <li>supports_condition, <a href="#supports_condition"

  1653     title="section 6."><strong>6.</strong></a>

  1655    <li>supports_condition_in_parens, <a href="#supports_condition_in_parens"

  1656     title="section 6."><strong>6.</strong></a>

  1658    <li>supports_conjunction, <a href="#supports_conjunction"

  1659     title="section 6."><strong>6.</strong></a>

  1661    <li>supports_declaration_condition, <a

  1662     href="#supports_declaration_condition"

  1663     title="section 6."><strong>6.</strong></a>

  1665    <li>supports_disjunction, <a href="#supports_disjunction"

  1666     title="section 6."><strong>6.</strong></a>

  1668    <li>supports_negation, <a href="#supports_negation"

  1669     title="section 6."><strong>6.</strong></a>

  1671    <li>‘<code class=css>@supports</code>’ rule, <a

  1672     href="#atsupports-rule" title="section 6."><strong>6.</strong></a>

  1674    <li>supports_rule, <a href="#supports_rule"

  1675     title="section 6."><strong>6.</strong></a>

  1676   </ul>

  1677   <!--end-index-->

  1678 </html>

  1679 <!-- Keep this comment at the end of the file

  1680 Local variables:

  1681 mode: sgml

  1682 sgml-declaration:"~/SGML/HTML4.decl"

  1683 sgml-default-doctype-name:"html"

  1684 sgml-minimize-attributes:t

  1685 sgml-nofill-elements:("pre" "style" "br")

  1686 sgml-live-element-indicator:t

  1687 sgml-omittag:nil

  1688 sgml-shorttag:nil

  1689 sgml-namecase-general:t

  1690 sgml-general-insert-case:lower

  1691 sgml-always-quote-attributes:t

  1692 sgml-indent-step:nil

  1693 sgml-indent-data:t

  1694 sgml-parent-document:nil

  1695 sgml-exposed-tags:nil

  1696 sgml-local-catalogs:nil

  1697 sgml-local-ecat-files:nil

  1698 End:

  1699 -->

Mercurial > drafts / file revision

css3-conditional/Overview.html@7dace721dff3

css3-conditional/Overview.html