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