如何判斷瀏覽器是否支援css3

判斷方法：1、使用「@supports」規則判斷，語法格式「@supports(屬性:值){標籤名稱{屬性:值}}」2、使用「CSS.supports()」函數判斷，語法格式「CSS.supports("屬性","值")」。 。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

判斷瀏覽器是否支援css3的方法：

CSS @supports規則：

語法：

@supports (rule)[operator (rule)]* { sRules }

說明：

rule： 指定一條具體的CSS規則，必須使用括號包裹。
operator： 使用or | and | not等運算符指定多條規則。

1、基本用法：

@supports ( display: flex ) {
    body {
        display: flex;
      }
     #main {
         flex: auto;
      }
}

代表瀏覽器支援flex標準，則使用裡面的規則，如果不支持，可以如下實作。

2、not關鍵字：

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

Js CSS.supports函數

同css的@supports標記一樣，js裡也提供了Window.CSS.supports()方法，用來檢查瀏覽器對css3屬性是否支持，該函數提供2中呼叫方式：

第一種方法是使用兩個參數：一個是屬性名，另一個是屬性值。

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

第二種用法是：簡單的提供整個需要分析的樣式字串。

var supportsFlex = CSS.supports("(display: flex) and (-webkit-display: flex)");

CSS.supports函數傳回的是一個布林值，如果為true這代表支援該屬性，當然在使用該函數之前，我們需要先判斷瀏覽器是否支援CSS.supports，方法如下：

if(!!((window.CSS && window.CSS.supports) || window.supportsCSS || false)){    //支持}

推薦學習：css影片教學

以上是如何判斷瀏覽器是否支援css3的詳細內容。更多資訊請關注PHP中文網其他相關文章！