
_START_ARTICLE_
Modernizr
_START_SECTION_
概要
_START_PARAGRAPH_
许多HTML5与CSS 3的功能已经在许多主流的浏览器中实现出来。Modernizr能够告诉开发者，浏览器是否已经实现他们想要的功能。这让开发者在浏览器上可以充分利用这些新功能，或者尝试制作解决方案来支持那些老旧的浏览器。
_START_SECTION_
运作原理
_START_PARAGRAPH_
Modernizr不同于传统透过解析浏览器的用户代理（User agent）的识辨方式，认为这种方式亦不可靠，例如用户可以手动更改它们浏览器的User agent、即便是相同的网页解析引擎，在不同的浏览器中也不一定支持相同的功能。因此Modernizr通常会创建一个特定样式的组件，然后立刻尝试改写这些元素的设置，若在支持的浏览器上，组件会回传有意义的值。但在不支持的浏览器则会回传空值或“undefined”。Modernizr利用这些结果来判断浏览器是否支持这些功能。_NEWLINE_Modernizr能测试超过100种以上的旧版非主流浏览器功能。测试的结果会存储在一个名为“Modernizr”的对象里，里面包含了测试结果的布尔值。并且根据支持或不支持的功能，新增class名称给HTML标签组件。_NEWLINE_在帮助文档内提供了许多测试的小段代码样本，让开发者可以在他们的网站开发工作流程中使用这些测试。
_START_SECTION_
运行
_START_PARAGRAPH_
Modernizr会自动运行。不需要调用modernizr_init()之类的函数。运行时会创建一个名为Modernizr的组件，里面包含了一组测试结果是否支持的布尔值。举例来说，如果浏览器支持Canvas API，Modernizr.canvas属性的值就会是true；如果浏览器不支持Canvas API，Modernizr.canvas属性的值就会是false：_NEWLINE_  if (Modernizr.canvas) {_NEWLINE_    // 開始畫圖吧！_NEWLINE_  } else {_NEWLINE_    // 瀏覽器不支援原生的畫板。_NEWLINE_  }
_START_SECTION_
示例
_START_PARAGRAPH_
Modernizr JavaScript示例：_NEWLINE__NEWLINE_ _NEWLINE_<!DOCTYPE html>_NEWLINE_ <html class="no-js">_NEWLINE_  <head>_NEWLINE_    <title>Modernizr - Javascript Example</title>_NEWLINE_ _NEWLINE_    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>_NEWLINE_    <script src="modernizr.js" type="text/javascript"></script>_NEWLINE_    <script type="text/javascript">_NEWLINE_      $(document).ready(function() {_NEWLINE_        if(Modernizr.websockets) {_NEWLINE_          $("#result").html('你的瀏覽器支援Web Sockets');_NEWLINE_        } else {_NEWLINE_          $("#result").html('你的瀏覽器不支援Web Sockets');_NEWLINE_        }_NEWLINE_      });_NEWLINE_    </script>_NEWLINE_  </head>_NEWLINE_  <body>_NEWLINE_  <p id="result"></p>_NEWLINE_  </body>_NEWLINE_ </html>_NEWLINE_Modernizr CSS示例：_NEWLINE_ <!DOCTYPE html>_NEWLINE_ <html class="no-js">_NEWLINE_  <head>_NEWLINE_    <title>Modernizr - CSS Example</title>_NEWLINE_ _NEWLINE_    <style type="text/css" media="screen">_NEWLINE_      div.wsno, div.wsyes { display: none }_NEWLINE_      .no-websockets div.wsno { display: block }_NEWLINE_      .websockets div.wsyes { display: block }_NEWLINE_    </style>_NEWLINE_ _NEWLINE_    <script src="modernizr.js" type="text/javascript"></script>_NEWLINE_  </head>_NEWLINE_  <body>_NEWLINE_ _NEWLINE_    <div class="wsno">_NEWLINE_      你的瀏覽器不支援WebSockets。_NEWLINE_    </div>_NEWLINE_ _NEWLINE_    <div class="wsyes">_NEWLINE_      你的瀏覽器支援WebSockets。_NEWLINE_    </div>_NEWLINE_   </body>_NEWLINE_ </html>