Question

我想使用功能检测来判断用户的Firefox版本是否支持CSS样式值-moz-linear-gradient。（这是在Gecko 1.9.2中添加的。Firefox的3.6版本使用它。）

我无法使用document.body.style.mozLinearGradient（或类似的东西），因为-moz-linear-gradient不是样式属性，而是样式值。

有人知道如何在不使用版本号的情况下测试吗？

Answer 1

我不确定如何，但Modernizr（一个不错的小功能检测脚本）似乎可以做到。

我猜你可以创建一个（offscreen？）元素，设置它的样式，然后在DOM中查看浏览器是否成功应用了它？

Answer 2

只需将其指定为样式值，然后检查它是否存在。

开球示例：

function supportsMozLinearGradient() {
    var element = document.getElementsByTagName('script')[0]; // Just grab an "invisible" element.
    var oldstyle = element.style.background; // Backup old style.
    try {
        element.style.background = '-moz-linear-gradient(top, black, white)';
    } catch(e) {
        // Ignore failures.
    }
    var supports = element.style.background.indexOf('-moz-linear-gradient') > -1; // Did it accept?
    element.style.background = oldstyle; // Restore old style.
    return supports;
}

Answer 3

您应该检查-moz-background-size（Firefox v3.6中引入）。由于该属性带有前缀，因此其他浏览器不会选择推理。

if ('MozBackgroundSize' in document.body.style)

Answer 4

这就是MooTools如何检测Gecko（Firefox）引擎（我稍微“解释”）

gecko = (!document.getBoxObjectFor && window.mozInnerScreenX == null) ? false : ((document.getElementsByClassName) ? 19 : 18)

所以如果它是FF它会返回19或18，我相信19是3.x而18是2.x

显然FF3.6停止支持document.getBoxObjectFor，所以要检测3.6我基本上做了

isFF36 = gecko && !document.getBoxObjectFor

从我做过的一些测试中看起来像魅力。

如果您没有使用MooTools，您可以将这两者合并为一个会返回false或'ff'或'f36'之类的语句，但我太懒了那个逻辑：）

你能测试-moz-linear-gradient的浏览器支持吗？

4 个答案: