了解CSS特征查询

什么是特征查询？

特征查询是对CSS的一个相对较新的补充。 这对于那些尚未被所有浏览器完全支持的CSS功能，或者那些在实现上有很大差异的功能来说，特别有用。

特征查询是如何工作的？

特征查询是使用@supports 规则编写的，它是CSS条件规则模块的一部分。 @supports 规则将一个条件作为参数，只有在条件为真时才会应用其中的样式。

让我们举个例子，下面的@supports 规则只在浏览器支持CSS变换属性的情况下才会应用样式。

  .container {
    border: 4px solid red;
    color: red;
    padding: 10px;
  }
  @supports (transform: rotate(180deg)) {
    .container {
      border: 4px solid green;
      color: green;
    }
  }

  <div class="container">
    If the browser supports CSS transforms, the border 
    and text will be green.
  </div>

条件可以是任何有效的CSS表达式，但必须用圆括号包裹起来。

特征查询和前缀

特征查询最常见的用途之一是将需要供应商前缀的样式限定在只需要这些前缀的浏览器上。 如果一个特征有供应商前缀，这可能特别有用，因为我们可以测试标准属性加上任何供应商前缀。 供应商前缀是一个浏览器特定的CSS属性前缀，需要浏览器特定的实现，例如某些WebKit特定CSS属性的-webkit-prefix 。

例如，下面的@supports规则只有在浏览器支持CSS transform属性并且需要供应商前缀的情况下才会应用里面的样式。

  .container {
    border: 4px solid red;
    color: red;
    padding: 10px;
  }
  @supports ((-webkit-transform: rotate(180deg)) or (transform: rotate(180deg))) {
    .container {
      border: 4px solid rgb(57, 57, 190);
      color: rgb(57, 57, 190);
    }
  }

  <div class="container">
    If the browser supports the CSS transform property 
    and requires a vendor prefix for it, 
    the border and text will be blue.
  </div>

这在与Autoprefixer结合使用时特别有用，它可以自动为我们的CSS添加供应商前缀。

很多浏览器都支持CSS特征查询。

结论

• 总的来说，CSS特征查询是提高我们的网站与不同浏览器兼容性的一个好方法。
• 它允许我们检查浏览器所支持的功能，然后根据结果使用不同的CSS规则。
• 这可以帮助我们避免不同浏览器支持不同功能时可能出现的CSS问题。