Modernizr
Modernizr是一套JavaScript 函式庫,用來偵測瀏覽器是否支持HTML5與CSS3等規格。如果浏览器不支持,Modernizr会使用其他的解决方法来进行模拟。
原作者 | Faruk Ateş |
---|---|
開發者 | Faruk Ateş, Paul Irish, Alex Sexton, Ryan Seddon, Patrick Kettner, Stu Cox, Richard Herrera, and contributors |
首次发布 | 1 July 2009[1] |
目前版本 |
|
源代码库 |
|
编程语言 | JavaScript |
类型 | JavaScript 函式庫 |
许可协议 | MIT; 它是MIT-BSD双许可协议,自2010年6月14日[3] - 2012年9月15日[4] |
网站 | modernizr |
概要
許多HTML5與CSS 3的功能已經在許多主流的瀏覽器中實作出來。Modernizr能夠告訴開發者,瀏覽器是否已經實作他們想要的功能[6][7][8][9]。這讓開發者在瀏覽器上可以充分利用這些新功能,或者嘗試製作解決方案來支援那些老舊的瀏覽器。
運作原理
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範例:
<!DOCTYPE html> <html class="no-js"> <head> <title>Modernizr - Javascript Example</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script> <script src="modernizr.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { if(Modernizr.websockets) { $("#result").html('你的瀏覽器支援Web Sockets'); } else { $("#result").html('你的瀏覽器不支援Web Sockets'); } }); </script> </head> <body> <p id="result"></p> </body> </html>
Modernizr CSS範例:
<!DOCTYPE html> <html class="no-js"> <head> <title>Modernizr - CSS Example</title> <style type="text/css" media="screen"> div.wsno, div.wsyes { display: none } .no-websockets div.wsno { display: block } .websockets div.wsyes { display: block } </style> <script src="modernizr.js" type="text/javascript"></script> </head> <body> <div class="wsno"> 你的瀏覽器不支援WebSockets。 </div> <div class="wsyes"> 你的瀏覽器支援WebSockets。 </div> </body> </html>
相關條目
- HTML
- HTML5
- HTML5 Shiv
- HTML5 File API
- 瀏覽器引擎CSS支援比較
- JavaScript
- Polyfill
- WebSocket
- WebGL
參考資料
- ^ Faruk Ateş. Proudly Announcing Modernizr. 1 July 2009 [2012-09-02]. (原始内容于2016-08-01).
- ^ Release 3.12.0. 2022年2月15日 [2022年10月29日].
- ^ Modernizr 1.5: new features, unit tests added. Modernizr. 14 June 2010 [30 July 2013]. (原始内容于2020-09-27).
- ^ Remove BSD license and improve readme. GitHub. 15 September 2012 [30 July 2013]. (原始内容于2020-11-04).
- ^ Modernizr 3.3.1. 14 January 2016 [2016-09-13]. (原始内容于2020-09-26).
- ^ Faruk Ateş. Taking Advantage of HTML5 and CSS3 with Modernizr. June 22, 2010. (原始内容于2013-01-22).
- ^ Gil Fink. Detecting HTML5 Features Using Modernizr. Jan 10, 2011. (原始内容于2016-03-03).
- ^ Daniel Sellergren. . Feb 2011. (原始内容存档于2011-08-14).
- ^ David Powers. Using Modernizr to detect HTML5 and CSS3 browser support. (原始内容于2015-02-08).
外部連結
- 官方网站
- Drupal integration with Modernizr. [2012-09-02]. (原始内容于2019-08-09).
- W3C HTML5(页面存档备份,存于互联网档案馆)
- W3C geolocation(页面存档备份,存于互联网档案馆)
- Web worker basics(页面存档备份,存于互联网档案馆)
- Creating Cross Browser HTML5 Forms Now(页面存档备份,存于互联网档案馆)
- webdesignernote(页面存档备份,存于互联网档案馆)
- HTML Boilerplate in Ajaxian Archives(页面存档备份,存于互联网档案馆)
- Faruk Ateş. Proudly Announcing Modernizr. [2012-09-02]. (原始内容于2016-08-01).
- . [2012-09-02]. (原始内容存档于2012-09-15).