首頁  >  文章  >  web前端  >  如何判斷瀏覽器是否支援css3

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

醉折花枝作酒筹
醉折花枝作酒筹原創
2021-04-13 14:30:212730瀏覽

判斷方法: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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn