html5开发与旧式浏览器的兼容
我们已经讨论了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://www.windowsdevbootcamp.com/images/jennmar.jpg
                alt=jennifer marsman />
            jennifer marsman
footer - copyright 2011
复制代码
这段代码包含了一系列不被旧版浏览器支持的新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后，在区域添加一条引用即可，代码如下所示。
title
复制代码
这里增加了两条脚本引用，一条指向jquery，一条指向modernizr。现在并不真的需要使用jquery，但下一个脚本中它就要大显身手，所以这里一并增加了对它们的引用。
这么一个简单的变化，使得页面在ie8中变成了下图所示的式样。
它并不完美，但已经与我们在ie9中见到的原版本相当接近。modernizr把这些ie8不能理解的html5新元素加入了dom，正因为如此，我们才能用css去设计它们。
其实，modernizr可以做的远不止此。仔细观察前述web页面的ie8和ie9版本，你会发现后者的两个article和图片的四角上有非常好看的圆角效果，而ie8中却没有。使用modernizr，同样可以修复这一效果。
if (!modernizr.borderradius) {
            $.getscript(script/jquery.corner.js, function() {
                $(article).corner();
                $(figure).corner();
            });
        }
复制代码
在这个脚本中，我们首先检查modernizr对象，看它是否支持“borderradius”（这是css3的一项特性）。如果不支持，再使用一段jquery脚本调用jquery.corner.js（前提是先从http://jquery.malsup.com/corner/下载它，然后在中引用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',
            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、audio和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 studio 2010 sp1 – sp1 增加了对html5、css3 intellisense和validation基本功能的支持。更多相关信息请参见http://blogs.msdn.com/b/webdevto ... tudio-2010-sp1.aspx。
web standards升级版microsoft visual studio 2010 sp1 – 这是一个visual studio 的扩展，它增加了对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就介绍到这里，要开发优秀的网站，就看你了！