這篇文章是關(guān)于
CSS3條件判斷的，你并沒有看錯(cuò)，我也沒有寫錯(cuò)，如果你開發(fā)過響應(yīng)式布局，應(yīng)該會(huì)知道CSS3中的“
@media”就是條件判斷之一，不過，在這里，并不是去討論“@media”的，而是來談?wù)凜SS3的條件判斷規(guī)范文檔中的另一部分：“
@supports”規(guī)則。
在早期，我們?yōu)榱思嫒軨SS3，一般情況下，我們會(huì)通過第三方j(luò)s庫
Modernizr來完成，不過，這種方式，我們需要反復(fù)多次用相同的函數(shù)附帶各種瀏覽器前綴，容易造成很多多余的代碼
，但現(xiàn)在，我們可以使用CSS3的“@supports”來判斷瀏覽器是否支持某個(gè)CSS屬性，并且根據(jù)是否支持來定義樣式。
下面我們就來看看如何使用“@supports”！
一、CSS3 @supports
1、常見用法
語法：
@supports (property: value){
element {
property: value;
}
}
“@supports”中的“條件規(guī)則”可以聲明一條或者幾個(gè)由不同的邏輯運(yùn)算符相結(jié)合的聲明（比如說，非（not），或（or），與（and）等），而且還可以使用括號來確定其操作的優(yōu)先級關(guān)系。
比如：Flex布局
.flex {
float: left;
}
@supports (display: flex){
.flex {
display: flex;
float: none;
}
}
上面的代碼可以用來應(yīng)對那些不支持Flex布局的瀏覽器。
2、非（not）邏輯聲明
@supports not (property: value){
element {
property: value;
}
}
當(dāng)使用 not 時(shí)，表示瀏覽器不支持某些屬性時(shí)，對應(yīng)的樣式將會(huì)渲染。
3、與（and）邏輯聲明
@supports (property: value) and (property: value) {
element {
property: value;
}
}
當(dāng)使用and時(shí)，只有and兩端條件同時(shí)成立，也就是同時(shí)返回true時(shí)，對應(yīng)的樣式才會(huì)渲染。
4、或（or）邏輯聲明
@supports (property: value) or (property: value) {
element {
property: value;
}
}
當(dāng)使用 or 時(shí)，只要or兩端任一條件成立，返回true，對應(yīng)的樣式就會(huì)渲染。
5、組合聲明
@supports ((property: value) or (property: value)) and (property: value) {
element {
property: value;
}
}
注意：當(dāng)使用or和and兩個(gè)混合使用時(shí)，必須使用括號()來區(qū)分兩者的優(yōu)先級。如果只有一條表達(dá)式時(shí)，也必須使用括號()。
二、window.CSS.supports
在JavaScript中，使用window.CSS.supports來支持CSS的@supports。
在使用之前，當(dāng)前是先檢測一下是否支持（Opera瀏覽器使用了一種完全不同的名稱window.supportsCSS）：
var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);
語法
它有兩種寫法：
第一種寫法：
CSS.supports(property, value)
第二種寫法：
CSS.supports('property: value');
這種寫法可以寫入非(not)、與（and）、或（or）連接的字符串。
注意：當(dāng)以字符串形式傳入時(shí)，使用or和and兩個(gè)混合使用，必須使用括號()來區(qū)分兩者的優(yōu)先級。如果只有一條表達(dá)式時(shí)，也必須使用括號()。
例子：
CSS.supports('display','flex') === CSS.supports('(display: flex)') // true
兼容性
從上面可以看出，@supports的兼容性已經(jīng)很高了。
總結(jié)
在這篇文章里，只是簡單的介紹如何使用CSS3 條件判斷@supports 以及JavaScript中的CSS.supports()來判斷瀏覽器是否支持這些最新的屬性。如果支持將返回的是一個(gè)true，將會(huì)渲染對應(yīng)的樣式；如果不支持，則將返回false，將不會(huì)渲染對應(yīng)的樣式。
更多建議：