- 浏览器提供商虽然在实现公共接口方面投入了很多精力，但结果仍然是每一种浏览器都有各自的长处，也都有各自的缺点。即使是那些跨平台的浏览器，虽然从技术上看版本相同，也照样存在不一致性问题。面对普遍存在的不一致性问题，开发人员要么采取迁就各方的“最小公分母”策略，要么（也是更常见的）就得利用各种客户端检测方法，来突破或者规避种种局限性。
- 最常用也最为人们广泛接受的客户端检测形式是能力检测（又称特性检测）
- 能力检测，它的目标不是识别特定的浏览器，而是识别浏览器的能力！
能力检测的基本模式如下：
if (object.propertyInQuestion){
// 使用 object.propertyInQuestion
}
- 在 IE5.0 之前的版本不支持 document.getElementsById() 方法，但可以使用非标准的 document.all() 方法，于是我们可以这样做：
function getElement(id){
if(document.getElementById){
return document.getElementById(id);
}else if(document.add){
return document.add(id);
}else{
throw new Error ("No way to retrieve element!");
}
}
能力检测有两个关键点：
- 先检测能达到目的的最常用特性，这可以保证代码的最优化，因为在多数情况下都可以避免测试多个条件
- 必须实际测试要用到的特性，因为一个特性的存在并不意味着另一个特性也存在
function getWindowWidth(){
if (document.all){ //假设是 IE
return document.documentElement.clientWidth;//错误
} else {
return window.innerWidth;
}
}
上面是一个错误使用能力检测的例子，因为支持document.all的浏览器除了IE，还有可能是Opera。
更可靠的能力检测
//错误
function isSortable(object){
return !!object.sort;//任何包含 sort 属性的对象也会返回 true
}
因此更好的方式是检测sort是否是一个函数：
function isSortable(object){
return typeof object.sort=="function"
}
在尽可能的情况下，尽量使用typeof进行能力检测
//除了 IE8 以及之前的版本，其他浏览器都会返回 true
function hasCreateElement(){
return typeof document.createElement == "function";
}
IE8 以及之前的版本中，会返回 object。因为 IE8 以及之前的版本中的宿主对象是通过 COM 实现的，IE9 纠正了过来（返回 function）。
IE还有一点不规范的：
var xhr = new ActiveXObject("Microsoft.XMLHttp");
typof xhr.open;//返回 unknown
因此要在跨浏览器的情况下测试任何对象的属性是否存在，请使用下面这个函数：
function isHostMethod (object, property){
var t = typeof object(property);
return t=='function' || (!!(t=='object' && object[property])) || t== "unknown";
}
这个函数可以这样使用：
isHostMethod(xhr,"open");//true
isHostMethod(xhr,"foo");//false
注意，这个函数考虑到了浏览器的怪异行为，但它可能在未来会失效，所以在使用时，必须对它可能存在的风险进行理性的估计。
能力检测
检测某几个特性并不能真正确定浏览器，比如这些例子：
//Safari 也实现了 vendor 和 vendorSub 的特性。
var isFirefox = !!(navigator.vendor && navigator.vendorSub);
//假设 IE 在未来的版本中还会继续支持这些特性，这样的假设风险很大。
var isIE = !!(document.all && document.uniqueID);
注意，这里的代码使用了我们之前说过的双逻辑非操作符，因为它可以模拟 Boolean() 方法，把值转换为布尔值，是不是很方便哪 O(∩_∩)O~
要检测某个特定的浏览器特性，最好是一次性检测所有的相关特性：
var hasNsPlugins = !!(navigator.plugins && navigator.plugins.length);
//确定浏览器是否具有 DOM1 规定的能力
var hasDOM1 = !!(document.getElementById && document.createElement &&
document.getElementsByTagName);
console.log("hasNsPlugins:" + hasNsPlugins);
console.log("hasDOM1:" + hasDOM1);
