《CSS权威指南4》- Chapter1.4 - 特性查询

特性查询

在 2015 到 2016 年之间，CSS 获得了在特定情况下（即浏览器支持的 CSSs 属性-值的组合下）应用 CSS 块的能力。这被称为特性查询。
他们在结构上与媒体查询非常相似。考虑这样一种情况：如果 color 是受支持的属性，那么就对元素应用 color。它是这样的：

@supports (color:black) {
  body {color: black;}
  h1 {color: purple;}
  h2 {color: navy;}
}

实际上，它意味着“如果理解并能处理color: black这样的属性-值组合，就应用这些样式，否则，就跳过这些样式”。在不理解@supports的用户代理（浏览器等）中，整个 CSS 规则块被跳过。

特性查询是渐进增强样式的完美方法。例如，假设想在现有的浮动和内联块布局中添加一些网格布局，可以保留旧的布局方案，然后在样式表中包含这样的块：

@supports (display: grid) {
  section#main {display: grid;}
  /*styles to switch off old layout*/
  /*grud layout styles*/
}

这样样式将应用于支持网格显示的浏览器中，覆盖旧的页面布局样式，然后应用所需的样式使其在基于网格的未来中生效。太老的浏览器无法支持网格布局，也很可能因太老而无法支持@supports,所以他们完全的跳过整个块，就好像从来没出现过一样。
特性查询 可以彼此 嵌入，也可以嵌入到媒体查询中，反之亦然。
编写基于弹性盒子布局的屏幕、打印的样式，将媒体查询包裹在@support (display: flex)块中：

@supports (display: flex) {
  @media screen {
    /*screen flexbox styles go here */
  }
  @media print {
    /*print flexbox styles go  here */
  }
}

相反，可以在各种响应设计的媒体查询块中，添加@supports () 块：

@media screen and (max-width: 30em) {
  @supports (display: flex) {
    /*small-screen flexbox styles go here*/
  }
}
@media screen and (min-width: 30em) {
  @supports (display: flex) {
    /* large-screen flexbox styles go here */
  }
}

如何组织这些区块完全取决自己。

与媒体查询一样，特性查询也允许有逻辑操作符。假设想要在一个用户代理同时支持网格布局和 CSS 形状（shapes）时应用样式，应该这样的：

@supports (display: grid) and (shape-outside: circle()) {
  /* grid-and-shape  styles go here */
}

这基本上等价于以下写法：

@supports (display: flex) {
  @supports (shape-outside: circle()) {
    /*   */
  }
}

除了and操作符外，还有更多可用的操作。CSS 形状是个很好的例子去说明为什么or是 有用的。因为在很长一段时间 webkit浏览器只支持通过 带厂商前缀属性的 CSS 形状。所以，如果用形状，可以这样使用特性查询：

@supports (shape-outside: circle()) or (-webkit-shape-outside: circle()) {
  /* shape styles go here */
}

你仍然需要确保同时使用带前缀和不带 前缀的形状属性，这将支持 webkit 发行版本，并向后兼容，同时也支持其他支持 形状的浏览器，但不是通过带前缀的属性。

特性查询也可以使用not。例如，在不支持网格布局时应用以下样式：

@supports not (display: grid) {
  /* grid-not-suppoted styles go here*/
}