Modernizr

维基百科,自由的百科全书
跳转至: 导航搜索
Modernizr
Modernizr 2 Logo.png
穩定版本 2.7.1 / 2013年12月7日;7個月前 (2013-12-07)
编程语言 JavaScript
类型 JavaScript 函式庫
许可协议 MITBSD
網站 www.modernizr.com


Modernizr 是一套 JavaScript 函式庫,用來偵測瀏覽器是否支援次世代的網站技術,這些新的網站技術是來自仍在持續發展的 HTML5CSS3 規格。

概要[编辑]

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

運作原理[编辑]

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>

相關條目[编辑]

參考資料[编辑]

外部連結[编辑]