Modernizr

Modernizr

官网：https://modernizr.com/

读音：猫的奶侄儿

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

 

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>
posted @ 2022-05-09 00:41  coffeemil  阅读(152)  评论(0)  编辑  收藏  举报