五分钟学会HTML5！（二）

HTML5开发与旧式浏览器的兼容

我们已经讨论了HTML5许多很酷的新功能，包括新的语义元素、为画图而生的canvas标签，以及音频与视频支持。

你可能会想：这些东西是很好，但当用户的浏览器不兼容HTML5时，可能就没法使用它们了。更不用说一些所谓的“支持”HTML5的浏览器，实际上只支持它的一部分功能而已。并不是所有HTML5新功能都会被所有浏览器所支持，而且许多HTML5特性在不同浏览器上也许使用了不同的实现方式。

不过，有一种方法可以使用新的特性，同时不影响旧版浏览器对你的站点的访问。你可以使用polyfill。

根据Paul Irish的说法，polyfill是模拟未来API的shim，它向旧版浏览器提供后备的功能。当旧版浏览器不支持站点中的某项HTML5功能时，polyfill会补充其中的空隙。学会使用这些polyfill，你就不必为了使用HTML5而抛弃那些使用旧版浏览器的用户。

获得polyfill支持的一种方法是使用JavaScript库——Modernizr（当然可用的不止这一种）。它会带来特性侦测能力，这样你就能检查浏览器究竟是否支持某种功能（比如canvas元素）。如果不支持，就提供一个备用的选择。

让我们研究一个示例。还记得吗？在介绍语义元素与页面布局时，我们已经使用过这个例子了。


这段代码包含了一系列不被旧版浏览器支持的新HTML5元素。记住，在IE9中，它的效果如下图所示。



我们可以使用Internet Explorer开发工具观察它在旧版IE中的模样。在Internet Explorer界面下，按F12键打开Internet Explorer开发工具。



注意，现在的Browser Mode（在页面上方的灰色菜单栏里）被设置为IE9。单击Browser Mode，在弹出的下拉列表中选择“Internet Explorer 8”（IE8不支持HTML5）。



修改完成，转到不兼容HTML5的浏览器之后，Web页面变得如下图所示。



这个效果看起来非常差劲，但实际上问题没那么严重。页面布局变得乱糟糟的原因，是IE8没能识别我所使用的那些HTML5新元素，于是就没有把它们加到DOM，随之而来的就是我们不能使用CSS去设计页面。

尽管如此，增加一条对Modernizr的引用（不需要改动任何其他代码！），就会把这些元素强制放入DOM。从http://www.modernizr.com/download/下载完Modernizr后，在< head>区域添加一条引用即可，代码如下所示。