检测浏览器支持的HTML5特性方法
浏览器的 HTML5 支持情况其实还蛮复杂的，不同版本、不同内核，支持程度都不一样。要搞清楚浏览器到底支持哪些 HTML5 特性，靠猜肯定不行。比较靠谱的方法就是用工具来检测，比如Modernizr，挺方便的，集成到页面里就能用。
Modernizr 会自动在浏览器里跑一遍检测，挂一个Modernizr对象到全局，里面各种特性都有，比如Modernizr.canvas、Modernizr.video，返回的都是布尔值，真支持、假不支持，简单明了。
如果你只想检测某一个特性，比如Canvas，不想引整个库，也可以自己写个函数：
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}挺实用的，不用依赖任何第三方库。浏览器支持就返回true，不支持就返回false。
还有一点蛮重要，HTML5 现在标准还在完善，不同浏览器的实现也有些差异。像 IE9、Firefox4、Chrome10 这些老版本就各有各的问题。如果你要兼容老浏览器，建议配合Modernizr来做降级，比如不支持canvas时一张备用图片。
如果你想更深入玩，Modernizr 官网可以下载定制版本，按需勾选想要检测的特性，不浪费字节。
哦对了，还有一些浏览器兼容性检测的工具，也挺有：
如果你经常要做跨浏览器的项目，用 Modernizr 配合手写检测逻辑，效果还挺不错，灵活、省心。
文件大小：35.5KB
评论区