特性查询

特性查询（Feature queries）用于精确检测浏览器对特定 CSS 功能的支持，目前已得到所有现代浏览器的全面支持！

我们使用 @supports 关键字来编写特性查询，如下例所示：

1@supports (height: 100vh) {
2  .container {
3    height: 100vh;
4  }
5}

在此示例中，我们检测浏览器是否支持 vh 单位。如果支持，则相应地设置 height 值。

特性查询的结构与媒体查询非常相似。

让我们进一步扩展这个例子：

1.element {
2  height: 100%;
3}
4
5@supports (height: 100vh) {
6  .element {
7    height: 100vh;
8  }
9}

我们默认提供了一个回退方案，将元素的高度设为 100%。如果浏览器支持 vh 单位，那么就会应用 100vh。

@supports 关键字可以用于 CSS 中任何可用的属性。此外，还可以使用逻辑运算符 and、or 和 not 来组合条件。例如，使用 and 检查浏览器是否同时支持 CSS Grid 和 Flexbox：

1@supports (display: grid) and (display: flex) {
2  /* ... */
3}

下面的例子用于检查浏览器是否支持 CSS Grid：

1.element {
2  float: left;
3  ...
4}
5
6@supports (display: grid) {
7  .element {
8    float: none;
9    display: grid;
10    ...
11  }
12}