我们已经讨论了HTML5许多很酷的新功能,包括新的语义元素、为画图而生的canvas标签,以及音频与视频支持。
你可能会想:这些东西是很好,但当用户的浏览器不兼容HTML5时,可能就没法使用它们了。更不用说一些所谓的“支持”HTML5的浏览器,实际上只支持它的一部分功能而已。并不是所有HTML5新功能都会被所有浏览器所支持,而且许多HTML5特性在不同浏览器上也许使用了不同的实现方式。
不过,有一种方法可以使用新的特性,同时不影响旧版浏览器对你的站点的访问。你可以使用polyfill。
根据Paul Irish的说法,polyfill是模拟未来API的shim,它向旧版浏览器提供后备的功能。当旧版浏览器不支持站点中的某项HTML5功能时,polyfill会补充其中的空隙。学会使用这些polyfill,你就不必为了使用HTML5而抛弃那些使用旧版浏览器的用户。
获得polyfill支持的一种方法是使用JavaScript库——Modernizr(当然可用的不止这一种)。它会带来特性侦测能力,这样你就能检查浏览器究竟是否支持某种功能(比如canvas元素)。如果不支持,就提供一个备用的选择。
让我们研究一个示例。还记得吗?在介绍语义元素与页面布局时,我们已经使用过这个例子了。
Title
Header in h1
Subheader in h2
Menu Option 1
Menu Option 2
Menu Option 3
Article #1
This is the first article. This is highlighted .
Article #2
This is the second article. These articles could be blog posts, etc.
Links
Link 1
Link 2
Link 3
src="http://HdhCmsTestwindowsdevbootcamp测试数据/Images/JennMar.jpg"
alt="Jennifer Marsman" />
Jennifer Marsman
Footer - Copyright 2011