javascript - JS 特征检测检测 -webkit-calc over 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);'，并检查该元素是否具有预期的高度。对每个 vendor 前缀重复此操作。

旁注:对于此类问题，您应该查看 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。)