Re: Gradient syntax proposal

On Aug 16, 2009, at 11:15 PM, David Perrell wrote:

> Brad Kemper wrote:
> | If you use an angle, then that tells you what side or corner to  
> start
> | from. This seems mostly uncontested, and no one has said it needs to
> | be combned with <bg-position> (because the first and last color  
> stops
> | can have percentages or lengths). But the reverse is also true: if  
> you
> | use a single keyword to indicate what side or corner to start from,
> | then it tells you the angle (towards the opposite side or  
> corner).  It
> | doesnt need to be combned with <bg-position> (because the first and
> | last color stops can have percentages or lengths). Same same. Thus:
> |
> | [<angle> | <starting-corner-or-side>]
>
> Yes, that would suffice. But I expect the simplest <bg-position>  
> forms would
> be the most commonly used. With existing keywords that are no more
> complicated than what you propose (e.g. linear-gradient: left top /  
> blue,
> red ;).

What I preferred was a dash between the two words forming a corner. It  
looks neater and simpler, as it allows it to be a single keyword  
instead of sometimes one, sometimes two. Thus,

[top-right | bottom-right | bottom-left | top-left | top | right |  
bottom | left]

(the combination keywords match the border-radius property names for  
the four corners).

> | If you allow lengths and percentages in the same list of color  
> stops,
> | then stops could trade places based on the size of the box they  
> are in.
>
> Not if stops are forced to be in ascending order, so if a color-stop
> specifies a position before a previous color-stop, its position is  
> changed
> to that of the previous stop. There are situations where that might be
> considered graceful degradation.

I'm not sure why that is better. Either way, the UA will have to  
figure out where the location will be for each stop before it lays out  
the gradation. I'd prefer to either insist on all units in a gradation  
being the same (so they can be in order without ambiguity), or just  
let them be out of order. If allowed in any order, if you have the  
following in a 100px height box:

linear-gradient(top / white, yellow 80px, green, blue 60%, black)

the used value would be:

linear-gradient(top / white 0, blue 60px, green 70px, yellow 80px,  
black 100%)

The green would be half way between 80px and 60px (60% of a 100px box).

Received on Monday, 17 August 2009 15:28:53 UTC