HTML5教程

当前位置: HTML5技术网 > HTML5教程 > 五分钟学会HTML5!(二)

五分钟学会HTML5!(二)

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

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

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

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

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>Title</title>
  6.     <link href="css/html5reset.css" rel="stylesheet" />
  7.     <link href="css/style.css" rel="stylesheet" />
  8. </head>
  9. <body>
  10.     <header>
  11.         <hgroup>
  12.             <h1>Header in h1</h1>
  13.             <h2>Subheader in h2</h2>
  14.         </hgroup>
  15.     </header>
  16.     <nav>
  17.         <ul>
  18.             <li><a href="#">Menu Option 1</a></li>
  19.             <li><a href="#">Menu Option 2</a></li>
  20.             <li><a href="#">Menu Option 3</a></li>
  21.         </ul>
  22.     </nav>
  23.     <section>
  24.         <article>
  25.             <header>
  26.                 <h1>Article #1</h1>
  27.             </header>
  28.             <section>
  29.                 This is the first article.  This is <mark>highlighted</mark>.
  30.             </section>
  31.         </article>
  32.         <article>
  33.             <header>
  34.                 <h1>Article #2</h1>
  35.             </header>
  36.             <section>
  37.                 This is the second article.  These articles could be blog posts, etc.  
  38.             </section>
  39.         </article>
  40.     </section>
  41.     <aside>
  42.         <section>
  43.             <h1>Links</h1>
  44.             <ul>
  45.                 <li><a href="#">Link 1</a></li>
  46.                 <li><a href="#">Link 2</a></li>
  47.                 <li><a href="#">Link 3</a></li>
  48.             </ul>
  49.         </section>
  50.         <figure>
  51.             <img width="85" height="85"
  52.                 src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"
  53.                 alt="Jennifer Marsman" />
  54.             <figcaption>Jennifer Marsman</figcaption>
  55.         </figure>
  56.     </aside>
  57.     <footer>Footer - Copyright 2011</footer>
  58. </body>
  59. </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>区域添加一条引用即可,代码如下所示。

  1. <head>
  2.     <meta charset="utf-8" />
  3.     <title>Title</title>
  4.     <link href="css/html5reset.css" rel="stylesheet" />
  5.     <link href="css/style.css" rel="stylesheet" />
  6.     <script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>
  7.     <script src="script/modernizr-2.0.6.js" type="text/javascript"></script>
  8. </head>
复制代码
这里增加了两条脚本引用,一条指向jQuery,一条指向Modernizr。现在并不真的需要使用jQuery,但下一个脚本中它就要大显身手,所以这里一并增加了对它们的引用。

这么一个简单的变化,使得页面在IE8中变成了下图所示的式样。



它并不完美,但已经与我们在IE9中见到的原版本相当接近。Modernizr把这些IE8不能理解的HTML5新元素加入了DOM,正因为如此,我们才能用CSS去设计它们。

其实,Modernizr可以做的远不止此。仔细观察前述Web页面的IE8和IE9版本,你会发现后者的两个article和图片的四角上有非常好看的圆角效果,而IE8中却没有。使用Modernizr,同样可以修复这一效果。

  1. <script type="text/javascript">
  2.         if (!Modernizr.borderradius) {
  3.             $.getScript("script/jquery.corner.js", function() {
  4.                 $("article").corner();
  5.                 $("figure").corner();
  6.             });
  7.         }
  8. </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,我们可以写出下列脚本:

  1. <script type="text/javascript">
  2.         Modernizr.load({
  3.             test: Modernizr.borderradius,
  4.             nope: 'script/jquery.corner.js',
  5.             callback: function () {
  6.                 $('article').corner();
  7.                 $('figure').corner();
  8.             }
  9.         });
  10. </script>
复制代码
总而言之,这段代码实现了与前面的脚本相同的功能。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就介绍到这里,要开发优秀的网站,就看你了!









【五分钟学会HTML5!(二)】相关文章

1. 五分钟学会HTML5!(二)

2. 五分钟学会HTML5!(一)

3. HTML5 canvas (二)

4. 0基础接触html5之jquery(二)选择器

5. 0基础接触html5之jquery(二)选择器

6. 三分钟HTML5画布(Canvas)动画教程

7. 触控+HTML5!物理益智游戏ContreJour推网页版

8. 10 个轻松学会 CSS3 的优秀在线资源

9. 微软官方HTML5九宫格Demo:HTML5九宫格Sudoku在线演示

10. 坦克大战HTML5版——HTML5爱好者原创

本文来源:https://www.51html5.com/a594.html

点击展开全部

﹝五分钟学会HTML5!(二)﹞相关内容

「五分钟学会HTML5!(二)」相关专题

其它栏目

也许您还喜欢