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