特性与浏览器检测

link 我可以使用这个浏览器特性吗？

有两种常见的方法来检查用户浏览器是否支持特定特性

浏览器检测
特定特性检测

一般来说，我们推荐特定特性检测。让我们看看原因。

link 浏览器检测

浏览器检测是一种方法，通过检查浏览器的用户代理（UA）字符串中是否有特定模式，以识别浏览器家族或版本。例如，这是 Chrome 39 在 Mac OS X Yosemite 上的 UA 字符串

	
					Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.99 Safari/537.36

浏览器 UA 检测可能会检查这个字符串中是否包含 "Chrome" 或 "Chrome/39" 或开发者认为可以识别他们想要针对的浏览器的任何其他部分。

虽然这看起来是一个简单的解决方案，但存在几个问题

link 除了你的目标浏览器之外，其他浏览器也可能有同样的问题。

如果我们针对特定的浏览器实现不同的功能，我们就隐含地排除了我们没有考虑到的任何浏览器。这也不是面向未来的。如果我们针对的浏览器收到了错误修复或更改，我们可能无法分辨“正常工作”和“不正常工作”的 UA 字符串。我们也可能需要为每个新版本更新测试。这不是一个可维护的解决方案。

link 用户代理不可靠。

用户代理由客户端浏览器设置。在网页的早期，浏览器会模仿彼此的 UA 字符串，以绕过正是这种类型的检测。即使是现在，一个功能截然不同的浏览器仍然可能模仿你所针对的 UA 字符串部分。

UA 字符串也是用户可配置的。虽然用户可以更改此字符串，但浏览器的特性支持保持不变。

一般来说，我们不推荐基于 UA 字符串的特性检测。

link 特定特性检测

特定特性检测检查特定特性是否可用，而不是针对特定的浏览器进行开发。这样，开发者可以针对两种情况编写代码：浏览器**支持**该特性，或者浏览器**不支持**该特性。

针对特定特性进行开发，而不是针对特定浏览器进行开发，不仅能清理应用程序的外围逻辑，还能让开发者自己的工作更轻松。

我们推荐特定特性检测，而不是 UA 字符串检测。

那么，你该如何着手进行呢？

link 如何进行特性检测

有几种方法可以进行特性检测

纯 JavaScript
辅助库

link 纯 JavaScript

让我们看看如何在不使用辅助库的情况下，检查特定浏览器中是否存在 <canvas> 元素。我们通过专门查询方法或属性是否存在来完成此操作

	
					// We want to show a graph in browsers that support canvas,
// but a data table in browsers that don't.
var elem = document.createElement( "canvas" );
 
if ( elem.getContext && elem.getContext( "2d" ) ) {
    showGraph();
} else {
    showTable();
}

这是一种非常简单的方法，可以根据用户浏览器中存在的特性提供有条件的体验。我们可以将其提取到一个辅助函数中以供重用，但仍然需要为我们关心的每个特性编写测试。这可能非常耗时且容易出错。相反，你可能对使用辅助库感兴趣。

link 辅助库

幸运的是，有一些很棒的辅助库（比如 Modernizr）提供了一个简单的高级 API，用于确定浏览器是否具有特定特性。

例如，利用 Modernizr，我们可以使用这段代码进行相同的 canvas 检测测试

	
					if ( Modernizr.canvas ) {
    showGraphWithCanvas();
} else {
    showTable();
}

有关 Modernizr 的更深入信息，请随时查看其文档。

link 性能考虑因素

因此，虽然 Modernizr 语法很棒，但如果有多个条件，最终可能会变得相当麻烦。其次，我们正在将两种情况的代码都发送给每个浏览器，无论是否需要。

如果你正在使用 Modernizr，我们强烈建议你使用构建配置器，这是一个允许你创建库的自定义构建的工具。你可以排除不需要的检查，这将节省字节并减少页面加载所需的时间。运行 Modernizr 可以执行的每一项检查，即使你不需要它们，也会减慢页面加载速度。

link 其他资源

link 特性检测工具

modernizr — 有条件地检查浏览器中是否提供了特定特性。
html5please — 负责任地使用新特性。
html5please API — 一个你可以查询的 API，以查看特定特性的支持情况如何（好或坏）。
caniuse — HTML5、CSS3、SVG 等的浏览器兼容性表格。

jQuery 学习中心