html5开发与旧式浏览器的兼容
我们已经讨论了HTML5许多很酷的新功能，包括新的语义元素、为画图而生的canvas标签，以及音频与视频支持。
你可能会想：这些东西是很好，但当
用户的浏览器不兼容HTML5时，可能就没法使用它们了。更不用说一些所谓的“
支持”HTML5的浏览器，实际上只
支持它的一部分
功能而已。并不是所有HTML5新
功能都会被所有浏览器所
支持，而且许多HTML5特性在不同浏览器上也许使用了不同的实现方式。
不过，有一种
方法可以使用新的特性，同时不影响旧版浏览器对你的
站点的访问。你可以使用polyfill。
根据Paul Irish的说法，polyfill是模拟未来API的shim，它向旧版浏览器提供后备的
功能。当旧版浏览器
不支持站点中的某项HTML5
功能时，polyfill会补充其中的空隙。学会使用这些polyfill，你就不必为了使用HTML5而抛弃那些使用旧版浏览器的
用户。
获得polyfill
支持的一种
方法是使用JavaScript库——Modernizr（当然可用的不止这一种）。它会带来特性侦测能力，这样你就能检查浏览器究竟是否
支持某种
功能（比如canvas元素）。如果
不支持，就提供
一个备用的选择。
让我们研究
一个示例。还记得吗？在介绍语义元素与
页面布局时，我们已经使用过这个例子了。
<!DOCTYPE html>
<html>
<head>
<
Meta charset="utf-8" />
<title>Title</title>
<link href="css/html5reset.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<header>
<hgroup>
<h1>Header in h1</h1>
<h2>Subheader in h2</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Menu Option 1</a></li>
<li><a href="#">Menu Option 2</a></li>
<li><a href="#">Menu Option 3</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Article #1</h1>
</header>
<section>
This is the first article. This is <mark>highlighted</mark>.
</section>
</article>
<h1>Article #2</h1>
This is the second article. These articles
Could be blog posts, etc.
</section>
<aside>
<section>
<h1>Links</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</section>
<
figure>
<img width="85" height="85"
src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"
alt="Jennifer Marsman" />
<
figcaption>Jennifer Marsman</
figcaption>
</
figure>
</aside>
<footer>Footer - Copyright 2011</footer>
</body>
</html>
复制
代码
这段
代码包含了一系列不被旧版浏览器
支持的新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>区域
添加一条引用即可，
代码如下所示。
<script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="script/modernizr-2.0.6.js" type="text/javascript"></script>
这里
增加了两条脚本引用，一条指向jQuery，一条指向Modernizr。现在并不真的需要使用jQuery，但下
一个脚本中它就要大显身手，所以这里一并
增加了对它们的引用。
这么
一个简单的变化，使得
页面在IE8中变成了下图所示的式样。
它并不完美，但已经与我们在IE9中见到的原版本相当接近。Modernizr把这些IE8不能理解的HTML5新元素加入了DOM，正因为如此，我们才能用CSS去设计它们。
其实，Modernizr可以做的远不止此。仔细观察前述Web
页面的IE8和IE9版本，你会发现后者的两个article和
图片的四角上有非常好看的圆角
效果，而IE8中却没有。使用Modernizr，同样可以修复这一
效果。
<script type="text/javascript">
if (!Modernizr.borderradius) {
$.getScript("script/jquery.corner.js", function() {
$("article").corner();
$("
figure").corner();
});
}
</script>
在这个脚本中，我们首先检查Modernizr对象，看它是否
支持“borderradius”（这是CSS3的一项特性）。如果
不支持，再使用一段jQuery脚本
调用jquery.corner.js（前提是先从http://jquery.malsup.com/corner/下载它，然后在< head>中引用jQuery——正像我前面所做的那样）。接下来，简单地从脚本中为article和
figure
调用corner
方法，即可形成圆角
效果。
除了上面所说，你还可以用一种稍微不同的
方法解决这个问题。Modernizr有
一个可选的（未包含）条件资源加载器（conditional resource loader），即Modernizr.load()，它基于Yepnope.js。它允许你只将
用户需要的polyfill脚本载入
页面，而且这种异步和并行的载入有时候会带来
性能上的提升。为了得到Modernizr.load，你必须在
一个自定义的Modernizr版本中（必须在http://www.modernizr.com/download/上创建）包含它，开发版本中并没有包含它。使用Modernizr.load，我们可以写出下列脚本：
Modernizr.load({
test: Modernizr.borderradius,
nope: 'script/jquery.corner.js',245)"> callback: function () {
$('article').corner();
$('
figure').corner();
}
});
总而言之，这段
代码实现了与前面的脚本相同的
功能。Modernizr.load首先检测布尔
属性“Modernizr.borderradius”以确定它是否被
支持。然后，nope定义了在test为false时将要加载的源。尽管IE8并
不支持CSS3
属性“borderradius”，但它会载入jquery.corner.js脚本。最后，callback指定了
一个函数，脚本载入完成后会执行该
函数。因此，我们
在这个
函数里为article和
figure
调用了corner
方法（就像前面的
代码那样）。如果你想进一步研究Modernizr.load， http://www.modernizr.com/docs/#load上有一份简明教程可供参考。
不管使用上面哪种脚本，我们得到的IE8（
不支持HTML5）版本Web
页面都如上图所示。
因此，使用polyfill或者其他工具（例如Modernizr），就可以使用HTML5的新
功能，同时在旧版本浏览器上提供良好的
用户体验。这方面的更多信息，请参考http://www.diveintohtml5.org/detect.html，这里详细地阐述了Modernizr侦测HTML5特性的细节。
小结
在这篇HTML5的导论中，我们谈到了语义
标签、canvas、au
dio和video，以及如何在使用HTML5的同时保持对旧版浏览器的
支持。需要注意的是，我们还有很多东西没有讲：微数据（microdata），存储，CSS3，等等……接下来，我会给出一些继续学习HTML5的资源。
IE Test Drive：就算你不使用IE，也不要忘了它其实是
一个优秀的
站点。这里的demo多如牛毛：入门Demo， HTML5 Demo，图形Demo，以及浏览器Demo。你可以在最喜欢的浏览器中尽情试用它们。本
站点还有一些指向其他资源的
链接。
Beauty of the Web：这是
一个专门展示优秀web
站点的地方。这些
站点充分利用了HTML5的硬件加速特性，以及那些与IE9契合的pinning特性。
BuildMyPinnedSite：在使用pinning和Windows整合时，你需要的所有
代码、想法和示例都可以
在这里找到。
HTML5 Labs：本
站点提供Web标准化组织（如W3C）发布的不稳定规格说明书，以及早期的Microsoft原型。
在这里，你可以对IndexedDB、 WebSockets、 FileAPI和Media Capture API等原型先睹为快。
视频
Brandon Satrom 在TechEd 2011上的演讲 “Application Development with HTML5” ：这场长达一小时的经典演讲，阐述了HTML5开发的精髓。
来自MIX 2011的HTML5演讲：大量关于HTML5的会议。
工具
许多开发工具都已提供HTML5
支持，试试下面这些：
Visual Stu
dio 2010 SP1 – SP1
增加了对HTML5、CSS3 IntelliSense和Validation基本
功能的
支持。更多相关信息请参见http://blogs.msdn.com/b/webdevto ... tu
dio-2010-sp1.aspx。
Web Standards
升级版Microsoft Visual Stu
dio 2010 SP1 – 这是
一个Visual Stu
dio 的扩展，它
增加了对HTML5、CSS3 IntelliSense和Validation高阶
功能的
支持，基于目前的W3C说明书。
WebMatrix –
默认以“开包即用”的方式
支持HTML5（使用
默认的HTML5文档类型和模板
代码来
添加一个新的HTML
页面）。
ASP.NET MVC 3工具
升级
New Project 对话框包含了
一个复选框，可以让你使用带项目模板的HTML5版本。
借助于Modernizr 1.7，这些模板所提供的兼容性使得较低版本的浏览器也能够
支持HTML5和CSS3。
Expression Web 4 SP1
包含HTML5 IntelliSense，同时
支持Code Editor和设计视图。
更丰富的CSS3 样式编辑和IntelliSense。
SuperPreview Page Interaction Mode（超前预览
页面交互模式）和在线服务 (远程浏览器，
包括Chrome、 IE8、IE9、Safari 4&5，平台
包括Windows和Mac) 。
除了以上这些开发工具，不要忘记下面两条：
Windows Phone “Mango” 包含Internet Explorer 9，它
支持HTML5
站点。
Internet Explorer 10 Paltform Preview（平台预演）
支持许多新的CSS3和HTML5特性，完整的特性清单位于http://msdn.microsoft.com/en-us/ie/gg192966.aspx。
HTML5就介绍到这里，要开发优秀的网站，就看你了！
