Re: Gradient syntax proposal

On Wed, Aug 19, 2009 at 7:31 AM, David Perrell<davidp@hpaa.com> wrote:
> Brad Kemper wrote:
> | So could the second. Oh wait, it already is.
>
> No argument.
>
> | I'm just thinking there would be times when you wanted a gradient a
> | fixed distance from the end, not just the beginning, not necessarily a
> | mirror of the beginning measurement, so it would be nice to have a way
> | to specify that without a lot of calc(), which is even harder to read.
> | A second slash version doesn't seem so bad for that. Basically just a
> | slash instead of a comma there.
>
> Your proposal brings up an interesting comparison between having percentages
> refer to the entire length of the gradient and having percentages refer to
> the span between lengths.

This can prevent what I believe would be a common case, putting a
color-stop right in the middle of the image.

> Given this transition (using your proposal):
>
> background: linear-gradient(-70deg / blue 52px, yellow 20%, yellow 80% / red
> 52px);

Hijack for a moment: I never responded properly to Brad's proposed
second-slash syntax.

I don't like it.  ^_^  I find it confusing to separate out a single
color-stop from the rest and have it look exactly the same as the
other color-stops, but be measured from a different place.  If you can
put multiple color-stops there, that gets even worse, because there is
*no way* to establish an appropriate ordering between the two groups
of color-stops other than whatever happens to fall out of the syntax.

It also prevents the second-to-last stop from having a default
location, unless the existing rule for resolving that can reach across
the slash.  If so, sorta confusing.

Just use calc() instead.  For that last red stop, write it as "red
calc(100% - 52px)".  A bit complex, but the potential for confusion
and ambiguity is dropped to 0.

> In the case where 20% of the entire length of the gradient is less than
> 52px, is it better to have a hard transition from blue to yellow and yellow
> to red, or to maintain blue-yellow/yellow-red gradients within the 52-pixel
> solid-color edges? (Clearly, it is NOT good to have the yellow stop precede
> the blue and the red stop precede the second yellow.)

Depends.  Are you aligning those percentages with percentages
elsewhere on the page?  If so, then it's better to have the % refer to
the whole length, and pay the price of a hard transition when it gets
too small.  If not, though, then it might be better to keep the fade
itself.  Hrm.  I don't want to complexify the syntax by allowing you
to choose, though.

I think I want to keep the current behavior, as you can emulate your
suggested behavior with multiple backgrounds:

background: linear-gradient(20px 30px / blue, yellow 20%, yellow 80%, red),
            linear-gradient(top left / blue 52px, transparent 52px,
transparent calc(100% - 52px), red calc(100% - 52px));

Definitely complicated, but I think this is probably an edge case.
Anyone have some examples as refutation, where it seems reasonable
that someone would want the "% between lengths" if the window was
resized?

> There's yet another possibility when percentages refer to the entire
> gradient length: should percentages trump <lengths>? (In the above case, the
> start and end points would be moved outward. Any span specified with
> <length> would be subject to compression.)

Nah, that definitely sounds freaky and unintended.  Right now the rule
is just that earlier stops trump later stops.

~TJ

Received on Wednesday, 19 August 2009 14:00:53 UTC