Re: Gradient syntax proposal

Brad Kemper wrote:
> 
> On Aug 13, 2009, at 4:35 PM, Tab Atkins Jr. wrote:
> 
>> Just linear gradients for now:
>>
>> http://www.xanthir.com/document/document.php?id=d65df9d10442ef96c2dfe5e1d7bbebf7aa42f2bcf24e68fc3777c4b484fa8a4ce55fed2189cac20ccad8686127f4c08917c4ca8b7614e9f89c2a950ec083a9c6
>>
>> ~TJ
>>
> 
> I won't get into my objections to [inner | outer] right now, but about 
> the rest of this:

We could make the default 'outer', which should address your concerns, no?

I'd use the keywords 'inside' and 'outside', btw. I think they fit better,
and also they're already in the parsing system (for list-style-position).

> One of the things I really hate about using "<bg-position>, 
> <bg-position>" is that comma to separate the two lengths or keywords on 
> the left from those on the right. Since commas are already being used to 
> separate color-stops, this just makes the whole thing harder to read, 
> because they are no longer used consistently to group like things. When 
> they are used only for color-stops, then you can see in a glance how 
> many color-stops there are instead of having to study it more closely 
> with a line full of distances and commas. For instance, I find the 
> following very hard to read, and it probably doesn't even make sense 
> (which is another problem with this kind of construction). 
> 
> |linear-gradient(10px 30%, 100% 4%, 50% green, 20% blue)|

I completely agree. How about using a keyword?

   linear-gradient(10px 30% to 100% 4%, green, blue 20%, navy);

For simpler cases you'd get

   linear-gradient(left to right, green, blue, navy);

We could also use some other punctuation instead of that first comma, e.g.

   linear-gradient(10px 30% to 100% 4% / green, blue 20%, navy);
   linear-gradient(left to right / green, blue, navy);

But it's not really necessary. The comma could even be dropped if we
forbid the first percentage.

   /* This is ok and parseable */
   linear-gradient(left to right green, 50% blue, 100% navy);

   /* Invalid b/c ambiguous with 'right 0%' position syntax*/
   linear-gradient(left to right 0% green, 50% blue, 100% navy);

~fantasai

Received on Friday, 14 August 2009 20:47:47 UTC