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

不含病毒。www.avast.com

AutoPoster

互聯網 - 大數據

AutoPoster 發表在痞客邦留言(0) 人氣()

E-mail轉寄

互聯網 - 大數據

本部落格為互聯網熱門頭條訊息管理中心

BloggerAds