发布在：代码组织

功能和浏览器检测

链接我可以使用此浏览器功能吗？

有几种常见方法可以检查用户的浏览器是否支持特定功能

  • 浏览器检测
  • 特定功能检测

一般来说，我们建议进行特定功能检测。我们来看看原因。

链接浏览器检测

浏览器检测是一种方法，其中检查浏览器的用户代理 (UA) 字符串以查找特定于浏览器系列或版本的特定模式。例如，这是 Chrome 39 在 Mac OS X Yosemite 上的 UA 字符串

1
 
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”或开发人员认为可以识别其目标浏览器的任何其他部分。

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

链接除目标浏览器之外的其他浏览器可能存在相同的问题。

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

链接用户代理不可靠。

用户代理由客户端浏览器设置。在网络的早期，浏览器会模仿彼此的 UA 字符串，以绕过这种类型的检测。具有非常不同功能的浏览器仍然可能只模仿您定位的 UA 字符串的一部分。

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

一般来说，我们不建议基于 UA 字符串的功能检测。

链接特定功能检测

特定功能检测检查某个特定功能是否可用，而不是针对特定浏览器进行开发。这样，开发人员可以针对两种情况编写代码：浏览器支持所述功能，或浏览器不支持所述功能。

针对特定功能进行开发，而不是针对特定浏览器进行开发，不仅可以清除应用程序的外围逻辑，还可以让开发人员的工作变得更加轻松。

我们建议使用特定功能检测，而不是 UA 字符串检测。

那么，你将如何着手进行此操作？

link 如何着手进行功能检测

有几种方法可以着手进行功能检测

  • 直接使用 JavaScript
  • 辅助库

link 直接使用 JavaScript

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

1
2
3
4
5
6
7
8
9
 
// 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 检测测试

1
2
3
4
5
 
if ( Modernizr.canvas ) {
    showGraphWithCanvas();
} else {
    showTable();
}

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

link 性能注意事项

因此，虽然 Modernizr 语法很好，但最终可能会有很多条件而变得相当繁琐。其次，无论是否需要，我们都会向每个浏览器发送两种条件的代码。

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

链接其他资源

链接功能检测工具

  • modernizr — 有条件地检查浏览器中是否提供了特定功能。
  • html5please — 负责任地使用新功能。
  • html5please API — 您可以查询的 API，以查看对特定功能的支持有多好（或多差）。
  • caniuse — HTML5、CSS3、SVG 等的浏览器兼容性表。

链接有帮助的文章