index.html 57 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang=en>
 <head profile="http://www.w3.org/2006/03/hcard"><meta content="text/html;
  charset=utf-8" http-equiv=Content-Type>

  <title>CSS Conditional Rules Module Level 3</title>
  <link href=default.css rel=stylesheet type="text/css">
  <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
  type="text/css">

 <body>
  <div class=head> <!--begin-logo-->
   <p><a href="http://www.w3.org/"><img alt=W3C height=48
    src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

   <h1>CSS Conditional Rules Module Level 3</h1>

   <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 1 September
    2011</h2>

   <dl>
    <dt>This version:

    <dd><a href="http://www.w3.org/TR/2011/WD-css3-conditional-20110901/">
     http://www.w3.org/TR/2011/WD-css3-conditional-20110901/</a>

    <dt>Latest version:

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


    <dt>Editor's draft:

    <dd><a
     href="http://dev.w3.org/csswg/css3-conditional/">http://dev.w3.org/csswg/css3-conditional/</a>


    <dt>Previous version:

    <dd>none

    <dt>Editors:

    <dd class=vcard><a class=fn href="http://dbaron.org/">L. David Baron</a>,
     <a class=org href="http://www.mozilla.org/">Mozilla</a>, <a class=email
     href="mailto:dbaron@dbaron.org">dbaron@dbaron.org</a>
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=license>Copyright</a> &copy; 2011 <a
    href="http://www.w3.org/"><acronym title="World Wide Web
    Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
    href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
    of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
    title="European Research Consortium for Informatics and
    Mathematics">ERCIM</acronym></a>, <a
    href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>
   <!--end-copyright-->
   <hr title="Separator for header">
  </div>

  <h2 class="no-num no-toc" id=abstract>Abstract</h2>

  <p>CSS is a language for describing the rendering of structured documents
   (such as HTML and XML) on screen, on paper, in speech, etc. This module
   contains the features of CSS for conditional processing of parts of style
   sheets, conditioned on capabilities of the processor or the document the
   style sheet is being applied to. It includes and extends the functionality
   of CSS level&nbsp;2 <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, which builds on CSS
   level&nbsp;1 <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>.
   The main extensions compared to level&nbsp;2 are allowing nesting of
   certain at-rules inside &lsquo;<code class=css>@media</code>&rsquo;, the
   addition of the &lsquo;<code class=css>@supports</code>&rsquo; and
   &lsquo;<code class=css>@document</code>&rsquo; rules for conditional
   processing.

  <h2 class="no-num no-toc" id=status>Status of this document</h2>
  <!--begin-status-->

  <p><em>This section describes the status of this document at the time of
   its publication. Other documents may supersede this document. A list of
   current W3C publications and the latest revision of this technical report
   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
   index at http://www.w3.org/TR/.</a></em>

  <p>Publication as a Working Draft does not imply endorsement by the W3C
   Membership. This is a draft document and may be updated, replaced or
   obsoleted by other documents at any time. It is inappropriate to cite this
   document as other than work in progress.

  <p>The (<a
   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
   <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
   for discussion of this specification. When sending e-mail, please put the
   text &#8220;css3-conditional&#8221; in the subject, preferably like this:
   &#8220;[<!---->css3-conditional<!---->] <em>&hellip;summary of
   comment&hellip;</em>&#8221;

  <p>This document was produced by the <a
   href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
   the <a href="http://www.w3.org/Style/">Style Activity</a>).

  <p>This document was produced by a group operating under the <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
   2004 W3C Patent Policy</a>. W3C maintains a <a
   href="http://www.w3.org/2004/01/pp-impl/32061/status"
   rel=disclosure>public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
   6 of the W3C Patent Policy</a>.</p>
  <!--end-status-->

  <p>This is the First Public Working Draft of the CSS Conditional Rules
   Module Level 3.

  <p>The following features are at risk:

  <ul>
   <li>The inclusion of &lsquo;<code class=css>@font-face</code>&rsquo; rules
    and &lsquo;<code class=css>@keyframes</code>&rsquo; rules as allowed
    within all of the @-rules in this specification is at risk, though only
    because of the relative rates of advancement of specifications. If this
    specification is able to advance faster than one or both of the
    specifications defining those rules, then the inclusion of those rules
    will move from this specification to the specification defining those
    rules.

   <li>The addition of support for @-rules inside of conditional grouping
    rules is at risk; if interoperable implementations are not found, it may
    be removed to advance the other features in this specification to
    Proposed Recommendation.

   <li>The &lsquo;<code class=css>@supports</code>&rsquo; rule is at risk; if
    interoperable implementations are not found, it may be removed to advance
    the other features in this specification to Proposed Recommendation.

   <li>The &lsquo;<code class=css>@document</code>&rsquo; rule is at risk; if
    interoperable implementations are not found, it may be removed to advance
    the other features in this specification to Proposed Recommendation.
  </ul>

  <h2 class="no-num no-toc" id=contents>Table of contents</h2>
  <!--begin-toc-->

  <ul class=toc>
   <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
    <ul class=toc>
     <li><a href="#context"><span class=secno>1.1. </span>Background</a>

     <li><a href="#placement"><span class=secno>1.2. </span>Module
      Interactions</a>

     <li><a href="#conventions"><span class=secno>1.3. </span>Document
      Conventions</a>
    </ul>

   <li><a href="#processing"><span class=secno>2. </span>Processing of
    conditional group rules</a>

   <li><a href="#contents-of"><span class=secno>3. </span>Contents of
    conditional group rules</a>

   <li><a href="#use"><span class=secno>4. </span>Placement of conditional
    group rules</a>

   <li><a href="#at-media"><span class=secno>5. </span>Media-specific style
    sheets: the &lsquo;<code class=css>@media</code>&rsquo; rule</a>

   <li><a href="#at-supports"><span class=secno>6. </span>Feature queries:
    the &lsquo;<code class=css>@supports</code>&rsquo; rule</a>
    <ul class=toc>
     <li><a href="#support-definition"><span class=secno>6.1.
      </span>Definition of support</a>

     <li><a href="#partial-implementations"><span class=secno>6.2.
      </span>Partial implementations</a>
    </ul>

   <li><a href="#at-document"><span class=secno>7. </span>Document queries:
    the &lsquo;<code class=css>@document</code>&rsquo; rule</a>

   <li><a href="#conformance"><span class=secno>8. </span>Conformance</a>
    <ul class=toc>
     <li><a href="#base-modules"><span class=secno>8.1. </span>Base
      Modules</a>

     <li><a href="#conformance-classes"><span class=secno>8.2.
      </span>Conformance Classes</a>

     <li><a href="#partial"><span class=secno>8.3. </span> Partial
      Implementations</a>

     <li><a href="#experimental"><span class=secno>8.4. </span>Experimental
      Implementations</a>

     <li><a href="#cr-exit-criteria"><span class=secno>8.5. </span>CR Exit
      Criteria</a>
    </ul>

   <li class=no-num><a href="#grammar">Grammar</a>

   <li class=no-num><a href="#acknowledgments">Acknowledgments</a>

   <li class=no-num><a href="#references">References</a>
    <ul class=toc>
     <li class=no-num><a href="#normative-references">Normative
      references</a>

     <li class=no-num><a href="#other-references">Other references</a>
    </ul>

   <li class=no-num><a href="#index">Index</a>
  </ul>
  <!--end-toc-->

  <h2 id=introduction><span class=secno>1. </span>Introduction</h2>

  <h3 id=context><span class=secno>1.1. </span>Background</h3>

  <p><em>This section is not normative.</em>

  <p><a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> defines
   one type of conditional group rule, the &lsquo;<code
   class=css>@media</code>&rsquo; rule, and allows only rulesets (not other
   @-rules) inside of it. The &lsquo;<code class=css>@media</code>&rsquo;
   rule provides the ability to have media-specific style sheets, which is
   also provided by style sheet linking features such as &lsquo;<code
   class=css>@import</code>&rsquo; and <code class=html>&lt;link&gt;</code>.
   The restrictions on the contents of &lsquo;<code
   class=css>@media</code>&rsquo; rules made them less useful; they have
   forced authors using CSS features involving @-rules in media-specific
   style sheets to use separate style sheets for each medium.

  <p>This specification extends the rules for the contents of conditional
   group rules to allow other @-rules, which enables authors to combine CSS
   features involving @-rules with media specific style sheets within a
   single style sheet.

  <p>This specification also defines additional types of conditional group
   rules, &lsquo;<code class=css>@supports</code>&rsquo; and &lsquo;<code
   class=css>@document</code>&rsquo;, to address author and user
   requirements.

  <p>The &lsquo;<code class=css>@supports</code>&rsquo; rule allows CSS to be
   conditioned on implementation support for CSS properties and values. This
   rule makes it much easier for authors to use new CSS features and provide
   good fallback for implementations that do not support those features. This
   is particularly important for CSS features that provide new layout
   mechanisms, and for other cases where a set of related styles needs to be
   conditioned on property support.

  <p>The &lsquo;<code class=css>@document</code>&rsquo; rule allows CSS to be
   conditioned on the page to which the style sheet is being applied. This
   allows users to apply styles to a particular page or group of pages, which
   greatly increases the power of user style sheets.

  <h3 id=placement><span class=secno>1.2. </span>Module Interactions</h3>

  <p>This module replaces and extends the &lsquo;<code
   class=css>@media</code>&rsquo; rule feature defined in <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> section <var>7.2.1</var> and
   incorporates the modifications previously made non-normatively by <a
   href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a> section
   <var>1</var>.

  <p>Its current definition depends on @-rules defined in <a href="#CSS3FONT"
   rel=biblioentry>[CSS3FONT]<!--{{!CSS3FONT}}--></a> and <a
   href="#CSS3-ANIMATIONS"
   rel=biblioentry>[CSS3-ANIMATIONS]<!--{{!CSS3-ANIMATIONS}}--></a>, but that
   dependency is only on the assumption that those modules will advance ahead
   of this one. If this module advances faster, then the dependency will be
   reversed.

  <h3 id=conventions><span class=secno>1.3. </span>Document Conventions</h3>

  <p>Conformance requirements are expressed with a combination of descriptive
   assertions and RFC 2119 terminology. The key words “MUST”, “MUST
   NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
   “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
   normative parts of this document are to be interpreted as described in RFC
   2119. However, for readability, these words do not appear in all uppercase
   letters in this specification.

  <p>All of the text of this specification is normative except sections
   explicitly marked as non-normative, examples, and notes. <a
   href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>

  <p>Examples in this specification are introduced with the words “for
   example” or are set apart from the normative text with <code
   class=html>class="example"</code>, like this:

  <div class=example>
   <p>This is an example of an informative example.</p>
  </div>

  <p>Informative notes begin with the word “Note” and are set apart from
   the normative text with <code class=html>class="note"</code>, like this:

  <p class=note>Note, this is an informative note.

  <h2 id=processing><span class=secno>2. </span>Processing of conditional
   group rules</h2>

  <p>This specification defines some CSS @-rules, called <dfn
   id=conditional-group-rules>conditional group rules</dfn>, that associate a
   condition with a group of other CSS rules. These different rules allow
   testing different types of conditions, but share common behavior for how
   their contents are used when the condition is true and when the condition
   is false.

  <div class=example>
   <p>For example, this rule:</p>

   <pre>@media print {
  #navigation { display: none }
}</pre>

   <p>causes a particular CSS rule (making elements with ID "navigation" be
    display:none) apply only when the style sheet is used for a print medium.
    Likewise, this CSS rule:</p>

   <pre>@document url("http://www.example.com/") {
  #example1 { display: none }
}</pre>

   <p>does the same type of conditional application, but using a different
    condition: whether the style sheet is being applied to the page
    <code>http://www.example.com/</code>.</p>
  </div>

  <p>Each conditional group rule has a condition, which at any time evaluates
   to true or false. When the condition is true, CSS processors
   <strong>must</strong> apply the rules inside the group rule as though they
   were at the group rule's location; when the condition is false, CSS
   processors <strong>must</strong> not apply any of rules inside the group
   rule. The current state of the condition does not affect the CSS object
   model, in which the contents of the group rule always remain within the
   group rule.

  <p>This means that when multiple conditional group rules are nested, a rule
   inside of both of them applies only when all of the rules' conditions are
   true.

  <div class=example>For example, with this set of nested rules:
   <pre>@media print { // rule (1)
  #navigation { display: none }
  @media (max-width: 12cm) { // rule (2)
    .note { float: none }
  }
}</pre>
   the condition of the rule marked (1) is true for print media, and the
   condition of the rule marked (2) is true when the width of the display
   area (which for print media is the page box) is less than or equal to
   12cm. Thus the rule &lsquo;<code class=css>#navigation { display: none
   }</code>&rsquo; applies whenever this style sheet is applied to print
   media, and the rule &lsquo;<code class=css>.note { float: none
   }</code>&rsquo; is applied only when the style sheet is applied to print
   media <em>and</em> the width of the page box is less than or equal to 12
   centimeters.</div>

  <p>When the condition for a conditional group rule changes, CSS processors
   <strong>must</strong> reflect that the rules now apply or no longer apply,
   except for properties whose definitions define effects of computed values
   that persist past the lifetime of that value (such as for some properties
   in <a href="#CSS3-TRANSITIONS"
   rel=biblioentry>[CSS3-TRANSITIONS]<!--{{CSS3-TRANSITIONS}}--></a> and <a
   href="#CSS3-ANIMATIONS"
   rel=biblioentry>[CSS3-ANIMATIONS]<!--{{!CSS3-ANIMATIONS}}--></a>).

  <h2 id=contents-of><span class=secno>3. </span>Contents of conditional
   group rules</h2>

  <p class=issue>There is also likely demand for using these conditions with
   &lsquo;<code class=css>@import</code>&rsquo;. We should see if we can come
   up with sensible syntax for that, perhaps functional notation at the end
   of the &lsquo;<code class=css>@import</code>&rsquo; rule.

  <p>The syntax of each conditional group rule consists of some syntax
   specific to the type of rule followed by a <dfn id=group-rule-body>group
   rule body</dfn>, which is a block (pair of braces) containing a sequence
   of rules.

  <p>A group rule body is allowed to contain rulesets and any @-rules that
   are allowed at the top level of a style sheet before and after a ruleset.
   This means that @-rules that must occur at the beginning of the style
   sheet (such as &lsquo;<code class=css>@charset</code>&rsquo;, &lsquo;<code
   class=css>@import</code>&rsquo;, and &lsquo;<code
   class=css>@namespace</code>&rsquo; rules) are not allowed inside of
   conditional group rules. Conditional group rules can be nested.

  <p>In terms of the grammar, this specification defines the following
   productions for use in the grammar of conditional group rules:

  <pre>nested_statement
  : ruleset | media | page | font_face_rule | keyframes-rule |
    supports_rule | document_rule
  ;

group_rule_body
  : '{' S* nested_statement* '}' S*
  ;</pre>

  <p> in which all the productions are defined in that grammar with the
   exception of <code>font_face_rule</code> <span class=issue>not</span>
   defined in <a href="#CSS3FONT"
   rel=biblioentry>[CSS3FONT]<!--{{!CSS3FONT}}--></a>,
   <code>keyframes-rule</code> <span class=issue>shouldn't have dash?</span>
   defined in <a href="#CSS3-ANIMATIONS"
   rel=biblioentry>[CSS3-ANIMATIONS]<!--{{!CSS3-ANIMATIONS}}--></a>, and
   <code>media</code>, <code>supports_rule</code> and
   <code>document_rule</code> defined in this specification.

  <p>In general, future CSS specifications that add new @-rules that are not
   forbidden to occur after some other types of rules should modify this
   <code>nested_statement</code> production to keep the grammar accurate.

  <p>Style sheets <strong>must not</strong> use rules other than the allowed
   ones inside conditional group rules.

  <p>CSS processors <strong>must</strong> ignore rules that are not allowed
   within a group rule, and <strong>must</strong> handle invalid rules inside
   of group rules as described in <a
   href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">section 4.2
   (Rules for handling parsing errors)</a>, <a
   href="http://www.w3.org/TR/CSS21/syndata.html#at-rules">section 4.1.5
   (At-rules)</a>, and <a
   href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">section 4.1.7
   (Rule sets, declaration blocks, and selectors)</a> of <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.

  <h2 id=use><span class=secno>4. </span>Placement of conditional group rules</h2>

  <p>Conditional group rules are allowed at the top-level of a style sheet,
   and inside other conditional group rules. CSS processors
   <strong>must</strong> process such rules as <a
   href="#processing">described above</a>.

  <p>Any rules that are not allowed after a ruleset (e.g., &lsquo;<code
   class=css>@charset</code>&rsquo;, &lsquo;<code
   class=css>@import</code>&rsquo;, or &lsquo;<code
   class=css>@namespace</code>&rsquo; rules) are also not allowed after a
   conditional group rule. Therefore, style sheets <strong>must not</strong>
   place such rules after a conditional group rules, and CSS processors
   <strong>must</strong> ignore such rules.

  <h2 id=at-media><span class=secno>5. </span>Media-specific style sheets:
   the &lsquo;<code class=css>@media</code>&rsquo; rule</h2>

  <p>The <dfn id=media-rule>&lsquo;<code class=css>@media</code>&rsquo;
   rule</dfn> is a conditional group rule whose condition is a media query.
   It consists of the at-keyword &lsquo;<code class=css>@media</code>&rsquo;
   followed by a (possibly empty) media query (as defined in <a
   href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a>), followed
   by a group rule body. The condition of the rule is the result of the media
   query.

  <div class=example>
   <p>This &lsquo;<code class=css>@media</code>&rsquo; rule:</p>

   <pre>@media print, (max-width: 600px) {
  #extra_navigation { display: none }
}</pre>

   <p>has the condition &lsquo;<code class=css>print, (max-width:
    600px)</code>&rsquo;, which is true for print media and for devices whose
    width is at most 600px. When either of these is true, the condition of
    the rule is true, and the rule &lsquo;<code class=css>#extra_navigation {
    display: none }</code>&rsquo; is applied.
  </div>

  <p>In terms of the grammar, this specification extends the
   <code>media</code> production in the <a
   href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a> (<a
   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, Appendix G)
   into:

  <pre>media
  : MEDIA_SYM S+ media_query_list group_rule_body
  ;</pre>

  <p>where the <code>group_rule_body</code> production is defined in this
   specification, the <code>media_query_list</code> production is defined in
   <a href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a>, and the
   others are defined in the <a
   href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a> (<a
   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, Appendix G).

  <p class=issue>This changes the <code>S*</code> in CSS 2.1 into
   <code>S+</code>. Is that correct?

  <h2 id=at-supports><span class=secno>6. </span>Feature queries: the
   &lsquo;<code class=css>@supports</code>&rsquo; rule</h2>

  <p>The <dfn id=supports-rule>&lsquo;<code class=css>@supports</code>&rsquo;
   rule</dfn> is a conditional group rule whose condition tests whether the
   user agent supports CSS property:value pairs. Authors can use it to write
   style sheets that use new features when available but degrade gracefully
   when those features are not supported. CSS has existing mechanisms for
   graceful degradation, such as ignoring unsupported properties or values,
   but these are not always sufficient when large groups of styles need to be
   tied to the support for certain features, as is the case for use of new
   layout system features.

  <p>The syntax of the condition in the &lsquo;<code
   class=css>@supports</code>&rsquo; rule is slightly more complicated than
   for the other conditional group rules (though has some similarities to
   media queries) since:

  <ul>
   <li>negation is needed so that the new-feature styles and the fallback
    styles can be separated (within the forward-compatible grammar's rules
    for the syntax of @-rules), and not required to override each other

   <li>conjunction (and) is needed so that multiple required features can be
    tested

   <li>disjunction (or) is needed when there are multiple alternative
    features for a set of styles, particularly when some of those
    alternatives are vendor-prefixed properties or values
  </ul>

  <p>Therefore, the syntax of the &lsquo;<code
   class=css>@supports</code>&rsquo; rule allows testing for property:value
   pairs, and arbitrary conjunctions (and), disjunctions (or), and negations
   (not) of them.

  <p>This extends the lexical scanner in the <a
   href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a> (<a
   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, Appendix G) by
   adding:

  <pre>@{S}{U}{P}{P}{O}{R}{T}{S}	{return SUPPORTS_SYM;}</pre>

  <p>and the grammar by adding

  <pre>supports_rule
  : SUPPORTS_SYM S+ supports_condition group_rule_body
  ;

supports_condition
  : supports_negation | supports_conjunction | supports_disjunction |
    supports_declaration_condition
  ;

supports_negation
  : 'not' S* supports_condition_in_parens
  ;

supports_conjunction
  : supports_condition_in_parens ( 'and' S* supports_condition_in_parens )+
  ;

supports_disjunction
  : supports_condition_in_parens ( 'or' S* supports_condition_in_parens )+
  ;

supports_condition_in_parens
  : ( '(' supports_condition ')' S* ) | supports_declaration_condition
  ;

supports_declaration_condition
  : '(' S* core_declaration ')' S*
  ;</pre>

  <p>in which <code>core_declaration</code> is the production
   <code>declaration</code> in the core syntax of CSS defined in <a
   href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">section 4.1.1
   (Tokenization)</a> of <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.

  <p>Any &lsquo;<code class=css>@supports</code>&rsquo; rule that does not
   parse according to the grammar above is invalid. Style sheets <strong>must
   not</strong> use such a rule and processors <strong>must</strong> ignore
   such a rule.

  <p class=note>Note that this means that declarations that meet the
   forward-compatible syntax for declarations are permitted (and support for
   them is then tested by the &lsquo;<code class=css>@supports</code>&rsquo;
   rule), but declarations that do not meet the forward-compatible syntax for
   declarations cause the entire &lsquo;<code
   class=css>@supports</code>&rsquo; rule to be ignored.

  <p class=issue>Is any further allowance for forward-compatible parsing
   needed, for example, to allow additional features (such as, say, selector
   tests) to be added to the &lsquo;<code class=css>@supports</code>&rsquo;
   rule? Or are these forward-compatible parsing rules the best solution for
   such future expansion anyway?

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

  <dl>
   <dt>supports_condition

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

   <dt>supports_negation

   <dd> The result is the <em>negation</em> of the result of the
    <code>supports_condition_in_parens</code> child term.

   <dt>supports_conjunction

   <dd> The result is true if the result of <em>all</em> of the
    <code>supports_condition_in_parens</code> child terms is true; otherwise
    it is false.

   <dt>supports_disjunction

   <dd> The result is true if the result of <em>any</em> of the
    <code>supports_condition_in_parens</code> child terms is true; otherwise
    it is false.

   <dt>supports_condition_in_parens

   <dd> The result is the result of the single
    <code>supports_condition</code> or
    <code>supports_declaration_condition</code> child term.

   <dt>supports_declaration_condition

   <dd> The result is whether the CSS processor <a
    href="#support-definition">supports</a> the declaration.
  </dl>

  <p>The condition of the &lsquo;<code class=css>@supports</code>&rsquo; rule
   is the result of the <code>supports_condition</code> term that is a child
   of the <code>supports_rule</code> term.

  <div class=example>
   <p>For example, the following rule</p>

   <pre>@supports ( display: flexbox ) {
  body, #navigation, #content { display: flexbox; }
  #navigation { background: blue; color: white; }
  #article { background: white; color: black; }
}</pre>

   <p>applies the rules inside the &lsquo;<code
    class=css>@supports</code>&rsquo; rule only when &lsquo;<code
    class=css>display: flexbox</code>&rsquo; is supported.</p>
  </div>

  <div class=example>
   <p>The following example shows an additional &lsquo;<code
    class=css>@supports</code>&rsquo; rule that can be used to provide an
    alternative for when &lsquo;<code class=css>display:
    flexbox</code>&rsquo; is not supported:</p>

   <pre>@supports not ( display: flexbox ) {
  body { width: 100%; height: 100%; background: white; color: black; }
  #navigation { width: 25%; }
  #article { width: 75%; }
}</pre>

   <p>Note that the &lsquo;<code class=property>width</code>&rsquo;
    declarations may be harmful to the flexbox-based layout, so it is
    important that they be present only in the non-flexbox styles.</p>
  </div>

  <div class=example>
   <p>The following example checks for support for the &lsquo;<code
    class=property>box-shadow</code>&rsquo; property, including checking for
    support for vendor-prefixed versions of it. When the support is present,
    it specifies both &lsquo;<code class=property>box-shadow</code>&rsquo;
    (with the prefixed versions) and &lsquo;<code
    class=property>color</code>&rsquo; in a way what would cause the text to
    become invisible were &lsquo;<code
    class=property>box-shadow</code>&rsquo; not supported.</p>

   <pre>@supports ( box-shadow: 2px 2px 2px black ) or
          ( -moz-box-shadow: 2px 2px 2px black ) or
          ( -webkit-box-shadow: 2px 2px 2px black ) or
          ( -o-box-shadow: 2px 2px 2px black ) {
  .outline {
    color: white;
    box-shadow: 2px 2px 2px black;
    -moz-box-shadow: 2px 2px 2px black;
    -webkit-box-shadow: 2px 2px 2px black;
    -o-box-shadow: 2px 2px 2px black;
  }
}</pre>
  </div>

  <p>To avoid confusion between &lsquo;<code class=css>and</code>&rsquo; and
   &lsquo;<code class=css>or</code>&rsquo;, the syntax requires that both
   &lsquo;<code class=css>and</code>&rsquo; and &lsquo;<code
   class=css>or</code>&rsquo; be specified explicitly (rather than, say,
   using commas or spaces for one of them). Likewise, to avoid confusion
   caused by precedence rules, the syntax does not allow &lsquo;<code
   class=css>and</code>&rsquo;, &lsquo;<code class=css>or</code>&rsquo;, and
   &lsquo;<code class=css>not</code>&rsquo; operators to be mixed without a
   layer of parentheses.

  <div class=example>
   <p>For example, the following rule is not valid:

   <pre class=illegal-example>@supports (transition-property: color) or
          (animation-name: foo) and
          (transform: rotate(10deg)) {
  // ...
}</pre>

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

   <pre>@supports ((transition-property: color) or
           (animation-name: foo)) and
          (transform: rotate(10deg)) {
  // ...
}</pre>

   <pre>@supports (transition-property: color) or
          ((animation-name: foo)) and
           (transform: rotate(10deg))) {
  // ...
}</pre>
  </div>

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

  <p>A CSS processor is considered to <dfn id=dfn-support>support</dfn> a
   declaration (consisting of a property and value) if it implements the
   given value of the given property.

  <h3 id=partial-implementations><span class=secno>6.2. </span>Partial
   implementations</h3>

  <p>For forward-compatibility, <a
   href="http://www.w3.org/TR/CSS21/syndata.html#declaration">section 4.1.8
   (Declarations and properties)</a> of <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> defines rules for handling
   invalid properties and values. CSS processors that partially implement a
   specification <strong>must</strong> treat any part of a value that they:

  <ul>
   <li>do not implement, or

   <li>do not have a usable level of support for,
  </ul>

  <p>as invalid according to this rule, and <strong>must not</strong> accept
   or support a declaration containing such a value. This allows authors to
   use fallback (either in the <a href="#CSS1"
   rel=biblioentry>[CSS1]<!--{{CSS1}}--></a> sense of declarations that are
   overridden by later declarations or with the new capabilities provided by
   the &lsquo;<code class=css>@supports</code>&rsquo; rule in this
   specification) that works correctly for the features implemented. This
   applies especially to compound values; implementations must implement all
   parts of the value in order to consider the declaration supported, either
   inside a ruleset or in the declaration condition of an &lsquo;<code
   class=css>@supports</code>&rsquo; rule.

  <h2 id=at-document><span class=secno>7. </span>Document queries: the
   &lsquo;<code class=css>@document</code>&rsquo; rule</h2>

  <p>The <dfn id=document-rule>&lsquo;<code class=css>@document</code>&rsquo;
   rule</dfn> is a conditional group rule whose condition depends on the <a
   href="#url-of-doc">URL of the document being styled</a>. This allows style
   sheets, particularly user style sheets, to have styles that only apply to
   a set of pages rather than to all pages using the style sheet.

  <p class=issue>Given that this @-rule is intended primarily for user style
   sheets, what should this specification say about its use in author style
   sheets? Should it be forbidden? Should use instead be discouraged? Or
   should this specification remain neutral on the topic, since there are
   valid uses in author style sheets?

  <p id=url-of-doc>The <dfn id=url-of-the-document-being-styled>URL of the
   document being styled</dfn> is the URI at which the document is located,
   excluding any fragment identifiers. (This means, for example, that HTTP
   redirects have been followed.) If the styles are being applied inside a
   complete document embedded into the presentation of another (e.g., <a
   href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>&#39;s <code
   class=html>iframe</code>, <code class=html>object</code>, or <code
   class=html>img</code> elements), the relevant URI is that of the frame,
   not of its container. However, if content from other documents is mixed in
   via mechanisms that mix content from one document into another (e.g., <a
   href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>&#39;s
   <code>use</code> element), then the address of the container document is
   used.

  <p class=note>Note: In <a href="#HTML5"
   rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>, this is the <a
   href="http://dev.w3.org/html5/spec/dom.html#the-document-s-address">document's
   address</a> of a document in a <a
   href="http://dev.w3.org/html5/spec/browsers.html#browsing-context">browsing
   context</a>.

  <div class=issue>What form of normalization is done on URLs and domains
   before matching? In particular, this specification needs to describe:
   <ul>
    <li>what form is used for the <a href="#url-of-doc">URL of the document
     being styled</a> (and what has been normalized in that form)

    <li>what normalization (if any) happens to the argument of each of the
     match functions before the comparison that they describe and

    <li>whether the comparison algorithm used is string comparison or some
     other URL comparison algorithm.
   </ul>
  </div>

  <p>The &lsquo;<code class=css>@document</code>&rsquo; rule's condition is
   written as a comma-separated list of <dfn id=url-matching-functions>URL
   matching functions</dfn>, and the condition evaluates to true whenever any
   one of those functions evaluates to true. The following URL matching
   functions are permitted:

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

   <dd>
    <p>The &lsquo;<a href="#url-exact"><code
     class=css>url()</code></a>&rsquo; function is the <dfn
     id=exact-url-matching-function>exact url matching function</dfn>. It
     evaluates to true whenever the <a href="#url-of-doc">URL of the document
     being styled</a> is exactly the URL given.</p>

    <p class=Note>The &lsquo;<a href="#url-exact"><code
     class=css>url()</code></a>&rsquo; function, since it is a core syntax
     element in CSS, is allowed (subject to different character limitations
     and thus escaping requirements) to contain an unquoted value (in
     addition to the string values that are allowed as arguments for all four
     functions).</p>

    <div class=example>
     <p>For example, this rule:</p>

     <pre>@document url("http://www.w3.org/Style/CSS/") {
  #summary { background: yellow; color: black}
}</pre>

     <p>styles the <code class=html>summary</code> element on the page
      <code>http://www.w3.org/Style/CSS/</code>, but not on any other pages.</p>
    </div>

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

   <dd>
    <p>The &lsquo;<a href="#url-prefix"><code
     class=css>url-prefix()</code></a>&rsquo; function is the <dfn
     id=url-prefix-matching-function>url prefix matching function</dfn>. It
     evaluates to true whenever the <a href="#url-of-doc">URL of the document
     being styled</a> has the argument to the function as an initial
     substring (which is true when the two strings are equal). When the
     argument is the empty string, it evaluates to true for all documents.</p>

    <div class=example>
     <p>For example, this rule:</p>

     <pre>@document url-prefix("http://www.w3.org/Style/CSS/") {
  #summary { background: yellow; color: black}
}</pre>

     <p>styles the <code class=html>summary</code> element on the page
      <code>http://www.w3.org/Style/CSS/</code> and on the page
      <code>http://www.w3.org/Style/CSS/Test</code>, but it does not affect
      the page <code>http://www.w3.org/</code> or the page
      <code>http://www.example.com/Style/CSS/</code>.</p>
    </div>

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

   <dd>
    <p>The &lsquo;<a href="#url-domain"><code
     class=css>domain()</code></a>&rsquo; function is the <dfn
     id=domain-matching-function>domain matching function</dfn>. It evaluates
     to true whenever the <a href="#url-of-doc">URL of the document being
     styled</a> has a host subcomponent (as defined in <a href="#URI"
     rel=biblioentry>[URI]<!--{{!URI}}--></a>) and that host subcomponent is
     exactly the argument to the &lsquo;<a href="#url-domain"><code
     class=css>domain()</code></a>&rsquo; function or a final substring of
     the host component is a period (U+002E) immediately followed by the
     argument to the &lsquo;<a href="#url-domain"><code
     class=css>domain()</code></a>&rsquo; function.</p>

    <div class=example>
     <p>For example, this rule:</p>

     <pre>@document domain("w3.org") {
  body { font-size: 16px ! important }
}</pre>

     <p>changes the font size of the body element for pages such as
      <code>http://www.w3.org/Style/CSS/</code> and
      <code>http://w3.org/Style/CSS/</code> and
      <code>http://lists.w3.org/Archives/Public/www-style/</code> but it does
      not affect the page <code>http://www.example.com/Style/CSS/</code>.</p>
    </div>

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

   <dd>
    <p>The contents of the &lt;string&gt; argument <strong>must</strong>
     match the JavaScript <code>Pattern</code> production (<a
     href="#ECMA-262-5.1"
     rel=biblioentry>[ECMA-262-5.1]<!--{{!ECMA-262-5.1}}--></a>, section
     15.10.1). However, failing to do so is not a CSS syntax error and does
     not trigger any error handling for CSS syntax errors.</p>

    <p>The &lsquo;<a href="#url-regexp"><code
     class=css>regexp()</code></a>&rsquo; function evaluates to true whenever
     the string argument compiled as a JavaScript regular expression with the
     <code>global</code>, <code>ignoreCase</code> and <code>multiline</code>
     flags <em>disabled</em> (see <a href="#ECMA-262-5.1"
     rel=biblioentry>[ECMA-262-5.1]<!--{{!ECMA-262-5.1}}--></a>, sections
     15.10.7.2 through 15.10.7.4) compiles successfully and the resulting
     regular expression matches the entirety of the <a href="#url-of-doc">URL
     of the document being styled</a>.</p>

    <p class=note>Note that regular expression must match the entire URL, not
     just a part of it.</p>

    <p class=note>Note that this definition intentionally matches the
     behavior of the <a
     href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#attr-input-pattern"><code
     class=html>pattern</code> attribute</a> on the <code
     class=html>input</code> element in <a href="#HTML5"
     rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>.</p>

    <div class=example>
     <p>For example, this rule:</p>

     <pre>@document regexp("http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/") {
  body { font-size: 20px ! important }
}</pre>

     <p>changes the font size of the body element for pages such as
      <code>http://www.w3.org/TR/2011/PR-CSS2-20110412/</code>.</p>

     <p class=note>Note that the backslashes in the regular expression
      require CSS escaping as &lsquo;<code class=css>\\</code>&rsquo;.</p>
    </div>
  </dl>

  <p>Implementations <strong>must</strong> treat any unknown URL matching
   functions as a syntax error, and thus ignore the &lsquo;<code
   class=css>@document</code>&rsquo; rule. <span class=issue>Should we
   instead have more complicated error handling rules to make
   forward-compatibility work differently, or is this rule the best solution
   for such future expansion anyway?</span>

  <p>This extends the lexical scanner in the <a
   href="http://www.w3.org/TR/CSS21/grammar.html">Grammar of CSS 2.1</a> (<a
   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, Appendix G) by
   adding:

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

  <p>and the grammar by adding

  <pre>document_rule
  : DOCUMENT_SYM S+ url_match_fn ( "," S* url_match_fn )* group_rule_body
  ;

url_match_fn
  : (URI | FUNCTION) S*
  ;</pre>

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

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

  <p>This specification defines conformance in terms of base modules, which
   are modules that this specification builds on top of. The base modules of
   this module are:

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

  <p>All of the conformance requirements of all base modules are incorporated
   as conformance requirements of this module, except where overridden by
   this module.

  <p>Additionally, all conformance requirements related to validity of syntax
   in this module and all of its base modules are to be interpreted as though
   all syntax in all of those modules is valid.

  <div class=example>
   <p>For example, this means that grammar presented in modules other than <a
    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> must obey the
    requirements that <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> defines for the parsing of
    properties, and that requirements for handling invalid syntax in <a
    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> do not treat
    syntax added by other modules as invalid.
  </div>

  <p>Additionally, the set of valid syntax can be increased by the
   conformance of a style sheet or processor to additional modules; use of
   such syntax does not make a style sheet nonconformant and failure to treat
   such syntax as invalid does not make a processor nonconformant.

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

  <p>Conformance to the CSS Conditional Rules Module is defined for three
   conformance classes:

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

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

   <dt><dfn id=conform-processor
    title="conformance::processor">processor</dfn>

   <dd>A tool that reads CSS style sheets: it may be a renderer or <a
    href="http://www.w3.org/TR/CSS21/conform.html#user-agent">user-agent</a>
    that interprets the semantics of a style sheet and renders documents that
    use style sheets, or it may be a validator that checks style sheets.

   <dt><dfn id=conform-authoring-tool title="conformance::authoring
    tool">authoring tool</dfn>

   <dd>A tool that writes a style sheet.
  </dl>

  <p>A style sheet is conformant to the CSS Conditional Rules Module if it
   meets all of the conformance requirements in the module that are described
   as requirements of style sheets.

  <p>A processor is conformant to the CSS Conditional Rules Module if it
   meets all applicable conformance requirements in the module that are
   described as requirements of processors. In general, all requirements are
   applicable to renderers. Requirements concerning a part of CSS not
   performed by a processor are not applicable, e.g., requirements related to
   rendering are not applicable to a validator. The inability of a processor
   to correctly render a document due to limitations of the device does not
   make it non-conformant. (For example, a renderer is not required to render
   color on a monochrome monitor.)

  <p>An authoring tool is conformant to the CSS Conditional Rules Module if
   it writes style sheets that conform to the module and (if it reads CSS) it
   is a conformant processor.

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

  <p>So that authors can exploit the forward-compatible parsing rules to
   assign fallback values, CSS renderers <strong>must</strong> treat as
   invalid (and <a
   href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
   appropriate</a>) any at-rules, properties, property values, keywords, and
   other syntactic constructs for which they have no usable level of support.
   In particular, user agents <strong>must not</strong> selectively ignore
   unsupported component values and honor supported values in a single
   multi-value property declaration: if any value is considered invalid (as
   unsupported values must be), CSS requires that the entire declaration be
   ignored.

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

  <p>To avoid clashes with future CSS features, the CSS specifications
   reserve a <a
   href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
   syntax</a> for proprietary property and value extensions to CSS. The CSS
   Working Group recommends that experimental implementations of features in
   CSS Working Drafts also use vendor-prefixed property or value names. This
   avoids any incompatibilities with future changes in the draft. Once a
   specification reaches the Candidate Recommendation stage, implementors
   should implement the non-prefixed syntax for any feature they consider to
   be correctly implemented according to spec.

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

  <p>For this specification to be advanced to Proposed Recommendation, there
   must be at least two independent, interoperable implementations of each
   feature. Each feature may be implemented by a different set of products,
   there is no requirement that all features be implemented by a single
   product. For the purposes of this criterion, we define the following
   terms:

  <dl>
   <dt>independent

   <dd>each implementation must be developed by a different party and cannot
    share, reuse, or derive from code used by another qualifying
    implementation. Sections of code that have no bearing on the
    implementation of this specification are exempt from this requirement.

   <dt>interoperable

   <dd>passing the respective test case(s) in the official CSS test suite,
    or, if the implementation is not a Web browser, an equivalent test. Every
    relevant test in the test suite should have an equivalent test created if
    such a user agent (UA) is to be used to claim interoperability. In
    addition if such a UA is to be used to claim interoperability, then there
    must one or more additional UAs which can also pass those equivalent
    tests in the same way for the purpose of interoperability. The equivalent
    tests must be made publicly available for the purposes of peer review.

   <dt>implementation

   <dd>a user agent which:
    <ol class=inline>
     <li>implements the specification.

     <li>is available to the general public. The implementation may be a
      shipping product or other publicly available version (i.e., beta
      version, preview release, or “nightly build”). Non-shipping product
      releases must have implemented the feature(s) for a period of at least
      one month in order to demonstrate stability.

     <li>is not experimental (i.e., a version specifically designed to pass
      the test suite and is not intended for normal usage going forward).
    </ol>
  </dl>

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

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

  <p>In order to allow these new @-rules in CSS style sheets, this
   specification modifies the <code>stylesheet</code> production in the <a
   href="http://www.w3.org/TR/CSS21/grammar.html">Appendix G</a> grammar of
   <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> by replacing
   the <code>media</code> production defined in <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> with the <code>media</code>
   production defined in this one, and additionally inserting <code>|
   supports_rule | document_rule</code> alongside <code>ruleset | media |
   page</code>.

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

  <p> Thanks to the ideas and feedback from <span lang=tr>Tantek
   Çelik</span>, Elika Etemad, Pascal Germroth, <span lang=de>Björn
   Höhrmann</span>, Alex Mogilevsky, Chris Moschini, Ben Ward, Zack
   Weinberg, Boris Zbarsky, and all the rest of the <a
   href="http://lists.w3.org/Archives/Public/www-style/">www-style</a>
   community.

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

  <h3 class=no-num id=normative-references>Normative references</h3>
  <!--begin-normative-->
  <!-- Sorted by label -->

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

   <dt id=CSS21>[CSS21]

   <dd>Bert Bos; et al. <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
    Sheets Level 2 Revision 1 (CSS&#160;2.1) Specification.</cite></a> 7 June
    2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
    </dd>
   <!---->

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

   <dd>Dean Jackson; David Hyatt; Chris Marrin. <a
    href="http://www.w3.org/TR/2009/WD-css3-animations-20090320"><cite>CSS
    Animations Module Level 3.</cite></a> 20 March 2009. W3C Working Draft.
    (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2009/WD-css3-animations-20090320">http://www.w3.org/TR/2009/WD-css3-animations-20090320</a>
    </dd>
   <!---->

   <dt id=CSS3FONT>[CSS3FONT]

   <dd>John Daggett. <a
    href="http://www.w3.org/TR/2011/WD-css3-fonts-20110324"><cite>CSS Fonts
    Module Level 3.</cite></a> 24 March 2011. W3C Working Draft. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2011/WD-css3-fonts-20110324">http://www.w3.org/TR/2011/WD-css3-fonts-20110324</a>
    </dd>
   <!---->

   <dt id=ECMA-262-5.1>[ECMA-262-5.1]

   <dd><a
    href="http://www.ecma-international.org/publications/standards/Ecma-262.htm"><cite>ECMAScript
    Language Specification, Edition 5.1.</cite></a> June 2011. ISO/IEC
    16262:2011. URL: <a
    href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">http://www.ecma-international.org/publications/standards/Ecma-262.htm</a>
    </dd>
   <!---->

   <dt id=MEDIAQ>[MEDIAQ]

   <dd>H&#229;kon Wium Lie; et al. <a
    href="http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/"><cite>Media
    Queries.</cite></a> 27 July 2010. W3C Candidate Recommendation. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/">http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/</a>
    </dd>
   <!---->

   <dt id=RFC2119>[RFC2119]

   <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
    words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
    RFC 2119. URL: <a
    href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
    </dd>
   <!---->

   <dt id=URI>[URI]

   <dd>T. Berners-Lee; R. Fielding; L. Masinter. <a
    href="http://www.ietf.org/rfc/rfc3986.txt"><cite>Uniform Resource
    Identifiers (URI): generic syntax.</cite></a> January 2005. Internet RFC
    3986. URL: <a
    href="http://www.ietf.org/rfc/rfc3986.txt">http://www.ietf.org/rfc/rfc3986.txt</a>
    </dd>
   <!---->
  </dl>
  <!--end-normative-->

  <h3 class=no-num id=other-references>Other references</h3>
  <!--begin-informative-->
  <!-- Sorted by label -->

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

   <dt id=CSS1>[CSS1]

   <dd>H&#229;kon Wium Lie; Bert Bos. <a
    href="http://www.w3.org/TR/2008/REC-CSS1-20080411"><cite>Cascading Style
    Sheets (CSS1) Level 1 Specification.</cite></a> 11 April 2008. W3C
    Recommendation. URL: <a
    href="http://www.w3.org/TR/2008/REC-CSS1-20080411">http://www.w3.org/TR/2008/REC-CSS1-20080411</a>
    </dd>
   <!---->

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

   <dd>Dean Jackson; et al. <a
    href="http://www.w3.org/TR/2009/WD-css3-transitions-20091201"><cite>CSS
    Transitions Module Level 3.</cite></a> 1 December 2009. W3C Working
    Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2009/WD-css3-transitions-20091201">http://www.w3.org/TR/2009/WD-css3-transitions-20091201</a>
    </dd>
   <!---->

   <dt id=HTML5>[HTML5]

   <dd>Ian Hickson. <a
    href="http://www.w3.org/TR/2011/WD-html5-20110525/"><cite>HTML5.</cite></a>
    25 May 2011. W3C Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2011/WD-html5-20110525/">http://www.w3.org/TR/2011/WD-html5-20110525/</a>
    </dd>
   <!---->

   <dt id=SVG11>[SVG11]

   <dd>Erik Dahlstr&#246;m; et al. <a
    href="http://www.w3.org/TR/2011/PR-SVG11-20110609/"><cite>Scalable Vector
    Graphics (SVG) 1.1 (Second Edition).</cite></a> 9 June 2011. W3C Proposed
    Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2011/PR-SVG11-20110609/">http://www.w3.org/TR/2011/PR-SVG11-20110609/</a>
    </dd>
   <!---->
  </dl>
  <!--end-informative-->

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

  <ul class=indexlist>
   <li>conditional group rules, <a href="#conditional-group-rules"
    title="conditional group rules"><strong>2.</strong></a>

   <li>conformance
    <ul>
     <li>authoring tool, <a href="#conform-authoring-tool"
      title="conformance, authoring tool"><strong>8.2.</strong></a>

     <li>processor, <a href="#conform-processor" title="conformance,
      processor"><strong>8.2.</strong></a>

     <li>style sheet, <a href="#conform-style-sheet" title="conformance,
      style sheet"><strong>8.2.</strong></a>
    </ul>

   <li>&lsquo;<code class=css>@document</code>&rsquo; rule, <a
    href="#document-rule" title="'@document' rule"><strong>7.</strong></a>

   <li>domain(), <a href="#url-domain"
    title="domain()"><strong>7.</strong></a>

   <li>domain matching function, <a href="#domain-matching-function"
    title="domain matching function"><strong>7.</strong></a>

   <li>exact url matching function, <a href="#exact-url-matching-function"
    title="exact url matching function"><strong>7.</strong></a>

   <li>group rule body, <a href="#group-rule-body" title="group rule
    body"><strong>3.</strong></a>

   <li>&lsquo;<code class=css>@media</code>&rsquo; rule, <a
    href="#media-rule" title="'@media' rule"><strong>5.</strong></a>

   <li>regexp(), <a href="#url-regexp"
    title="regexp()"><strong>7.</strong></a>

   <li>support, <a href="#dfn-support"
    title=support><strong>6.1.</strong></a>

   <li>&lsquo;<code class=css>@supports</code>&rsquo; rule, <a
    href="#supports-rule" title="'@supports' rule"><strong>6.</strong></a>

   <li>url(), <a href="#url-exact" title="url()"><strong>7.</strong></a>

   <li>URL matching functions, <a href="#url-matching-functions" title="URL
    matching functions"><strong>7.</strong></a>
    <ul>
     <li>domain, <a href="#url-domain" title="URL matching functions,
      domain"><strong>7.</strong></a>

     <li>exact, <a href="#url-exact" title="URL matching functions,
      exact"><strong>7.</strong></a>

     <li>prefix, <a href="#url-prefix" title="URL matching functions,
      prefix"><strong>7.</strong></a>

     <li>regular expression, <a href="#url-regexp" title="URL matching
      functions, regular expression"><strong>7.</strong></a>
    </ul>

   <li>URL of the document being styled, <a
    href="#url-of-the-document-being-styled" title="URL of the document being
    styled"><strong>7.</strong></a>

   <li>url-prefix(), <a href="#url-prefix"
    title="url-prefix()"><strong>7.</strong></a>

   <li>url prefix matching function, <a href="#url-prefix-matching-function"
    title="url prefix matching function"><strong>7.</strong></a>
  </ul>
  <!--end-index-->
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
sgml-omittag:nil
sgml-shorttag:nil
sgml-namecase-general:t
sgml-general-insert-case:lower
sgml-always-quote-attributes:t
sgml-indent-step:nil
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
End:
-->