@supports

试一试

.flex-container > * {
  padding: 0.3em;
  list-style-type: none;
  text-shadow: 0 0 2px red;
  float: left;
}

@supports (display: flex) {
  .flex-container > * {
    text-shadow: 0 0 2px blue;
    float: none;
  }

  .flex-container {
    display: flex;
  }
}

<ul class="flex-container">
  <li><a href="#">Index</a></li>
  <li><a href="#">About me</a></li>
  <li><a href="#">Contact</a></li>
</ul>

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

语法

@supports (<supports-condition>) {
  /* If the condition is true, use the CSS in this block. */
}

@supports (<supports-condition>) and (<supports-condition>) {
  /* If both conditions are true, use the CSS in this block. */
}

@supports @ 规则由一个带有支持条件的语句块组成。这些条件可以通过合取（and）、析取（or）和/或否定（not）进行组合。操作符的优先级可以通过括号来定义。

支持条件可以使用 <property>: <value> 声明语法或 <function()> 函数语法。以下各节描述了每种支持条件的用法。

声明语法

声明语法用于检查浏览器是否支持指定的 <property>: <value> 声明。该声明必须用括号括起来。如果浏览器支持 transform-origin: 5% 5% 表达式，以下示例将返回 true。

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

函数语法

函数语法用于检查浏览器是否支持函数内的值或表达式。函数语法支持的函数将在以下各节中描述。

selector()

此函数评估浏览器是否支持指定的选择器语法。如果浏览器支持子代组合器，以下示例将返回 true 并应用 CSS 样式。

@supports selector(h2 > p) {
}

font-tech()

此函数检查浏览器是否支持指定的字体技术进行布局和渲染。如果浏览器支持 COLRv1 字体技术，以下示例将返回 true 并应用 CSS 样式。

@supports font-tech(color-COLRv1) {
}

下表描述了可以使用 font-tech() 函数查询的字体技术（<font-tech>），包括彩色字体技术（<color-font-tech>）、字体特性技术（<font-features-tech>）以及其他可用的字体技术。

font-format()

此函数检查浏览器是否支持指定的字体格式进行布局和渲染。如果浏览器支持 opentype 字体格式，以下示例将返回 true 并应用 CSS 样式。

@supports font-format(opentype) {
}

下表描述了可使用此函数查询的可用格式（<font-format> 值）。

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

and 操作符

and 操作符通过两个较短表达式的合取来创建一个新表达式。它仅当两个较短表达式都为 true 时才返回 true。以下示例当且仅当两个较短表达式同时为 true 时才返回 true。

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

多个合取可以并列，而无需更多括号。以下两者是等效的。

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

or 操作符

or 操作符通过两个较短表达式的析取来创建一个新表达式。如果一个或两个较短表达式为 true，它就返回 true。以下示例在至少有一个较短表达式为 true 时返回 true。

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

多个析取可以并列，而无需更多括号。以下两者是等效的。

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

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

正式语法

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

<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-selector-fn>     |
  <supports-font-tech-fn>    |
  <supports-font-format-fn>  |
  <supports-at-rule-fn>      |
  <supports-decl>            

<general-enclosed> = 
  [ <function-token> <any-value>? ) ]  |
  [ ( <any-value>? ) ]                 

<supports-selector-fn> = 
  selector( <complex-selector> )  

<supports-font-tech-fn> = 
  font-tech( <font-tech> )  

<supports-font-format-fn> = 
  font-format( <font-format> )  

<supports-at-rule-fn> = 
  at-rule( <at-keyword-token> )  

<supports-decl> = 
  ( <declaration> )  

<complex-selector> = 
  <complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*  

<font-tech> = 
  <font-features-tech>  |
  <color-font-tech>     |
  variations            |
  palettes              |
  incremental           

<font-format> = 
  <string>           |
  collection         |
  embedded-opentype  |
  opentype           |
  svg                |
  truetype           |
  woff               |
  woff2              

<complex-selector-unit> = 
  [ <compound-selector>? <pseudo-compound-selector>* ]!  

<combinator> = 
  '>'          |
  '+'          |
  '~'          |
  [ '|' '|' ]  

<font-features-tech> = 
  features-opentype  |
  features-aat       |
  features-graphite  

<color-font-tech> = 
  color-COLRv0  |
  color-COLRv1  |
  color-SVG     |
  color-sbix    |
  color-CBDT    

<compound-selector> = 
  [ <type-selector>? <subclass-selector>* ]!  

<pseudo-compound-selector> = 
  <pseudo-element-selector> <pseudo-class-selector>*  

<type-selector> = 
  <wq-name>         |
  <ns-prefix>? '*'  

<subclass-selector> = 
  <id-selector>            |
  <class-selector>         |
  <attribute-selector>     |
  <pseudo-class-selector>  

<pseudo-element-selector> = 
  : <pseudo-class-selector>         |
  <legacy-pseudo-element-selector>  

<pseudo-class-selector> = 
  : <ident-token>                   |
  : <function-token> <any-value> )  

<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>? ']'  

<legacy-pseudo-element-selector> = 
  : [ before | after | first-line | first-letter ]  

<attr-matcher> = 
  [ '~' | '|' | '^' | '$' | '*' ]? '='  

<attr-modifier> = 
  i  |
  s  

示例

测试对 CSS 属性的支持

@supports (animation-name: test) {
  /* CSS applied when animations are supported without a prefix */
  @keyframes {
    /* Other at-rules can be nested inside */
  }
}

测试对给定 CSS 属性或其带前缀版本的支持

@supports (text-stroke: 10px) or (-webkit-text-stroke: 10px) {
  /* CSS applied when text-stroke, prefixed or not, is supported */
}

测试对特定 CSS 属性的不支持

@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
  /* CSS to provide fallback alternative for text-align-last: justify */
}

测试对选择器的支持

CSS 条件规则提供了测试对选择器（例如 :has()）支持的能力。

/* This rule won't be applied in browsers that don't support :has() */
ul:has(> li li) {
  /* CSS is applied when the :has(…) pseudo-class is supported */
}

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

/* Note: So far, there's no browser that supports the `of` argument of :nth-child(…) */
@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(: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 */
  }
}

测试对字体技术的支持

如果浏览器支持 COLRv1 字体技术，以下示例将应用 CSS 样式。

@import "https://fonts.googleapis.ac.cn/css2?family=Bungee+Spice";

@supports font-tech(color-COLRv1) {
  p {
    font-family: "Bungee Spice", fantasy;
  }
}

也可以通过在 @font-face @ 规则中使用 tech 函数来测试对字体技术的支持。如果浏览器不支持该字体技术，则可以使用备用字体（Bungee-fallback.otf）。

@font-face {
  font-family: "Bungee Spice";
  src:
    url("https://fonts.googleapis.ac.cn/css2?family=Bungee+Spice")
      tech(color-COLRv1),
    url("Bungee-fallback.otf") format("opentype");
}

测试对字体格式的支持

如果浏览器支持 woff2 字体格式，以下示例将应用 CSS 样式。

@supports font-format(woff2) {
  p {
    font-family: "Open Sans", sans-serif;
    src: url("open-sans.woff2") format("woff2");
  }
}

规范

浏览器兼容性

另见

• 使用特性查询
• CSS @ 规则函数
• CSSSupportsRule
• CSS.supports() 方法