CSS3條件判斷:@supports條件判斷規則

來源:互聯網
上載者:User

文章簡介:眾所周知,不同的瀏覽器(不管是現代瀏覽器還是老版本的IE瀏覽器)對Web頁面的解析都是不一樣,為了讓Web頁面在這些瀏覽器下渲染達到基本一致的情況,給使用者更好的體驗,我們必須為他們寫不同的樣式代碼。

CSS3條件判斷,聽起來“不明覺厲”,如果你對CSS稍為熟悉一點的話,你會發現CSS中的“@media”就是條件判斷之一。是的,在CSS3的條件判斷規範文檔中包含了兩個部分,其一是“@media”規則,主要用來“根據媒體屬性區分樣式表”(特別是在Responsive設計中,發揮的作用更是強大);其二是“@supports”規則,主要用來代替前面常用的Modernizr庫,在不支援CSS3的瀏覽器下實現漸進增強式設計。換句話來說,@supports可以讓我們在不支援CSS3屬性的瀏覽器下配上單獨的樣式,看起來很強大,那具體如何使用呢?我們今天一起簡單的來學習一下:

@supports起源

眾所周知,不同的瀏覽器(不管是現代瀏覽器還是老版本的IE瀏覽器)對Web頁面的解析都是不一樣,為了讓Web頁面在這些瀏覽器下渲染達到基本一致的情況,給使用者更好的體驗,我們必須為他們寫不同的樣式代碼。

不同特徵的檢測方法我們早期都是依賴於javascript來檢測,後來通過第三方js庫Modernizr來完成。但這樣真的有用嗎?除了要懂怎麼檢測之外,我們還需要瞭解更多的瀏覽器解析機制,這樣一來對於我們前端人員來說就是“沒辦法”。還好CSS3 Conditional Rules Module Level 3推出了“@supports”條件判斷規則,它充許我們可以根據瀏覽器對CSS特性的支援情況來定義不同的樣式。這對我們來說是非常重要。

@supports文法規則

要想更好的使用@supports,我們有必要先從其文法開始入手,只有知道了怎麼用,我們才能更好的去用。

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

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

最簡單的條件運算式是一個CSS聲明,一個CSS屬性名稱,後面加上一個屬性值,屬性名稱與屬性值之前用分號隔開,比如:

(display:flex) 

我們來看一個簡單的例子:

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

上面這段代碼的意思是:如果瀏覽器支援“display:flex”屬性,那麼在“section”元素上就運用“display:flex”樣式。

@supports還可以根據不同的邏輯運算子相結合,具有不同的文法規則,接下來我們一起來細化一下@supports的文法規則,以及使用細節。

基本屬性的檢查

正如前面的樣本一樣,你可以使用CSS的基本屬性來進行檢查:

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

這種是@supports最基本的使用規則。

not邏輯聲明——排除

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

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

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

and邏輯聲明——聯合(與)

@supports的條件判斷中也可以使用“and”邏輯聲明。用來判斷是否支援多個屬性。例如:

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

上面的代碼錶示的是,如果你的瀏覽器同時支援“column-width:20rem”和“column-span:all”兩個條件,瀏覽器將會調用下面的樣式:

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

反之,如果不同時支援這兩個條件,那麼瀏覽器將不會調用這部分樣式。

註:多個and邊接並不需要使用括弧:

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

or邏輯聲明——or(或)

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

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

上面的例子是@supports中“or”運用情境之一。flex在opera和IE10中不需要首碼,而在其他的現代瀏覽器中還是需要瀏覽器廠商的首碼,通過上面的使得,瀏覽器支援“flex”屬性就會調用下面的樣式:

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

上面是有關於@supports的幾種文法的使用規則介紹,在使用這幾種規則時,有幾點需要特別注意:

“or”和“and”混用

在@supports中“or”和“and”混用時,必須使用括弧()來區分其優先順序:

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

以前兩種寫法優先順序計算並不一樣。

只有一條運算式時必須用括弧()

在@supports中,如果條件判斷運算式只有一條,那麼這條運算式必須使用括弧包起來:

@supports (display: flex) {   // ... } 
瀏覽器安全色性

通過上面對@supports的文法介紹,大家都知道這個屬性對於做一些漸進增加式樣式,或者瀏覽器的相容性特別方便,但瀏覽器本身對其的相容性如何呢?我們一起來看Caniuse.com提供的相容性表格:

雖然目前僅有兩個瀏覽器支援,但我們應該相信,這將是一種趨勢,遲早其他瀏覽器也會跟上的,最終被支援。

CSS.supports

在javascript中支援css的@supports的寫法是“window.CSS.supports”。CSS.supports規範提供了兩種寫法。第一種方法包括了兩個參數,一個是屬性,另一個是屬性值:

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

第二種寫法簡單的提供整個字串的寫法:

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

在使用javascript的supports,最重要的是先檢測他的特性,Opera瀏覽器使用不同的名稱方法:

var supportsCSS = !!((window.CSS && window.CSS.supports)  window.supportsCSS  false); 
使用@supports來替代Modernizr庫?

眾說周知,早前都是使用Modernizr庫來做一些瀏覽器對屬性的檢測,從而判斷瀏覽器是否支援這些特性。自從@supports推出後,Modernizr真的是老了嗎?他們之間有什麼優勢呢?

@supports和Modernizr相比,在速度、效能和功能都要比Modernizr強。為什麼這麼說呢?因為@supports採用瀏覽器本地方法實現,這樣速度會更快、效率也會更高;另外Modernizr需要依賴於js庫,而@supports避免了引入js庫,減少了http的請求量和伺服器流量,並且讓開發更簡單快捷;而且@support支援多種邏輯條件樣式判斷,可以很好的滿足多種需求。

但話又說回來,如果你的瀏覽器不支援@supports,目前來說你還是需要依賴於Modernizr來做一些檢測。其實Paul Irish說過,Modernizr也在計劃,未來將使用@supports來替代自身的檢測方法。

能使用@supports?

不管使用@supports或者說使用Modernizr來做一些漸進增強式的處理,我們都避免不了寫多個樣式,這樣從而也增加了樣式的體積,但唯的一好處是,能減少對檔案的請求,增強了使用者對產品的體驗感。

因此,現在對你來說是否使用@supports,正確的是在使用@supports之前先檢測是滯支援CSS.supports()和@supports,如果檢測出不支援,在載入Modernizr,這樣你的頁面就會有一個很好的相容性。下面是實現的方法:

if ( !(window.supportsCSS  (window.CSS && window.CSS.supports) )) load_modernizr() 
@supports使用

在大多數情況之下,使用@supports都是設定一個老的樣式做為備份,然後新的樣式寫在@supports中用來支援現代瀏覽器。例如“flex”彈性布局,到目前有下些版本瀏覽器不支援,但你使用這個屬性,為了讓其他的瀏覽器不至於布局混亂,你可以像下面這樣寫:

section {   float: left; }  @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {    section {   display: flex;    float: none;   } } 

上面僅是一個簡單的例子,我們來看看Chris Mills在《Native CSS feature detection via the @supports rule》提供的一個案例。

這個例子,是Chris Mills早前寫的一個旋轉案例,為了相容其他瀏覽器的旋轉效果,明前是使用Modernizr來實現的(案例),案例效果如下所示:

上圖是在瀏覽器支援3D旋轉,卡片翻轉的一個很好的動畫。

上圖是在瀏覽器不支援3D轉換但支援2D轉換,賀卡的正面旋轉和動畫,底面顯示出來。

上圖是在瀏覽器不支援3D或2D轉換,賀卡的正面就移動左邊,顯示後面沒有動畫。

接下來,我們來看看使用@supports修改後的實現方法。

HTML結構

<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> 

結構就不多說了,並不是很複雜,接下來主要看CSS部分。

CSS代碼

卡片基本樣式:

/* 自訂體體、匯入字型 */  @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;   } 

上面只是一些基本樣式,下面我們來看這個執行個體中的關鍵區段:

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

首先在不支援transform 2D 或者transform 3D的瀏覽器定義了一個樣式,讓卡片向左移動,顯示底部的卡片。

/*支援transform 2D的瀏覽執行 */  @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屬性的瀏覽器中實現旋轉和位移的效果。

/* 在支援 3D transforms的瀏覽器執行 */  @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屬性的瀏覽器中實現旋轉功能。

@supports效果Modernizr效果

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

註:請使用支援@supports的瀏覽器查看上面的案例。

擴充閱讀:
  1. @supports’ rule
  2. Native CSS feature detection via the @supports rule
  3. @supports
  4. Native CSS Features Detection @supports Rule Arrives in Firefox Nightly
  5. AN EARLY LOOK AT CSS3 CONDITIONAL RULES
  6. CSS @supports
  7. CSS3 @supports Rule. Native Modernizr?
  8. Supporting and detecting @supports
  9. Why use @supports instead of Modernizr?
  10. CSS3 Conditional 簡介
  11. 漫談@supports與CSS3條件規則
  12. Native CSS Feature Detection With @supports
  13. Firefox supports @⁠supports, gets my support

有關於CSS3的@supports就說到這了,希望這篇文章對大家有所協助,有果你有更好的理解希望與我們一起分享。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。