Re: Gradient syntax proposal

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:

The <gradient-line> stands for:

[
   <angle> [inner | outer]?
|
   [ left | right | top | bottom ] [ left | right | top | bottom ]
|
   <bg-position>, <bg-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)

The problem is too many commas being used in different ways, and too  
many percentages used in different ways The confusion is compounded  
when the color stop begins with a percentage, because then you can end  
up with two percentages, used in different way, separated by a comma  
("4%, 50%", above), while in another place two percentages that are  
used the same way (mostly) are also separated by a comma ("30%, 100%",  
above). Some percentages are of the length of the gradient, and other  
percentages are of  the width or height of the element for bg- 
position. I believe this is probably why mozilla and webkit resorted  
to functional notation for their three types of color stops, but I  
don't like that much either.
The positional keywords can also create ambiguity. Such as like this:

linear-gradient(top right, 50% green, 20% blue)

Also, even with "top bottom" instead of "top right", this doesn't seem  
that clear, because it looks kind of like like 3 stops to me (or maybe  
even 4), instead of two.

I think this can be improved significantly in a way that makes  
everything more clear, by using the following change:
linear-gradient(

[

   <angle>
|
   [ top-left | top-right | bottom-right | bottom-left | top | bottom  
| right | left ]
]
<color-stop>, <color-stop>

)

<color-stop> is [<color> [<percentage>|<distance>]*],


Thus, these go from blue in the lower left corner at a 45 degree angle  
until the last line of the gradient intersects the opposite corner:

linear-gradient(45deg green, blue)
linear-gradient(45deg green 0%, blue 100%)

These start in the same corner and continue directly towards the  
opposite corner (along an angle that would be a line connecting those  
corners):

linear-gradient(bottom-left green, blue)
linear-gradient(bottom-left green 0%, blue 100%)

These start in the bottom and continue towards the top:

linear-gradient(bottom green, blue)
linear-gradient(bottom green 0%, blue 100%)

Adding stops then is very consistent:

linear-gradient(bottom green, white, orange, blue)
linear-gradient(bottom green 0%, white 33.3%, orange 66.6%, blue 100%)

Briefly, about "inner": I think it is very unusual. When I create an  
angled gradient box in PhotoShop, it fills the whole thing to all  
corners. It does not start in one corner and then just stop once it  
hits a side. That would be weird. If you did want the length of the  
blend to be a certain distance that is consistent between two boxes of  
the same width, then just use an absolute distance measure instead of  
100%.

On another note, I think that if the beginning and ending stops are  
specified as >0% and <100% respectively, then their starting and  
ending colors should fill the space between those corners and the  
points at which there is actual gradation. Don't just leave those  
areas transparent. In the unusual event that you  DO want transparency  
there, you could do this:
linear-gradient(bottom transparent, transparent 30%, green 30%, blue  
70%, transparent 70%, transparent)