Re: Gradient syntax proposal

On Aug 17, 2009, at 8:15 PM, Tab Atkins Jr. wrote:

> Also, if you haven't seen it in a while, I've upgraded the CSS on my
> document viewer (from "none" to "some"), so it's actually halfway
> pleasant to read now.
>
> http://www.xanthir.com/document/document.php?id=d65df9d10442ef96c2dfe5e1d7bbebf7aa42f2bcf24e68fc3777c4b484fa8a4ce55fed2189cac20ccad8686127f4c08917c4ca8b7614e9f89c2a950ec083a9c6

In your last example, you could get about the same gradient with this:

background: linear-gradient(-70deg / yellow 52px, blue (100% - 52px));

...if that was the effect you wanted, and you didn't have the extra  
(and I would say unneeded) grammar of bg-position.

My point is, it's cleaner and simpler not to have several different  
ways to do the same thing. Simpler to learn, simpler to read, avoids  
confusion about the different forms.

I suggest we have a second slash for when people want to measure from  
the apposing corner/side. So that the above could be written as:

background: linear-gradient(-70deg / yellow 52px / blue 52px);

([<angle> | <side-or-corner>] / <color> <distance-or-%-from-start>  
[,<color> <distance-or-%-from-start>]* [/ <color> <distance-or-%-from- 
end> [,<color> <distance-or-%-from-end>]*]?)

I really hope it will never be written like the following (7 tokens  
before the slash, just to say where the first color-stop starts and  
where the last color-stop ends):

background: linear-gradient(20px 30px to right 20px bottom 30px /  
yellow, blue);