测试CSS3径向梯度供应商语法

Question

我有一个问题，我正在尝试根据我指定的值更新元素的背景渐变。

我尝试过这条路线：

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 symtax​​的问题​​！ （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 。 它检测相关语法，并为您提供使用具有两种语法的单个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