JS特征检测用于检测-webkit-calc对calc的使用情况

Question

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

另外,在我读过的每篇文章中,它都表示从不使用浏览器检测.

但是我有,我需要动态计算条件#的"slots"可在一个JS布局,它正在通过做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.)