css - @supports的功能检测？

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

最佳答案

使用纯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.');
}