In the past month I’ve researched CSS gradients, and I can finally present my findings. As usual, there was no source that gives clear, concise, accurate information about the three syntaxes and the four rendering engines, so I decided to write it myself.
Here is the inevitable compatibility table. Below I excerpt part of my introduction to gradients.
The problem with gradients is that they are a syntactic nightmare. The gradient spec writers and browser makers changed their mind not once but twice. Thus we have three sets of syntax, and all three occasionally crop up even today. I call these old, middle, and new syntax.
Fortunately, you can ignore the old syntax altogether. Trident, Gecko, and Presto support new syntax, so they’re not the problem, either. The problem is WebKit.
In 2013 you will need the prefixed middle syntax for the WebKit-based browsers, since WebKit hasn’t implemented the new syntax yet. Work is being done, and I expect the first WebKit-based browser with the new syntax somewhere in Q1 2013, but it will take a lot more time before all mobile browsers have gone over. Therefore it’s best to wait until 2014 before dropping the middle syntax altogether.
The combined syntax for linear-gradients is:
-webkit-linear-gradient(<direction>,<color-stop>[,<color-stop>]) // MIDDLE linear-gradient(to <direction>,<color-stop>[,<color-stop>]) // NEW
(to) <direction> you can also use
<angle>. Note that angles and directions work differently in middle and new syntax.
The combined syntax for radial-gradients is:
-webkit-radial-gradient(<position>,<shape> <size>,<color-stop>[,<color-stop>]) // MIDDLE radial-gradient(<shape> <size> at <position>,<color-stop>[,<color-stop>]) // NEW
<size> did not change from middle to new syntax, although their order of definition did (see above). Also, swapping
<size> is allowed in both syntaxes. However, there are a few caveats.
<size>(such as 3px) is allowed in new syntax, but middle syntax requires two values.
<shape>with a length value for
circle 25px 25px) is allowed in new syntax, but not in middle syntax.
If you like this blog, why not donate a little bit of money to help me pay my bills?