HTML5与CSS3基础教程:让HTML5新元素兼容任何浏览器

摘要:对于旧版浏览器来说,他们出现时还不存在HTML5的新元素,我该如何使用这些元素呢?
作者:图灵教育
来源:《HTML5与CSS3基础教程》(第八版)
第十一章全部章节:
第一节:用CSS布局及注意事项
第二节:构建(有利于搜索引擎索引的)页面

11.3 在旧版浏览器中为HTML5元素添加样式

我们已经知道,HTML5引入了一些新的语义化元素,其中大多数在第3章和第4章作了讲解。在大多数情况下,现代浏览器原生支持这些元素。从样式的角度来说,这意味着浏览器将为这些新的元素应用默认样式,就像它们对待早在这门语言诞生之际就存在的元素那样。例如,article、footer、header、nav以及其他一些元素显示为单独的行,就像div、blockquote、p以及其他的在HTML5之前的HTML版本中称做块级元素的元素。

你可能会想:“对于旧版浏览器呢?这些浏览器出现时还不存在HTML5的新元素,我该如何使用这些元素呢?”

值得庆幸的是大多数浏览器允许对它们并不原生支持的元素添加样式。Internet Explorer 8及以下版本是个例外,不过第(2)步中描述了一个简单的解决办法。因此,跟着下面三个简单的步骤,就可以开始为包含HTML5元素的页面添加样式了。

针对全部浏览器为HTML5新元素添加样式

(1) 将图11.3.1中的代码添加到网站的主样式表文件(即所有页面都用到的样式表文件)。注意:如果使用CSS重置或normalize.css(参见下一节)可以跳过这一步,它们会包含这里的代码。

(2)有两种方式可以实现在Internet Explorer 9之前的IE中为新的HTML5元素设置样式。(只能选择一种,不能两种都用。)它们都使用了HTML5 shiv这个JavaScript文件(参见补充材料“关于HTML5 shiv”)。

在这两种方法中,相对简单的一种是在每个页面的head元素(注意不是header元素)中添加图11.3.2中突出显示的代码。这段代码会从外部网站(googlecode.com)加载该JavaScript文件。

更好的方式是将该JavaScript文件放在你自己的网站上。这是推荐的做法。这样可以避免在googlecode.com上的文件出问题时(尽管可能性不大,但仍有可能),网站不会在旧版本的IE中崩溃。可以通过https://github.com/aFarkas/html5shiv/下载HTML5 shiv的ZIP文件(如图11.3.3所示),该地址是存放和维护HTML5 shiv代码的地方,再将它放入你的网站(如图11.3.4和图11.3.5所示)。

blob.png

图11.3.1:大多数浏览器默认将它们无法识别的元素作为行内元素处理。因此这一小段CSS将强制HTML5新语义元素显示在单独的行。各浏览器内置的默认样式表均对div、blockquote、p等元素声明了display: block;。更多详细信息参见11.6节

blob.png

图11.3.2:script元素里面是一段所谓的条件注释(conditional comment)。将它放在引用样式表的link元素后面。[if lt IE 9]开头的这段代码表示只有Internet Explorer 9以下版本的IE才加载这个JavaScript文件。通常,最好在页面结束的位置加载JavaScript(原因见第19章)。不过,HTML5 shiv是少有的必须在head中加载JavaScript的情况之一。否则,它就不起作用。

(3) 现在,可以随意使用CSS添加样式了!

blob.png

图11.3.3:将HTML5 shiv的ZIP文件保存到你的电脑,然后解压缩,得到将会使用的JavaScript文件

blob.png

图11.3.4:在电脑上打开该ZIP文件时,会发现其中包含了几个文件夹(如图所示)。你只需要关注dist这个文件夹,其中包含了将要用到的html5shiv.js。将该文件复制到你的网站的某个子目录(如名为js的目录)里面。此外,还可以使用html5shiv-printshiv.js。它与html5shiv.js基本相同,只是它还可以让IE8及更早版本的IE在打印时能够正确地处理新的HTML5元素

blob.png

图11.3.5:突出显示的代码显示在网页的head中,引用样式表的link元素之后。这里与图11.3.2的唯一区别是src的值。该值应该引用你复制到网站里的JavaScript文件的位置。这段代码假定你将该文件放置在HTML页面所在文件夹下的js文件夹里(关于URL,参见1.7节)。可以根据需要修改src里的路径,从而与个人网站的实际情况相符

jian.jpg