CSS | @supports 规则

CSS的@supports规则允许开发者检测特定的CSS特性是否被浏览器所支持。这个规则使得开发者能够根据特性来向下兼容或者在不同浏览器上展示不同样式。

@supports 检测方法

我们可以在 CSS 文件中使用 @supports 规则来检测一个特定特性是否被浏览器支持。下面是一些常见的判断方式：

1. 检查属性是否被支持。
2. 检查属性以及值是否被支持。
3. 使用多个检查条件。

检查属性是否被支持

@supports (属性名: 值) {
  /* 属性被支持时执行的样式 */
}

例如，我们可以检查是否支持 display: grid，如下：

@supports (display: grid) {
  /* grid display 被支持时的样式 */
}

检查属性以及值是否被支持

@supports (属性名: 值, 属性名: 值) {
  /* 两个属性同时支持时执行的样式 */
}

例如，我们可以检查是否支持 writing-mode: vertical-rl 和 background-attachment: fixed，如下：

@supports (writing-mode: vertical-rl) and (background-attachment: fixed) {
  /* writing-mode: vertical-rl and background-attachment: fixed 被支持时的样式 */
}

使用多个检查条件

@supports condition1 and condition2 or condition3 {
  /* 多个条件都被支持时执行的样式 */
}

例如，我们可以检查是否支持 display: grid 和 writing-mode: vertical-rl，如下：

@supports (display: grid) and (writing-mode: vertical-rl) {
  /* display: grid 和 writing-mode: vertical-rl 都被支持时的样式 */
}

实际应用

在实际开发中，我们可以利用 @supports 来做兼容性处理。例如，我们可以借助 @supports 判断是否支持 currentColor，如下：

.btn {
  color: #fff;
  background-color: #007bff;

  @supports (color: currentColor) {
    background-color: currentColor;
  }
}

以上就是 CSS | @supports 规则的介绍了，通过判断特定特性的支持情况，可以增加网站的兼容性，并且在不同浏览器上展示不同样式。