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è)很成熟的程度?，F(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：
下面代碼檢測(cè)瀏覽器是否支持本地存儲(chǔ)：
上面的兩個(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è)中。
檢測(cè) HTML 元素
一旦我們?cè)陧?yè)面上引入了 Modernizr 后就可以立即使用，我們可以在 <html> 元素中聲明不同的 CSS 類(lèi)，這些類(lèi)定義了所需要支持或者不支持的特性，不支持的特性其類(lèi)名一般是 no-FeatureName，例如 no-flexbox。下面是一個(gè)在 chrome 上可運(yùn)行的例子：
還可以這樣來(lái)判斷瀏覽器是否啟用了 JavaScript 支持：
你可以在 HTML5 Boilerplate (http://html5boilerplate.com) 或者是 Initializr (http://initializr.com) 看到一些入門(mén)的例子，根據(jù)上面的步驟，增加 no-js 類(lèi)可以判斷瀏覽器是否啟用了 JavaScript 支持。
使用 HTML5 和 CSS3 特性
你為 <html> 標(biāo)簽增加的 CSS 屬性，可以直接在 CSS 中定義所需要的樣式，例如：
如果瀏覽器支持 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ǔ)：
全局的 Modernizr 對(duì)象同樣可用于測(cè)試 CSS3 特性是否支持：
使用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()及其屬性的示例如下:
在這個(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ě)的代碼。
標(biāo)簽：辛集 蚌埠 德州 撫順 內(nèi)蒙古 鶴崗 楊凌 黃山
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《檢測(cè)瀏覽器對(duì)HTML5和CSS3支持度的方法》，本文關(guān)鍵詞 檢測(cè),瀏覽器,對(duì),HTML5,和,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
