@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.'); 
}