You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1384 lines
57 KiB
1384 lines
57 KiB
<!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> © 2011 <a
|
|
href="http://www.w3.org/"><acronym title="World Wide Web
|
|
Consortium">W3C</acronym></a><sup>®</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 2 <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, which builds on CSS
|
|
level 1 <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>.
|
|
The main extensions compared to level 2 are allowing nesting of
|
|
certain at-rules inside ‘<code class=css>@media</code>’, the
|
|
addition of the ‘<code class=css>@supports</code>’ and
|
|
‘<code class=css>@document</code>’ 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 “css3-conditional” in the subject, preferably like this:
|
|
“[<!---->css3-conditional<!---->] <em>…summary of
|
|
comment…</em>”
|
|
|
|
<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 ‘<code class=css>@font-face</code>’ rules
|
|
and ‘<code class=css>@keyframes</code>’ 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 ‘<code class=css>@supports</code>’ 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 ‘<code class=css>@document</code>’ 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 ‘<code class=css>@media</code>’ rule</a>
|
|
|
|
<li><a href="#at-supports"><span class=secno>6. </span>Feature queries:
|
|
the ‘<code class=css>@supports</code>’ 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 ‘<code class=css>@document</code>’ 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 ‘<code
|
|
class=css>@media</code>’ rule, and allows only rulesets (not other
|
|
@-rules) inside of it. The ‘<code class=css>@media</code>’
|
|
rule provides the ability to have media-specific style sheets, which is
|
|
also provided by style sheet linking features such as ‘<code
|
|
class=css>@import</code>’ and <code class=html><link></code>.
|
|
The restrictions on the contents of ‘<code
|
|
class=css>@media</code>’ 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, ‘<code class=css>@supports</code>’ and ‘<code
|
|
class=css>@document</code>’, to address author and user
|
|
requirements.
|
|
|
|
<p>The ‘<code class=css>@supports</code>’ 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 ‘<code class=css>@document</code>’ 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 ‘<code
|
|
class=css>@media</code>’ 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 ‘<code class=css>#navigation { display: none
|
|
}</code>’ applies whenever this style sheet is applied to print
|
|
media, and the rule ‘<code class=css>.note { float: none
|
|
}</code>’ 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
|
|
‘<code class=css>@import</code>’. We should see if we can come
|
|
up with sensible syntax for that, perhaps functional notation at the end
|
|
of the ‘<code class=css>@import</code>’ 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 ‘<code class=css>@charset</code>’, ‘<code
|
|
class=css>@import</code>’, and ‘<code
|
|
class=css>@namespace</code>’ 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., ‘<code
|
|
class=css>@charset</code>’, ‘<code
|
|
class=css>@import</code>’, or ‘<code
|
|
class=css>@namespace</code>’ 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 ‘<code class=css>@media</code>’ rule</h2>
|
|
|
|
<p>The <dfn id=media-rule>‘<code class=css>@media</code>’
|
|
rule</dfn> is a conditional group rule whose condition is a media query.
|
|
It consists of the at-keyword ‘<code class=css>@media</code>’
|
|
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 ‘<code class=css>@media</code>’ rule:</p>
|
|
|
|
<pre>@media print, (max-width: 600px) {
|
|
#extra_navigation { display: none }
|
|
}</pre>
|
|
|
|
<p>has the condition ‘<code class=css>print, (max-width:
|
|
600px)</code>’, 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 ‘<code class=css>#extra_navigation {
|
|
display: none }</code>’ 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
|
|
‘<code class=css>@supports</code>’ rule</h2>
|
|
|
|
<p>The <dfn id=supports-rule>‘<code class=css>@supports</code>’
|
|
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 ‘<code
|
|
class=css>@supports</code>’ 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 ‘<code
|
|
class=css>@supports</code>’ 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 ‘<code class=css>@supports</code>’ 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 ‘<code class=css>@supports</code>’
|
|
rule), but declarations that do not meet the forward-compatible syntax for
|
|
declarations cause the entire ‘<code
|
|
class=css>@supports</code>’ 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 ‘<code class=css>@supports</code>’
|
|
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 ‘<code class=css>@supports</code>’ 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 ‘<code
|
|
class=css>@supports</code>’ rule only when ‘<code
|
|
class=css>display: flexbox</code>’ is supported.</p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>The following example shows an additional ‘<code
|
|
class=css>@supports</code>’ rule that can be used to provide an
|
|
alternative for when ‘<code class=css>display:
|
|
flexbox</code>’ 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 ‘<code class=property>width</code>’
|
|
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 ‘<code
|
|
class=property>box-shadow</code>’ property, including checking for
|
|
support for vendor-prefixed versions of it. When the support is present,
|
|
it specifies both ‘<code class=property>box-shadow</code>’
|
|
(with the prefixed versions) and ‘<code
|
|
class=property>color</code>’ in a way what would cause the text to
|
|
become invisible were ‘<code
|
|
class=property>box-shadow</code>’ 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 ‘<code class=css>and</code>’ and
|
|
‘<code class=css>or</code>’, the syntax requires that both
|
|
‘<code class=css>and</code>’ and ‘<code
|
|
class=css>or</code>’ 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 ‘<code
|
|
class=css>and</code>’, ‘<code class=css>or</code>’, and
|
|
‘<code class=css>not</code>’ 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 ‘<code class=css>@supports</code>’ 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 ‘<code
|
|
class=css>@supports</code>’ rule.
|
|
|
|
<h2 id=at-document><span class=secno>7. </span>Document queries: the
|
|
‘<code class=css>@document</code>’ rule</h2>
|
|
|
|
<p>The <dfn id=document-rule>‘<code class=css>@document</code>’
|
|
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>'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>'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 ‘<code class=css>@document</code>’ 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"><url></dfn>
|
|
|
|
<dd>
|
|
<p>The ‘<a href="#url-exact"><code
|
|
class=css>url()</code></a>’ 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 ‘<a href="#url-exact"><code
|
|
class=css>url()</code></a>’ 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(<string>)</dfn>
|
|
|
|
<dd>
|
|
<p>The ‘<a href="#url-prefix"><code
|
|
class=css>url-prefix()</code></a>’ 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(<string>)</dfn>
|
|
|
|
<dd>
|
|
<p>The ‘<a href="#url-domain"><code
|
|
class=css>domain()</code></a>’ 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 ‘<a href="#url-domain"><code
|
|
class=css>domain()</code></a>’ function or a final substring of
|
|
the host component is a period (U+002E) immediately followed by the
|
|
argument to the ‘<a href="#url-domain"><code
|
|
class=css>domain()</code></a>’ 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(<string>)</dfn>
|
|
|
|
<dd>
|
|
<p>The contents of the <string> 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 ‘<a href="#url-regexp"><code
|
|
class=css>regexp()</code></a>’ 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 ‘<code class=css>\\</code>’.</p>
|
|
</div>
|
|
</dl>
|
|
|
|
<p>Implementations <strong>must</strong> treat any unknown URL matching
|
|
functions as a syntax error, and thus ignore the ‘<code
|
|
class=css>@document</code>’ 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 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å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å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ö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>‘<code class=css>@document</code>’ 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>‘<code class=css>@media</code>’ 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>‘<code class=css>@supports</code>’ 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:
|
|
-->
|