如何使用JavaScript检查是否支持CSS calc()？

Question

有没有一种方法可以使用JavaScript检查CSS函数calc是否可用？

我找到了很多关于使用jQuery获得与calc相同行为的问题和文章，但我该如何仅检查它是否可用？

- jviotti

Answer 1

在Modernizr中，您可以找到测试作为css-calc，目前在非核心检测中使用。他们使用以下代码：

Modernizr.addTest('csscalc', function() {
    var prop = 'width:';
    var value = 'calc(10px);';
    var el = document.createElement('div');

    el.style.cssText = prop + Modernizr._prefixes.join(value + prop);

    return !!el.style.length;
});

- Sirko

---

Modernizr._prefixes.join()是什么意思？如果没有Modernizr，需要替换此函数的解决方案。 - Jose Gómez

@JoseGómez 这行代码测试将所有前缀（-webkit等）附加到测试中，以检查是否有支持并仅使用符合标准的前缀。因此，根据您代码的其余部分，您可以放弃该行代码。 - Sirko

Answer 2

有点晚了，但我想分享一下这个内容，因为我自己也在苦苦挣扎。我想到可以使用jQuery创建一个div，使用CSS属性中的calc()值（例如在这种情况下使用的宽度）以及回退宽度，以防浏览器不支持calc()。现在检查它是否支持，这是我所做的：

让我们为当前“不存在”的div元素创建CSS样式。

/* CSS3 calc() fallback */
#css3-calc {
    width: 10px;
    width: calc(10px + 10px);
    display: none;
}

现在，如果浏览器不支持calc()，元素将返回宽度值10。如果支持，则返回20。不管值是多少，只要两个宽度属性最终具有不同的值（在这种情况下为10和20）。

现在是实际脚本。它非常简单，我想使用普通JavaScript也可能可以，但这是jQuery脚本：

// CSS3 calc() fallback (for unsupported browsers)
$('body').append('<div id="css3-calc"></div>');
if( $('#css3-calc').width() == 10) {
    // Put fallback code here!
}
$('#css3-calc').remove(); // Remove the test element

---

或者，使用本地JavaScript检查和宽度：

#css3-calc { width: 1px; width: calc(1px + 1px); }

if( document.getElementById('css3-calc').clientWidth==1 ){
    // clientHeight if you need height
    /* ... */
}

- Nordling Art

---

我使用了这个技巧，但是我使用了宽度。这样我就可以确保它不会破坏我的页面（0像素高度）。 - Martijn

进行了编辑，添加了原生JS变体，在其中使用了width。同时删除了parseInt()，因为.width()返回一个数字。 - Martijn

这是一个有用的回答，但我认为应该先介绍原生JavaScript，因为看到jQuery的“$”符号后，很多人（包括我）就不再往下阅读了……此外，+1。检查的方法不错。 - user3459110

使用 display: none;，JS 引擎会将其宽度测量为 0 吗？ - Fred

1px + 1px 不是必要的，calc(2px) 仍然是一种计算。这导致了我下面更简单的解决方案... - Steve Waring

Answer 3

根据Modernizer的新闻页面，其添加了Calc检测功能。 http://modernizr.com/news/

As well as tightening up support for existing tests, we've also added a number of new detects, many submitted by the community:

[...]
css-calc

- jantimon

Answer 4

var cssCheck = document.createElement("DIV");
cssCheck.style.marginLeft = "calc(1px)";
if (cssCheck.style.getPropertyValue("margin-left"))
{
    alert("calc is supported");
}
cssCheck = null;

- Steve Waring