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

【问题标题】：Can you test for browser support for -moz-linear-gradient?你能测试浏览器对 -moz-linear-gradient 的支持吗？
【发布时间】：2010-02-12 16:53:21
【问题描述】：

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

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

有谁知道如何在不使用版本号的情况下对此进行测试？

【问题讨论】：

标签： javascript css firefox

【解决方案1】：

我不知道怎么做，但Modernizr（一个不错的小功能检测脚本）似乎可以做到这一点。

我猜你可以创建一个（屏幕外？）元素，将其设置为它的样式，然后在 DOM 中四处寻找浏览器是否成功应用它？

【讨论】：

看起来这就是 Modernizr 所做的。它会创建一个 DOM 元素，但不会将其添加到页面中。

【解决方案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;
}

【讨论】：

【解决方案3】：

您应该检查-moz-background-size（在 Firefox v3.6 中引入）。由于该属性是前缀，因此其他浏览器不会获取该推断。

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

【讨论】：

【解决方案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' 的内容，但我懒得处理这个逻辑 :)

【讨论】：

啊！不！特征检测，而不是浏览器检测！否则，随着渲染引擎的新版本/变体出现，您将自己设置为无休止的维护更新。如果下一个 Gecko 删除或更改了对您所依赖的任何内容的支持怎么办？