Test For CSS3 Radial Gradient Vendor Syntax

Question

I'm having an issue where I'm trying to update the background gradient of an element with JavaScript based on values I specify.

I tried this route:

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%)';

Since Webkit and Gecko have two different syntaxes for CSS3 gradients, I need to specify both. However, the above code doesn't work. It works if I only have just the Gecko syntax or just the Webkit syntax, not both.

I think you can check for CSS gradient support, but my question is, is there a way to check which syntax needs to be used without browser sniffing? Keep in mind that I need to set my gradients this way since the x and y coordinates of the gradient change dynamically.

Hope this makes sense, thanks.

Answer 1

You shouldn't need to do any detection at all. Just set element.style.backgroundImage twice in succession, and the ones that don't parse will get ignored.