使用JS特性检测来检测使用-webkit-calc而非calc

Question

我知道在JS中，通常应该使用特性检测（feature detection）而不是浏览器检测（browser detection）。一个很好的例子就是jQuery 1.9放弃了$.browser。

此外，在我读过的每一篇文章中，都说绝不能使用浏览器检测。

但我有一个需求，需要动态计算JS布局中可用“槽”的数量，这可以通过calc(100%/{0})来完成，其中{0}是可用槽数量的编号。

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

那么，有谁能告诉我如何使用特性检测（而不是旧的$.browser.webkit）来检测它是否需要加上前缀呢？

- automaton

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浏览器已经支持 calc 属性而无需前缀 - 可以查看http://caniuse.com/calc。)

- Rob W

---

谢谢你的回答。很清楚。我不能说这比简单的浏览器检测更好，但我理解反对使用像代理字符串这样不正式和易变的东西的论点。 - automaton