drafts: css3-conditional/Overview.html@3b40faa91133

[css3-conditional] Specify behavior of insertRule when given an empty string or more than one syntactically valid rule.

This is as proposed in
http://lists.w3.org/Archives/Public/www-style/2013Feb/0229.html
and addresses Last Call issue 5.

     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>&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 <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">&lt;url&gt;</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(&lt;string&gt;)</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(&lt;string&gt;)</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(&lt;string&gt;)</dfn></dt>

  1055   <dd>

  1056     <p>The contents of the &lt;string&gt; 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, but

  1176     this does include cases where the string given does not parse into a

  1177     single CSS rule (such as when the string is empty) or where there is

  1178     anything other than whitespace or comments after that single CSS rule. It

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

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

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

  1182     <p>The return value is the <var>index</var> parameter.

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

  1185     <code>void</code>

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

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

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

  1190     <code>cssRules.length</code>.

  1191   </dl>

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

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

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

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

  1198    condition and a statement block.

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

  1201     attribute DOMString conditionText;

  1202 }</pre>

  1204   <dl class=idl-attributes>

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

  1207    <dd>

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

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

  1210      interfaces of <a

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

  1212      derived interfaces may specify different behavior for this attribute

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

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

  1215      rules apply:

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

  1218      result of serializing the associated condition.

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

  1221      be run:

  1223     <ol>

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

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

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

  1228       with the given value.

  1230      <li>Otherwise, do nothing.

  1231     </ol>

  1232   </dl>

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

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

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

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

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

  1241     readonly attribute <a

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

  1243 }</pre>

  1245   <dl class=idl-attributes>

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

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

  1248     readonly

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

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

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

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

  1255     (CSSMediaRule-specific definition for attribute on CSSConditionRule)

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

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

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

  1260     rule.

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

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

  1263   </dl>

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

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

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

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

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

  1272 }</pre>

  1274   <dl class=idl-attributes>

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

  1276     (CSSSupportsRule-specific definition for attribute on CSSConditionRule)

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

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

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

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

  1282     the same result as the specified condition in any conformant

  1283     implementation of this specification (including implementations that

  1284     implement future extensions allowed by the <a

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

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

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

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

  1289     logical simplifications (such as removal of unneeded parentheses, or

  1290     simplification based on evaluating results) are not allowed.

  1291   </dl>

  1292   <!--

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

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

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

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

  1299 }</pre>

  1300 -->

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

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

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

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

  1307    CSS-related functions that do not belong elsewhere.

  1309   <pre class=idl>interface CSS {

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

  1311   static boolean supports(DOMString conditionText);

  1312 }</pre>

  1314   <dl class=idl-methods>

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

  1316     <code>boolean</code>

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

  1319     <code>boolean</code>

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

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

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

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

  1325     successfully parsed as a supported value for that property. (Literal

  1326     match means that no CSS escape processing is performed, and leading and

  1327     trailing whitespace are not stripped, so any leading whitespace, trailing

  1328     whitespace, or CSS escapes equivalent to the name of a property would

  1329     cause the method to return <code>false</code>.) Otherwise, it must return

  1330     <code>false</code>.

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

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

  1333      evaluated as a <a

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

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

  1336   </dl>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1356    this module are:

  1358   <ul>

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

  1360   </ul>

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

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

  1364    this module.

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

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

  1368    all syntax in all of those modules is valid.

  1370   <div class=example>

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

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

  1373     requirements that <a href="#CSS21"

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

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

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

  1377     syntax added by other modules as invalid.

  1378   </div>

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

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

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

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

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

  1386    Classes</h3>

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

  1389    conformance classes:

  1391   <dl>

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

  1393     sheet</dfn>

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

  1396     style sheet</a>.

  1398    <dt><dfn id=conform-processor

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

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

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

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

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

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

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

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

  1410   </dl>

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

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

  1414    as requirements of style sheets.

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

  1417    meets all applicable conformance requirements in the module that are

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

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

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

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

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

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

  1424    color on a monochrome monitor.)

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

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

  1428    is a conformant processor.

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

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

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

  1434    invalid (and <a

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

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

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

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

  1439    unsupported component values and honor supported values in a single

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

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

  1442    ignored.

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

  1445    Implementations</h3>

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

  1448    reserve a <a

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

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

  1451    Working Group recommends that experimental implementations of features in

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

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

  1454    specification reaches the Candidate Recommendation stage, implementors

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

  1456    be correctly implemented according to spec.

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

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

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

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

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

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

  1465    terms:

  1467   <dl>

  1468    <dt>independent

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

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

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

  1473     implementation of this specification are exempt from this requirement.

  1475    <dt>interoperable

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

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

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

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

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

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

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

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

  1486    <dt>implementation

  1488    <dd>a user agent which:

  1489     <ol class=inline>

  1490      <li>implements the specification.

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

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

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

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

  1496       one month in order to demonstrate stability.

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

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

  1500     </ol>

  1501   </dl>

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

  1504    months.

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

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

  1509    since the <a

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

  1511    September 2012 Working Draft</a>:

  1513   <ul>

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

  1515     deferred to Level 4.

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

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

  1519     notations as always being false.

  1521    <li>Corrected the grammar as follows:

  1522     <pre>

  1523 -  : SUPPORTS_SYM S+ supports_condition group_rule_body

  1524 +  : SUPPORTS_SYM S* supports_condition group_rule_body

  1525 </pre>

  1527     <pre>

  1528 -  : (URI | FUNCTION) S*

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

  1530 </pre>

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

  1533     productions rather than literals.

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

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

  1537     forwards-compatible parsing rules.

  1538   </ul>

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

  1542   <p> Thanks to the ideas and feedback from Tab Atkins, Arthur Barstow, Ben

  1543    Callahan, <span lang=tr>Tantek Çelik</span>, Alex Danilo, Elika Etemad,

  1544    Pascal Germroth, <span lang=de>Björn Höhrmann</span>, Paul Irish, <span

  1545    lang=nl>Anne van Kesteren</span>, Vitor Menezes, Alex Mogilevsky, Chris

  1546    Moschini, James Nurthen, Simon Pieters, <span lang=fr>Florian

  1547    Rivoal</span>, <span lang=fr>Simon Sapin</span>, Nicholas Shanks, Ben

  1548    Ward, Zack Weinberg, Estelle Weyl, Boris Zbarsky, and all the rest of the

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

  1550    community.

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

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

  1555   <!--begin-normative-->

  1556   <!-- Sorted by label -->

  1558   <dl class=bibliography>

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

  1560     <!---->

  1562    <dt id=CSS21>[CSS21]

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

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

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

  1567     2011. W3C Recommendation. URL: <a

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

  1569    </dd>

  1570    <!---->

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

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

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

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

  1577     progress.) URL: <a

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

  1579    </dd>

  1580    <!---->

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

  1584    <dd>John Daggett. <a

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

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

  1587     progress.) URL: <a

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

  1589    </dd>

  1590    <!---->

  1592    <dt id=MEDIAQ>[MEDIAQ]

  1594    <dd>Florian Rivoal. <a

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

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

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

  1598    </dd>

  1599    <!---->

  1601    <dt id=RFC2119>[RFC2119]

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

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

  1605     RFC 2119. URL: <a

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

  1607    </dd>

  1608    <!---->

  1609   </dl>

  1610   <!--end-normative-->

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

  1613   <!--begin-informative-->

  1614   <!-- Sorted by label -->

  1616   <dl class=bibliography>

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

  1618     <!---->

  1620    <dt id=CSS1>[CSS1]

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

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

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

  1625     Recommendation. URL: <a

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

  1627    </dd>

  1628    <!---->

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

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

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

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

  1635     progress.) URL: <a

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

  1637    </dd>

  1638    <!---->

  1639   </dl>

  1640   <!--end-informative-->

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

  1643   <!--begin-index-->

  1645   <ul class=indexlist>

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

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

  1649    <li>conformance

  1650     <ul>

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

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

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

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

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

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

  1659     </ul>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1693    <li>OR, <a href="#or" title="section 6."><strong>6.</strong></a>

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

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

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

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

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

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

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

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

  1707    <li>supports_declaration_condition, <a

  1708     href="#supports_declaration_condition"

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

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

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

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

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

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

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

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

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

  1723    <li>SUPPORTS_SYM, <a href="#supports_sym"

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

  1725   </ul>

  1726   <!--end-index-->

  1727 </html>

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

  1729 Local variables:

  1730 mode: sgml

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

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

  1733 sgml-minimize-attributes:t

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

  1735 sgml-live-element-indicator:t

  1736 sgml-omittag:nil

  1737 sgml-shorttag:nil

  1738 sgml-namecase-general:t

  1739 sgml-general-insert-case:lower

  1740 sgml-always-quote-attributes:t

  1741 sgml-indent-step:nil

  1742 sgml-indent-data:t

  1743 sgml-parent-document:nil

  1744 sgml-exposed-tags:nil

  1745 sgml-local-catalogs:nil

  1746 sgml-local-ecat-files:nil

  1747 End:

  1748 -->

Mercurial > drafts / file revision

css3-conditional/Overview.html@3b40faa91133

css3-conditional/Overview.html