@supports 的功能检测？

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

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

#test {
    color: red;
}

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

In any实现的浏览器@supports正确地，#test应该有绿色文本。否则，它将显示红色文本。 http://jsfiddle.net/BoltClock/VWk93

请参阅我的回答这个问题 https://stackoverflow.com/questions/16584228/what-is-the-most-practical-way-to-check-for-supports-support-using-only-css纯CSS方法的详细解释。

如果您想使用 JavaScript 检测它，您可以使用现代化 http://modernizr.com评论中提到的功能检测库（请务必在下载配置中包含 css-supports）：

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