CSS @Supports at-rule 特性查询

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

语法

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

实例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


@supports (transform-origin: 5% 5%) {}  /* 声明语法 */
@supports selector(A > B) {}            /* 函数语法（selector: 测试浏览器是否支持经过测试的选择器语法） */

/* and、or、not 与或非 */
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}
@supports (display: table-cell) and (display: list-item) {}
@supports not (transform-origin: 10em 10em 10em) {}

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

/* 测试是否支持选择器 (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 会生效 */
  }

拓展

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