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 Exampletitle>
 
    <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 Exampletitle>
 
    <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>
Deprecated

相关

标签