实现 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 的脚本
?
?这段代码还能够防止不需要该代码的浏览器加载它，因此仅 Internet Explorer 8 或更早的版本能够加载该代码。您可以通过访问项目的网站更多地了解这个 JavaScript 库（参考资料?部分提供相关链接）。
?每个元素的意思都相当简明易懂，但有几点需要说明：
<!doctype html>。header、nav?和?footer?都是我们能意料到的。section?元素来帮助定义 Web 页面布局的各个部分，例如一篇文章或一则介绍。article?元素来标识单独的博客帖子和评论等。aside?元素作为侧栏；其主要作用是将主页面内容包围起来。要让?aside?元素出现在主页面内容旁边，请确保它们的宽度都适合当前页面的宽度，然后调整元素的位置。使用浮点数是以前让元素紧挨着排列的常用方式，但有了?section?和?aside?元素之后，您可以使用能够显示值的表格和表单元格代替浮点数，如?图 1?所示。
图 1. HTML5 页面布局
?
清单 2?展示了如何设置?content?部分使其显示为表，以及如何设置?articles?部分和?<aside>?标记使其显示为表格的单元格。这样这个结构就成为一个表而不需要使用额外的表代码，并且表单元格像列一样彼此紧挨着。清单 3?是一个例子，它展示了如何编写 CSS 来让这些元素紧挨着显示。
清单 3. 显示用的表格值
?您可以借助 Ajax 轻松地将任何更新保存到数据库，并且通过 HTML5 的跨浏览器本地存储功能，您可以在离线时使用这个强大的功能。
清单 4. 创建可编辑的 HTML 元素?
??一个名为?
postMessage?JavaScript 的函数处理实际发布的消息；您可以在 iframe 中使用名为?message?的新事件来获取事件和相关的属性。清单 6. 获取已发布的消息
?
?这个例子使用了一个定制的 JavaScript 事件函数，它作为外部文件?event.js?包含进来。清单 7?显示了该文件的脚本。
清单 7. 定制的事件函数
?
var addEvent = (function () { if (document.addEventListener) { return function (el, type, fn) { if (el && el.nodeName || el === window) { el.addEventListener(type, fn, false); } else if (el && el.length) { for (var i = 0; i < el.length; i++) { addEvent(el[i], type, fn); } } }; } else { return function (el, type, fn) { if (el && el.nodeName || el === window) { el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); } else if (el && el.length) { for (var i = 0; i < el.length; i++) { addEvent(el[i], type, fn); } } }; } })();