如何检测浏览器中的HTML 5兼容性

Question

检测HTML 5语法的浏览器兼容性的最佳方法是什么？如果浏览器不兼容,请提示用户？

我理解该教程,该教程展示了如何测试HTML5的浏览器兼容性.但我很想知道这是否是唯一的方法？我需要检查每一个元素吗？

Answer 1

看看Modernizr:

利用HTML5和CSS3的新功能可能意味着牺牲对旧浏览器体验的控制.无论访问者使用何种浏览器或设备,Modernizr 2都是您制作最佳网站和应用程序的起点.

由于新的Media Query测试和内置的YepNope.js微库作为Modernizr.load(),您现在可以将特征检测与媒体查询和条件资源加载相结合.这为您提供了针对各种环境进行优化的强大功能和灵活性.

它有许多内置的方法来测试浏览器功能,并提供了一种有用的方法,可以在不支持您想要使用的功能时提供回退代码.

更多信息:http://www.modernizr.com/

Answer 2

"HTML5兼容性"是一件非常模糊的事情.

当人们询问HTML5兼容性时,它们通常意味着"哪些浏览器支持这些新的浏览器功能X,Y和Z我想使用它？"

在过去几年中,浏览器中添加了大量功能,现在通常称为"HTML5".

事实上,没有任何浏览器支持每个新功能.

您需要做的是确定哪些功能具有足够的支持以使其值得使用,您希望使用哪些功能,但如果您遇到不支持它们的浏览器,并且您有哪些功能,那么很乐意解决绝对必须用来实现你想做的事情.

http://caniuse.com/提供了一个相当全面的新浏览器功能列表以及浏览器支持图表(如果你滚动到底部,你会在整体兼容性表中看到最好的当前浏览器只支持他们测试过的89%的功能.随着新版本的发布,这将随着时间的推移而改善......但当然,也会引入新功能)

要在运行时确定用户的浏览器是否支持给定功能,您可以使用Modernizr.这是一个基于Javascript的工具,它将为您提供一组CSS类和Javascript标志,告诉您支持哪些功能.如果浏览器不支持您想要的功能,您可以使用它来触发站点中的替代行为.(Modernizr还包括HTML5Shim功能,它允许IE至少处理包含新HTML5元素的HTML页面).

为了获得更多的跨浏览器兼容性,已经编写了一系列黑客,以允许旧版浏览器(主要是IE公平)支持一系列新功能.您可以在此处查看相当全面的列表:https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

显然,尝试在IE中同时运行多个这些将严重影响您的网站的性能,但如果您需要支持一个或两个功能,它可以很方便.我最喜欢的是CSS3Pie,它为CSS圆角,阴影和渐变提供IE6/7/8支持.

希望有所帮助.