【翻译&摘抄】CSS 特征查询

CSS 中的 @supports 规则，也被称为 Feature Queries（特征查询），是一个很强大的工具。

通过使用 @supports，你可以在 CSS 中看是否支持某个“特性”（CSS 属性或值），并根据其返回的结果决定是否调用代码块。例如：

@supports (display: grid) {
  // 只有在浏览器支持 CSS 网格时才会运行代码
}

如果浏览器支持 display: grid，那么括号内的所有样式都将被应用。否则将跳过所有样式。

另一个有意义的测试：

@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
   p::first-letter {
      -webkit-initial-letter: 4;
      initial-letter: 4;
      color: #FE742F;
      font-weight: bold;
      margin-right: 0.5em;
   }
}

使用 not

@supports (height: 100vh) {
  // 使用 viewport height 的布局
}
@supports not (height: 100vh) {
  // 老式浏览器另一种布局
}
// 我们希望是这样，但这个代码不是很好

最佳实践：

// 较老浏览器的回退代码

@supports (display: grid) {
  // 较新浏览器的代码
  // 在需要时覆盖上面的代码
}

浏览器支持：