CSS 条件规则模块第 3 级

1. 引言

1.1. 背景

本节不具有规范性。

[CSS21] 定义了一种条件分组规则——@media 规则，并且只允许在其中包含样式规则（不允许其他 @-规则）。@media 规则提供了根据媒体构建特定样式表的能力，这同样可以通过诸如 @import 与 link 等样式表链接特性实现。对 @media 规则内容的限制使其用途受限；这迫使使用涉及 @-规则的 CSS 功能的作者在媒体特定的样式表中必须为每种介质使用单独的样式表。

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.

This specification also defines an additional type of conditional group rule, @supports, to address author and user requirements.

The @supports 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.

1.2. 模块交互

This module replaces and extends the @media rule feature defined in [CSS21] section 7.2.1 and incorporates the modifications previously made non-normatively by [MEDIAQUERIES-4] section 1.

2. 条件分组规则的处理

This specification defines some CSS at-rules, called conditional group rules, 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.

例如，下面的规则

@media print {
  /* hide navigation controls when printing */
  #navigation { display: none }
}

仅在样式表用于打印介质时才会使特定的 CSS 规则（把 ID 为 “navigation” 的元素设为 display:none）生效。

每个条件分组规则都有一个条件，该条件随时会求值为 true 或 false。当条件为真时，CSS 处理器必须将组规则内部的规则视作位于组规则所在位置一样应用；当条件为假时，CSS 处理器 必须不 应用组规则内部的任何规则。条件的当前状态并不影响 CSS 对象模型，组规则的内容始终保留在组规则内部。

测试

If condition is true, rules applied in place.

If condition is false, rules not applied.

CSSOM contains rules regardless of condition.

conditional-CSSGroupingRule.html (live test) (source)

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.

测试

Nested rules apply when all conditions are true.

例如，下面这组嵌套规则

@media print { /* rule (1) */
  /* hide navigation controls when printing */
  #navigation { display: none }
  @media (max-width: 12cm) { /* rule (2) */
    /* keep notes in flow when printing to narrow pages */
    .note { float: none }
  }
}

标记 (1) 的规则在打印介质时条件为真，标记 (2) 的规则在显示区域宽度（对打印介质而言为页面盒） ≤ 12 cm 时条件为真。因此，规则 #navigation { display: none } 在样式表被用于打印介质时始终生效，而规则 .note { float: none } 仅在样式表用于打印介质且页面盒宽度 ≤ 12 cm 时才生效。

When the condition for a conditional group rule changes, CSS processors must 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 [CSS3-TRANSITIONS] and [CSS3-ANIMATIONS]).

测试

Change in condition simultaneous with change in condition application (except per transition/animation rules).

at-media-dynamic-001.html (live test) (source)

3. 条件分组规则的内容

All conditional group rules are defined to take a <rule-list> in their block, and accept any rule that is normally allowed at the top-level of a stylesheet, and not otherwise restricted. (For example, an @import rule must appear at the actual beginning of a stylesheet, and so is not valid inside of another rule.)

测试

Valid to nest all unrestricted top-level rules.

Invalid or unknown rules inside the <rule-list> must be considered invalid and ignored, but do not invalidate the conditional group rule.

测试

Invalid rules do not invalidate conditional group rule.

Any namespace prefixes used in a conditional group rule must have been declared, otherwise they are invalid.

例如，下面的规则使用了 CSS 合格名称，是合法的，因为相应的命名空间前缀已经绑定到命名空间 URL。

@namespace x url(https://w3org.cn/1999/xlink);
@supports (content: attr(x|href)) {
  // do something }

例如，判断下面规则是否合法时

@supports (content: attr(n|tooltip)) {
  // do something }

用户代理会查询命名空间映射，查看是否存在与前缀 “n” 对应的命名空间 URL。

测试

Validity of namespace prefixes depends on namespace map.

4. 条件分组规则的位置

Conditional group rules are allowed wherever style rules are allowed (at the top-level of a style sheet, as well as within other conditional group rules). CSS processors must process such rules as described above.

测试

Conditional group rules allowed wherever style rules are allowed.

Any at-rules that are not allowed after a style rule (e.g., @charset, @import, or @namespace rules) are also not allowed after a conditional group rule, and are therefore invalid when so placed.

测试

At rules not allowed after style rule invalid after conditional group rule.

5. 特定媒体样式表：@media 规则

The @media rule is a conditional group rule whose condition is a media query. Its syntax is

@media <media-query-list> {
  <rule-list>
}

It consists of the at-keyword @media followed by a (possibly empty) media query list (as defined in [MEDIAQUERIES-4]), followed by a block containing arbitrary rules. The condition of the rule is the result of the media query.

This @media rule

@media screen and (min-width: 35em),
       print and (min-width: 40em) {
  #section_navigation { float: left; width: 10em; }
}

has the condition screen and (min-width: 35em), print and (min-width: 40em), which is true for screen displays whose viewport is at least 35 times the initial font size and for print displays whose viewport is at least 40 times the initial font size. When either of these is true, the condition of the rule is true, and the rule #section_navigation { float: left; width: 10em; } is applied.

测试

Media rule condition can be empty

at-media-whitespace-optional-001.html (live test) (source)

Media rule condition is media query

White space is optional where not required for tokenization.

6. 特性查询：@supports 规则

The @supports rule 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. These queries are called CSS feature queries or (colloquially) supports queries.

Note: 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.

The syntax of the condition in the @supports rule is similar to that defined for <media-condition> in [MEDIAQUERIES-4], but without the "unknown" value logic

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.
conjunction (and) is needed so that multiple required features can be tested.
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.

Therefore, the syntax of the @supports rule allows testing for property:value pairs, and arbitrary conjunctions (and), disjunctions (or), and negations (not) of them.

The syntax of the @supports rule is

@supports <supports-condition> {
  <rule-list>
}

with <supports-condition> defined as

<supports-condition> = not <supports-in-parens>
                     | <supports-in-parens> [ and <supports-in-parens> ]*
                     | <supports-in-parens> [ or <supports-in-parens> ]*
<supports-in-parens> = ( <supports-condition> ) | <supports-feature> | <general-enclosed>
<supports-feature> = <supports-decl>
<supports-decl> = ( <declaration> )

The above grammar is purposely very loose for forwards-compatibility reasons, since the <general-enclosed> production allows for substantial future extensibility. Any @supports rule that does not parse according to the grammar above (that is, a rule that does not match this loose grammar which includes the <general-enclosed> production) is invalid. Style sheets must not use such a rule and processors must ignore such a rule (including all of its contents).

测试

White space is optional where not required for tokenization.

css-supports-015.xht (live test) (source)

Grammatically-invalid @supports rule is ignored.

Each of these grammar terms is associated with a boolean result, as follows

<supports-condition>

<supports-in-parens>

结果是子表达式的结果。

not <supports-in-parens>

结果是否定 <supports-in-parens> 项。

测试

Not 否定 supports 条件。

Not 必须后跟空格。

Not 需要括号。

<supports-in-parens> [ and <supports-in-parens> ]*

如果所有 <supports-in-parens> 子项都为 true，则结果为 true；否则为 false。

测试

And 条件为 true 当且仅当所有关联条件都为 true。

And 需要括号。

css-supports-019.xht (live test) (source)

<supports-in-parens> [ or <supports-in-parens> ]*

如果所有 <supports-in-parens> 子项都为 false，则结果为 false；否则为 true。

测试

Or 条件为 true 当且仅当任意关联条件为 true。

Or 必须后跟空格。

Or 需要括号。

<supports-decl>

如果 UA supports 括号内的声明，则结果为 true。

测试

Supports 条件为 true 当且仅当声明被支持。

声明不能包含分号。

声明值可以为空。

css-supports-022.xht (live test) (source)

声明不能包含无效的 !tokens。

<general-enclosed>

结果为 false。

作者不得在其样式表中使用 <general-enclosed>。它仅用于未来兼容，以便新语法的加入不会使旧 UA 中的大量 <supports-condition> 失效。

测试

未被识别但语法合法的条件返回 false，而不是无效。

括号必须配平。

css-supports-035.xht (live test) (source)

@supports 规则的条件是其前导部分中 <supports-condition> 计算的结果。

例如，下面的规则

@supports ( display: flex ) {
  body, #navigation, #content { display: flex; }
  #navigation { background: blue; color: white; }
  #article { background: white; color: black; }
}

仅在 @supports 规则的 display: flex 被支持时，才会应用其内部规则。

以下示例展示了一个额外的 @supports 规则，用于在 display: flex 不被支持时提供替代方案。

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

请注意，width 声明可能会对基于 flex 的布局产生负面影响，因此应仅在非 flex 样式中出现。

以下示例检查对 box-shadow 属性的支持，包括对其厂商前缀版本的支持。如果支持，则同时指定 box-shadow（含前缀）和 border，从而在不支持 box-shadow 时使盒子不可见。

.noticebox {
  border: 1px solid black;
  padding: 1px;
}
@supports ( box-shadow: 0 0 2px black inset ) or
          ( -moz-box-shadow: 0 0 2px black inset ) or
          ( -webkit-box-shadow: 0 0 2px black inset ) or
          ( -o-box-shadow: 0 0 2px black inset ) {
  .noticebox {
    -moz-box-shadow: 0 0 2px black inset;
    -webkit-box-shadow: 0 0 2px black inset;
    -o-box-shadow: 0 0 2px black inset;
    box-shadow: 0 0 2px black inset; /* unprefixed last */
    /* override the rule above the @supports rule */
    border: none;
    padding: 2px;
  }
}

为避免将 and 与 or 混淆，语法要求必须显式指定 both and 与 or（而不是使用逗号或空格代替其中之一）。同样，为避免运算符优先级导致的歧义，语法不允许在没有括号层的情况下混用 and、or 与 not。

例如，下面的规则是无效的

@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))) {
  /* ... */
}

测试

混合运算符时必须使用括号。

当声明是表达式中唯一内容时，必须始终把被测试的声明放在括号内。

例如，下面的规则是无效的

@supports display: flex {
  /* ... */
}

相反，作者必须写成

@supports (display: flex) {
  /* ... */
}

测试

在声明测试周围必须使用括号。

语法允许在不需要时使用额外的括号。这种灵活性有时方便作者（例如在注释掉表达式的某部分时），也可能对作者工具有用。

例如，作者可以写成

@supports ((display: flex)) {
  /* ... */
}

测试

允许使用额外的括号。

对被测试的声明使用尾部 !important 是允许的，不过它不会改变声明的有效性。

例如，下面的规则是有效的

@supports (display: flex !important) {
  /* ... */
}

测试

!important 是允许的。

6.1. Definition of support

为了向前兼容，CSS 2.1（第 4.1.8 节：声明和属性） [CSS21] 定义了处理无效属性和值的规则。未实现或仅部分实现某规范的 CSS 处理器必须把任何它们未实现或未提供可用支持级别的值部分视为无效，并因此必须将该声明视为解析错误而舍弃。

当支持某声明（即属性和值的组合）时，CSS 处理器在样式规则中接受该声明（而不是把它当作解析错误舍弃）。如果处理器对属性与值均未实现或未提供可用支持，则不得接受该声明或声称对其有支持。

注：需要注意的是，用户偏好导致的属性或值实际被禁用的情况仍然在本定义中视为“支持”。例如，当用户启用了高对比度模式导致颜色被覆盖时，CSS 处理器仍然被视为支持 color 属性，即使 color 声明可能不起作用。另一方面，面向开发者的偏好（旨在启用或禁用对实验性 CSS 特性的支持）会影响本“支持”的定义。

这些规则（及其等价性）使作者能够使用回退（在 [CSS1] 中指被后面声明覆盖的声明，或本规范中 @supports 规则提供的新功能），从而在实现的特性上正确工作。尤其是对复合值的回退；实现必须实现值的全部组成部分，才能认为该声明在样式规则或在 @supports 规则的声明条件中被支持。

测试

支持查询为 true 当且仅当属性声明（包括全部值）能够被解析/支持。

7. APIs

测试

7.1. Extensions to the `CSSRule` interface

The CSSRule interface is extended as follows

partial interface CSSRule {
    const unsigned short SUPPORTS_RULE = 12;
};

测试

CSSRule.SUPPORTS_RULE = 12

conditional-CSSGroupingRule.html (live test) (source)

7.2. The `CSSConditionRule` interface

The CSSConditionRule interface represents all the “conditional” at-rules, which consist of a condition and a statement block.

[Exposed=Window]
interface CSSConditionRule : CSSGroupingRule {
    readonly attribute CSSOMString conditionText;
};

测试

CSSConditionRule inherits from CSSGroupingRule.

conditional-CSSGroupingRule.html (live test) (source)

CSSConditionRule has .conditionText attribute.

conditionText of type CSSOMString

The conditionText attribute represents the condition of the rule. Since what this condition does varies between the derived interfaces of CSSConditionRule, those derived interfaces may specify different behavior for this attribute (see, for example, CSSMediaRule below). In the absence of such rule-specific behavior, the following rules apply

The conditionText attribute, on getting, must return the result of serializing the associated condition.

测试

.conditionText returns serialization of condition.

7.3. The `CSSMediaRule` interface

The CSSMediaRule interface represents a @media at-rule

[Exposed=Window]
interface CSSMediaRule : CSSConditionRule {
    [SameObject, PutForwards=mediaText] readonly attribute MediaList media;
    readonly attribute boolean matches;
};

media of type MediaList, readonly

The media attribute must return a MediaList object for the list of media queries specified with the @media at-rule.

测试

.media returns a MediaList matching the @media condition.

matches of type boolean, readonly

The matches attribute returns true if the rule is in an stylesheet attached to a document whose Window matches this rule’s media media query, and returns false otherwise.

测试

.matches matches the media query, returns boolean.

conditionText of type CSSOMString (CSSMediaRule-specific definition for attribute on CSSConditionRule)

The conditionText attribute (defined on the CSSConditionRule parent rule), on getting, must return the value of media.mediaText on the rule.

测试

Value of CSSMediaRule.conditionText matches value of media.mediaText.

7.4. The `CSSSupportsRule` interface

The CSSSupportsRule interface represents a @supports rule.

[Exposed=Window]
interface CSSSupportsRule : CSSConditionRule {
  readonly attribute boolean matches;
};

matches of type boolean, readonly

The matches attribute returns the evaluation of the CSS feature query represented in conditionText.

测试

CSSSupportsRule.matches returns true if matches feature query

conditionText of type CSSOMString (CSSSupportsRule-specific definition for attribute on CSSConditionRule)

The conditionText attribute (defined on the CSSConditionRule parent rule), on getting, must return the condition that was specified, without any logical simplifications, so that the returned condition will evaluate to the same result as the specified condition in any conformant implementation of this specification (including implementations that implement future extensions allowed by the <general-enclosed> extensibility mechanism in this specification). In other words, token stream simplifications are allowed (such as reducing whitespace to a single space or omitting it in cases where it is known to be optional), but logical simplifications (such as removal of unneeded parentheses, or simplification based on evaluating results) are not allowed.

测试

CSSSupportsRule.conditionText 可以进行标记流简化。

CSSSupportsRule.conditionText 不能进行逻辑简化。

7.5. The `CSS` namespace, and the `supports()` function

The CSS namespace holds useful CSS-related functions that do not belong elsewhere.

partial namespace CSS {
  boolean supports(CSSOMString property, CSSOMString value);
  boolean supports(CSSOMString conditionText);
};

supports(CSSOMString property, CSSOMString value), returns boolean

When the supports(property, value) method is invoked with two arguments property and value

If property is an ASCII case-insensitive match for any defined CSS property that the UA supports, or is a custom property name string, and value successfully parses according to that property’s grammar, return true.
Otherwise, return false.

Note: No CSS escape or whitespace processing is performed on the property name, so CSS.supports(" width", "5px") will return false, as " width" isn’t the name of any property due to the leading space.

Note: !important flags are not part of property grammars, and will cause value to parse as invalid, just as they would in the value argument to element.style.setProperty().

测试

CSS.supports(arg1, arg2) evaluates support of property arg1 with value arg2.

supports(CSSOMString conditionText), returns boolean

When the supports(conditionText) method is invoked with a single conditionText argument

If conditionText, parsed and evaluated as a <supports-condition>, would return true, return true.
Otherwise, If conditionText, wrapped in parentheses and then parsed and evaluated as a <supports-condition>, would return true, return true.
Otherwise, return false.

All namespaces in the conditionText argument are considered invalid, just as they are in document.querySelector("a|b").

测试

CSS.supports(arg1) evaluates supports condition arg1.

CSS.supports(arg1) implies parentheses.

supports-conditionText.html (live test) (source)

测试

CSS-supports-L3.html (live test) (source)

安全考量

This spec introduces no new security considerations.

隐私考量

本规范中的各种特性，主要与 @media 规则关联，但在一定程度上也与 @supports 规则关联，向 Web 内容提供用户的硬件、软件以及它们的配置和状态信息。大多数信息是通过 [MEDIAQUERIES-4] 中的特性提供的，而不是通过本规范中的特性。然而，@supports 规则可能会提供一些关于用户软件的额外细节，以及它是否在非默认设置下运行，从而启用或禁用某些特性。

大多数这些信息也可以通过其他 API 获取。然而，本规范中的特性是这些信息在 Web 上暴露的方式之一。

从聚合的角度看，这些信息也可用于提高用户指纹识别的准确性。

8. 变更记录

自 2022 年 1 月 13 日候选推荐快照以来，对本规范所做的以下（非编辑性）更改

澄清了 supports() 必须对无效的自定义属性值返回 false
修正了 Web IDL，原本的 “bool” 应为 “boolean”
澄清了处理器必须同时支持属性和值（Issue 8795）
在 @media 与 @supports 中添加了 .matches（Issue 4240）
更新为新的解析算法名称和块生成名称。
移除设置只读 CSSMediaRule.conditionText 的过程（PR 8796）
将 conditionText 设为只读。

自 2020 年 12 月 8 日候选推荐快照以来，对本规范所做的以下（非编辑性）更改

澄清了丢弃属性声明仅适用于样式规则，而不适用于 at‑rule
澄清了 !important 并非属性语法的一部分
将安全性和隐私性拆分为独立章节
定义术语 CSS feature queries 和 supports queries，用于指代 @supports 规则的条件语法，以便更好地交叉引用。
移除了 CSS feature queries 布尔逻辑中的 “unknown” 值，改为将未识别的语法定义为 “false”。（Issue 6175）
澄清了 placement of conditional group rules。（Issue 5697）

Conditional group rules are allowed wherever style rules are allowed ( at the top-level of a style sheet, ~~and inside~~ as well as within other conditional group rules ) . CSS processors must process such rules as described above.

Any at- rules that are not allowed after a style rule (e.g., @charset , @import , or @namespace rules) are also not allowed after a conditional group rule ~~. Therefore, style sheets must not place such rules after a conditional group rule, and CSS processors must ignore such rules.~~ , and are therefore invalid when so placed.

自 2013 年 4 月 4 日候选推荐以来，对本规范所做的以下（非编辑性）更改

澄清了 conditionText 中的命名空间是无效的
新增编辑者
添加了对 parse 的显式调用，而不是 “matches the grammar”
删除了重复的 CSSGroupingRule，该规则已由 CSSOM 定义
将 supports() 的文字描述改写为算法形式，以便更清晰地表达在 supports(prop, val) 形式下需要关注已注册自定义属性的语法。
将 @supports 选择器的定义移至 css-conditional-4。
@supports' 已不再有风险。
改写为使用 CSS Syntax 语法，而非 CSS 2.1 语法
从 CSS Interface 改为兼容 WebIDL 的 CSS 命名空间
取消了对 and、or 和 not 关键字前后空格的要求，以与 Media Queries 保持一致（后者本身受某些 CSS 最小化工具的兼容性约束，这些工具依赖于 CSS 标记化的一些晦涩细节）。请注意，这些关键字之后仍然需要空白字符或注释，因为如果没有，它们及随后出现的左括号会被标记为函数开启标记。
允许 supports() 方法对简单声明暗含括号，以保持与 @import 规则的 supports() 函数一致。
修正了 IDL 代码中缺失的分号。
根据其他模块的更改更新了链接、术语和示例代码。
拼写和语法纠正
添加了关于隐私和安全性的章节。

致谢

感谢 Tab Atkins、Arthur Barstow、Ben Callahan、Tantek Çelik、Alex Danilo、Elika Etemad、Pascal Germroth、Björn Höhrmann、Paul Irish、Brad Kemper、Anne van Kesteren、Vitor Menezes、Alex Mogilevsky、Chris Moschini、James Nurthen、Simon Pieters、Florian Rivoal、Simon Sapin、Nicholas Shanks、Ben Ward、Zack Weinberg、Estelle Weyl、Boris Zbarsky 以及 www-style 社区的所有其他成员提供的想法和反馈。

一致性

文档约定

一致性要求通过描述性断言和 RFC 2119 术语相结合来表达。本文档规范性部分中的关键词“MUST”（必须）、“MUST NOT”（不得）、“REQUIRED”（必需）、“SHALL”（应）、“SHALL NOT”（不应）、“SHOULD”（推荐）、“SHOULD NOT”（不推荐）、“RECOMMENDED”（建议）、“MAY”（可以）和“OPTIONAL”（可选）应按照 RFC 2119 中的描述进行解释。然而，为了可读性，这些词在本文档中不以全大写形式出现。

本规范的所有文本均为规范性文本，明确标记为非规范性的部分、示例和注释除外。 [RFC2119]

本规范中的示例均以“例如”开头，或使用 class="example" 与规范性文本隔开，如下所示

提示性说明以“Note”开头，并使用 class="note" 与规范性文本隔开，如下所示

建议（Advisements）是旨在引起特别注意的规范性部分，并使用 <strong class="advisement"> 与其他规范性文本隔开，如下所示： UA 必须提供可访问的替代方案。

一致性类别

如果样式表包含的所有使用本模块定义语法的语句，根据通用 CSS 语法及本模块定义的各功能语法均有效，则该样式表符合本规范。

如果渲染器除了按相应规范解释样式表外，还通过正确解析本规范定义的所有功能并相应地渲染文档来支持这些功能，则该渲染器符合本规范。然而，由于设备限制导致 UA 无法正确渲染文档，并不意味着该 UA 不符合规范。（例如，UA 无需在单色显示器上渲染颜色。）

如果创作工具编写的样式表根据通用 CSS 语法及本模块中各功能的语法是句法正确的，并符合本模块中描述的所有其他样式表一致性要求，则该创作工具符合本规范。

部分实现

为了使作者能够利用前向兼容的解析规则来指定后备值，CSS 渲染器 **必须** 将其无法使用支持级别的任何 @规则、属性、属性值、关键字和其他语法结构视为无效（并适当忽略）。特别地，用户代理 **不得** 在单一多值属性声明中选择性地忽略不支持的组件值而保留支持的值：如果任何值被视为无效（因为不支持的值必须如此），CSS 要求忽略整个声明。

不稳定和专有特性的实现

非实验性实现

一旦规范达到候选推荐阶段，非实验性实现即可成为可能，实现者应发布他们能够证明根据规范正确实现的任何 CR 级别特性的无前缀实现。

为建立并保持 CSS 在不同实现间的互操作性，CSS 工作组请求非实验性的 CSS 渲染器在发布任何 CSS 功能的无前缀实现之前，向 W3C 提交一份实现报告（并在必要时提交用于该实现报告的测试用例）。提交给 W3C 的测试用例需经 CSS 工作组审阅和修正。

候选推荐标准 (CR) 退出标准

为了使本规范能够推进到提案推荐标准 (PR)，必须至少有两个独立的、可互操作的每个功能的实现。每个功能可以由不同组的产品实现，不要求所有功能都由单个产品实现。为了实现此标准，我们定义以下术语

CSS 条件规则模块第 3 级

摘要

关于本文档

1. 引言

1.1. 背景

1.2. 模块交互

2. 条件分组规则的处理

3. 条件分组规则的内容

4. 条件分组规则的位置

5. 特定媒体样式表：@media 规则

6. 特性查询：@supports 规则

6.1. Definition of support

7. APIs

7.1. Extensions to the `CSSRule` interface

7.2. The `CSSConditionRule` interface

7.3. The `CSSMediaRule` interface

7.4. The `CSSSupportsRule` interface

7.5. The `CSS` namespace, and the `supports()` function

安全考量

隐私考量

8. 变更记录

致谢

一致性

文档约定

一致性类别

部分实现

不稳定和专有特性的实现

非实验性实现

候选推荐标准 (CR) 退出标准

索引

本规范定义的术语

通过引用定义的术语

引用

规范性引用

参考资料

IDL 索引

CSS 条件规则模块第 3 级

摘要

关于本文档

1. 引言

1.1. 背景

1.2. 模块交互

2. 条件分组规则的处理

3. 条件分组规则的内容

4. 条件分组规则的位置

5. 特定媒体样式表：@media 规则

6. 特性查询：@supports 规则

6.1. Definition of support

7. APIs

7.1. Extensions to the CSSRule interface

7.2. The CSSConditionRule interface

7.3. The CSSMediaRule interface

7.4. The CSSSupportsRule interface

7.5. The CSS namespace, and the supports() function

安全考量

隐私考量

8. 变更记录

致谢

一致性

文档约定

一致性类别

部分实现

不稳定和专有特性的实现

非实验性实现

候选推荐标准 (CR) 退出标准

索引

本规范定义的术语

通过引用定义的术语

引用

规范性引用

参考资料

IDL 索引

7.1. Extensions to the `CSSRule` interface

7.2. The `CSSConditionRule` interface

7.3. The `CSSMediaRule` interface

7.4. The `CSSSupportsRule` interface

7.5. The `CSS` namespace, and the `supports()` function