Div+Css教程模板無(wú)憂>建站教程>Div+Css教程>CSS3教程>

CSS3條件判斷——@supports_CSS3教程

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

推薦：CSS3 Media Queries 片段
Responsive設(shè)計(jì)在現(xiàn)代Web設(shè)計(jì)中可謂是越來越流行，但很同學(xué)們并未理解其真正的設(shè)計(jì)概念，往往把Responsive視為一種自適應(yīng)布局。當(dāng)然有很多同學(xué)也在嘗試動(dòng)寫Responsive的案例，但如何取其斷點(diǎn)左右糾結(jié)，如何設(shè)置哪幾個(gè)斷點(diǎn)？又從何入手？ Responsive中的斷點(diǎn)都依賴于 CS

CSS3條件判斷，聽起來“不明覺厲”,如果你對(duì)CSS稍為熟悉一點(diǎn)的話，你會(huì)發(fā)現(xiàn)CSS中的“@media”就是條件判斷之一。是的，在CSS3的條件判斷規(guī)范文檔中包含了兩個(gè)部分，其一是“@media”規(guī)則，主要用來“根據(jù)媒體屬性區(qū)分樣式表”(特別是在Responsive設(shè)計(jì)中，發(fā)揮的作用更是強(qiáng)大)；其二是“@supports”規(guī)則，主要用來代替前面常用的Modernizr庫(kù)，在不支持CSS3的瀏覽器下實(shí)現(xiàn)漸進(jìn)增強(qiáng)式設(shè)計(jì)。換句話來說，@supports可以讓我們?cè)诓恢С諧SS3屬性的瀏覽器下配上單獨(dú)的樣式，看起來很強(qiáng)大，那具體如何使用呢？我們今天一起簡(jiǎn)單的來學(xué)習(xí)一下：

@supports起源

眾所周知，不同的瀏覽器（不管是現(xiàn)代瀏覽器還是老版本的IE瀏覽器）對(duì)Web頁(yè)面的解析都是不一樣，為了讓W(xué)eb頁(yè)面在這些瀏覽器下渲染達(dá)到基本一致的情況，給用戶更好的體驗(yàn)，我們必須為他們寫不同的樣式代碼。

不同特征的檢測(cè)方法我們?cè)缙诙际且蕾囉趈avascript來檢測(cè)，后來通過第三方j(luò)s庫(kù)Modernizr來完成。但這樣真的有用嗎？除了要懂怎么檢測(cè)之外，我們還需要了解更多的瀏覽器解析機(jī)制，這樣一來對(duì)于我們前端人員來說就是“沒辦法”。還好CSS3 Conditional Rules Module Level 3推出了“@supports”條件判斷規(guī)則，它充許我們可以根據(jù)瀏覽器對(duì)CSS特性的支持情況來定義不同的樣式。這對(duì)我們來說是非常重要。

@supports語(yǔ)法規(guī)則

要想更好的使用@supports，我們有必要先從其語(yǔ)法開始入手，只有知道了怎么用，我們才能更好的去用。

@supports <條件規(guī)則> {
  /* 特殊樣式規(guī)則 */
}

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

最簡(jiǎn)單的條件表達(dá)式是一個(gè)CSS聲明，一個(gè)CSS屬性名，后面加上一個(gè)屬性值，屬性名與屬性值之前用分號(hào)隔開，比如：

(display:flex)

我們來看一個(gè)簡(jiǎn)單的例子：

@supports (display:flex) {
  section { display: flex }
  ...
}

上面這段代碼的意思是：如果瀏覽器支持“display:flex”屬性，那么在“section”元素上就運(yùn)用“display:flex”樣式。

@supports還可以根據(jù)不同的邏輯運(yùn)算符相結(jié)合，具有不同的語(yǔ)法規(guī)則，接下來我們一起來細(xì)化一下@supports的語(yǔ)法規(guī)則，以及使用細(xì)節(jié)。

基本屬性的檢查

正如前面的示例一樣，你可以使用CSS的基本屬性來進(jìn)行檢查：

@supports (display: flex) {
  div { display: flex; }
}

這種是@supports最基本的使用規(guī)則。

not邏輯聲明——排除

@supports可以使用not邏輯聲明，主要作用是，在不支持新特性時(shí)，可以提供備用樣式。換過來也可以理解，如果你的瀏覽器不支持@supports條件判斷中的樣式，你可以通過@supports為瀏覽器提供一種備用樣式，如：

@supports not (display: flex){
  #container div{float:left;}
}

上面的代碼表示的是，如果你的瀏覽器不支持“display:flex”屬性，那么你可以使用“float:left”來替代。

and邏輯聲明——聯(lián)合（與）

@supports的條件判斷中也可以使用“and”邏輯聲明。用來判斷是否支持多個(gè)屬性。例如：

@supports (column-width: 20rem) and (column-span: all) {
  div { column-width: 20rem }    
  div h2 { column-span: all }
  div h2 + p { margin-top: 0; }
  ...
}

上面的代碼表示的是，如果你的瀏覽器同時(shí)支持“column-width:20rem”和“column-span:all”兩個(gè)條件，瀏覽器將會(huì)調(diào)用下面的樣式：

div { column-width: 20rem }    
div h2 { column-span: all }
div h2 + p { margin-top: 0; }
...

反之，如果不同時(shí)支持這兩個(gè)條件，那么瀏覽器將不會(huì)調(diào)用這部分樣式。

注：多個(gè)and邊接并不需要使用括號(hào)：

@supports (display: table-cell) and (display: list-item) and (display:run-in){
  /*樣式*/
}

or邏輯聲明——or(或)

@supports除了“not”和“and”邏輯聲明之外，還可以使用“or”邏輯聲明。主要用來判斷瀏覽器是否支持某一CSS特性。也就是說，可以使用“or”邏輯聲明，同時(shí)專聲明多個(gè)條件，只要其中一個(gè)條件成立就會(huì)啟用@supports中的樣式：

@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
  section {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    …
  }           
}

上面的例子是@supports中“or”運(yùn)用場(chǎng)景之一。flex在opera和IE10中不需要前綴，而在其他的現(xiàn)代瀏覽器中還是需要瀏覽器廠商的前綴，通過上面的使得，瀏覽器支持“flex”屬性就會(huì)調(diào)用下面的樣式：

section {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  …
}

上面是有關(guān)于@supports的幾種語(yǔ)法的使用規(guī)則介紹，在使用這幾種規(guī)則時(shí)，有幾點(diǎn)需要特別注意：

“or”和“and”混用

在@supports中“or”和“and”混用時(shí)，必須使用括號(hào)（）來區(qū)分其優(yōu)先級(jí)：

@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) {
  // ...
}
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) {
  // ...
}

以前兩種寫法優(yōu)先級(jí)計(jì)算并不一樣。

只有一條表達(dá)式時(shí)必須用括號(hào)（）

在@supports中，如果條件判斷表達(dá)式只有一條，那么這條表達(dá)式必須使用括號(hào)包起來：

@supports (display: flex) {
  // ...
}

瀏覽器兼容性

通過上面對(duì)@supports的語(yǔ)法介紹，大家都知道這個(gè)屬性對(duì)于做一些漸進(jìn)增加式樣式，或者瀏覽器的兼容性特別方便，但瀏覽器本身對(duì)其的兼容性如何呢？我們一起來看Caniuse.com提供的兼容性表格：

@supports

雖然目前僅有兩個(gè)瀏覽器支持，但我們應(yīng)該相信，這將是一種趨勢(shì)，遲早其他瀏覽器也會(huì)跟上的，最終被支持。

CSS.supports

在javascript中支持css的@supports的寫法是“window.CSS.supports”。CSS.supports規(guī)范提供了兩種寫法。第一種方法包括了兩個(gè)參數(shù)，一個(gè)是屬性，另一個(gè)是屬性值：

var supportsFlex = CSS.supports("display", "flex");

第二種寫法簡(jiǎn)單的提供整個(gè)字符串的寫法：

var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");

在使用javascript的supports，最重要的是先檢測(cè)他的特性，Opera瀏覽器使用不同的名稱方法：

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

使用@supports來替代Modernizr庫(kù)？

眾說周知，早前都是使用Modernizr庫(kù)來做一些瀏覽器對(duì)屬性的檢測(cè)，從而判斷瀏覽器是否支持這些特性。自從@supports推出后，Modernizr真的是老了嗎？他們之間有什么優(yōu)勢(shì)呢？

@supports和Modernizr相比，在速度、性能和功能都要比Modernizr強(qiáng)。為什么這么說呢？因?yàn)锧supports采用瀏覽器本地方法實(shí)現(xiàn)，這樣速度會(huì)更快、效率也會(huì)更高；另外Modernizr需要依賴于js庫(kù)，而@supports避免了引入js庫(kù)，減少了http的請(qǐng)求量和服務(wù)器流量，并且讓開發(fā)更簡(jiǎn)單快捷；而且@support支持多種邏輯條件樣式判斷，可以很好的滿足多種需求。

但話又說回來，如果你的瀏覽器不支持@supports，目前來說你還是需要依賴于Modernizr來做一些檢測(cè)。其實(shí)Paul Irish說過，Modernizr也在計(jì)劃，未來將使用@supports來替代自身的檢測(cè)方法。

能使用@supports？

不管使用@supports或者說使用Modernizr來做一些漸進(jìn)增強(qiáng)式的處理，我們都避免不了寫多個(gè)樣式，這樣從而也增加了樣式的體積，但唯的一好處是，能減少對(duì)文件的請(qǐng)求，增強(qiáng)了用戶對(duì)產(chǎn)品的體驗(yàn)感。

因此，現(xiàn)在對(duì)你來說是否使用@supports，正確的是在使用@supports之前先檢測(cè)是滯支持CSS.supports()和@supports，如果檢測(cè)出不支持，在加載Modernizr，這樣你的頁(yè)面就會(huì)有一個(gè)很好的兼容性。下面是實(shí)現(xiàn)的方法：

if ( !(window.supportsCSS || (window.CSS && window.CSS.supports) )) load_modernizr()

@supports使用

在大多數(shù)情況之下，使用@supports都是設(shè)置一個(gè)老的樣式做為備份，然后新的樣式寫在@supports中用來支持現(xiàn)代瀏覽器。例如“flex”彈性布局，到目前有下些版本瀏覽器不支持，但你使用這個(gè)屬性，為了讓其他的瀏覽器不至于布局混亂，你可以像下面這樣寫：

section {
  float: left;
}

@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {

  section {
  	display: flex;
   	float: none;
  }
}

上面僅是一個(gè)簡(jiǎn)單的例子，我們來看看Chris Mills在《Native CSS feature detection via the @supports rule》提供的一個(gè)案例。

這個(gè)例子，是Chris Mills早前寫的一個(gè)旋轉(zhuǎn)案例，為了兼容其他瀏覽器的旋轉(zhuǎn)效果，明前是使用Modernizr來實(shí)現(xiàn)的（案例）,案例效果如下所示：

@supports

上圖是在瀏覽器支持3D旋轉(zhuǎn)，卡片翻轉(zhuǎn)的一個(gè)很好的動(dòng)畫。

@supports

上圖是在瀏覽器不支持3D轉(zhuǎn)換但支持2D轉(zhuǎn)換,賀卡的正面旋轉(zhuǎn)和動(dòng)畫,底面顯示出來。

@supports

上圖是在瀏覽器不支持3D或2D轉(zhuǎn)換,賀卡的正面就移動(dòng)左邊，顯示后面沒有動(dòng)畫。

接下來，我們來看看使用@supports修改后的實(shí)現(xiàn)方法。

HTML結(jié)構(gòu)

<div id="wrapper" tabindex="0"> 
  <div id="inner-wrapper"> 
    <div id="front">
      <hgroup>
        <h1>Chris Mills</h1>
        <h2>Heavy metal web designer</h2>
      </hgroup>
      
      <p>Available for copy writing, web design, drums, guitar and bad jokes.</p>
      
      <p>Please contact me on...</p>
    </div>
    <div id="back">  
      <ul>
      <li><strong>Email:</strong> cmills@opera.com</li>
      <li><strong>Phone:</strong> +44 123 456 7890</li>
      <li><strong>Twitter:</strong> @chrisdavidmills</li>
      </ul>
    </div>
  </div>
</div>

結(jié)構(gòu)就不多說了，并不是很復(fù)雜，接下來主要看CSS部分。

CSS代碼

卡片基本樣式：

/* 自定義體體、導(dǎo)入字體 */

@font-face {
    font-family: 'DeutschGothicNormal';
    src: url('fonts/deutsch-webfont.eot');
    src: url('fonts/deutsch-webfont.eot?#iefix') format('embedded-opentype'),
   url('fonts/deutsch-webfont.woff') format('woff'),
   url('fonts/deutsch-webfont.ttf') format('truetype'),
   url('fonts/deutsch-webfont.svg#DeutschGothicNormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SFArcheryBlackSCRegular';
    src: url('fonts/sf_archery_black_sc-webfont.eot');
    src: url('fonts/sf_archery_black_sc-webfont.eot?#iefix') format('embedded-opentype'),
   url('fonts/sf_archery_black_sc-webfont.woff') format('woff'),
   url('fonts/sf_archery_black_sc-webfont.ttf') format('truetype'),
   url('fonts/sf_archery_black_sc-webfont.svg#SFArcheryBlackSCRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* 基本的布局樣式*/

body {
  height: 800px;
  font-size: 62.5%;
  background-color: #eee;
}

html,body,h1,h2,p {
  margin: 0;
  padding: 0;
}

footer {
  position: absolute;
  bottom: 0;
}

#inner-wrapper {
  width: 85.6mm;
  height: 53.98mm;
  margin: 120px auto;
  margin: 12rem auto;
  position: relative;
  
  -webkit-transition: 1.5s all;
  -moz-transition: 1.5s all;
  -ms-transition: 1.5s all;
  -o-transition: 1.5s all;
  transition: 1.5s all;
  
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#front, #back {
  position: absolute;
  top: 0;
  left: 0;
  width: 75.6mm;
  height: 43.98mm;
  padding: 5mm;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
  background: #FF3500;
  
  background: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6)), -webkit-linear-gradient(45deg,#FF3500 37.7mm,#FF7600 37.8mm,#FF7600 59.7mm,#FF3500 59.8mm);
  background: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6)), -moz-linear-gradient(45deg,#FF3500 37.7mm,#FF7600 37.8mm,#FF7600 59.7mm,#FF3500 59.8mm);
  background: -ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6)), -ms-linear-gradient(45deg,#FF3500 37.7mm,#FF7600 37.8mm,#FF7600 59.7mm,#FF3500 59.8mm);
  background: -o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6)), -o-linear-gradient(45deg,#FF3500 37.7mm,#FF7600 37.8mm,#FF7600 59.7mm,#FF3500 59.8mm);
  background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.6)), linear-gradient(45deg,#FF3500 37.7mm,#FF7600 37.8mm,#FF7600 59.7mm,#FF3500 59.8mm);
}

#front {
  z-index: 2; 
}
     
/*文本排版樣式*/

h1, h2 {
  font-family: DeutschGothicNormal, sans-serif;
}

h1 {
  position: relative;
  font-size: 30px;
  font-size: 3rem;
  z-index: 3;
}

h2 {
  position: relative;
  top: 2mm;
  font-size: 15px;
  font-size: 1.5rem;
  text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
}

p, li {
  font-family: SFArcheryBlackSCRegular;
  font-size: 11px;
  font-size: 1.1rem;
  margin-top: 5px;
  margin-top: 0.5rem;
}

li {
  position: relative;
  top: 8mm;  
}

上面只是一些基本樣式，下面我們來看這個(gè)實(shí)例中的關(guān)鍵部分：

/* 不支持transform 2D 或者transform 3D的瀏覽器執(zhí)行 */
#wrapper:hover #inner-wrapper #front, 
#wrapper:focus #inner-wrapper #front {
  margin-left: -350px;
}

首先在不支持transform 2D 或者transform 3D的瀏覽器定義了一個(gè)樣式，讓卡片向左移動(dòng)，顯示底部的卡片。

/*支持transform 2D的瀏覽執(zhí)行 */

@supports (-webkit-transform: rotate(-30deg)) or (-moz-transform: rotate(-30deg)) or (-ms-transform: rotate(-30deg)) or (-o-transform: rotate(-30deg)) or (transform: rotate(-30deg)) {
    
  #inner-wrapper #front {
    -webkit-transition: 0.8s all ease-in;
    -moz-transition: 0.8s all ease-in;
    -ms-transition: 0.8s all ease-in;
    -o-transition: 0.8s all ease-in;
    transition: 0.8s all ease-in;
   }

  #wrapper:hover #inner-wrapper #front, 
  #wrapper:focus #inner-wrapper #front {
     margin-left: 0;    
     -webkit-transform: rotate(-30deg) translate(-50%,-100%);
     -moz-transform: rotate(-30deg) translate(-50%,-100%);
     -ms-transform: rotate(-30deg) translate(-50%,-100%);
     -o-transform: rotate(-30deg) translate(-50%,-100%);
     transform: rotate(-30deg) translate(-50%,-100%);
   }
}

通過@supports在支持transform 2D屬性的瀏覽器中實(shí)現(xiàn)旋轉(zhuǎn)和位移的效果。

/* 在支持 3D transforms的瀏覽器執(zhí)行 */

@supports (-webkit-transform: rotateX(0deg)) or (-moz-transform: rotateX(0deg)) or (-ms-transform: rotateX(0deg)) or (-o-transform: rotateX(0deg)) or (transform: rotateX(0deg)) {

  #front, #back {  
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  #front {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg); 
  }

  #back {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
  }

  #wrapper:hover #inner-wrapper, 
  #wrapper:focus #inner-wrapper {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
  }
  
  #wrapper:hover #inner-wrapper #front, 
  #wrapper:focus #inner-wrapper #front {
     -webkit-transform: none;
     -moz-transform: none;
     -ms-transform: none;
     -o-transform: none;
     transform: none;
  }
}

最后也使用@supports屬性，在支持transform 3D屬性的瀏覽器中實(shí)現(xiàn)旋轉(zhuǎn)功能。

@supports效果 Modernizr效果

特別聲明：上面代碼來自于Chris Mills在《Native CSS feature detection via the @supports rule》提供的一個(gè)案例。

注：請(qǐng)使用支持@supports的瀏覽器查看上面的案例。

來源：W3CPLUS/所屬分類：CSS3教程/更新時(shí)間：2013-04-22

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)CSS3教程：

欧美日韩精品在线,国内精品久久久久久久久,一级毛片恃级毛片直播,清纯唯美亚洲综合欧美色

CSS3條件判斷——@supports_CSS3教程

@supports起源

@supports語(yǔ)法規(guī)則

基本屬性的檢查

not邏輯聲明——排除

and邏輯聲明——聯(lián)合（與）

or邏輯聲明——or(或)

“or”和“and”混用

只有一條表達(dá)式時(shí)必須用括號(hào)（）

瀏覽器兼容性

CSS.supports

使用@supports來替代Modernizr庫(kù)？

能使用@supports？

@supports使用

HTML結(jié)構(gòu)

CSS代碼

CSS3教程Rss訂閱Div+Css教程搜索

CSS3教程推薦

猜你也喜歡看這些