日期:2014-05-17  浏览次数:20552 次

实现 HTML5 的跨浏览器功能(转)

?

最新版本的 HTML 和 CSS 提供了许多新特性。例如,HTML5 包含了让 Web 页面更有语义的新元素;现在,您可以离线储存数据、创建可编辑的内容区和使用拖放功能等等。使用 CSS3 可以创建未使用图像的圆角效果、添加阴影和渐变。尽管有许多新特性已经可用,但是并不是所有新特性能够跨浏览器工作。对于本文提供的特定 HTML5 和 CSS3 技巧,您现在就可以在所有主流浏览器的最新版本上使用它们,包括 Apple Safari、Windows? Internet Explorer?、Mozilla Firefox 和 Google Chrome。

尤其是某些版本的 Internet Explorer,它们需要一些帮助才能识别新的 HTML5 元素。幸运的是,一个名为?html5shim?的公开可用 JavaScript 文件(一个支持 HTML5 Internet Explorer 的脚本)能够帮助 Internet Explorer 识别和呈现 HTML5 元素,这是 Internet Explorer 本身无法实现的功能。要包含这个 JavaScript 文件,仅需将?清单 1?中的代码放入到 HTML 文件中正在使用的 CSS 之上的<head>?部分中。

清单 1. html5shim,一个支持 HTML5 Internet Explorer 的脚本

?

<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/
html5.js"></script>
<![endif]-->

?这段代码还能够防止不需要该代码的浏览器加载它,因此仅 Internet Explorer 8 或更早的版本能够加载该代码。您可以通过访问项目的网站更多地了解这个 JavaScript 库(参考资料?部分提供相关链接)。

HTML5

HTML5 除了引入许多新元素之外,它的新功能也格外引人注目。这个小节将讨论 HTML5 的一些新元素,并展示如何创建可编辑的内容区和在多个页面之间发布消息。

页面结构

如果您花大量时间来设计 HTML 网站的结构,您将发现有许多部分是重复使用的。常见的是用于显示 logo 或其他标识信息的页头、列出网站板块的导航部分和用于显示版权信息的页脚。在以前的 HTML 版本中,通常使用?id?属性来识别这些元素;例如,页头包含在?id?设置为?"header"?的?<div>?中,即?<div id="header">

对于 HTML5 时,您可以使用新的标记来等义这些特定的区域,而不需要编写额外的标识属性。例如,使用新的?header?元素代替带有页头?id?的?<div>。这不仅是更加合理的代码使用方法,而且还对查看其他开发人员的 Web 页面非常有用,因为许多开发人员都使用不同的代码编写方式。当然,在许多情况下?id?属性仍然很有用,但这些常用的元素不必要再使用它。清单 2?是一个基础的 HTML5 页面例子,它使用了?headernavsectionarticleaside?和?footer?元素。