Modernizr使用

最新推荐文章于 2021-04-15 10:07:42 发布

awsque

最新推荐文章于 2021-04-15 10:07:42 发布

阅读量760

点赞数

分类专栏： JAVASCRIPT

JAVASCRIPT 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

**Modernizr**
稳定版本	2.6.2
编程语言	JavaScript
类型	JavaScript 函式库
许可协议	MIT, BSD
网站	www.modernizr.com

Modernizr 是一套 JavaScript 函式库，用来侦测浏览器是否支援次世代的网站技术，这些新的网站技术是来自仍在持续发展的 HTML5 与 CSS3 规格。

概要[编辑]

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

运作原理[编辑]

Modernizr不同于传统透过解析浏览器的用户代理的识辨方式，认为这种方式亦不可靠，例如使用者可以手动更改它们浏览器的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> 
   

注：来自维基百科，自由的百科全书 
    
  

awsque

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Modernizr使用

Modernizr稳定版本2.6.2编程语言JavaScript类型JavaScript 函式库许可协议MIT, BSD网站www.modernizr.comModernizr 是一套 JavaScript 函式库，用来侦测浏览器是否支援次世代的网站技术，这些新的网站技术是来自仍在持续发展的 HTML5
复制链接

扫一扫