本页使用了标题或全文手工转换

Modernizr

维基百科，自由的百科全书
跳到导航 跳到搜索
Modernizr
Modernizr 2 Logo.png
原作者Faruk Ateş
開發者Faruk Ateş, Paul Irish, Alex Sexton, Ryan Seddon, Patrick Kettner, Stu Cox, Richard Herrera, and contributors
首次发布1 July 2009[1]
目前版本
  • 3.2.0 (2015年10月29日；穩定版本)[2][3]
  • 3.3.0 (2016年1月11日；穩定版本)[4][3]
  • 3.3.1 (2016年1月14日；穩定版本)[5][3]
  • 3.4.0 (2017年3月15日；穩定版本)[6][3]
  • 3.5.0 (2017年4月13日；穩定版本)[7][8][3]
  • 2.8.3 (2014年7月3日；穩定版本)[9]
  • 2.8.2 (2014年5月2日；穩定版本)[10]
  • 2.8.0 (2014年4月29日；穩定版本)[11]
  • 2.7.2 (2014年3月4日；穩定版本)[12]
  • 2.7.1 (2014年2月24日；穩定版本)[13]
  • 2.7.0 (2014年2月24日；穩定版本)[14]
  • 2.6.3 (2014年2月24日；穩定版本)[15]
  • 3.6.0 (2018年5月28日；穩定版本)[16][3]
  • 3.7.0 (2019年2月26日；穩定版本)[17][3]
  • 3.7.1 (2019年3月14日；穩定版本)[18][3]
  • 3.8.0 (2019年10月24日；穩定版本)[19][3]
  • 3.9.0 (2020年2月4日；穩定版本)[20][3]
  • 3.9.1 (2020年2月17日；穩定版本)[21][3]
  • 3.10.0 (2020年4月7日；穩定版本)[22][3]
  • 3.11.0 (2020年4月27日；穩定版本)[23][3]
  • 3.11.1 (2020年5月5日；穩定版本)[24][3]
  • 3.11.2 (2020年5月19日；穩定版本)[25][3]
  • 3.11.3 (2020年9月28日；穩定版本)[26][3]
  • 3.11.4 (2020年11月27日；穩定版本)[27][3]
  • 3.11.5 (2021年3月16日)[28]
  • 3.11.6 (2021年3月16日；穩定版本)[29][3]
  • 3.11.7 (2021年4月12日；穩定版本)[30][3]
  • 3.11.8 (2021年8月17日；穩定版本)[31][3]
  • 3.12.0 (2022年2月15日；穩定版本)[32][3]
  • 3.0.0-pre (2014年10月27日；預發佈版本)[3]
  • 3.0.0-alpha (2015年2月10日；預覽版本)[3]
  • 3.0.0-alpha.2 (2015年2月25日；預覽版本)[3]
  • 3.0.0-alpha.3 (2015年2月28日；預覽版本)[3]
  • 3.0.0-alpha.4 (2015年4月21日；預覽版本)[3]
  • 3.0.0 (2015年9月12日；穩定版本)[3]
  • 3.1.0 (2015年10月6日；穩定版本)[3]
編輯維基數據鏈接
源代码库
編輯維基數據鏈接
编程语言JavaScript
类型JavaScript 函式庫
许可协议MIT; 它是MIT-BSD双许可协议,自2010年6月14日[33] - 2012年9月15日[34]
网站modernizr.com

Modernizr是一套JavaScript 函式庫，用來偵測瀏覽器是否支持HTML5與CSS3等規格。如果浏览器不支持，Modernizr会使用其他的解决方法来进行模拟。

概要[编辑]

許多HTML5與CSS 3的功能已經在許多主流的瀏覽器中實作出來。Modernizr能夠告訴開發者，瀏覽器是否已經實作他們想要的功能[36][37][38][39]。這讓開發者在瀏覽器上可以充分利用這些新功能，或者嘗試製作解決方案來支援那些老舊的瀏覽器。

運作原理[编辑]

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>

相關條目[编辑]

參考資料[编辑]

  1. ^ Faruk Ateş. Proudly Announcing Modernizr. 1 July 2009 [2012-09-02]. （原始内容存档于2016-08-01）. 
  2. ^ Modernizr 3.2.0. 
  3. ^ 3.00 3.01 3.02 3.03 3.04 3.05 3.06 3.07 3.08 3.09 3.10 3.11 3.12 3.13 3.14 3.15 3.16 3.17 3.18 3.19 3.20 3.21 3.22 3.23 3.24 3.25 3.26 3.27 https://registry.npmjs.com/modernizr; 检索日期: 2023年3月1日.
  4. ^ Modernizr 3.3.0. 
  5. ^ Modernizr 3.3.1. 
  6. ^ Modernizr 3.4.0. 
  7. ^ Modernizr 3.5.0. 
  8. ^ Release 3.5.0. 2017年4月20日 [2018年3月15日]. 
  9. ^ Release 2.8.3. 2014年7月3日 [2018年3月15日]. 
  10. ^ Release 2.8.2. 2014年5月2日 [2018年3月15日]. 
  11. ^ Release 2.8.0. 2014年4月29日 [2018年3月15日]. 
  12. ^ Release 2.7.2. 2014年3月4日 [2018年3月15日]. 
  13. ^ Release 2.7.1. 2014年2月24日 [2018年3月15日]. 
  14. ^ Release 2.7.0. 2014年2月24日 [2018年3月15日]. 
  15. ^ Release 2.6.3. 2014年2月24日 [2018年3月15日]. 
  16. ^ Release 3.6.0. 2018年5月28日 [2018年5月28日]. 
  17. ^ Release 3.7.0. 2019年2月26日 [2019年2月27日]. 
  18. ^ Release 3.7.1. 2019年3月14日 [2019年3月15日]. 
  19. ^ Release 3.8.0. 2019年10月24日 [2019年10月25日]. 
  20. ^ Release 3.9.0. 2020年2月4日 [2020年2月5日]. 
  21. ^ Release 3.9.1. 2020年2月17日 [2020年2月18日]. 
  22. ^ Release 3.10.0. 2020年4月7日 [2020年4月8日]. 
  23. ^ Release 3.11.0. 2020年4月27日 [2020年4月28日]. 
  24. ^ Release 3.11.1. 2020年5月5日 [2020年5月6日]. 
  25. ^ Release 3.11.2. 2020年5月19日 [2020年5月20日]. 
  26. ^ Release 3.11.3. 2020年9月28日 [2020年10月7日]. 
  27. ^ Release 3.11.4. 2020年11月27日 [2020年12月6日]. 
  28. ^ Release 3.11.5. 2021年3月16日 [2021年4月9日]. 
  29. ^ Release 3.11.6. 2021年3月16日 [2021年4月9日]. 
  30. ^ Release 3.11.7. 2021年4月12日 [2021年5月10日]. 
  31. ^ Release 3.11.8. 2021年8月17日 [2022年10月29日]. 
  32. ^ Release 3.12.0. 2022年2月15日 [2022年10月29日]. 
  33. ^ Modernizr 1.5: new features, unit tests added. Modernizr. 14 June 2010 [30 July 2013]. （原始内容存档于2020-09-27）. 
  34. ^ Remove BSD license and improve readme. GitHub. 15 September 2012 [30 July 2013]. （原始内容存档于2020-11-04）. 
  35. ^ Modernizr 3.3.1. 14 January 2016 [2016-09-13]. （原始内容存档于2020-09-26）. 
  36. ^ Faruk Ateş. Taking Advantage of HTML5 and CSS3 with Modernizr. June 22, 2010. （原始内容存档于2013-01-22）. 
  37. ^ Gil Fink. Detecting HTML5 Features Using Modernizr. Jan 10, 2011. （原始内容存档于2016-03-03）. 
  38. ^ Daniel Sellergren. Using Modernizr to Determine HTML5 CSS3 Support. Feb 2011. （原始内容存档于2011-08-14）. 
  39. ^ David Powers. Using Modernizr to detect HTML5 and CSS3 browser support. （原始内容存档于2015-02-08）. 

外部連結[编辑]

取自“https://zh.wikipedia.org/w/index.php?title=Modernizr&oldid=73113445”