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