css - @supports 的功能检测？

Question

如何检测浏览器是否支持 CSS @supports 功能？由于 Internet Explorer 和 Safari 不支持它，我的网络应用程序不知道在这些浏览器中应用哪些样式。

Answer 1

@supports使用纯 CSS，您可以通过@supports使用普遍支持的声明（例如color声明）创建规则并覆盖另一个全局声明的此类规则来确定浏览器是否理解级联：

#test {
    color: red;
}

@supports (color: green) {
    #test {
        color: green;
    }
}

在任何@supports正确实现的浏览器中，#test都应该有绿色文本。否则，它将有红色文本。

有关纯 CSS 方法的详细说明，请参阅我对这个问题的回答。

如果您希望使用 JavaScript 检测它，您可以使用评论中提到的Modernizr功能检测库（确保在您的下载配置中包含 css-supports）：

if (Modernizr.supports) {
    console.log('Your browser supports @supports.');
} else {
    console.log('Your browser does not support @supports.');
}