js判断是否支持html5新特性-优快云博客

本文介绍如何使用Modernizr库检测浏览器对HTML5特性的支持情况，包括地理位置、画布、视频等，并提供了一个针对日期输入类型的示例，展示了如何在不支持的浏览器中使用jQuery UI DatePicker作为备选方案。

到http://modernizr.com/ 下载modernizr.custom.js，并引入到你的页面中，之后可以用如下方法：

if (Modernizr.geolocation) //用于检测是否支持geolocation.
if (Modernizr.canvas) //用于检测是否支持canvas.
if (Modernizr.video) { //如果支持video，但需要检测支持哪种格式呢？
  if (Modernizr.video.webm) {
    // try WebM
  } else if (Modernizr.video.ogg) {
    // try Ogg Theora + Vorbis in an Ogg container
  } else if (Modernizr.video.h264){
    // try H.264 video + AAC audio in an MP4 container
  }
}
if (Modernizr.inputtypes.date) //检测是否支持日期输入。

实例：

input type=date 在ie9以下都不支持，此时可以用js判断是否支持，如不支持，改用jquery datepicker来替代。

<input type="date" id="sdate">

 $(function() {
	  
    // browser not support HTML5 inputtype=date.
    if (!Modernizr.inputtypes.date) {
      $( "#sdate" ).datepicker({
  	    dateFormat: "yy-mm-dd",
    	showOn: "button",
        buttonImage: "assets/img/calendar.gif",
        buttonImageOnly: true	
      });  
  	  
    }
}