為了判斷瀏覽器是否支持css3的一些新屬性樣式，當不兼容該樣式的時候，我們可以更優雅的降級處理。這就需要使用到css3的條件判斷功能：在css中支持@supports標記、或者在js中使用CSS.supports函數，來檢測瀏覽器是否支持css3的新屬性。下面就來看看如何實現的！
CSS @supports標記：
語法：
@supports (rule)[operator (rule)]* { sRules }說明：
rule： 指定一條具體的CSS規則，必須使用括號包裹。
operator： 使用or | and | not等操作符指定多條規則。
1、基本用法：
@supports ( display: flex ) { body { display: flex; } #main { flex: auto; } }代表瀏覽器支持flex標准，則使用里面的規則，如果不支持，可以如下實現。
2、not關鍵詞 ：
@supports not ( display: flex ) { #main{ float: left; } }當然not關鍵詞使用的比較少，一般支持@supports的瀏覽器，都會支持大部分css3屬性。
3、多條件檢測 ：
我們可以使用or和and語句，來實現多條件檢查。例如：
@supports ((display: -webkit-flex) or (display: -moz-flex) or (display: flex)) and (-webkit-appearance: caret) { /* use styles here */ }/4、@supports瀏覽器的兼容:
| IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|
| 12.0+ | 22.0+ | 28.0+ | 9.0+ | 15.0+ | 9.0+ | 4.4+ | 27.0+ |
設計導航https://www.wode007.com/favorites/sjdh
Js中CSS.supports函數
同css的@supports標記一樣，js里也提供了Window.CSS.supports()方法，用來檢查瀏覽器對css3屬性是否支持，該函數提供2中調用方式：
第一種方法是使用兩個參數：一個是屬性名，另一個是屬性值 。
var supportsFlex = CSS.supports("display", "flex");第二種用法是：簡單的提供整個需要分析的樣式字串。
var supportsFlex = CSS.supports("(display: flex) and (-webkit-display: flex)");
CSS.supports函數返回的是一個布爾值，如果為true這代表支持該屬性，當然在使用該函數之前，我們需要先判斷瀏覽器是否支持CSS.supports，方法如下：
if(!!((window.CSS && window.CSS.supports) || window.supportsCSS || false)){ //支持 }