@supports的功能检测？

Question

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

Answer 1

使用纯CSS，你可以排序的靠级联，以确定通过使@supports规则与普遍支持的声明，如color声明，并覆盖全局声明另一个这样的规则浏览器是否理解@supports ：

#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-支持）：

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