HTML5特性檢測

簡介

作web前段開發人員已經習慣了處理多瀏覽器兼容(如IE、firefox、chrome)、多瀏覽器版本兼容(Ie六、ie七、ie八、ie9)，咱們需呀從js和css上考慮讓它如何兼容，如何一致；HTML5也同樣，只是它更普遍的被瀏覽器開發商接受併兼容，並且效果良好；可是這裏仍舊有一個問題，就是「有些老的瀏覽器不支持」 :(；你把html5用的爐火純青，突然來個ie6用戶；因此咱們須要對瀏覽器對html5的支持作必定的檢測，從而給用戶以有好提示；

起初前端工程師們就極力反對瀏覽器檢測，他們認爲相似user-agent嗅探的方法是很很差的，理由是它並非一種面向將來的代碼，沒法適應新版的瀏覽器。更好的作法是使用特性檢測

怎麼檢測

當瀏覽器在渲染web頁面的時候會構造一個文檔對象模型(DOM)，經過它來表示頁面上的HTML元素，任何一個tag都會被表示爲一個對象；固然也有windwos和document這些不和特定頁面元素綁定在一塊兒的全局對象；

       全部的dom對象都共享一些屬性，可是有些對象會擁有特定的屬性。在支持HTML5特性的瀏覽器中，特性相關的dom對象就會有特定的屬性。經過這些特定的屬性，咱們能夠快速的檢測出那些html5特性是被支持的。好比常見的四種方法：

1.檢測全局對象(如window,navigator)是否擁有特定的屬性。好比檢測地理位置特性

2.建立一個元素，而後檢測該元素的dom對象是否擁有特定的屬性。好比檢測畫布特性

3.建立一個元素，而後檢測這個元素dom對象是否擁有特定的方法，調用這個方法，並檢測返回值。好比檢測支持的視頻格式

4.建立一個元素，給這個元素的dom對象設定特定的屬性值，而後檢測瀏覽器是否保留了該屬性值

畫布(canvas)

在網頁中canvas就是一塊矩形區域，在這個區域裏，咱們能夠畫任何內容，html5標準中定義了一系列的canvas的api，用於繪製簡單圖形、定義路徑、建立漸變、應用圖像變換等。

檢測canvas api，能夠經過建立canvas元素，判斷其dom對象是否有getContext()方法； 

        //Canvas
        function supportCanvas() {            return !!document.createElement("canvas").getContext;
        }

 

畫布文本(Canvas Text)

瀏覽器支持canvas api但不必定支持canvas text api，由於canvas api一直都在不斷完善中，cavas text(繪製文本)後來才被歸入規範；既然如此，支持canvas text api必需要支持canvas api(見上)，若是李蘭奇支持canvas api，那麼在得到canvas繪圖上下文後，能夠判斷是否有filltext方法，若是存在這個方法，則能夠判定瀏覽器支持canvas text  api. 

//Canvas Text

        function supportCanvasText() {

            if (!supportCanvas) {

                return false;

            }

            var canvas = document.createElement("canvas");

            //獲取繪圖上下文

            var context = canvas.getContext("2d"); 

            //是否有fillText方法

            return typeof context.fillText == "function";

        }

Modernizr.canvastext

 

視頻(Video)

html5標準中定義了一個新元素video，用來將視頻簽入到web頁面中；以前若是想再web頁面中嵌入視頻，只能使用apple的quick time或者adobe flash播放器這些插件；video元素的可用性不須要任何腳本檢測；咱們能夠爲它指定多個視頻格式的文件來進行播放，不支持html5 video的瀏覽器會忽略video標籤，在這種狀況下咱們能夠指定用第三方插件來播放視頻，固然這只是處理web頁面視頻的最好解決方案；若是你的確要作檢測，固然是能夠的。和canvas相似，建立一個video節點，判斷dom對象是否有某個屬性，這裏使用canPlayType 

//test video

    function testVideo() {

        var isSupport = supportVideo();

        alert(isSupport ? "support video" : "do not support video");

        //alert(Modernizr.video ? "support video" : "do not support video");

    }

Modernizr.video

 

視頻格式(Video Formats)

視頻編碼算法迥異，因此目前各瀏覽器還未達成一致，使用統一的視頻編碼算法；可是好在這種算法已經縮減到兩週算法上：一種是safari和iphone的編碼算法；另外一種是諸如chrome和mozilla firefox這類開源瀏覽器的編碼算法；因此作視頻格式支持檢測，要分別判斷這兩種；還有一種WebM，它是一種新的開源視頻編碼格式，會在Chrome，firefox和opera的下一個版本的到支持，因此咱們也檢測咯；

 

要檢測瀏覽器是否支持某視頻格式，固然必須支持video；先建立video節點，而後調用dom對象的canPlayType()方法，可是這個方法返回的不是一個bool值，由於視頻格式很是複雜，因此這個方法會返回一個字符串，分別爲：

probably:表示瀏覽器充分把握能夠播放此格式

maybe：表示瀏覽器有可能能夠播放此格式

「」(空字符串)：表示瀏覽器沒法播放此格式

 mp4:

//mp4

        function support_h264BaseLine_VideoFormats() {

            if (!supportVideo()) {

                return false;

            }

            var v = document.createElement("video");

            return v.canPlayType("video/mp4;codecs='avc1.42E01E,mp4a.40.2'")

        }

Modernizr.video.h264

ogg:

//ogg

        function support_ogg_theora_VideoFromats() {

            if (!supportVideo()) {

                return false;

            }

            var v = document.createElement("video");

            return v.canPlayType("video/ogg;codecs='theora,vorbis'")

        }

Modernizr.video.ogg

//web m

        function support_webM_VideoFromats() {

            if (!supportVideo()) {

                return false;

            }

            var v = document.createElement("video");

            return v.canPlayType("video/webm;codecs='vp8,vorbis'")

        }

 

本地存儲(Local Storage)

HTML5本地存儲容許網站把信息存儲到本地的計算機上，以便在須要時獲取。這和cookie相似，但cookie是有大小先知道的，並且每次請求一個新頁面時，cookie就會被髮送回服務器；而html5本地存儲將信息存儲到用戶計算機上，網站能夠再頁面加載完成後經過js獲取；檢測瀏覽器是否支持本地存儲能夠經過判斷window對象是否有localStorage屬性 

     //Local Storage
       function supportLocalStorage() {            return ('localStorage' in window) && window['localStorage'] != null;
       }

Web Workers

Web Workers提供了一種標準的方式讓瀏覽器可以在後臺運行js，經過web worker，能夠建立多個「線程」並讓他們同時執行； 

      //web workers
       function supportWebWorkers() {            return window.Worker;
       }

離線web應用

html5支持離線web應用，即斷開網絡後能夠繼續訪問web應用程序；在第一次訪問具有離線訪問的web應用時，web服務器會告訴瀏覽器哪些文件是保證離線正常工做必須得，一旦瀏覽器下載了這些必須文件，下次就能夠在沒有網絡的狀況下正常使用應用；等下次用戶從新上線的時候，全部改動都會上傳到遠程的web服務器；檢測瀏覽器是否支持離線應用，能夠經過判斷window對象是否有applicationCache屬性；

      //offline
       function supportOffLine() {            return !!window.applicationCache;
       }

地理位置(Geolocation)

瀏覽器在實現對html5新特性支持的同時，也紛紛加入了對地理位置特性的支持。嚴格的說，地理位置特性並不屬於html5標準的一部分，它由地理位置工做組(Geolocation Working Group)負責制定標準，這個工做組和html5工做組不要緊；地理位置api的使用場景很是普遍，尤爲在移動設備上；檢測瀏覽器是否支持地理位置api，能夠判斷navigator是否有geolocation屬性.

      //geolocation
        function supportGeolocation() {            return !!navigator.geolocation;
        }

Modernizr.geolocation