HTML5系列四（特徵檢測、Modernizr.js的相關介紹）

Modernizr:一個HTML5特徵檢測庫

Modernizr幫助咱們檢測瀏覽器是否實現了某個特徵，若是實現了那麼開發人員就能夠充分利用這個特徵作一些工做

Modernizr是自動運行的，無須調用諸如modernizr_init()之類的初始化方法

Modernizr的官網地址http://modernizr.com/

在官網首頁你就能夠下載modernizr.js（它分兩個版本Development和Production版本。其實它們都會導向同一個下載頁面，只不過前者會幫咱們把選項預先勾上而已。）

當我把下載的modernizr.js引用到頁面中時（這時我什麼也沒作），看以下的圖片就知道modernizr.js是自執行的

使用了Modernizr後，頁面中渲染後的html代碼是這個樣子的：

其中有不少以no做爲前綴的class，固然大部分都沒有這個前綴。事實上，若是一個類名以no做爲前綴，好比 no-touch 這表示瀏覽器不支持touch特性

modernizr還有一個test頁面，你們能夠在本身的瀏覽器裏面打開這個test頁面看看瀏覽器對於html5和css3的支持狀況（據我所知chrome應該是對html5和css3支持最好的一個瀏覽器）

test頁面的地址http://modernizr.github.io/Modernizr/test/index.html

HTML5特徵檢測（分別介紹使用JS原生方法檢測及使用modernizr類庫檢測）

• 檢測瀏覽器是否支持canvas API

        /*
        *@desc:檢測瀏覽器是否支持canvas API
        */
        function supports_canvas() {
            return !!document.createElement('canvas').getContext;
        }

        if (Modernizr.canvas) {
            //support
        } else {
            //not support
        }

• 檢測瀏覽器是否支持canvas 文本API

        //瀏覽器支持canvas API並不意味着支持canvas文本API（緣由是繪製文本的函數是後來才被歸入規範中）
        /*
        *@desc:檢測瀏覽器是否支持canvas 文本API
        */
        function supports_canvas_text() {
            if (!supports_canvas()) {
                return false;
            }
            var dummy_canvas = document.createElement('canvas');
            var context = dummy_canvas.getContext('2d');
            return typeof context.fillText == 'function';
        }

        if (Modernizr.canvastext) {
            //support
        } else {
            //not support
        }

• 檢測瀏覽器是否HTML5的video

        /*
        *@desc:檢測瀏覽器是否HTML5的video
        */
        function supports_video() {
            return !!document.createElement('video').canPlayType;
        }

            if (Modernizr.video) {
                //support
            } else {
                //not support
            }

• 檢測視頻格式

        //檢測視頻格式
        /*
        *@desc:檢測Mac 和iPhone支持的受專利保護的格式
        */
        function supports_h264_baseline_video() {
            if (!supports_video()) {
                return false;
            }
            var v = document.createElement('video');
            return v.canPlayType('video/mp4;codecs="avc1.42E01E,mp4a.40.2"');
        }
        /*
        *@desc:檢測被Mozilla Firefox和其它一些開源瀏覽器 支持的開放視頻格式
        */
        function supports_ogg_theora_video() {
            if (!supports_video()) {
                return false;
            }
            var v = document.createElement('video');
            return v.canPlayType('video/ogg;codecs="theora,vorbis"');
        }
        /*
        *@desc:WebM（一種開源的視頻編碼格式） 檢測被Chrome FireFox Opera支持的開放視頻格式
        */
        function supports_webm_video() {
            if (!supports_video()) {
                return false;
            }
            var v = document.createElement('video');
            return v.canPlayType('video/webm;codecs="vp8,vorbis"');
        }

            if (Modernizr.video) {
                //能夠播放視頻格式 但播放哪一種格式的呢
                if (Modernizr.video.ogg) {
                } else {
                    if (Modernizr.video.h264) {
                    } else {
                        if (Modernizr.video.webm) {
                        }
                    }
                }
            } else {
                //not support
            }

• 檢測瀏覽器是否支持本地存儲

        /*
        *@desc:檢測瀏覽器是否支持本地存儲
        */
        function supports_local_storage() {
            return ('localStorage' in window) && window['localStorage'] != null;
        }

            if (Modernizr.localstorage) {
                //support
            } else {
                //not support
            }

• 檢測瀏覽器是否支持web worker

        /*
        *@desc:檢測瀏覽器是否支持web worker
        */
        function supports_local_storage() {
            return !!window.Worker;
        }

            if (Modernizr.webworkers) {
                //support
            } else {
                //not support
            }

• 檢測瀏覽器是否支持離線web應用

        /*
        *@desc:檢測瀏覽器是否支持離線web應用
        */
        function supports_offline() {
            return !!window.applicationCache;
        }

            if (Modernizr.applicationcache) {
                //support
            } else {
                //not support
            }

• 檢測瀏覽器是否支持地理定位

        /*
        *@desc:檢測瀏覽器是否支持地理定位
        */
        function supports_geolocation() {
            return !!navigator.geolocation;
        }

            if (Modernizr.geolocation) {
                //support
            } else {
                //not support
            }

• 檢測瀏覽器是否支持佔位文本

        /*
        *@desc:檢測瀏覽器是否佔位文本
        */
        function supports_input_placeholder() {
            var i = document.createElement('input');
            return 'placeholder' in i;
        }

            if (Modernizr.input.placeholder) {
                //support
            } else {
                //not support
            }

• 檢測瀏覽器是否支持web worker

        /*
        *@desc:檢測瀏覽器是否支持自動聚焦
        */
        function supports_input_autofocus() {
            var i = document.createElement('input');
            return 'autofocus' in i;
        }

            if (Modernizr.input.autofocus) {
                //support
            } else {
                //not support
            }

還有不少，這裏就不一一介紹了，總之，經過上面的特徵檢測能夠知道，用modernizr.js更加方便，使用原生的方法相對來講會要複雜一些。

細說modernizr.js

Modernizr幫助咱們檢測瀏覽器是否實現了某個feature，若是實現了那麼開發人員就能夠充分利用這個feature作一些工做，反之沒有實現開發人員也好提供一個fallback。

舉例來講，當咱們引入了Modernizr.js類庫後， <html> 標籤的class屬性就會被相應的賦值，以顯示瀏覽器是否支持某類CSS屬性。好比在IE6下面，不支持boderradius特性，那麼在 <html> 標籤中就會出現 no-borderradius 類，咱們能夠作一些fallback的工做：

.no-borradius div{
    /*-- do some hacks here --*/
}

上面咱們已經介紹了，檢測瀏覽器是否支持某項特性，咱們能夠用這種語法：

Modernizr.featuretodetect

再舉一個一般的例子

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js">\x3C/script>')</script>

通常咱們都會這樣加載jQuery類庫，先從Google CDN上拿，若是沒拿到再加載本地的。

Modernizr.load()根據一些條件判斷來動態選擇加載CSS和JavaScript，這無疑對避免沒必要要的資源加載有極大的幫助。

那麼上面的例子能夠用Modernizr.load寫成以下所示

Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
    complete: function () {
      if ( !window.jQuery ) {
            Modernizr.load('js/libs/jquery-1.7.1.min.js');
      }
    }
  },
  {
    // This will wait for the fallback to load and
    // execute if it needs to.
    load: 'needs-jQuery.js'
  }
]);

事實上Modernizr.load最簡單的語法以下所示：

Modernizr.load(
    test: Modernizr.webgl,
    yep : 'three.js',
    nope: 'jebgl.js' 
);

也就是當瀏覽器支持WebGL的時候，就引入 three.js 這個類庫作一些3D效果。瀏覽器不支持WebGL的時候可使用 jebgl.js 作一些fallback操做。

有興趣能夠去官網看看具體API