HTML5, CSS3 以及其他相關(guān)技術(shù)例如 Canvas、WebSocket 等等將 Web 應(yīng)用開(kāi)發(fā)帶到了一個(gè)新的高度。該技術(shù)通過(guò)組合 HTML、CSS 和 JavaScript 可以開(kāi)發(fā)出桌面應(yīng)用具有的效果。盡管 HTML5 承諾很多，但現(xiàn)實(shí)中對(duì) HTML5 支持的瀏覽器以及 HTML5 標(biāo)準(zhǔn)本身的完善程度都還沒(méi)有到一個(gè)很成熟的程度。現(xiàn)在完全不擔(dān)心瀏覽器支持是不現(xiàn)實(shí)的，還需要時(shí)間，因此當(dāng)我們決定要采用 HTML5 技術(shù)開(kāi)發(fā) Web 應(yīng)用的時(shí)候，我們需要對(duì)瀏覽器所支持的特性進(jìn)行檢測(cè)。
而 Modernizr 就可以幫助你完成對(duì)瀏覽器所支持 HTML5 特性的檢查。
下面代碼檢測(cè)瀏覽器是否支持 Canvas：
<script>
window.onload = function () {
if (canvasSupported()) {
alert('canvas supported');
}
};
function canvasSupported() {
var canvas = document.createElement('canvas');
return (canvas.getContext && canvas.getContext('2d'));
}
</script>
下面代碼檢測(cè)瀏覽器是否支持本地存儲(chǔ)：
<script>
window.onload = function () {
if (localStorageSupported()) {
alert('local storage supported');
}
};
function localStorageSupported() {
try {
return ('localStorage' in window && window['localStorage'] != null);
}
catch(e) {}
return false;
}
</script>
上面的兩個(gè)例子中我們可以很直觀(guān)的對(duì)瀏覽器的特性進(jìn)行檢查以確保我們?cè)趯?duì)應(yīng)的瀏覽器上應(yīng)用的功能能否正常運(yùn)作。
而使用 Modernizr 的好處還在于你不需要這樣一項(xiàng)項(xiàng)去檢查，還有更簡(jiǎn)單的方法，下面我們開(kāi)始：
當(dāng)我第一次聽(tīng)到 Moderizr 這個(gè)項(xiàng)目時(shí)，我以為這是一個(gè)讓一些老的瀏覽器能支持 HTML5 的 JS 庫(kù)，事實(shí)上不是，它主要是檢測(cè)的功能。
Modernizr 可以通過(guò)網(wǎng)址 http://modernizr.com 來(lái)訪(fǎng)問(wèn)，該網(wǎng)站同時(shí)還提供一個(gè)定制腳本的功能，你可以確定你需要檢測(cè)什么特性，并依此來(lái)生成相應(yīng)的 JS 文件，這樣可以減少不必要的 JS 代碼。
一旦下載了 Modernizr 的 JS 文件后，就可以通過(guò) <script> 標(biāo)簽引入到網(wǎng)頁(yè)中。
<script src="Scripts/Modernizr.js" type="text/javascript"></script>
檢測(cè) HTML 元素
一旦我們?cè)陧?yè)面上引入了 Modernizr 后就可以立即使用，我們可以在 <html> 元素中聲明不同的 CSS 類(lèi)，這些類(lèi)定義了所需要支持或者不支持的特性，不支持的特性其類(lèi)名一般是 no-FeatureName，例如 no-flexbox。下面是一個(gè)在 chrome 上可運(yùn)行的例子：
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage
websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla
multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity
cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d
csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers
applicationcache svg inlinesvg smil svgclippaths">
還可以這樣來(lái)判斷瀏覽器是否啟用了 JavaScript 支持：
<html class="no-js">
你可以在 HTML5 Boilerplate (http://html5boilerplate.com) 或者是 Initializr (http://initializr.com) 看到一些入門(mén)的例子，根據(jù)上面的步驟，增加 no-js 類(lèi)可以判斷瀏覽器是否啟用了 JavaScript 支持。
使用 HTML5 和 CSS3 特性
你為 <html> 標(biāo)簽增加的 CSS 屬性，可以直接在 CSS 中定義所需要的樣式，例如：
.boxshadow #MyContainer {
border: none;
-webkit-box-shadow: #666 1px 1px 1px;
-moz-box-shadow: #666 1px 1px 1px;
}
.no-boxshadow #MyContainer {
border: 2px solid black;
}
如果瀏覽器支持 box-shadows 的話(huà)，將會(huì)為 <html> 元素增加 boxshadow 這個(gè) CSS 類(lèi)，否則的話(huà)就使用 no-boxshadow 這個(gè)類(lèi)。這樣假設(shè)瀏覽器不支持 box-shadow 的話(huà)，我們可以使用其他的樣式來(lái)進(jìn)行定義。
另外我們也可以使用 Modernizr 的對(duì)象來(lái)操作這個(gè)行為，例如下面的代碼用來(lái)檢測(cè)瀏覽器是否支持 Canvas 和 本地存儲(chǔ)：
$(document).ready(function () {
if (Modernizr.canvas) {
//Add canvas code
}
if (Modernizr.localstorage) {
//Add local storage code
}
});
全局的 Modernizr 對(duì)象同樣可用于測(cè)試 CSS3 特性是否支持：
$(document).ready(function () {
if (Modernizr.borderradius) {
$('#MyDiv').addClass('borderRadiusStyle');
}
if (Modernizr.csstransforms) {
$('#MyDiv').addClass('transformsStyle');
}
});
使用Modernizr加載腳本
在出現(xiàn)了瀏覽器不支持某些功能的的情況下,你不僅可以提供一個(gè)不錯(cuò)的備用方案,還可以加載shim/polyfill腳本在適當(dāng)情況下填補(bǔ)缺失的功能 (想了解更多關(guān)于shims/polyfills的信息,請(qǐng)查看 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Modernizr擁有一個(gè)內(nèi)置的腳本加載器,可以用來(lái)測(cè)試一個(gè)功能,并在功能無(wú)效的時(shí)候加載另一個(gè)腳本. 腳本加載器是內(nèi)置在Modernizr中的,并且是有效的獨(dú)立yepnope(http://yepnopejs.com)腳本. 腳本加載器非常容易上手,它根據(jù)特定瀏覽器功能的可用性,真的會(huì)簡(jiǎn)化加載腳本的過(guò)程.
你可以使用Modernizr的load()方法來(lái)動(dòng)態(tài)加載腳本,該方法接受定義被測(cè)功能的屬性(test屬性), 如測(cè)試成功后要加載的腳本(yep屬性), 如測(cè)試失敗后要加載的腳本(nope屬性), 和無(wú)論測(cè)試成功還是失敗都要加載的腳本(both屬性). 使用load()及其屬性的示例如下:
Modernizr.load({
test: Modernizr.canvas,
yep: 'html5CanvasAvailable.js’,
nope: 'excanvas.js’,
both: 'myCustomScript.js'
});
在這個(gè)例子中Modernizr在加載腳本時(shí)還會(huì)測(cè)試是否支持canvas功能 . 如果目標(biāo)瀏覽器支持HTML5 canvas就會(huì)加載html5CanvasAvailable.js腳本及 myCustomScript.js腳本 (在這個(gè)例子中使用yep屬性有點(diǎn)牽強(qiáng) – 這只是為了演示load()方法中的屬性如何使用 ). 否則的話(huà), 就會(huì)加載 excanvas.js這個(gè) polyfill腳本來(lái)為IE9之前版本的瀏覽器添加功能支持 . 一旦excanvas.js被加載,myCustomScript.js也會(huì)接著被加載.
由于Modernizr會(huì)處理加載腳本, 所以你可以用它來(lái)做些別的事情. 比如, 在Google或微軟提供的第三方CDN不管用的時(shí)候，你可以用Modernizr來(lái)加載本地的腳本. Modernizr文檔中提供了在CDN掛掉后提供本地jQuery后備過(guò)程的示例:
代碼會(huì)先嘗試從Google CND加載jQuery. 一旦腳本下載完成(或者下載失敗)就會(huì)調(diào)用某個(gè)方法. 這個(gè)方法會(huì)檢查jQuery對(duì)象是否有效,如果無(wú)效就加載本地的jQuery腳本. 并在其后加載一個(gè)名為needs-jQuery.js的腳本.
最后想說(shuō)的是，如果你打算開(kāi)發(fā)基于 HTML5 和 CSS3 的 Web 應(yīng)用的話(huà)，那 Modernizr 就是你必不可少的工具，除非，除非你確認(rèn)你所有客戶(hù)所使用的瀏覽器支持你所寫(xiě)的代碼。
