让你的网站在低版本浏览器上同样显示出色

图1 使用 HTML5 语法、样式和元素的简单页面在 IE9 中显示的效果

图2 同一个页面，在IE8中显示时，没有样式，也没有

为了提供跨浏览器的稳定且一致的体验，开发人员经常需要获得一些关于用户浏览器的信息。以前的普遍做法是像下面这样用 JavaScript 检测这些信息：

varuserAgent = navigator.userAgent; if (userAgent.indexOf('MSIE') >= 0) {
  console.log("Hello, IE user");
} else if (userAgent.indexOf('Firefox') >= 0) {
  console.log("Hello, Firefox user");
} else if (userAgent.indexOf('Chrome') >= 0) {
  console.log("Hello, Chrome user");
}

这个技术称为用户代理（UA）嗅探，广泛地用于判断正在请求页面的是哪个浏览器。这里的思路是：知道了用户的浏览器（例如 IE7），就能在运行的时候决定启用或禁用网站的哪项功能。UA 嗅探就相当于对浏览器说：“你是谁？”（对 UA 嗅探以及其他检测技术的深入分析，请参阅 jibbering.com/faq/notes/detect-browser/。）

这种做法的问题在于，浏览器会撒谎。UA 字符串是一个用户可以配置的信息，并不会提供100%正确的浏览器信息。而且，随着这一技术的广泛采用，许多浏览器厂商在自己的 UA 字符串中增加了额外内容，用来欺骗脚本，让脚本对于实际使用的浏览器做出错误判断，从而避免检测。现在有些浏览器甚至提供小工具，允许用户只要轻轻点击几 下鼠标，就能修改 UA 字符串。

UA 嗅探的目的从来就不是确定用户的浏览器和版本。而且它肯定也不是为了在你不喜欢用户使用的浏览器时，让你可以告诉用户说“请下载另一个浏览器”——即使有 些人就是这样使用 UA 嗅探技术的。用户有权选择自己使用什么浏览器，开发人员的职责则是提供最可靠且一致的体验，不要把浏览器的偏好强加给用户。UA 嗅探的目标是让你能够准确地了解在用户当前的浏览器中，有哪些能力或功能可以利用。对浏览器本身的了解，只是获得这些信息的一个途径。

目前有一些 UA 嗅探的替代技术，其中一项正在日益流行的技术称为对象检测或功能检测。这两个术语多数时候可以互换使用，但本文统一使用“功能检测”（feature detection）。

功能检测的目标是判断某项功能或能力在用户当前的浏览器中是否受支持。如果 UA 嗅探是问浏览器“你是谁”，“功能检测”就是问浏览器“你能干什么”，这个问题更直接，对于根据条件向用户提供功能来说，这种方法也更可靠。如果功能检测 脚本实现正确，用户或浏览器将很难造假或错报功能支持。

那么，与 UA 嗅探的示例相比，功能检测到底是什么样呢？为了回答这个问题，我们先来看看如果在 Internet Explorer 8 中查看前面的 HTML5 页面（如图1所示），如何解决出现的问题。这个页面的标签内容如代码段1所示。

    My Awesome Site    
My Awesome Site
  
An Article
 
Isn't this awesome?
     

代码段1 带有 HTML5 新语义标签的页面

如图1和图2所示，Internet Explorer 9 和 Internet Explorer 8 的显示效果有很大的差别。对于初学者来说，我的页面完全没有样式，因为这个页面的CSS并不存在。而且，页面底部丢失了好玩的 HTML5 盾牌。每个问题都可以轻松解决，而功能检测则是明确问题的第一步。

两个问题的原因都很简单：对于 Internet Explorer 8 来说，

、和都不是有效的 HTML 元素，所以无法使用。要解决问题，我们不用 UA 嗅探来判断所使用的浏览器/版本，而要通过 JavaScript 询问浏览器是否支持元素和它的 JavaScript API，对 Canvas 的功能检测如下所示：

!!document.createElement('canvas').getContext

这条语句做了好几件事：首先，它使用两个否定（!!）操作符强行将未定义的值显式地设为 false；然后，它手动新建一个canvas元素，并将它加到DOM中；最后，它调用 getContext 函数，这是元素的一个新函数，是通过 JavaScript 操纵 Canvas API 的途径。如果使用 IE9，则这条语句会返回 true。如果使用 IE8，则 getContext 会返回“undefined”（未定义），会被前面的两个否定操作符强行变为 false。

这是最基本的功能检测。利用这条语句以及其他类似语句，就有了查询浏览器所支持功能的更可靠方法。关于手动功能检测的更多信息，请参阅 diveintohtml5.info/everything.html。

手动功能检测肯定是对UA嗅探的提高，但这种做法仍然需要你做大量工作来检测功能是否可用，以及在功能不存在的时候决定做什么。虽然 Canvas 示例很简单，只需要一行代码，但不是每个要检测的功能都这么简单——不同浏览器的检测代码也各不相同。例如，要检测是否支持前面使用的 CSS3 模块（border-radius和box-shadow）就有些麻烦。

值得庆幸的是，Modernizr (modernizr.com) 提供了更好的方法。Modernizr 是一个 JavaScript 库“……检测下一代 Web 技术（即源于 HTML5和 CSS3 规范的功能）的本地实现是否可用”。在页面上添加对 Modernizr 的引用可以提供四大功能：

1. 全面列出支持的功能，智能地加入标签，从而实现 CSS 的条件定义。
2. 一个 JavaScript 对象，方便进行基于脚本的功能检测。
3. 在运行的时候将全部 HTML5 新标签加入 DOM，方便 IE8 和之前的 IE 浏览器（稍后就会知道不仅如此）。
4. 一个脚本加载器，可以根据条件将 polyfill 加载到页面中。

本文对第1项不做进一步介绍，但鼓励你访问 modernizr.com 网站，学习这一功能及其余功能的文档。

上面的第2项功能，可以将下面的代码：

!!document.createElement('canvas').getContext

改为这行代码：

Modernizr.canvas

这行代码会返回一个布尔值，表明页面是否支持 Canvas 元素。使用 Modernizr 比自行执行功能检测的好处是，Modernizr 是一个经过良好测试、健壮的、广为采用的库，它已经完成了许多繁重的工作。Twitter、Google、Microsoft 以及无数其他机构和开发人员都在使用 Modernizr，你当然也可以使用。在 ASP.NET MVC 3 工具更新（2011年4月发布）中，Microsoft 甚至随新的 ASP.NET MVC 应用程序一起配备了 Modernizr。当然，我们迄今为止所做的，不过是检测是否支持元素。通过功能检测知道了浏览器是否支持某一功能之后， 接下来通常是创建一些条件逻辑，在功能不存在的时候阻止特定代码的执行或者换个路径来执行，例如：

if (Modernizr.canvas) { // 这里执行canvas代码。 }

根据附加的浏览器功能是否存在来给网站增加功能，这种做法称为“渐进式增强”，因为体验增强针对的能力更强的浏览器。另一方面是“优雅降 级”，即某项功能的缺失不会造成浏览器出错或发生故障，而是应该向用户提供一些削弱的功能或替代能力。对于旧版浏览器来说，不必将优雅降级作为默认选择。 在许多情况下，甚至可能不是最佳选择。相反，在 Modernizr 的帮助下，你通常可以使用许多可用的浏览器 polyfill，将类似于 HTML5 的功能添加到不支持 HTML5 的浏览器中。

根据 Modernizr 网站的说法，polyfill 是“在旧版浏览器上复制标准 API 的 JavaScript 补充”。“标准API”指的是 HTML5 技术或功能，例如 Canvas。“JavaScript补充”指的是可以动态地加载 JavaScript 代码或库，在不支持这些标准 API 的浏览器中模拟它们。例如，geolocation（地理位置）polyfill 可以在 navigator 对象上添加全局的 geolocation 对象，还能添加 getCurrentPosition 函数以及“坐标”回调对象，所有这些都是 W3C 地理位置 API 定义的对象和函数。因为 polyfill 模拟标准 API，所以能够以一种面向所有浏览器未来的方式针对这些 API 进行开发，最终目标是：一旦对这些 API 的支持变成绝对大多数，则可以方便地去掉 polyfill，无需做任何额外工作。

通过在页面上添加对 Modernizr 的引用，我就得到了与代码段1示例相关的 polyfill 的直接好处。页面显示没有样式，是因为 IE8 不认识

和标签。因为它不认识这些标签，所以没将它们加入DOM，而CSS选择元素要发挥样式作用，需要在 DOM 中有这些元素。

当我在页面上添加