CSS @supports

什么是CSS @supports

CSS @supports 是CSS3引入的一个条件规则，它允许我们在CSS中检查并应用某些CSS属性和属性值是否受当前浏览器支持。通过使用 @supports ，我们可以根据浏览器的能力来决定应用哪些样式。

@supports 规则的语法如下：

@supports (条件) {
    CSS代码块;
}

其中，条件是一个CSS属性或属性值，用来检测是否支持某些CSS功能。CSS代码块则是在满足条件的情况下应用的样式。

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

@supports (display: flex) {
    .container {
        display: flex;
    }
}

这个示例中，我们检查当前浏览器是否支持 display: flex 这个属性值。如果支持，就应用样式 .container 的 display: flex 属性。

@supports 支持逻辑运算符（and、or、not），可以让我们在条件中连接多个条件。

下面是一个使用逻辑运算符的示例：

@supports (display: grid) and (not (display: flex)) {
    .container {
        display: grid;
    }
}

这个示例中，我们检查当前浏览器是否同时支持 display: grid ，并且不支持 display: flex。如果满足这两个条件，则应用样式 .container 的 display: grid 属性。

@supports 的条件也可以是一个表达式。我们可以使用比较运算符和数值、字符串或变量进行比较。

下面是一个使用表达式的示例：

@supports (width > 600px) {
    .container {
        width: 800px;
    }
}

这个示例中，我们检查当前浏览器的宽度是否大于600像素。如果满足条件，则应用样式 .container 的宽度为800像素。

@supports 还支持嵌套使用，即在一个 @supports 规则块中嵌套另一个 @supports 规则块。

下面是一个嵌套使用的示例：

@supports (display: grid) {
    @supports (not (display: flex)) {
        .container {
            display: grid;
        }
    }
}

这个示例中，我们首先检查当前浏览器是否支持 display: grid，然后再检查是否不支持 display: flex。如果满足这两个条件，则应用样式 .container 的 display: grid。

@supports 目前已被所有主流浏览器广泛支持，包括Google Chrome、Mozilla Firefox、Safari、Microsoft Edge等。但是，@supports 在一些较旧的浏览器版本中可能不被支持。

我们可以通过下面的代码来检查浏览器是否支持 @supports：

@supports not (display: flex) {
    body::after {
        content: 'Your browser does not support @supports!';
        color: red;
    }
}

这段代码中，我们使用 not (display: flex) 检查浏览器是否不支持 display: flex。如果不支持，则会在页面最后插入一个红色的文本提示。

CSS @supports 是一个非常方便的功能，可以根据浏览器的能力动态应用样式。我们可以使用属性和属性值、逻辑运算符以及表达式来定义条件。@supports 的嵌套使用可以更加灵活地控制样式应用的条件。

虽然 @supports 在现代浏览器中广泛支持，但我们仍需谨慎使用，考虑到一些较旧的浏览器可能不支持 @supports。当然，我们可以通过优雅降级的方式来提供替代样式。

在使用 @supports 时，最好结合浏览器兼容性表格或查询工具来确定是否支持特定功能，以确保我们的样式在不同浏览器中能正常显示和适应。