使用CSS的@supports標記來偵測瀏覽器的相容情況分析

@supports可以用來檢查瀏覽器是否支援某CSS屬性,並且可以透過JavaScript進行控制,以下就來詳細說明使用CSS的@supports標記來檢測瀏覽器的兼容情況的方法

# CSS @supports標記在CSS程式碼裡跟@media查詢語句的語法相似：

@supports(prop:value) {   
 /* 各种样式 */
}

#CSS @supports允許程式設計師用多種不同的方法來偵測目前瀏覽器是否支援某項CSS樣式特徵。

 

基本屬性偵測
你可以執行基本屬性和屬性值的偵測：

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

這是@supports標記最基本的用法。

 

not關鍵字
@supports標記可以和'not'關鍵字組合，用來應對不支援的情況：

@supports not (display: flex) {   
 p { float: left; } /* 替换样式 */
}

多重偵測及條件偵測

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

    /* use styles here */
}   

/* and */
@supports (display: flex) and (-webkit-appearance: caret) {   

 /* something crazy here */
}   

/* and and or */
@supports ((display: -webkit-flex) or   
          (display: -moz-flex) or   
          (display: flex)) and (-webkit-appearance: caret) {   

    /* use styles here */
}

 

#Javascript CSS.supports()
在Javascript中透過使用window. CSS.supports方法來對CSS @supports進行檢測，規範中提供了兩個方法，一個方法可以接收兩個參數boolValue = CSS.supports(propertyName, value);另一個可以接收一個字串（A DOMString containing the condition to check），boolValue = CSS.supports(supportCondition);具體使用看下例：

//测试环境，Chrome:34.0.1847.131 m
var res01 = CSS.supports("text-decoration-style", "blink");   
//Outputs: false
console.log(res01);   

var res02 = CSS.supports("display", "flex");   
//Outputs: true
console.log(res02);   

var res03 = CSS.supports("( transform-origin: 5% 5% )");   
//Outputs: false
console.log(res03);   

var res04 = CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " +   
                      "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )" );   
//Outputs: false
console.log(res04);

##@supports的使用場景

大多數情況，@supports是用來支援老式瀏覽器，並在有可能的情況下，利用現代瀏覽器的新功能來提高使用者體驗。 @supports的一個最重要的使用場景是頁面佈局。許多現代瀏覽器都提供了對flexbox網頁佈局的支持，在這種還有很多瀏覽器不支持的情況下，你的程式碼可以寫成這樣：

section {   
 float: left;   
}   

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

    section {   
      display: -webkit-flex;   
      display: -moz-flex;   
     display: flex;   
     float: none;   
    }   
}

#相信隨著程式設計師對這種新的@supports功能的使用和體驗，更多的更好的使用場景會不斷的出現。

以上是使用CSS的@supports標記來偵測瀏覽器的相容情況分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！