支持旧版本浏览器

HTML5和CSS3给我们提供了那么多容易实现的功能，那自然应该赶紧使用而不管旧版本浏览器是否支持这些新功能。可是，现实是残酷的！在旧版本浏览器中，有些CSS3功能可能只是没有效果而已，这倒简单；但有时候，某些CSS3功能可能导致不支持它们的浏览器出现显示问题。比如display:table和boxsizing属性吧，我们在第5章介绍过，用它们实现多栏是非常方便的，但它们在IE6和IE7中会导致布局一片混乱。因此，在旧版本浏览器中测试一番，然后为相应浏览器提供后备代码是极有必要的。

事实上，直到不久前，浏览器嗅探（browser sniffing）都是检测浏览器的一种流行方式。所谓浏览器嗅探，就是通过JavaScript检查浏览器的用户代理字符串中包含的浏览器名字，然后再为之提供能够弥补不足的代码。然而，我们实际上关心的并非浏览器，而是浏览器到底支持什么功能。这就是为什么现在大家使用的方法都不再关心浏览器，而是直接检测功能的原因。检测到功能缺陷，再有针对性地提供后备代码或者腻子脚本，就可以弥补相应能力的不足。

后备代码

后备代码就是给不支持CSS3功能的旧版本浏览器提供的一段替代性代码。

最简单的后备就是没有后备，而且很多时候，啥也不准备都没有问题。比如，你用了CSS3的圆角功能，IE6和IE7不会显示圆角，这些浏览器的用户看到的还是方角。这个结果好像也没什么大不了的，那些用户也许根本不知道你的网页中有圆角效果，而有没有圆角似乎对用户获取信息也没那么重要。不过，在另外一些情况下，为浏览器提供后备CSS代码则是必需的。

举个简单的例子吧，IE9之前的浏览器都不支持多背景，因此后备代码就是在多背景声明之前简单地再加一条单背景声明，比如：

  1. .someElement {background-image:url(images/basic_image.jpg);}
  2. .someElement {background-image:
  3.     url(images/cool_image1.jpg),
  4.     url(images/cool_image2.jpg),
  5.     url(images/cool_image3.jpg);
  6. }

所有浏览器都能理解第一条规则，但只有支持多背景的浏览器才会采用第二条规则。如果某浏览器无法解析某条CSS规则，可能是因为它不支持其中的CSS属性或者声明中包含错误，那么它就会跳过该规则，接着读取下一条规则。因此，IE8及更早版本的IE浏览器会忽略第二条规则，而只呈现basic_image.jpg。

条件注释

如果你真想单独为IE浏览器做点什么，可以使用如下所示的条件注释来添加后备代码：

  1. <!--[if lte IE 8]> <!-- IE条件注释 -->
  2. <link src="ie_only.css" rel="stylesheet" />
  3. <![endif]-->

这种特殊格式的HTML注释会被非IE浏览器忽略，只有IE浏览器才会执行其中的代码。就这个例子而言，我们是在为IE8及更低版本的IE加载额外的样式。加载条件可以使用lte（less than or equal to，小于等于）、lt（less than，小于）、gte（greater than or equal to，大于等于）、gt（greater than，大于），甚至只写一个浏览器版本号如IE 6。以此为不同版本的IE提供后备代码。

有时候，浏览器可能根本不支持你需要的功能。此时，仅提供后备CSS代码还不够，还需要使用腻子脚本。

腻子脚本

腻子脚本（polyfill）指的是一段JavaScript代码，能够赋予浏览器未曾有过的功能。目前，几乎所有CSS3和HTML5功能都有各自对应的腻子脚本，包括视频回放和阴影，从而让那些老得走不动道儿的“老家伙”们也能闪现青春的光芒。

Paul Irish维护了一个完整的腻子脚本的列表，地址是：https://github.com/modernizr/modernizr/wiki/html5-cross-browser-polyfills。

要在页面中添加一段腻子脚本，首先要下载并将其保存在网站的一个文件夹中。我为此创建了一个helpers文件夹。然后，在页面<head>标签中添加一个<script>标签把它加载进来。

  1. <script type="text/javascript" src="helpers/selectivizr.js">
  2. </script>

怎么确定是否需要某个腻子脚本呢？推荐大家使用Modernizr。Modernizr（http://modernizr.com）是一个JavaScript文件，能够帮你检测用户浏览器对HTML5和CSS3功能的支持情况，然后为顶级的<html>标签添加一组类，标明浏览器支持什么功能。另外，它还会设定一个JavaScript对象modernizr 的属性，以便你通过JavaScript来测试这些功能。Modernizr添加的类主要是为CSS提供便利。

以下给出一些有用的腻子脚本，供大家参考选用。