HTML5和CSS3特性檢測的方法

下面我們給大家介紹一下HTML5和CSS3特性檢測吧!希望大家可以在這裡學習!

比如我們要檢查某個浏覽器是否支持canvas元素：

function SUP_canvas() {

var elem = document.createElement('canvas');

return !!(elem.getContext && elem.getContext('2d'));

};

是否支持WebGL：

function SUP_webgl() {

return !!window.WebGLRenderingContext;

};

還有很多html5和css3其他屬性…，值得慶幸的是我們發現了Modernizr開源Javascript庫

Modernizr是一個用來檢測浏覽器是否支持HTML5以及CSS3特性的基於MIT證書的開源Javascript庫。Modernizr的 功能其實很簡單，就是用js檢測浏覽器對HTML5/CSS3的特性支持情況，支持某個屬性，就在頁面的標 簽上添加一個相應的class，不支持的話就添加一個no-前綴的class，比如，如果檢測的浏覽器支持video標簽，MODERNIZR就會 在標簽上添加video類，否則，添加no-video類。

最新的Modernizr是2.0.6版本的，如果你下載開發(development)版本，給我們提供全部的內容，如果要下載 production版本的modernizr，我們會發現，我們可以根據自己的需要進行訂制。在其下載頁面上，我們選擇自己所需的HTML和CSS特 性，然後生成一個javascript文件。這麼做會極大程度上減少冗余代碼，減少不必要的檢測，對web前端這個很看重用戶體驗的地方，性能就是一點一 點壓出來的。

使用Modernizr也非常簡單，只要而且必須在標簽裡應用就可以了，無需調用Modernizr_init()之類的初始化方法。 modernizr必須放在裡，最好放在css聲明之後，因為HTML5 Shiv(用以在IE中啟用HTML元素)必須在之前執行，而且要使用modernizr添加的class，需要阻止FOUC。還有一點在於html聲明 裡的no-js的class。它設置了一個默認狀態，如果頁面禁用了javascript我們就可以知道了。

用調試工具我們看到在html標簽裡加了很多樣式類，從這些樣式類裡我們可以完全看出您使用的浏覽器對HTML5和CSS3支持情況，以“no-”開頭的，就是這個浏覽器不支持的特性：

知道了這些特性的支持情況我們就可以使用css選擇器做一些表現上的差異，比如,如果不支持標簽，那麼test類文本為紅色。

.canvas .test {

color: blue;

}

.canvas .test {

color: red;

}

同樣，我們也可以在JavaScript利用這些特性檢測的結果，代碼：

if(Modernizr.canvas){

//開始畫圖啦!

}else{

alert("fuck!");

}

Modernizr 2還提供了一種load機制，方便代碼管理，比如：

Modernizr.load({

test: Modernizr.canvas,//檢查是否支持標簽及相應的屬性

yep : 'canvas.js',//如果支持標簽及相應的屬性那麼加載canvas.js，

nope: 'no-canvas.js'//如果不支持標簽及相應的屬性那麼加載no-canvas.js，

});

如果直接用的是development版本的modernizr，你會發現，根本就沒有Modernizr.load，因為它是作為一個單獨文件發布的：yepnope.js。而在production版本，我們選擇將其包含在modernizr裡。

以上就是精品為大家提供的HTML5和CSS3特性檢測，希望大家好好利用。

相關推薦：

低版本IE正常運行HTML5+CSS3網站的解決方案