@supports - CSS（层叠样式表）编辑

@supports CSS at-rule 您可以指定依赖于浏览器中的一个或多个特定的CSS功能的支持声明。这被称为特性查询。该规则可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。

@supports (display: grid) {
  div {
    display: grid;
  }
}

@supports not (display: grid) {
  div {
    float: right;
  }
}

在 JavaScript 中，可以通过 CSS 对象模型接口 CSSSupportsRule 来访问 @supports。

语法

@supports at-rule 由一组样式声明和一条支持条件构成。支持条件由一条或多条使用逻辑与（and）、逻辑或（or）、逻辑非（not）结合的名称-值对（name-value pair）组成。可以使用圆括号调整操作符的优先级。

声明语法

最基本的支持条件就是 CSS 声明，也就是一个 CSS 属性后跟一个值，中间用冒号分开。如果 transform-origin 的实现语法认为 5% 5% 是有效的值，则下面的表达式会返回 true。

@supports (transform-origin: 5% 5%) {}

函数语法

第二种基本支持条件是支持函数，几乎所有浏览器都支持这种语法，但函数本身仍在标准化进程中。

`selector()`

测试浏览器是否支持经过测试的选择器语法。如果浏览器支持子组合器，则以下示例返回true：

@supports selector(A > B) {}

not 操作符

将 not 操作符放在任何表达式之前就能否定一条表达式。如果 transform-origin 的实现语法认为 10em 10em 10em 是无效的，则下面的表达式会返回 true。

@supports not (transform-origin: 10em 10em 10em) {}

和其他操作符一样，not 操作符可以应用在任意复杂度的表达式上。下面的几个例子中都是合法的表达式：

@supports not (not (transform-origin: 2px)) {}
@supports (display: grid) and (not (display: inline-grid)) {}

注意：如果 not 操作符位于表达式的最外层，则没有必要使用圆括号将它括起来。但如果要将该表达式与其他表达式连接起来使用，比如 and 和 or，则需要外面的圆括号。

and 操作符

and 操作符用来将两个原始的表达式做逻辑与后生成一个新的表达式，如果两个原始表达式的值都为真，则生成的表达式也为真。在下例中，当且仅当两个原始表达式同时为真时，整个表达式才为真：

@supports (display: table-cell) and (display: list-item) {}

可以将多个合取词并置而不需要更多的括号。以下两者都是等效的：

@supports (display: table-cell) and (display: list-item) and (display:run-in) {}
@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {}

or 操作符

or 操作符用来将两个原始的表达式做逻辑或后生成一个新的表达式，如果两个原始表达式的值有一个或者都为真，则生成的表达式也为真。在下例中，当两个原始表达式中至少有一个为真时，整个表达式才为真：

@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}

可以将多个析取词并置而不需要更多的括号。以下两者都是等效的：

@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
          (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}

@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or
          ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}

注意：在使用 and 和 or 操作符时，如果是为了定义多个表达式的执行顺序，则必须使用圆括号。如果不这样做的话，该条件就是无效的，会导致整个 at-rule 失效。

形式化语法

@supports <supports-condition> {
  <group-rule-body>
}where 
<supports-condition> = not <supports-in-parens> | <supports-in-parens> [ and <supports-in-parens> ]* | <supports-in-parens> [ or <supports-in-parens> ]*
where 
<supports-in-parens> = ( <supports-condition> ) | <supports-feature> | <general-enclosed>
where 
<supports-feature> = <supports-decl> | <supports-selector-fn>
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )
where 
<supports-decl> = ( <declaration> )
<supports-selector-fn> = selector( <complex-selector> )
where 
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*
where 
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]
where 
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'
where 
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]?  | 
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'
where 
<attr-matcher> = [ '~' |  |  | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

示例

检测是否支持指定的 CSS 属性

@supports (animation-name: test) {
    … /* 如果支持不带前缀的animation-name,则下面指定的CSS会生效 */
    @keyframes { /* @supports是一个CSS条件组at-rule,它可以包含其他相关的at-rules */
      …
    }
}

检测是否支持指定的CSS属性或者其带前缀版本

@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
    … /* 如果支持不带前缀以及带前缀的perspective属性,则下面指定的CSS会生效 */
}

检测是否不支持指定的CSS属性

@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    … /* 这里的CSS代码用来模拟text-align-last:justify */
}

测试是否支持自定义属性

@supports (--foo: green) {
  body {
    color: var(--varName);
  }
}

测试是否支持选择器 (eg. :is())

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

/* 这条 CSS 规则在不支持 is:() 的浏览器中无效 */
:is(ul, ol) > li {
  … /* 支持 :is(...) 选择器时，这里的 CSS 生效 */
}

@supports not selector(:is(a, b)) {
  /* 不支持 :is() 时的备选方案 */
  ul > li,
  ol > li {
    … /* 以上给不支持 :is(...) 的浏览器展开了 CSS 选择器规则 */
  }
}

@supports selector(:nth-child(1n of a, b)) {
  /* 这条规则需要内嵌在 @supports 块内。
     否则该规则在支持 :nth-child(…)但不支持其内的 `of` 参数的浏览器中，
     只有部分生效 */
  :is(:nth-child(1n of ul, ol) a,
  details > summary) {
    … /* 当:is(...) 选择器以及 :nth-child(…) 的 `of` 参数都支持时，
        这里的 CSS 会生效 */
  }
}

规范

规范	状态	备注
CSS Conditional Rules Module Level 4 @supports	Editor's Draft	Adds the `selector()` function.
CSS Conditional Rules Module Level 3 @supports	Candidate Recommendation	Initial definition.

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.