@supports

基线广泛可用

此功能已建立良好，可在许多设备和浏览器版本中使用。它自以下时间起在所有浏览器中可用： 2015年9月.

@supports CSS @规则允许您指定依赖于浏览器对 CSS 特性支持的 CSS 声明。使用此 @规则通常称为特性查询。该规则必须放置在代码的顶层，或者嵌套在任何其他条件组 @规则内。

试试看

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

语法

@supports @规则包含一个带有支持条件的语句块。支持条件是一组一个或多个名称-值对（例如，<property>: <value>）。

css

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

这些条件可以通过连词（and）、析取（or）和/或否定（not）组合。

css

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

可以使用括号定义运算符的优先级。支持条件可以使用 <property>: <value> 声明语法或 <function()> 语法。以下部分描述了每种类型支持条件的使用。

声明语法

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

css

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

函数语法

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

`selector()`

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

css

@supports selector(h2 > p) {
}

`font-tech()`

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

css

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

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

技术	支持
`<color-font-tech>`
`color-colrv0`	通过 COLR 版本 0 表格实现多色字形
`color-colrv1`	通过 COLR 版本 1 表格实现多色字形
`color-svg`	SVG 多色表格
`color-sbix`	标准位图图形表格
`color-cbdt`	彩色位图数据表格
`<font-features-tech>`
`features-opentype`	OpenType `GSUB` 和 `GPOS` 表格
`features-aat`	TrueType `morx` 和 `kerx` 表格
`features-graphite`	石墨特性，即 `Silf`、`Glat`、`Gloc`、`Feat` 和 `Sill` 表格
其他 `<font-tech>` 值
`增量补丁`	使用补丁子集方法的增量字体加载
`增量范围`	使用范围请求方法的增量字体加载
`增量自动`	使用方法协商的增量字体加载
`变体`	TrueType 和 OpenType 字体中的字体变体，用于控制字体轴、粗细、字形等。
`调色板`	通过`font-palette`使用字体调色板，以选择字体中的多个颜色调色板之一

`font-format()`

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

css

@supports font-format(opentype) {
}

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

格式	描述	文件扩展名
`集合`	OpenType 集合	`.otc`, `.ttc`
`嵌入式 OpenType`	嵌入式 OpenType	`.eot`
`opentype`	OpenType	`.ttf`, `.otf`
`svg`	SVG 字体（已弃用）	`.svg`, `.svgz`
`truetype`	TrueType	`.ttf`
`woff`	WOFF 1.0（Web 开放字体格式）	`.woff`
`woff2`	WOFF 2.0（Web 开放字体格式）	`.woff2`

非运算符

not运算符位于表达式之前，导致表达式取反。如果浏览器的transform-origin属性认为10em 10em 10em无效，则以下内容返回true：

css

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

与任何运算符一样，not运算符可以应用于任何复杂度的声明。以下示例均有效

css

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

注意：在顶级不需要将not运算符括在两个括号之间。要将其与其他运算符（如and和or）结合使用，需要使用括号。

与运算符

and运算符通过连接两个较短的表达式创建一个新的表达式。仅当两个较短的表达式也为真时，它才返回真。以下示例当且仅当两个较短的表达式同时为真时才返回真

css

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

多个连接可以并置，无需更多括号。以下两者等效

css

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

或运算符

or运算符通过两个较短表达式的析取创建一个新的表达式。如果一个或两个较短的表达式也为真，则它返回真。以下示例如果至少一个较短的表达式为真，则返回真

css

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

多个析取可以并置，无需更多括号。以下两者等效

css

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

注意：当同时使用and和or运算符时，必须使用括号来定义它们应用的顺序。否则，条件无效，整个规则将被忽略。

正式语法

@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-decl>  

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

<supports-decl> = 
  ( <declaration> )

示例

测试 CSS 属性的支持

css

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

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

css

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

测试特定 CSS 属性的不支持

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()）的功能。

css

/* 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样式

css

@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice");

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

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

css

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

测试字体格式的支持

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

css

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

规范

规范
CSS 条件规则模块级别 4 # at-supports-ext
CSS 条件规则模块级别 3 # at-supports

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

使用特性查询
CSSOM 类CSSSupportsRule，以及允许通过 JavaScript 执行相同检查的CSS.supports()方法。