@supports

翻译不完整。 请帮助我们翻译这篇文章!

@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 操作符位于表达式的最外层,则没有必要使用圆括号将它括起来。但如果要将该表达式与其他表达式连接起来使用,比如 andor,则需要外面的圆括号。

and 操作符

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

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

Multiple conjunctions can be juxtaposed without the need of more parentheses. The following are both equivalent:

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

注意:在使用 andor 操作符时,如果是为了定义多个表达式的执行顺序,则必须使用圆括号。如果不这样做的话,该条件就是无效的,会导致整个 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())

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

/* This rule won't be applied in browsers which don't support :is() */
:is(ul, ol) > li {
  … /* CSS applied when the :is(…) selector is supported */
}

@supports not selector(:is(a, b)) {
  /* Fallback for when :is() is unsupported */
  ul > li,
  ol > li {
    … /* The above expanded for browsers which don't support :is(…) */
  }
}

@supports selector(:nth-child(1n of a, b)) {
  /* This rule needs to be inside the @supports block, otherwise
     it will be partially applied in browsers which don't support
     the `of` argument of :nth-child(…) is supported */
  :is(:nth-child(1n of ul, ol) a,
  details > summary) {
    … /* CSS applied when the :is(…) selector and
         the `of` argument of :nth-child(…) are both supported */
  }
}

规范

规范 状态 备注
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.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
@supportsChrome Full support 28Edge Full support 12Firefox Full support 22
Full support 22
No support 17 — 22
Disabled
Disabled From version 17 until version 22 (exclusive): this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 12.1Safari Full support 9WebView Android Full support ≤37Chrome Android Full support 28Firefox Android Full support 22
Full support 22
No support 17 — 22
Disabled
Disabled From version 17 until version 22 (exclusive): this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1Safari iOS Full support 9Samsung Internet Android Full support 1.5
selector()Chrome Full support 83Edge Full support 83Firefox Full support 69
Full support 69
Full support 64
Disabled
Disabled From version 64: this feature is behind the layout.css.supports-selector.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 69Safari No support No
Notes
No support No
Notes
Notes See bug 199237
WebView Android Full support 83Chrome Android Full support 83Firefox Android Full support 64
Disabled
Full support 64
Disabled
Disabled From version 64: this feature is behind the layout.css.supports-selector.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support No
Notes
No support No
Notes
Notes See bug 979041.
Safari iOS No support No
Notes
No support No
Notes
Notes See bug 199237
Samsung Internet Android Full support 13.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

参见