@supports 可以指定依赖于浏览器中的一个或多个特定的CSS功能的支持声明，这被称为特性查询。 

1
2
3
4
5
6
7
8
9
10
@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: right;
  }
}

声明语法

最基本的支持条件就是 CSS 声明，也就是一个 CSS 属性后跟一个值，中间用冒号分开。 

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

函数语法

测试浏览器是否支持经过测试的选择器语法。 

1
@supports selector(A > B) {}

not操作符

将 not 操作符放在任何表达式之前就能否定一条表达式。 

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

and操作符

and 操作符用来将两个原始的表达式做逻辑与后生成一个新的表达式，如果两个原始表达式的值都为真，则生成的表达式也为真。 

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

or操作符

or 操作符用来将两个原始的表达式做逻辑或后生成一个新的表达式，如果两个原始表达式的值有一个或者都为真，则生成的表达式也为真。 

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