一、检测方法

检测浏览器是否支持某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
}
参考资料