测试 CSS3 径向渐变供应商语法

Question

我遇到了一个问题，我正在尝试根据我指定的值使用 JavaScript 更新元素的背景渐变。

我试过这条路线：

elem.style.backgroundImage = '-webkit-gradient(radial, '+x+' '+y+', 0, '+x+' '+y+', 800, from(#ccc), to(#333)), -moz-radial-gradient('+x+'px '+y+'px, circle cover, #ccc 0, #333 100%)';

由于 Webkit 和 Gecko 有两种不同的 CSS3 渐变语法，我需要同时指定两者。但是，上面的代码不起作用。如果我只有 Gecko 语法或只有 Webkit 语法，而不是两者都有，它就可以工作。

我认为您可以检查 CSS 渐变支持，但我的问题是，有没有一种方法可以检查需要使用哪些语法而无需浏览器嗅探？请记住，我需要以这种方式设置渐变，因为渐变的 x 和 y 坐标会动态变化。

希望这是有道理的，谢谢。

Answer 1

您根本不需要进行任何检测。只需连续设置两次element.style.backgroundImage，不解析的将被忽略。

Answer 2

编辑 以下内容出于其他原因很有用，但实际上，我认为它对 OP 知道是使用 WebKit 还是 Firefox 符号的问题没有帮助！ (Doh) 它有助于了解渐变是否可以使用。

再次编辑但是！查看 Modernizr 源代码向我们展示了如何通过功能测试来做到这一点（他们很聪明，这些人）。您可能可以通过自己查看源代码来弄清楚，但这里有一个快速拼凑的示例：

function testGradientSyntax() {
    var element;

    element = document.createElement("testsyntax");
    element.style.cssText =
        "background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62))";
    if (element.style.background.indexOf("-webkit") >= 0) {
        // It's WebKit syntax
        log("This supports WebKit syntax");
    }
    else {
        // It's not WebKit syntax
        log("This doesn't support WebKit syntax");
    }
}

---

您可能想为此使用Modernizr。它会检测到relevant syntax，并为您提供一种方法来使用具有两种语法的单个 CSS 文件。

文档中的示例渐变代码：

button.glossy {
   background: #ccc url(gloss.png) 50% 50% repeat-x;
}
.cssgradients button.glossy {
   background: #ccc -webkit-gradient(linear, left top, left bottom, 
         from(rgba(255,255,255, .4)), 
         color-stop(0.5, rgba(255,255,255, .7)), 
         color-stop(0.5, rgba(0,0,0, .2)), 
         to(rgba(0,0,0, .1)));
}
.cssgradients button.glossy:hover {
   background-color: #fff;
}

（编辑在上面，我从.cssgradients button.glossy 规则的末尾删除了一行，在我看来，这在文档中就像一个错误。）

看到.cssgradients 类了吗？当您运行 Modernizr 时，它会检测这是否是相关语法，如果是，则将该类添加到您的 html 元素中，这会打开后代选择器 .cssgradients button.glossy 以便应用该规则。

遗憾的是，这完全取决于启用了 Javascript 的浏览器。

Answer 3

如果有人感兴趣，这就是我想出的。我确信它可以进行很多改进，但到目前为止它仍然有效。

var syntax;
var syntaxCheck = document.createElement('syntax');
var syntaxFound = false;
while(!syntaxFound) {

     syntaxCheck.style.backgroundImage = '-webkit-gradient(linear,left top,right bottom,from(#9f9),to(white))';
     if(syntaxCheck.style.backgroundImage.indexOf( 'webkit' ) !== -1) {
          syntax = 'webkit';
          syntaxFound = true;
          break;
     }

     syntaxCheck.style.backgroundImage = '-moz-linear-gradient(left top,#9f9, white)';
     if(syntaxCheck.style.backgroundImage.indexOf( 'moz' ) !== -1) {
          syntax = 'moz';
          syntaxFound = true;
          break;
     }
}

if(syntax == 'webkit') // use -webkit syntax
else if(syntax == 'moz') // use -moz syntax