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

最新推荐文章于 2024-10-26 08:00:00 发布

原创最新推荐文章于 2024-10-26 08:00:00 发布 · 826 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #网摘

HTML5 专栏收录该内容

3 篇文章

订阅专栏

探讨HTML5和CSS3的最新功能，包括新的结构元素、可编辑内容区及跨浏览器消息发布技术。

最新版本的 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 页面例子，它使用了 header、nav、section、article、aside 和 footer 元素。

清单 2. 基础的 HTML5 页面结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>Cross-browser HTML5 and CSS3</title>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/
	html5.js"></script>
    <![endif]-->
</head>
<body>

	<header>
		<nav>
			<!--Navigation-->
		</nav>
	</header>
	
    
    <section id="intro">
        <header>
            <h2>Cross-browser HTML5 and CSS3</h2>
        </header>
        <div>Lorem ipsum</div>
    </section>
    
	<section id="content">
        <section id="articles">
            <article>
                <header>
                    <h2>Article title</h2>
                    <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">
					September 4th 2009
					</time></p>
                </header>
                <div>Pellentesque habitant morbi tristique senectus et netus et 
				malesuada fames ac turpis egestas.</div>
                
                <h2>Comments</h2>
                <form id="comment-form">
                    <input type="text" name="comment" id="comment" />
                    <input type="submit" value="submit" />
                </form>    
            </article>       
        </section>
    
        <aside>
            <h2>About section</h2>
            <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi 
			vitae est. Mauris placerat eleifend leo.</p>
        </aside>
    </section>

	<footer>Copyright notice</footer>

</body>

</html>

每个元素的意思都相当简明易懂，但有几点需要说明：

HTML5 仅有一个 doctype：<!doctype html>。
header、nav 和 footer 都是我们能意料到的。
可以使用 section 元素来帮助定义 Web 页面布局的各个部分，例如一篇文章或一则介绍。
可以使用 article 元素来标识单独的博客帖子和评论等。
可以使用 aside 元素作为侧栏；其主要作用是将主页面内容包围起来。

要让 aside 元素出现在主页面内容旁边，请确保它们的宽度都适合当前页面的宽度，然后调整元素的位置。使用浮点数是以前让元素紧挨着排列的常用方式，但有了 section 和 aside 元素之后，您可以使用能够显示值的表格和表单元格代替浮点数，如图 1 所示。

图 1. HTML5 页面布局

使用 header、intro、section、aside 和 footer 标记的 HTML5 页面布局例子

清单 2 展示了如何设置 content 部分使其显示为表，以及如何设置 articles 部分和 <aside> 标记使其显示为表格的单元格。这样这个结构就成为一个表而不需要使用额外的表代码，并且表单元格像列一样彼此紧挨着。清单 3 是一个例子，它展示了如何编写 CSS 来让这些元素紧挨着显示。

清单 3. 显示用的表格值

#content {
	display: table;
}
#articles {
	display: table-cell;
	width: 620px;
	padding-right: 20px;
}
aside {
	display: table-cell;
	width: 300px;
}

创建可编辑内容区

另一个有趣的 HTML5 特性是 ContentEditable。如清单 4 所示，任何使用 ContentEditable 属性的元素都变得可编辑。这意味着您可以在元素内部编辑任何文本，而不需要使用繁琐的 form 元素。图 2 是演示 ContentEditable 属性的实际使用的例子。

图 2. 可编辑内容区
使用 ContentEditable 属性实现可编辑内容区的例子

您可以借助 Ajax 轻松地将任何更新保存到数据库，并且通过 HTML5 的跨浏览器本地存储功能，您可以在离线时使用这个强大的功能。

清单 4. 创建可编辑的 HTML 元素

<div id="editable" contenteditable="true">
Pellentesque habitant morbi tristique senectus et 
netus et malesuada fames ac turpis egestas.
</div>

发布消息

消息发布是一个带来诸多可能性的新特性。清单 5 和清单 6 通过例子展示了如何从主 Web 页面将消息发布到该页面的 iframe 中。

清单 5. 发布消息

<form id="comment-form">
    <input type="text" name="comment" id="comment" />
    <input type="submit" value="submit" />
    <iframe id="comment-iframe" src="post-message.html"></iframe>
</form>
<script type="text/javascript" src="assets/js/event.js"></script>
<script type="text/javascript">
    var win = document.getElementById("comment-iframe").contentWindow;
    addEvent(document.getElementsByTagName('form')[0], 'submit', function (e) {
        if (e.preventDefault) e.preventDefault();
        win.postMessage(document.getElementById("comment").value, 
			"http://studiosedition.com");
        // otherwise set the returnValue property of the original event to false (IE)
        e.returnValue = false;
        return false;
    });
</script>

一个名为 postMessage JavaScript 的函数处理实际发布的消息；您可以在 iframe 中使用名为 message 的新事件来获取事件和相关的属性。

清单 6. 获取已发布的消息

<p id="post-comment"></p>
<script type="text/javascript" src="assets/js/event.js"></script>
<script type="text/javascript"> addEvent(window, "message", function(e){ 
if(e.origin !== "http://studiosedition.com") { document.getElementById("post-
comment").innerHTML = 'Message from ' + e.origin; } else { 
document.getElementById("post-comment").innerHTML = e.origin + " : " + e.data; } 
}); </script>

这个例子使用了一个定制的 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 &lt; 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 
&lt; el.length; i++) { addEvent(el[i], type, fn); } } }; } })();