[css4-images] Color stop syntax

A few days ago, I gave a talk at SmashingConf, in which I included some small live demos with gradients. During one of them, I wrote something like:

 background: linear-gradient(1px black, 1px transparent);

Neither I nor anyone in the 300 authors in the audience could see what was wrong with it, until I gave up and decided to move on to the next demo.
Of course, I later realized what the problem was. The color stop position was before the color. But why is that disallowed? There doesn’t seem to be any reason to require it and traditionally in CSS order doesn’t matter when disambiguation is possible regardless of it.

To be specific, I don’t understand why these:
<color-stop> = <color> [ <percentage> | <length> ]{0,2}
<angular-color-stop> = <color> [ <percentage> | <angle> ]{0,2}

are not instead:
<color-stop> = <color> || [ <percentage> | <length> ]{0,2}
<angular-color-stop> = <color> || [ <percentage> | <angle> ]{0,2}

??

Also: Great idea to allow 2 positions. Hadn’t noticed it before. This was sorely needed for so many use cases!

Cheers,

Lea Verou
W3C developer relations
http://w3.org/people/all#leahttp://lea.verou.me ✿ @leaverou

Received on Friday, 21 September 2012 13:07:42 UTC