CSS中supports()怎么用

小編給大家分享一下CSS中supports()怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　為了判斷瀏覽器是否支持css3的一些新屬性樣式，當不兼容該樣式的時候，我們可以更優雅的降級處理。這就需要使用到css3的條件判斷功能：在css中支持@supports標記、或者在js中使用CSS.supports函數，來檢測瀏覽器是否支持css3的新屬性。

　　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關鍵詞：

　　@supportsnot(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){

　　/*usestyleshere*/

　　}/

　　4、@supports瀏覽器的兼容:

　　IE Firefox Chrome Safari Opera iOSSafari AndroidBrowser AndroidChrome

　　12.0+ 22.0+ 28.0+ 9.0+ 15.0+ 9.0+ 4.4+ 27.0+

　　Js中CSS.supports函數

　　同css的@supports標記一樣，js里也提供了Window.CSS.supports()方法，用來檢查瀏覽器對css3屬性是否支持，該函數提供2中調用方式：

　　第一種方法是使用兩個參數：一個是屬性名，另一個是屬性值。

　　第二種用法是：簡單的提供整個需要分析的樣式字串。

以上是“CSS中supports()怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！