CSS @Supports at-rule 特性查询

 1@supports (transform-origin: 5% 5%) {}  /* 声明语法 */
 2@supports selector(A > B) {}            /* 函数语法（selector: 测试浏览器是否支持经过测试的选择器语法） */
 3
 4/* and、or、not 与或非 */
 5@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}
 6@supports (display: table-cell) and (display: list-item) {}
 7@supports not (transform-origin: 10em 10em 10em) {}
 8
 9/* 检测是否支持指定的 CSS 属性 */
10@supports (animation-name: test) {
11    /* 如果支持不带前缀的animation-name,则下面指定的CSS会生效 */
12    @keyframes { } /* @supports是一个CSS条件组at-rule,它可以包含其他相关的at-rules */
13}
14
15/* 测试是否支持选择器 (eg. :is()) */
16/* 这条 CSS 规则在不支持 is:() 的浏览器中无效 */
17:is(ul, ol) > li {
18  /* 支持 :is(...) 选择器时，这里的 CSS 生效 */
19}
20
21@supports not selector(:is(a, b)) {
22  /* 不支持 :is() 时的备选方案 */
23  ul > li,
24  ol > li {
25    /* 以上给不支持 :is(...) 的浏览器展开了 CSS 选择器规则 */
26  }
27}
28
29@supports selector(:nth-child(1n of a, b)) {
30  /* 这条规则需要内嵌在 @supports 块内。
31     否则该规则在支持 :nth-child(…)但不支持其内的 `of` 参数的浏览器中，
32     只有部分生效 */
33  :is(:nth-child(1n of ul, ol) a,
34  details > summary) {
35    /* 当:is(...) 选择器以及 :nth-child(…) 的 `of` 参数都支持时，这里的 CSS 会生效 */
36  }