CSS3-條件判斷(@supports)

2018-06-19 18:39 更新
      這篇文章是關于CSS3條件判斷的,你并沒有看錯,我也沒有寫錯,如果你開發(fā)過響應式布局,應該會知道CSS3中的“@media”就是條件判斷之一,不過,在這里,并不是去討論“@media”的,而是來談談CSS3的條件判斷規(guī)范文檔中的另一部分:“@supports”規(guī)則。

在早期,我們?yōu)榱思嫒軨SS3,一般情況下,我們會通過第三方js庫Modernizr來完成,不過,這種方式,我們需要反復多次用相同的函數(shù)附帶各種瀏覽器前綴,容易造成很多多余的代碼,但現(xiàn)在,我們可以使用CSS3的“@supports”來判斷瀏覽器是否支持某個CSS屬性,并且根據(jù)是否支持來定義樣式。

下面我們就來看看如何使用“@supports”!

一、CSS3 @supports
1、常見用法

語法

@supports (property: value){

  element {

    property: value;

  }

}

“@supports”中的“條件規(guī)則”可以聲明一條或者幾個由不同的邏輯運算符相結合的聲明(比如說,非(not),或(or),與(and)等),而且還可以使用括號來確定其操作的優(yōu)先級關系。

比如:Flex布局

.flex {

  float: left;

}


@supports (display: flex){

  .flex {

    display: flex;

    float: none;

  }

}

上面的代碼可以用來應對那些不支持Flex布局的瀏覽器。

2、非(not)邏輯聲明

@supports not (property: value){

  element {

    property: value;

  }

}

當使用 not 時,表示瀏覽器不支持某些屬性時,對應的樣式將會渲染。

3、與(and)邏輯聲明

@supports (property: value) and (property: value) {

  element {

    property: value;

  }

}

當使用and時,只有and兩端條件同時成立,也就是同時返回true時,對應的樣式才會渲染。

4、或(or)邏輯聲明

@supports (property: value) or (property: value) {

  element {

    property: value;

  }

}

當使用 or 時,只要or兩端任一條件成立,返回true,對應的樣式就會渲染。

5、組合聲明

@supports ((property: value) or (property: value)) and (property: value) {

  element {

    property: value;

  }

}


注意:當使用or和and兩個混合使用時,必須使用括號()來區(qū)分兩者的優(yōu)先級。如果只有一條表達式時,也必須使用括號()。

二、window.CSS.supports
在JavaScript中,使用window.CSS.supports來支持CSS的@supports。

在使用之前,當前是先檢測一下是否支持(Opera瀏覽器使用了一種完全不同的名稱window.supportsCSS):

var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false); 


語法
它有兩種寫法:
第一種寫法:

CSS.supports(property, value)

第二種寫法:

CSS.supports('property: value');

這種寫法可以寫入非(not)、與(and)、或(or)連接的字符串。

注意:當以字符串形式傳入時,使用or和and兩個混合使用,必須使用括號()來區(qū)分兩者的優(yōu)先級。如果只有一條表達式時,也必須使用括號()。

例子:

CSS.supports('display','flex') === CSS.supports('(display: flex)')  // true


兼容性



從上面可以看出,@supports的兼容性已經(jīng)很高了。


總結

在這篇文章里,只是簡單的介紹如何使用CSS3 條件判斷@supports 以及JavaScript中的CSS.supports()來判斷瀏覽器是否支持這些最新的屬性。如果支持將返回的是一個true,將會渲染對應的樣式;如果不支持,則將返回false,將不會渲染對應的樣式。



以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號