如何使用 CSS 里的 @supports 讲解

CSS 的 @supports 是一个非常有用的特性，可以帮助开发者写出更加健壮和兼容的 CSS 代码。本文将详细介绍如何使用 @supports，并提供示例代码以便读者进行实践。

什么是 @supports？

@supports 是一个 CSS 条件规则，用于检测当前浏览器是否支持某一种 CSS 属性或属性值。如果浏览器支持该属性或属性值，则在 @supports 中定义的 CSS 规则将被应用；反之，这些规则将被忽略。

使用 @supports

下面是一个简单的使用 @supports 的示例：

/* 当浏览器支持 flex 属性时应用以下规则 */
@supports (display: flex) {
  .container {
    display: flex;
    justify-content: center;
  }
}

在上述示例中，当浏览器支持 flex 属性时，.container 元素将采用 display: flex; 和 justify-content: center; 这两条规则。

另外，@supports 还支持逻辑运算符 and、or 和 not，这意味着我们可以检测多个属性和值是否同时被支持。例如：

/* 当浏览器支持 flexbox 布局，并且支持 transform 属性时应用以下规则 */
@supports (display: flex) and (transform: translateX(1px)) {
  .container {
    display: flex;
    transform: translateX(1px);
  }
}

在上述示例中，当浏览器同时支持 flex 属性和 transform: translateX(1px) 属性时，.container 元素将采用 display: flex; 和 transform: translateX(1px); 这两条规则。

兼容性考虑

虽然 @supports 可以帮助开发者更好地处理浏览器兼容性问题，但是也需要注意到一些潜在的风险。如果我们过度依赖于 @supports，可能会导致我们忽略一些必要的 fallback 方案，从而使网站或应用程序的表现出现问题。因此，在使用 @supports 时，需要始终考虑兼容性问题并提供合理的备选方案。

结论

通过使用 @supports，我们可以根据当前浏览器的支持情况来选择性地应用 CSS 规则。这可以为我们提供更好的控制和灵活性，并帮助我们写出更加健壮、兼容性更强的代码。但需要注意，我们还需要始终考虑浏览器兼容性问题，并提供合理的 fallback 方案。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54231