DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> HTML5和CSS3特性檢測
HTML5和CSS3特性檢測
編輯:HTML5教程     

 HTML5和CSS3逐漸成為WEB前端開發的必須技能,開發過程中檢查不同浏覽器對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裡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved