The specs have always been in a state of flux. But it seems to be decided on the CSS3 linear and radial gradients syntax finally (hopefully). Let’s just discuss the changes and how you’ll need to modify your current/old code accordingly.
Linear Gradients
Old Syntax
<linear-gradient> = linear-gradient( [ [ [top | bottom] || [left | right] ] | <angle> ,]? <color-stop>[, <color-stop>]+ );
New Syntax
<linear-gradient> = linear-gradient( [ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+ ) <side-or-corner> = [left | right] || [top | bottom]
Now, take a look at the old/new versions of some sample codez:
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
/* Old */ background-image: linear-gradient(top, red, green); /* New */ background-image: linear-gradient(to bottom, red, green); /* Old */ background-image: linear-gradient(left, red, green); /* New */ background-image: linear-gradient(to right, red, green); /* Old */ background-image: linear-gradient(bottom left, red, green); /* New */ background-image: linear-gradient(to top right, red, green); /* Old */ background-image: linear-gradient(top left, red, green); /* New */ background-image: linear-gradient(to bottom right, red, green);
So basically, if the direction was X, you need to change it to to Y where Y is the opposite direction.
The way angles work have also changed. Previously, 0deg pointed to the right, 90deg pointed up, 180deg pointed left and 270deg pointed down. So, the positive angles used to go counterclockwise. The directions top, right, bottom and left were same as 270deg, 180deg, 90deg and 0deg respectively.
Now, with the new syntax, 0deg points upwards, 90deg points right, 180deg points bottom and 270deg points left. So, positive angles go clockwise. The directions to top, to right, to bottom and to left for the gradient-line, corresponds to the angles 0deg, 90deg, 180deg and 270deg respectively.
This means, you will have to change all the directions specified with angles according to the aforementioned rules :(.
Radial Gradients
Just incase you haven’t worked with radial gradients yet, read this article. IMHO, it’s the best on this very topic on the web.
From the specs:
Old Syntax
<radial-gradient> = radial-gradient(
[<bg-position>,]?
[
[<shape> || <size>]
|
[<length> | <percentage>]{2}
,]?
<color-stop>[, <color-stop>]+
)
New Syntax
<radial-gradient> = radial-gradient(
[ [ <shape> || <size> ] [ at <position> ]? , |
at <position>,
]?
<color-stop> [ , <color-stop> ]+
)
It’s almost the same except that, the position needs to be prefixed with an ‘at ‘ and the shape/size that you have always used after the position as a separate argument, needs to be passed along with the position. If you give it another thought, you’ll find this new syntax more human-friendly.
Let’s see some codez again based on old/new syntax:
/* old */ background: radial-gradient( center 50px, circle, rgba(199, 194, 190, 0.8), rgba(132, 121, 117, 1) ); /* new */ background: radial-gradient( circle at center 50px, rgba(199, 194, 190, 0.8), rgba(132, 121, 117, 1) );
That’s pretty much it, neat and simple!
Conclusion
The new syntax for both the formats does make much more sense than the old ones. Infact, I have always wanted the syntax to be like this rather than the old one, especially for the positive angles in linear gradients to go clockwise.
But then, the bad part is changing our existing CSS codes :(. Especially harsh for CSSDeck where there are so many items using old syntax. It gets even worse with Codecasts, damn!
As usual, you might end up struggling with vendors too. New syntax is not supported in webkit, while Firefox, Opera and probably IE10 does support them without prefixes. With Opera 12.02, I also noticed that it does not obeys the new angle rules for the linear gradients directions. So, it’s just messy.
Good Luck!
