一、检测方法

检测浏览器是否支持某HTML5特性,有四种方法:

1、方法一

检测全局对象是否拥有某个特定的属性:

!!window.applicationCache

2、方法二

动态创建一个元素(createElement),检测该元素是否拥有特定的属性:

!!document.createElement('canvas').getContext

3、方法三

动态创建一个元素(createElement),检测该元素是否拥有特定的方法,并调用该方法检查它的返回值:

var elem = document.createElement('video');
return elem.canPlayType && elem.canPlayType('video/webm; codecs="vp8, vorbis"');

4、方法四

动态创建一个元素(createElement),并给该元素设置特定的属性,然后检查浏览器是否保留了该属性值:

var elem = document.createElement('input');
elem.setAttribute('type', 'color');
//input元素的默认类型为'text',如果浏览器不支持设定的类型,那么type属性的值仍为'text'
return elem.type !== 'text';

二、特性检测库

  • Modernizr

Moderniz是一个检测浏览器是否支持HTML5、CSS3特性的开源Javascript类库。

三、检测特性

1、画布(Canvas)

  • 检测浏览器是否支持canvas API

    • JS

    动态创建canvas元素并判断该元素是否有getContext()方法:

      !!document.createElement('canvas').getContext
    
    • Modernizr
      if (Modernizr.canvas) {
        // supported
      } else {
        // not-supported
      }
    

    Modernizr的源码也是通过createElement然后再判断的:

      var elem = createElement('canvas');
      return !!(elem.getContext && elem.getContext('2d'));
    
  • 检测浏览器是否支持canvas文本API

    • JS
      var elem = document.createElement('canvas'),
          context = null;
      return elem.getContext && (context = elem.getContext('2d')) && typeof context.fillText == 'function';
    
    • Modernizr
      if (Modernizr.canvastext) {
        // supported
      } else {
        // not-supported
      }
    

    源码:

      if (Modernizr.canvas  === false) {
        return false;
      }
      return typeof createElement('canvas').getContext('2d').fillText == 'function';
    

2、视频(Video)

  • 检测浏览器是否支持视频

    • JS
      !!document.createElement('video').canPlayType
    
    • Modernizr
      if (Modernizr.video) {
        // supported
      } else {
        // not-supported
      }
    
  • 检测浏览器是否支持某种视频格式

    例:判断浏览器是否支持webm格式视频

    • JS
      var elem = document.createElement('video');
      return elem.canPlayType && elem.canPlayType('video/webm; codecs="vp8, vorbis"');
    
    • Modernizr
      Modernizr.video.webm 
    
  • 说明:

    调用canPlayType()方法返回的是字符串:

    • probably

    浏览器看上去可以播放指定的视频格式

    • maybe

    有可能可以播放指定的视频格式

    • ”“(空字符串)

    指定的视频格式肯定不能播放

3、本地存储(LocalStorage)

  • JS
'localStorage' in window && window['localStorage'] !== null
  • Modernizr

注意:Modernizr库中的属性名是小写的

if (Modernizr.localstorage) {
  // supported
} else {
  // not-supported
}

4、Web Workers

Web Workers提供了一种让浏览器在后台运行Javascript程序的方式。

  • JS
!!window.Worker
  • Modernizr
if (Modernizr.webworkers) {
  // supported
} else {
  // not-supported
}

5、离线Web应用(Application Cache)

  • JS
!!window.applicationCache
  • Modernizr
if (Modernizr.applicationcache) {
  // supported
} else {
  // not-supported
}

6、地理位置(Geolocation)

  • JS
'geolocation' in navigator
  • Modernizr
if (Modernizr.geolocation) {
  // supported
} else {
  // not-supported
}

7、Input

  • 输入框类型(Input Types)

    • JS
      var elem = document.createElement('input');
      elem.setAttribute('type', 'color');
      return elem.type !== 'text';
    
    • Modernizr
      Modernizr.inputtypes.color
      Modernizr.inputtypes.date
      Modernizr.inputtypes.datetime
      Modernizr.inputtypes['datetime-local']
      Modernizr.inputtypes.email
      Modernizr.inputtypes.month
      Modernizr.inputtypes.number
      Modernizr.inputtypes.range
      Modernizr.inputtypes.search
      Modernizr.inputtypes.tel
      Modernizr.inputtypes.time
      Modernizr.inputtypes.url
      Modernizr.inputtypes.week
    
  • 占位文本

    • JS
      'placeholder' in document.createElement('input')
    
    • Modernizr
      Modernizr.input.placeholder
    
  • 自动聚焦

    • JS
      'autofocus' in document.createElement('input')
    
    • Modernizr
      Modernizr.input.autofocus
    
  • 其他

      Modernizr.input.autocomplete
      Modernizr.input.list
      Modernizr.input.max
      Modernizr.input.min
      Modernizr.input.multiple
      Modernizr.input.pattern
      Modernizr.input.required
      Modernizr.input.step
    

8、微数据(Microdata)

微数据是一种标准化的为Web页面提供额外语义的方式。

  • JS
!!document.getItems

Modernizr暂时未提供检测微数据的API。

9、浏览器历史(History)

  • JS
!!(window.history && history.pushState)
  • Modernizr
if (Modernizr.history) {
  // supported
} else {
  // not-supported
}
参考资料