RE: Gradient syntax proposal

Tab Atkins Jr. wrote:
| In the 100px case there is a noticeable difference, though probably
| not a *significant* difference - even in the one that preserves the
| gradient, it's dropped to a very short, sharp one spanning a mere 5
| pixels.  In either case, the 30px green sides, which are presumably
| meant to be have padding overlaid on them to keep content out, are
| causing a problem all by themselves, independent of the gradient
| fades.  You should probably have a min-width placed on the box to
| prevent it from ever getting that small in the first place, or specify
| the green sides in % as well.

The 5-pixel span is still a soft edge, and the width of the green is equal on both sides. The one with % measures on the full width has mismatched sides. A hard transition and mismatched sides could occur while the wheat-color center is wide enough for text and/or an image. I made the initial image narrow in order to use two columns.

On one hand, the gradient on the right does degrade better. On the other, lengths are relative to the gradient - so why should percentages be different?

Actually, neither color-stop positioning solution is satisfactory inasmuch as the implicit position of color-stops (subdividing the span between explicit color stops) doesn't jibe with either. A default value is normally one of several specifiable options.

That brings up another possibility: Each color-stop position type (percent, relative length, pixels) has its own reference span. So long as all color stops use the same position type, they are all relative to the length of the gradient. But when a color-stop position type differs from the previous, the previous stop is the start position for subsequent stops until the color-stop position type changes again. If the color-stop position type changes back to a previous type, the previous type's start reference point is restored (and it becomes an end reference point if relevant).

So, for this gradient:

left / blue, red 20%, yellow 2em, green 4em, teal 6px, blue 80%;

red->blue gradient is from 0-20% total width. red->yellow is from 20% to (20%+2em), yellow->green is from (20%+2em) to (20%+4em), green->teal is from (20%+4em) to (20%+4em+6px), teal->blue is from (20%+4em+6px) to 80%, and solid blue is from 80%-100%;

There, that's pretty simple, right? :-)

| Also, the WG talked not long ago about the introduction of the max()
| and min() functions, which would help in situations like these.  You
| could specify the wheat stop as "wheat max(20%, 50px)", ensuring that
| the green->wheat transition remains *at least* 20px wide.  Specifying
| the far stop is a bit more complicated, unfortunately - "wheat
| min(80%, calc(100% - 50px))" or "wheat calc(100% - max(20%, 50px))".

I seem to recall that suggestion but couldn't find the origin in the archives. Since it isn't in the Values and Units module, it will not be of much help.
 
| So, so far, I'm still inclined to keep percentages measuring from the
| start, just like lengths.

I currently have no further arguments.

David Perrell

Received on Thursday, 20 August 2009 05:48:40 UTC