Wednesday 4 November 2009
CSS Gradient Syntax
We landed support for a form of CSS gradients on trunk a while ago, but we got considerable feedback that our syntax --- which was an incremental improvement of Webkit's syntax, which basically exposes a standard gradient API in the most direct possible way --- sucked. A bunch of people on www-style got talking and Tab Atkins produced a much better proposal. Since we haven't shipped our syntax anywhere yet, dropping it and implementing Tab's syntax instead was a no-brainer. So Zack Weinberg, David Baron and I did that (using a -moz prefix of course), and today it landed on trunk. It should land on the Firefox 3.6 branch shortly. It's unfortunate to land something new like this after the last beta, but in this case, it seems like the right thing to do instead of shipping CSS gradient syntax that we know nobody wants.
This does mean that anyone who's currently using -moz-linear-gradient or -moz-radial-gradient on pages is going to find that their syntax doesn't work anymore. Hopefully that's not too many people yet.
Comments
I don't like the idea of having separate declarations for repeating gradients, I would instead suggest that if the first parameter is "repeat", then the gradient will be repeated.
Note that I've added "reflect" there. Whichever approach is taken, whether a new parameter or the addition of reflected-linear-gradient() and reflected-radial-gradient(), I think that reflected gradients are well worth adding. Reflected is like repeated, but the stops are reversed in each iteration such that the end stop of the first iteration is the same as the start of the second.
I do quite a bit of work in SVG using Inkscape, and find I use the reflected gradients far more than the repeating gradients.
MarkC: you can at least do "reflect" by just repeating the gradient stops backwards.
In the longer term, whilst linear and radial gradients are a huge improvement over no gradients at all, it would be great to have other gradient types available. I can see immediate uses for "square" gradients ('picture frames' whose colours can be changed programmatically) and four-point gradients (set the four corner colours and the background is interpolated automatically).
And there are other gradient types: although I can't foresee any personal need for conical or spiral gradients in CSS backgrounds, I'm sure someone else could make use of them - hypnotic Austin Powers time machine animations, for example ;-)
BWT, people: You can use both old and new syntax. Browser will parse the one it understands, and skip the other one.