@supports的功能检测？ [英] Feature detection for @supports?

问题描述

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

How can I detect if a browser supports the CSS @supports feature? Since Internet Explorer and Safari don't support it, my web app doesn't know which styles to apply in those browsers.

推荐答案

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

Using pure CSS, you can sort of rely on the cascade to determine whether a browser understands @supports by making a @supports rule with a universally-supported declaration, such as a color declaration, and overriding another such rule that is declared globally:

#test {
    color: red;
}

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

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

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

请参阅我对这个问题。

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

If you're looking to detect it using JavaScript, you can use the Modernizr feature detection library as mentioned in the comments (be sure to include css-supports in your download config):

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

这篇关于@supports的功能检测？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！