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.
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
回答1:
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;
}
}
In any browser that implements @supports
correctly, #test
should have green text. Otherwise, it'll have red text.
See my answer to this question for a detailed explanation of the pure CSS method.
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.');
}