css - @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.

请参阅我对 this question 的回答纯CSS方法的详细解释。

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

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