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

So I'm quite aware that in general, one should use feature detection in JS vs. browser detection. A good example of this being pushed is jQuery 1.9's drop of $.browser.

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

In addition, in every article I read, it says to never use browser detection.

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

But I have a condition where I need to dynamically calculate the # of "slots" available in a JS layout, and it's being done through calc(100%/{0}), where {0} is the # of slots available.

但我有一个条件,我需要动态计算JS布局中可用的“插槽”数量,并通过计算(100%/ {0})完成,其中{0}是可用的插槽数。

Of course, in iPad, the .css("height", "calc(100%/3)") will fail, as it must be prefixed with -webkit-.

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

So, can anyone tell me how exactly I should use feature detection (instead of the old $.browser.webkit) to detect that it requires this?

那么,任何人都可以告诉我我应该如何使用特征检测(而不是旧的.browser.webkit)来检测它是否需要这个?

1 个解决方案

#1

Create a dummy element, insert it in the document, use .cssText.height = 'calc(100px - 50px);', and check if the element has the expected height. Repeat this for every vendor-prefix.

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

Side note: For this kind of questions, you should look in the source code of Modernizr. Others have usually contributed such feature detection scripts, such as calc.js.

旁注:对于这类问题,您应该查看Modernizr的源代码。其他人通常贡献了这样的特征检测脚本,例如calc.js.

Modernizr detects whether the feature is present, it doesn't tell which prefix has to be used. The code below shows how to get the correct prefix:

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)');

(I did not add the -ms- prefix, because IE started supporting it without the prefix - see http://caniuse.com/calc.)

(我没有添加-ms-前缀,因为IE开始支持它没有前缀 - 请参阅http://caniuse.com/calc。)

#1