Modernizr是一套JavaScript 函数库,用来侦测浏览器是否支持HTML5CSS3等规格。如果浏览器不支持,Modernizr会使用其他的解决方法来进行模拟。

Modernizr
原作者Faruk Ateş
开发者Faruk Ateş, Paul Irish, Alex Sexton, Ryan Seddon, Patrick Kettner, Stu Cox, Richard Herrera, and contributors
首次发布1 July 2009[1]
当前版本3.3.1[2](15 January 2016)
源代码库 编辑维基数据链接
编程语言JavaScript
类型JavaScript 函数库
许可协议MIT; 它是MIT-BSD双许可协议,自2010年6月14日[3] - 2012年9月15日[4]
网站modernizr.com

概要

编辑

许多HTML5与CSS 3的功能已经在许多主流的浏览器中实现出来。Modernizr能够告诉开发者,浏览器是否已经实现他们想要的功能[5][6][7][8]。这让开发者在浏览器上可以充分利用这些新功能,或者尝试制作解决方案来支持那些老旧的浏览器。

运作原理

编辑

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.3.1. 14 January 2016 [2016-09-13]. (原始内容存档于2020-09-26). 
  3. ^ Modernizr 1.5: new features, unit tests added. Modernizr. 14 June 2010 [30 July 2013]. (原始内容存档于2020-09-27). 
  4. ^ Remove BSD license and improve readme. GitHub. 15 September 2012 [30 July 2013]. (原始内容存档于2020-11-04). 
  5. ^ Faruk Ateş. Taking Advantage of HTML5 and CSS3 with Modernizr. June 22, 2010. (原始内容存档于2013-01-22). 
  6. ^ Gil Fink. Detecting HTML5 Features Using Modernizr. Jan 10, 2011. (原始内容存档于2016-03-03). 
  7. ^ Daniel Sellergren. Using Modernizr to Determine HTML5 CSS3 Support. Feb 2011. (原始内容存档于2011-08-14). 
  8. ^ David Powers. Using Modernizr to detect HTML5 and CSS3 browser support. (原始内容存档于2015-02-08). 

外部链接

编辑