Warning:
This wiki has been archived and is now read-only.
Css3-conditional
Contents
CSS3 条件规则
编者草案 2012年10月30日
当前版本：
http://www.w3.org/TR/2012/ED-css3-conditional-20121030/
最新版本：
http://www.w3.org/TR/css3-conditional/
编者草案：
http://dev.w3.org/csswg/css3-conditional/
先前版本：
http://www.w3.org/TR/2012/WD-css3-conditional-20120911/
作者： L. David Baron, Mozilla
议题清单
维护文件（仅编者草案是最新的）
发送反馈至：
公共邮件列表www-style@w3.org （档案 说明） 邮件主题以[css3-conditional]开头
测试套件：
已提交的测试；还没有创建测试套件
版权 © 2012 W3C® （MIT，ERCIM，Keio），All Rights Reserved. W3C 责任，商标 和 文档使用 规则。
概要
CSS是一种在页面，屏幕，语音等媒介中呈现结构化文档（如HTML和XML）的描述语言。此模块包含CSS样式表的部分条件处理特性，包含处理程序或带有样式表的文档的能力。它基于CSS1，包含并且继承了CSS2的功能特性[1]。与CSS2相比主要的扩展是允许在‘@media’里面嵌套另一@规则，并为条件处理增加了‘@supports’规则。
本文档状态
这是公共的编者草案的副本，它仅仅是提供讨论，以后可能会修改。它发表到这并不代表内容被W3C认可。不要引用此文档至进行中的项目。
目录
1.介绍
1.1背景
此部分不是标准的。
[CSS21] 定义了一种条件组规则，‘@media’规则，仅允许规则集包含其中。‘@media’规则具有特定媒体样式表，也提供样式表链接特性，例如：‘@import’和 <link>。‘@media’规则内容上的限制使得它很少有用；它迫使人们在包括@规则的特定媒体样式表中使用CSS特性，为每个介质使用独立的样式表。
这个规范扩充了条件组规则的内容，允许其他@规则，人们可以把包含@规则的CSS特性和媒体特定样式表合并到一个样式表中。
此规范也定义了其他类型的条件规则：‘@supports’ ，以解决作者和用户的要求。
‘@supports’允许CSS有条件的实现CSS属性和对应值。此规则使得开发者可以很容易的使用新的CSS特性，并且对不支持这些属性的做平稳退化。这对CSS特性特别重要,它提供新的设计机制及此种情况下,一套相关的样式受限于某些属性的支持。
1.2模块相互关系
这个模块取代和扩展了[CSS21]中7.2.1章节定义的‘@media’规则特性。合并了先前非规范的修改:[MEDIAQ]第一章。
当前的定义依赖于[CSS3-FONTS]和[CSS3-ANIMATIONS]中定义的@-规则。但是依赖关系只是假设这些模块将发展的遥遥领先，如果本模块发展更快，依赖将会颠倒。
1.3 文档约定
一致性需求用描述性的断言和RFC 2119术语表示。在此文档规范性部分的关键字“MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, 和“OPTIONAL”被解读为RFC 2119。然而，为便于阅读，此规范中的这些词没有用大写。
除了明确标记为非规范部分，例子和注释之外，此规范的所有文字是符合规范的[RFC2119]。
此文档的例子用“for example”表述，或者用class="example"特定格式的文本表示，如下：
EXAMPLE 1 这是示例。
注释以"Note"开始，用class="note"特定样式。
Note, 注释示例.
2.条件组规则处理
此文档定义了一些CSS @-rules，名叫conditional group rules（条件组规则），它把条件和一组CSS规则联合起来。这些不同的规则可以测试不同类型的条件，当条件是true或false时，规则内容如何表现。
EXAMPLE 2
如下规则:
@media print {
#navigation { display: none }
}
仅当样式表被用于打印(print)媒介时，特定的CSS规则才起作用（ID为“navigation”的元素将为 display:none）。
每一个条件组规则都有一个条件用来判断是否满足。当条件满足，CSS肯定在自己的位置发挥作用。当不满足条件时，CSS解析器不会应用组中的任何CSS规则。条件的声明不影响CSS对象模型（CSS object model），规则内容一直保留在分组之中。
意思是多条条件组规则嵌套使用时，外面所有的条件都满足时，最里面的CSS才起作用。
EXAMPLE 3
嵌套规则示例：
@media print { // rule (1)
#navigation { display: none }
@media (max-width: 12cm) { // rule (2)
.note { float: none }
}
}
当处于打印媒介（print media）时，标记(1)的条件满足，当显示区域小于等于12cm时，标记（2）的条件满足（并且在打印媒介中）。因此‘#navigation
{ display: none }’样式应用在打印媒介，处于打印媒介并且显示区域的宽度小于等于12cm时，‘.note { float: none }’样式才起作用。
当条件组规则的条件改变时，CSS解析器肯定会立刻反映出其中的CSS是否起作用，除非属性定义的值持续在一个生命周期（比如[CSS3-TRANSITIONS和[CSS3-ANIMATIONS]的一些属性）。
3.条件组规则的内容
每一条件组规则语法是由一些特定类型的规则和组规则主体组成，规则体（一对大括号）包含一系列规则。
规则主体允许包含规则集和任何在样式表的顶层，某一规则集之前和之后的@-rules。意思是@-rules必须在样式表的开始（比如‘@charset’, ‘@import’, 和‘@namespace’），不允许在条件规则之内。条件组规则可以嵌套。
规范定义了以下使用条件组规则的语法：
nested_statement : ruleset | media | page | font_face_rule | keyframes_rule | supports_rule ;
group_rule_body
: '{' S* nested_statement* '}' S*
;
所有的成果基于此语法，除了在[CSS3-FONTS]中定义的font_face_rule，在[CSS3-ANIMATIONS]中定义的keyframes_rule，在此规范中定义的media, supports_rule。
总之，未来CSS规范增加新的@-rules，允许在其他类型规则之后出现时，应该修改nested_statement，保持语法的精确性。
样式表不允许使用条件组规定的规则以外的规则。
CSS解析器肯定忽略不被认可的规则，肯定会处理以下表述的无效的规则，章节 4.2 (处理解析错误规则)，章节 4.1.5 (At-规则)和[CSS21]的章节 4.1.7 (规则集, 声明块和选择器)。
4.条件组规则布置
条件组规则允许放在样式表顶层，其它条件组规则之中。CSS处理器肯定会像以上描述的解析这个规则。
任何不允许出现在规则集之后的规则（例如, ‘@charset’, ‘@import’, 或 ‘@namespace’规则），也不允许出现在条件组规则之后。因此，样式表不允许在条件组规则之后放置这些规则，CSS解析器肯定会忽略它们。
5.Media-specific媒体特性样式表：‘@media’规则
‘@media’规则是条件分组规则，它的条件是媒介查询。它的组成：@关键字‘@media’，其后跟媒体查询列表（[MEDIAQ]中定义，也可能空），再后面跟分组规则主体。规则的条件是媒体查询的结果。
EXAMPLE 4
‘@media’规则:
@media print, (max-width: 600px) {
#extra_navigation { display: none }
}
print媒介，设备宽度最大600px时，条件‘print, (max-width: 600px)’为true。两条都满足，样式‘#extra_navigation { display: none }’才起作用
依据语法，此规范扩展了Grammar of CSS 2.1中的media，([CSS21], Appendix G)
media : MEDIA_SYM S* media_query_list group_rule_body ;
group_rule_body在此规范中定义，media_query_list在[MEDIAQ]中定义，其它在Grammar of CSS 2.1([CSS21], Appendix G)中定义。
6.特性查询：‘@supports’规则
‘@supports’规则是一个条件组规则，它的条件判断用户代理是否支持CSS属性名值对。我们可以在样式表中使用新特性并对不支持的情况做优雅降级。CSS已存在平稳退化机制，比如忽略不支持的属性值，当大量的样式需要绑定到支持某些特性时，它稍显不足，新布局系统特性的使用正是它的用武之地。
‘@supports’规则中的条件语法相比其他条件组规则略显难懂（尽管跟媒体查询media queries类似）：
- 排除（not）是有用的，以便新特性的样式和后备样式可以分开（@-rules语法有向前兼容语法规则），并且不会彼此覆盖
- 联合（and）是有用的，多个需要的特性可以一起使用
- 析取（or）是有用的，对于一套样式有多种可选择的特性，特别是一种属性需要对应不同的浏览器厂商前缀
因此，‘@supports’规则可以使用一对属性：值和联合（and）,析取（or）,排除（not）。
扩展了CSS 2.1语法([CSS21], Appendix G)的词汇表，增加：
@{S}{U}{P}{P}{O}{R}{T}{S} {return SUPPORTS_SYM;}
{O}{R} {return OR;}
增加语法：
supports_rule : SUPPORTS_SYM S* supports_condition group_rule_body ;
supports_condition
: NOT S* '(' any+ ')' S* |
'(' any+ ')' S* ( ( AND | OR ) S* any+ )*
any标记是CSS 2.1 语法和基本数据类型中给出的。
以上的语法故意比较宽松是出于向前兼容的目的。任何‘@supports’规则根据以上语法归为无效的不会解析。样式表不会应用，解析器肯定会忽略它。
‘@supports’真实的处理模型依据更严格的语法，包括功能函数或者括起来的声明，根据逻辑语句组合在一起，按照以下的语法定义：
supports_condition : supports_negation | supports_conjunction | supports_disjunction | supports_condition_in_parens ;
supports_condition_in_parens
: ( '(' S* supports_condition ')' S* ) | supports_declaration_condition |
supports_function
;
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_declaration_condition
: '(' S* core_declaration ')' S*
;
supports_function : FUNCTION S* [any|unused]* ')' ;
core_declaration是[CSS21]中的section 4.1.1 (Tokenization)中定义的CSS的核心语法声明, AND, NOT符号是Media Queries规范[MEDIAQ]中定义的。
每一语法术语都返回布尔类型结果，如下：
supports_condition 此结果是单独子条件的结果
supports_condition_in_parens 此结果是单一supports_condition或supports_declaration_condition子条件的结果
supports_negation 此结果是supports_condition_in_parens子条件的相反值
supports_conjunction 如果所有supports_condition_in_parens子条件为true，则最终结果为true，否则为false。
supports_disjunction 如果supports_condition_in_parens子条件中任一条件为true，则最终结果为true，否则为false。
supports_declaration_condition 返回结果是CSS解析器是否支持圆括号里的声明。
supports_function 此结果永远是false。注意将来的标准也许可以定义函数把它设置成true。
除此之外 如果加括号的表达式没有匹配以上任何一种语法的结果，它不能被视为无效，只是出于支持条件的目的简单设置为false。
‘@supports’规则的条件是supports_rule的子条件supports_condition的结果。
EXAMPLE 5
@supports ( display: flexbox ) {
body, #navigation, #content { display: flexbox; }
#navigation { background: blue; color: white; }
#article { background: white; color: black; }
}
仅当‘display: flexbox’支持时，里面的‘@supports’规则才会生效。
EXAMPLE 6
以下的‘@supports’规则例子是当‘display: flexbox’不支持时，可以提供一个选择：
@supports not ( display: flexbox ) {
body { width: 100%; height: 100%; background: white; color: black; }
#navigation { width: 25%; }
#article { width: 75%; }
}
注意：‘width’声明对基于flexbox的布局可能有干扰，因此保证在非flexbox布局中非常重要。
EXAMPLE 7 以下例子检测‘box-shadow’属性支持，包括对带浏览器前缀属性的检测。如果目前支持，‘box-shadow’（包括前缀版本）和‘color’生效；‘box-shadow’不支持的话，
文字就看不见了。 @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; -moz-box-shadow: 2px 2px 2px black; -webkit-box-shadow: 2px 2px 2px black; -o-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; /* unprefixed last */ } }
为了避免‘and’和‘or’的混淆，语法要求‘and’和‘or’明确定义（为它们添加逗号或空格），而且，为避免优先权的混淆，语法不允许‘and’, ‘or’, 和 ‘not’操作符在没有一层括号的情况下混用。
EXAMPLE 8
例如，以下规则无效：
@supports (transition-property: color) or
(animation-name: foo) and
(transform: rotate(10deg)) {
// ...
}
作为替代，正确的写法是以下其中之一：
@supports ((transition-property: color) or
(animation-name: foo)) and
(transform: rotate(10deg)) {
// ...
}
@supports (transition-property: color) or
((animation-name: foo) and
(transform: rotate(10deg))) {
// ...
}
只有一条表达式时，经验证声明需要加括号：
EXAMPLE 9
以下不合法;
@supports display: flexbox {
// ...
}
正确写法：
@supports (display: flexbox) {
// ...
}
语法允许在不必须的情况，增加多余的括号。这一灵活性有时是有用的（例如，注释掉表达式的一部分），也可能对开发者工具有用。
EXAMPLE 10
例如，可能这么写：
@supports ((display: flexbox)) {
// ...
}
一条声明后面跟随‘!important’是允许的，尽管它不会改变声明的有效性。
EXAMPLE 11
以下规则是有效的：
@supports (display: flexbox !important) {
// ...
}
6.1support定义
为了向前兼容，[CSS21]的章节 4.1.8 ( 声明和属性)定义了规则处理无效的属性和值。CSS解析器没有实现或者部分实现了一条规范，必须能够处理它们没实现的值的任一部分，或者没到可用的水平,根据这个规则处理无效的属性和值，因此必须丢弃宣告作为解析错误。
如果某一CSS解析器解析了某些声明（由属性和值组成）（而不是把它作为一处解析错误），那么它被认为支持此声明。如果给出的值，解析器没有实现，没到支持的可用级别，它肯定不能解析或者声称支持它。
这些规则（和他们之间的等价物）允许编者使用回退（在[CSS1]意义上的声明会被后面的声明覆盖，或者被此规范中的‘@supports’规则赋予新的功能），已实现的特性可以正常使用。这一应用尤其适用于符合值；具体实现必须处理值的所有部分以确定支持的声明在规则集内部还是在‘@supports’规则的条件声明中。
7.APIs
7.1CSSRule接口扩展
CSSRule接口扩展如下：
partial interface CSSRule {
const unsigned short SUPPORTS_RULE = 12;
}
7.2CSSGroupingRule接口
CSSGroupingRule接口描述一个包含其它嵌套其中规则的@规则
interface CSSGroupingRule : CSSRule {
readonly attribute CSSRuleList cssRules;
unsigned long insertRule (DOMString rule, unsigned long index);
void deleteRule (unsigned long index);
}
CSSRuleList类型的cssRules，只读
cssRules属性为了嵌套在分组规则中的CSS规则列表，必须返回一个 CSSRuleList 对象。
insertRule(DOMString rule, unsigned long index)返回unsigned long
insertRule操作必须在cssRules以index形式返回的CSS规则列表中插入一个CSS规则rule。
deleteRule (unsigned long index)返回void
deleteRule 操作必须从cssRules以index形式返回的CSS规则列表中一处一个CSS规则。
7.3CSSConditionRule接口
CSSConditionRule接口代表所有由条件和语句块组成的“conditional”的@规则。
interface CSSConditionRule : CSSGroupingRule {
attribute DOMString conditionText;
}
DOMString类型的conditionText conditionText属性代表规则的条件。由于在CSSConditionRule派生的接口之间，条件确实改变，这些派生的接口可能会为属性指定不同的行为（见下面CSSMediaRule示例）。缺乏这种规则特定的行为时，以下规则使用：
conditionText属性在获取时，必须返回序列化关联条件的结果。
设置conditionText属性时，必须遵循这些步骤：
- 去掉给定值的空格
- 如果给出的值针对特定规则，匹配上适当条件结果的语法，用给出的值替换关联的CSS条件
- 否则，啥也不做
7.4CSSMediaRule接口
CSSMediaRule接口描述‘@media’规则：
interface CSSMediaRule : CSSConditionRule {
readonly attribute MediaList media;
}
MediaList类型的media，只读
media属性必须为@media规则中指定的媒体查询列表返回 MediaList 对象 。
DOMString类型的conditionText
conditionText属性（CSSConditionRule父规则中定义的），获取时必须返回media.mediaText的值。
设置conditionText属性必须设置media.mediaText属性
7.5CSSSupportsRule接口
CSSSupportsRule接口描述‘@supports’规则：
interface CSSSupportsRule : CSSConditionRule {
}
7.6CSS接口和supports()函数
CSS接口保留有用的CSS相关的函数，这些不属于其他组件。
interface CSS {
boolean supports(DOMString property, DOMString value);
boolean supports(DOMString declaration);
}
supports(DOMString property, DOMString value)返回boolean supports(DOMString conditionText)返回boolean
当supports()方法带两个参数属性和值执行时，如果属性逐字匹配UA支持的CSS属性的名字，则返回true，值将被成功解析为这个属性支持的值。否则，返回false。
当只有一个conditionText 参数执行时，当conditionText被解析作为supports_condition时，将返回true。否则返回false。
8.一致性
8.1基础模块
此规范依据基础模块定义了一致性，它建立在这些基础模块之上，基础模块是：
* [CSS21]
所有基础模块的所有一致性需求都合并到了这里，除了被此模块覆盖的部分。
此外，此模块中所有与语法有效性有关的一致性需求，和所有的基础模块的所有语法都是有理有据的。
EXAMPLE 12 这意味着，此模块中提出的语法，不同于[CSS21]，必须遵守[CSS21]定义的属性解析要求。[CSS21]中处理无效语法的需求不把其他模块添加的语法视为无效。
此外，样式表或处理器的一致性可以把一些合理的语法添加到附加的模块；这些语法的使用没有使样式表不符合标准或不起作用，视这种语法无效也不会使处理器不符合标准。
8.2一致性类别
CSS条件规则模块被定义为三个一致性类别：
style sheet
解析器
阅读CSS样式表的工具：它可能是个渲染器或用户代理，它解释样式表的语义，渲染应用样式的文档，或者它是校验样式表的验证器。
编程工具
写样式表的工具。
如果样式表符合本模块中所有有关它的一致性需求，那么样式表和CSS条件规则模块是一致的。
如果解析器符合本模块所有有关它的一致性需求，那么处理器与CSS条件规则模块保持一致。 总之，所有适用于渲染器的需求，没有被处理器执行的一部分CSS需求是不可用的，比如，渲染相关的需求对验证器来说不可用。处理器不能恰当地渲染文档归结于设备的局限性，并不代表它不符合标准（比如，处理器不需要在单色显示器渲染色彩）。
如果编程工具编写与本模块一致的样式表，（如果它理解CSS）它是个一致性的处理器，编程工具与CSS条件规则模块保持一致。
8.3部分实现
为了让开发者可以开发向前兼容的解析规则，指定替代的值，CSS渲染器必须把没到可用程度的任何@规则，属性，属性值，关键字和其他语法结构视为无效（恰当的忽略）。用户代理尤其不能在一个单一多值的属性声明中，选择性地忽略不支持的值，优先考虑支持的值：如果任何值被认为无效（一定是不支持的值），CSS要求整个声明被忽略。
8.4尝试实现
为了避免与未来的CSS特性冲突，此CSS规范为私有属性和值保留了前缀语法。CSS工作组推荐，在CSS工作草案中实验性的实现使用供应商前缀命名。这避免了在草案中与未来修改的不兼容性。一旦一个规范到了候选推荐（Candidate Recommendation）阶段，供应商们应该对根据标准实现的任何特性启用没前缀语法。
8.5CR正式推出条件
本规范若想被极力推荐，必须有至少两家独立的，相互协作的实现者，每一特性可以被不同的产品实现，并不要求所有特性被同一产品实现。为了这个条件，我们定义了以下的术语：
independent独立机构
每一实现必须是不同组织开发，不能共享，二次开发，或基于另一有资格实现的代码。跟此规范实现没关系的代码没有此项要求。
interoperable彼此协作
在官方的CSS测试集（CSS test suite）中通过各自的测试用例，如果不是web浏览器实现，需要同等意义的测试用例。如果这一user agent（UA）有交互性要求，同样需要创建相应的测试用例。此外，如果这一UA有交互性要求，则必须有一个或更多的UA在同样的条件下通过相关的测试。相关测试必须公开地通过同行审查。
implementation实现
一个user agent必须：（1）实现此规范，（2）公开可用。实现可能是个安装产品或者其它公开可用版本（beta测试版，预览版，或者“nightly build每日构建”）。不长久的产品必须在一段时期至少一个月实现这些特性，以便证明其稳定性。（3）不能是实验性的（比如，特别为通过测试用例设计的产品，不打算长远使用）。
至少6个月之内，此规范都将是候选推荐阶段（Candidate Recommendation）。