详细介绍代码检测HTML5/CSS3新特性的浏览器支持情况

百变鹏仔 2个月前 (10-18) #H5教程

文章标签详细介绍

伴随着今年10月底HTML5标准版的发布，未来使用HTML5的场景会越来越多，这是令web开发者欢欣鼓舞的事情。然而有一个现实我们不得不看清，那就是IE系列浏览器还占有一大部分市场份额，以IE8、9为主，windows8.1的用户已经用上了IE10/11，而考虑我国的国情，IE6、7依然存留不少。在我们放手用HTML5开发的时候，新特性支持度检测就是必不可少的了。一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本，不过这种方式不是很可靠，浏览器对于一些新特性也是在逐渐支持，不能肯定说某个浏览器100%支持了HTML5。而且，IE11做了一个恶心的举动：在UA中去掉了“MSIE”标志，把appName改为了“Netspace”，并且开始支持-webkit-前缀的css属性，这是活生生要伪装成chrome的节奏。所以，HTML5/CSS3支持性的检测，还是靠特征检测（figure detection）或者说能力检测更好些。本篇就来介绍一下常用的检测方式都有哪些。

HTML5部分

检测HTML5新特性的方法主要有以下几种：

1. 检查全局对象（window或navigator）上有没有相应的属性名

2. 创建一个元素，检查元素上有没有相应的属性

立即学习“前端免费学习笔记（深入）”；

3. 创建一个元素，检测元素上有没有方法名称，然后调用该方法，看能否正确执行

4. 创建一个元素，为元素的相应属性赋一个值，然后再获取此属性的值，看看赋值是否生效

由于不同浏览器的不同行为，检测一些特性的时候，可能会用到上述几个方法的组合，接下来用上面的方法做一下常用特性的检测：

canvas

function support_canvas(){    var elem = document.createElement(&#39;canvas&#39;);    return !!(elem.getContext && elem.getContext(&#39;2d&#39;));}

一般来讲，创建canvas元素并检查getContext属性即可，但是在一些浏览器下不够准确，所以再检测一下elem.getContext(’2d’)的执行结果，就可以完全确定。以上代码摘自Modernizr：http://www.php.cn/

关于canvas，有一点要补充的，那就是fillText方法，尽管浏览器支持canvas，我们并不能确切的确定它支持fillText方法，因为canvas API经历了各种修改，有一些历史原因，检测支持fillText的方法如下：

function support_canvas_text(){    var elem = document.createElement(&#39;canvas&#39;);    var context = elem.getContext(&#39;2d&#39;);    return typeof context.fillText === &#39;function&#39;;}

video/audio

function support_video(){    return !!document.createElement(&#39;video&#39;).canPlayType;}function support_audio(){    return !!document.createElement(&#39;audio&#39;).canPlayType;}

video和audio的写法相似。

要检测video/audio支持的资源格式，可以调用canPlayType方法来进行检查，具体如下：

unction support_video_ogg(){    var elem = document.createElement(&#39;video&#39;);    return elem.canPlayType(&#39;video/ogg; codecs="theora"&#39;);}function support_video_h264(){    var elem = document.createElement(&#39;video&#39;);    return elem.canPlayType(&#39;video/mp4; codecs="avc1.42E01E"&#39;);}function support_video_webm(){    var elem = document.createElement(&#39;video&#39;);    return elem.canPlayType(&#39;video/webm; codecs="vp8, vorbis"&#39;);}function support_audio_ogg(){    var elem = document.createElement(&#39;audio&#39;);    return elem.canPlayType(&#39;audio/ogg; codecs="vorbis"&#39;);}function support_audio_mp3(){    var elem = document.createElement(&#39;audio&#39;);    return elem.canPlayType(&#39;audio/mpeg;&#39;);}function support_audio_wav(){    var elem = document.createElement(&#39;wav&#39;);    return elem.canPlayType(&#39;audio/wav; codecs="1"&#39;);}

要注意的是，canPlayType的返回值并不是布尔类型，而是字符串，取值有以下几种：

“probably”：浏览器完全支持此格式
“maybe”：浏览器可能支持此格式
“”：空串，表示不支持

localStorage

一般来讲，检查全局对象是否有localStorage属性即可，如下：

function support_localStorage(){    try {        return &#39;localStorage&#39; in window && window[&#39;localStorage&#39;] !== null;      }     catch(e){        return false;    }}

在一些浏览器禁用cookie，或者设置了隐私模式什么的情况，检查属性或报错，所以加在try语句中，如果报错了认为不支持。

另外，还有一种更严格的检查方法，检查相应方法是否支持，如下：

function support_localStorage(){    try {        if(&#39;localStorage&#39; in window && window[&#39;localStorage&#39;] !== null){            localStorage.setItem(&#39;test_str&#39;, &#39;test_str&#39;);            localStorage.removeItem(&#39;test_str&#39;);            return true;        }        return false;    }     catch(e){        return false;    }}

webWorker

function support_webWorker(){    return !!window.Worker;}

applicationCache

function support_applicationCache(){    return !!window.applicationCache;}

geolocation

function support_geolocation(){    return &#39;geolocation&#39; in navigator;}

input标签新属性

input标签新增的属性包括：autocomplete、autofocus、list、placeholder、max、min、multiple、pattern、required、step，检测是否支持用上面提到的方法2即可，新建一个input标签，看是否有这些属性，以autocomplete为例：

function support_input_autocomplete(){    var elem = document.createElement(&#39;input&#39;);    return &#39;autocomplete&#39; in elem;}

另外要特别注意list属性，因为它是与datalist标签连用的，所以检查的时候要一并检测datalist标签是否支持：

function support_input_list(){    var elem = document.createElement(&#39;input&#39;);    return !!(&#39;list&#39; in elem && document.createElement(&#39;datalist&#39;) && window.HTMLDataListElement);}

input标签新类型

这里的类型就是指type的取值，input新增的type值包括：search、tel、url、email、datetime、date、month、week、time、datetime-local、number、range、color。检测这些值需要用上面提到的方法4，以number为例：

function support_input_type_number(){    var elem = document.createElement(&#39;input&#39;);    elem.setAttribute(&#39;type&#39;, &#39;number&#39;);    return elem.type !== &#39;text&#39;;}

这是一种较为简单的检查方法，因为严格来讲，浏览器会为不同的类型提供不同的外观或实现，例如chrome中range类型会长这样：

我们要确切的知道浏览器为该类型提供了对应的实现，才可以认为是“支持的”，要从这个方面检测是有难度的，各浏览器实现都不一。下面贴出Modernizr中的一个实现，供参考：检测email类型的实现：

function support_input_type_email(){    var elem = document.createElement(&#39;input&#39;);    elem.setAttribute(&#39;type&#39;, &#39;email&#39;);    elem.value = &#39;:)&#39;;    return elem.checkValidity && elem.checkValidity() === false;}

为email类型设置了一个非法的value，然后手动调用校验方法，如果返回false，说明浏览器提供了该类型的实现，认为是支持的。

history

history虽说是HTML4就有的，但HTML5提供了新的方法，检测方法如下：

function support_history(){    return !!(window.history && history.pushState);}

webgl

function support_webgl(){    return !!window.WebGLRenderingContext;}

postMessage

function support_postMessage(){    return !!window.postMessage;}

draggable

HTML5的拖拽特性：

function support_draggable(){    var p = document.createElement(&#39;p&#39;);    return (&#39;draggable&#39; in p) || (&#39;ondragstart&#39; in p && &#39;ondrop&#39; in p);}

webSocket

unction support_webSocket(){    return &#39;WebSocket&#39; in window || &#39;MozWebSocket&#39; in window;}

svg

function support_svg(){    return !!document.createElementNS && !!document.createElementNS(&#39;http://www.w3.org/2000/svg&#39;, &#39;svg&#39;).createSVGRect;}

事件的支持性判断

通用方法：

检查事件的支持性，用上面提到的方法2就可以，创建一个元素，看元素上有没有对应的事件名称，下面是摘自Modernizr的实现：

isEventSupported = (function() {      var TAGNAMES = {        &#39;select&#39;: &#39;input&#39;, &#39;change&#39;: &#39;input&#39;,        &#39;submit&#39;: &#39;form&#39;, &#39;reset&#39;: &#39;form&#39;,        &#39;error&#39;: &#39;img&#39;, &#39;load&#39;: &#39;img&#39;, &#39;abort&#39;: &#39;img&#39;      };      function isEventSupported( eventName, element ) {        element = element || document.createElement(TAGNAMES[eventName] || &#39;p&#39;);        eventName = &#39;on&#39; + eventName;        // When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those        var isSupported = eventName in element;        if ( !isSupported ) {          // If it has no `setAttribute` (i.e. doesn&#39;t implement Node interface), try generic element          if ( !element.setAttribute ) {            element = document.createElement(&#39;p&#39;);          }          if ( element.setAttribute && element.removeAttribute ) {            element.setAttribute(eventName, &#39;&#39;);            isSupported = is(element[eventName], &#39;function&#39;);            // If property was created, "remove it" (by setting value to `undefined`)            if ( !is(element[eventName], &#39;undefined&#39;) ) {              element[eventName] = undefined;            }            element.removeAttribute(eventName);          }        }        element = null;        return isSupported;      }      return isEventSupported;    })()

touch事件

如果仅仅是检查touch事件是否支持，就没必要写上面那么多东西了，可以简单书写如下：

function support_touch_event(){    return !!((&#39;ontouchstart&#39; in window) || window.DocumentTouch && document instanceof DocumentTouch);}

Mozilla还提供了一个媒体查询的语句用来检测touch的支持性：touch-enabled，可以在页面上插入一个带有此媒体查询的元素来判断是否支持touch事件。参考：http://www.php.cn/

不过我们做移动开发一般都只考虑webkit内核了，Mozilla的方式就不写了，如果需要请参考Modernizr源码。

css3部分

通用方法

css3属性支持度的检测，主要通过上面方法提到的2和4来检查，不过我们要检查的是元素的style属性。另外一个要提的就是浏览器私有前缀，在现阶段我们用css3属性大部分是要写前缀的，因为各浏览器还未完全支持。我们用到的前缀有：-webkit-、-ms-、-o-、-moz-，至于前缀-khtml-，这是Safari早期使用的，现在基本也没有人再用它了，所以进行检测的时候就把它省去了。Modernizr移除了此前缀的检测，详见：http://www.php.cn/

通用代码如下：

var support_css3 = (function() {   var p = document.createElement(&#39;p&#39;),      vendors = &#39;Ms O Moz Webkit&#39;.split(&#39; &#39;),      len = vendors.length;   return function(prop) {      if ( prop in p.style ) return true;      prop = prop.replace(/^[a-z]/, function(val) {         return val.toUpperCase();      });      while(len--) {         if ( vendors[len] + prop in p.style ) {            return true;         }       }      return false;   };})();

3D变形

css3 3D变形的检测稍微复杂些，首先要支持perspective属性，其次要支持transform-style的值为preserve-3d。用方法4的方式无法检测出来，需要借助媒体查询的方式，代码如下：

function support_css3_3d(){    var docElement = document.documentElement;    var support = support_css3(&#39;perspective&#39;);    var body = document.body;    if(support && &#39;webkitPerspective&#39; in docElement.style){        var style = document.createElement(&#39;style&#39;);        style.type = &#39;text/css&#39;;        style.innerHTML = &#39;@media (transform-3d),(-webkit-transform-3d){#css3_3d_test{left:9px;position:absolute;height:3px;}}&#39;;        body.appendChild(style);        var p = document.createElement(&#39;p&#39;);        p.id = &#39;css3_3d_test&#39;;        body.appendChild(p);        support = p.offsetLeft === 9 && p.offsetHeight === 3;    }    return support;}

需要借助上面定义好的support_css3方法来检测perspective。

基本常用检测的就这些了，本文中一部分代码是网上搜来的，还有一部分是从Modernizr源码中抽离出来的。如文中叙述有误，欢迎指正。

在实际开发中，推荐直接使用Modernizr进行检测，它已经封装的非常漂亮了。但是如果你仅仅检测几个属性，或者不想因加载额外的库而浪费性能，就可以使用上述代码进行单个检测

文章推荐