Modernizr是一套JavaScript 函式庫，用來偵測瀏覽器是否支持HTML5與CSS3等規格。如果浏览器不支持，Modernizr会使用其他的解决方法来进行模拟。
概要
許多HTML5與CSS 3的功能已經在許多主流的瀏覽器中實作出來。Modernizr能夠告訴開發者，瀏覽器是否已經實作他們想要的功能。這讓開發者在瀏覽器上可以充分利用這些新功能，或者嘗試製作解決方案來支援那些老舊的瀏覽器。
運作原理
Modernizr不同於傳統透過解析瀏覽器的用户代理（User agent）的識辨方式，認為這種方式亦不可靠，例如使用者可以手動更改它們瀏覽器的User agent、即便是相同的網頁解析引擎，在不同的瀏覽器中也不一定支援相同的功能。因此Modernizr通常會建立一個特定樣式的元件，然後立刻嘗試改寫這些元素的設定，若在支援的瀏覽器上，元件會回傳有意義的值。但在不支援的瀏覽器則會回傳空值或「undefined」。Modernizr利用這些結果來判斷瀏覽器是否支援這些功能。
Modernizr能測試超過100種以上的舊版非主流瀏覽器功能。測試的結果會儲存在一個名為「Modernizr」的物件裡，裡面包含了測試結果的布林值。並且根據支援或不支援的功能，新增class名稱給HTML標籤元件。
在說明文件內提供了許多測試的小段程式碼樣本，讓開發者可以在他們的網站開發工作流程中使用這些測試。
執行
Modernizr會自動執行。不需要呼叫modernizr_init()之類的函式。執行時會建立一個名為Modernizr的元件，裡面包含了一組測試結果是否支援的布林值。舉例來說，如果瀏覽器支援Canvas API，Modernizr.canvas屬性的值就會是true；如果瀏覽器不支援Canvas API，Modernizr.canvas屬性的值就會是false：
if (Modernizr.canvas) {
// 開始畫圖吧！
} else {
// 瀏覽器不支援原生的畫板。
}
範例
Modernizr JavaScript範例：
Modernizr - Javascript Example
$(document).ready(function() {
if(Modernizr.websockets) {
$("#result").html('你的瀏覽器支援Web Sockets');
} else {
$("#result").html('你的瀏覽器不支援Web Sockets');
}
});
Modernizr CSS範例：
Modernizr - CSS Example
div.wsno, div.wsyes { display: none }
.no-websockets div.wsno { display: block }
.websockets div.wsyes { display: block }
你的瀏覽器不支援WebSockets。
你的瀏覽器支援WebSockets。
相關條目
- HTML
- HTML5
- HTML5 Shiv
- HTML5 File API
- 瀏覽器引擎CSS支援比較
- JavaScript
- Polyfill
- WebSocket
- WebGL
參考資料
外部連結
*
*
- [http://dev.w3.org/html5/spec/Overview.html W3C HTML5]
- [http://dev.w3.org/geo/api/spec-source.html W3C geolocation]
- [https://web.archive.org/web/20100722040126/http://www.whatwg.org/specs/web-workers/current-work/ Web workers]
- [http://www.html5rocks.com/tutorials/workers/basics/ Web worker basics]
- [https://web.archive.org/web/20110613013748/http://blogs.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/]
- [http://www.useragentman.com/blog/2010/07/27/cross-browser-html5-forms-using-modernizr-webforms2-and-html5widgets/ Creating Cross Browser HTML5 Forms Now]
- [http://webdesignernotebook.com/css/how-to-use-modernizr/ webdesignernote]
- [http://ajaxian.com/archives/dont-build-from-scratch-you-now-have-an-html5-boilerplate-to-work-with HTML Boilerplate in Ajaxian Archives]
*
*
评论 (0)