@supports的功能检测？

Question

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

Answer 1

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

#test {
    color: red;
}

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

In any browser that implements @supports correctly, #test should have green text. Otherwise, it'll have red text.

有关纯CSS方法的详细说明，请参阅我对this question的回答。

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

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