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。）

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

1 个答案: