浏览器检测与特征检测

由于各个浏览器的各种差别很多，为使网页能兼容各个浏览器，我们开始使用的是浏览器检测的方式：即通过 navigator.userAgent 字符串来判断浏览器的类型和版本。这种方法现在看来有不少问题，例如：

1. userAgent 字符串容易被修改和伪装，从而导致这种方法不可靠
2. 当浏览器的新版本支持某个新功能时，需要修改原有代码
3. 遇到新的浏览器时，需要修改原有代码以支持它们

因此，这种方法应该尽量少使用，而改用新的方法：特征检测。特征检测通过检测某功能对应的函数或对象是否可用，来判定浏览器是否支持该功能。使用这种方法，就能克服前面的浏览器检测的几个问题。因此特征检测越来越受人们重视。

例如，要检测浏览器是否支持 XMLHttpRequest，可以用下面的代码：

if (window.XMLHttpRequest) {
  alert("XMLHttpRequest is supported!");
}

或者更加准确一点，判断该对象的类型：

if (typeof window.XMLHttpRequest == "function") {
  alert("XMLHttpRequest is supported!");
}

如果我们进而需要检测浏览器是否支持 CORS，可以这样检测：

if ("withCredentials" in new XMLHttpRequest) {
  alert("CORS XMLHttpRequest is supported");
}

再如，我们需要检测浏览器是否支持 HTML5 的 <canvas>，可以这样写：

if (document.createElement('canvas').getContext) {
  alert("canvas is supported!");
}

如果需要检测的特性太多，可以用现有的 JavaScript 库，比如 Modernizr。

使用特征检测方法，我们可以方便的实现平稳降级（Graceful Degradation）或者渐进增强（Progressive Enhancement）的网页设计方式。

参考资料：
[1] Browser Feature Detection | MDN
[2] HTML5 - Browser and Feature Detection - MSDN
[3] Detecting HTML5 Features - Dive Into HTML5
[4] The All-In-One Almost-Alphabetical Guide to Detecting Everything - Dive Into HTML5
[5] Modernizr: the feature detection library for HTML5/CSS3
[6] yepnope.js | A Conditional Loader For Your Polyfills!
[7] 使用Modernizr探测HTML5/CSS3新特性 - 汤姆大叔 - 博客园
[8] Feature detection is not browser detection | NCZOnline
[9] 渐进增强与优雅降级 | 大发贱志
[A] (译)理解“渐进增强”  - 前端技术 | TaoBaoUED