JS特征检测检测-webkit-calc calc的用法

Question

所以我很清楚，一般来说，应该使用JS中的特征检测与浏览器检测。一个很好的例子是jQuery 1.9的下降$.browser。

此外，在我阅读的每篇文章中，它都表示从不使用浏览器检测。

但是我有，我需要动态计算的JS布局"slots"可用的#的条件，而且它正在通过calc(100%/{0})，其中{0}是可用插槽的#完成。

当然，在iPad中，.css("height", "calc(100%/3)")将会失败，因为它必须以-webkit-为前缀。

那么，有谁能告诉我，我应该如何使用功能检测（而不是旧的$.browser.webkit）来检测它是否需要此功能？

Answer 1

创建一个虚拟元素，将其插入到文档中，使用.cssText.height = 'calc(100px - 50px);'，并检查元素是否具有预期的高度。对每个供应商前缀重复此操作。

备注：对于这类问题，您应该查看Modernizr的源代码。其他人通常贡献了这样的功能检测脚本，如calc.js。

---

Modernizr检测功能是否存在，它不知道哪个前缀必须使用。下面的代码演示了如何获取正确的前缀：

var calc = (function(){ 
    var dummy = document.createElement('div'); 
    var props = ['calc', '-webkit-calc', '-moz-calc', '-o-calc']; 
    for (var i=0; i<props.length; ++i) { 
     var prop = props[i]; 
     dummy.style.cssText = 'width:' + prop + '(1px);'; 
     if (dummy.style.length) 
      return prop; 
    } 
})(); 

// Usage example: 
$('selector').css('height', calc + '(100%/3)'); 

（我没加的-ms-前缀，因为IE浏览器开始支持它，而没有前缀 - 看http://caniuse.com/calc）。