W3C home > Mailing lists > Public > www-style@w3.org > August 2009

Re: Gradient syntax proposal

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Sat, 15 Aug 2009 00:03:53 -0500
Message-ID: <dd0fbad0908142203x3cfb2c60ldba95195a6e85fdf@mail.gmail.com>
To: Andrew Fedoniouk <news@terrainformatica.com>
Cc: Brad Kemper <brad.kemper@gmail.com>, www-style list <www-style@w3.org>
On Fri, Aug 14, 2009 at 8:02 PM, Andrew
Fedoniouk<news@terrainformatica.com> wrote:
> Tab Atkins Jr. wrote:
>> On Fri, Aug 14, 2009 at 6:06 PM, Andrew
>> Fedoniouk<news@terrainformatica.com> wrote:
>>> What if that element has background-image (real one) too?
>> Exactly the same as you would if you specified two backgrounds that
>> were both url()s.
>> background: url(),url();
>> is *exactly the same* as
>> background: url(),linear-gradient();
>> in terms of how to treat it.
> That is not the answer on my question.
> How would you remove gradient if element has gradient and background image
> with (e.g. no-repeat)?

I'd do the exact same thing as I would if I had two background images
and I wanted to reset it to only one.

> I suspect that you will propose something nice as this:
>  background: url(??????),none;

Nah, just "background: url(...)".  I mean, you *could* put "none" in
there, but that's kind of unnecessary.  Setting background
automatically resets everything.

> But what shall I put instead of ?????? if I don't know that URL(it is
> defined in other file out of my influence)?

You don't know the URL?  You can always determine it - just inspect
the element in your favorite browser's CSS inspector.

But if, for some reason, you still don't know it (say it's a
dynamically generated url and can change unpredictably), then you're
sort of screwed, exactly like you would be if you had two background
images and wanted to just remove one.  That's just one of the
limitations of CSS.

> In short: gradients shall be uniquely addressable. solid-color() and
> linear-gradient() are mutually exclusive
> as they define value of the same thing.

I'm still not sure how you're justifying gradients being the same as
colors.  They're not, in any way, as I, Brad, and several others in
other circumstances have said.  They're an image.

> So gradient should be addressable by
> background-color, border-color, etc.
> I cannot imagine real life situation when you would want to use solid color
> and gradient color at the same time.

You gave such an example in an earlier email, where you had red
starting in two different corners and fading together into blue.  To
reproduce this, you'd do "background: linear-gradient(top left to
bottom / red, transparent), blue linear-gradient(top right to bottom /
red, transparent);"

> That is why I am insisting that gradients are such colors (color
> fill/distribution functions to be precise).

Even if two things are mutually exclusive, that does not mean they are
the same thing.

> As I said, there are many cases when you will want to have gradients on
> boxes other than background box of the element.
> Think about these cases:
> background-color: linear-gradient(top to bottom / yellow, blue);

background: linear-gradient(top to bottom / yellow, blue);

> border-top-color: yellow;
> border-left-color: linear-gradient(top to bottom / yellow, blue);
> border-right-color: linear-gradient(top to bottom / yellow, blue);
> border-bottom-color: blue;

border-image: linear-gradient(top / yellow, blue) / ...; (though,
Brad's proposed syntax doesn't *quite* work here - I need to be able
to slice based on distance from each side, rather than distance from
the top/left of the image.)

> column-rule-color: linear-gradient(top to bottom / yellow, blue);

All right, you can't do this yet.  However, since column-rule is
basically just "borders, but between columns instead", we would be
within our right to ask for a column-rule-image that worked similarly,
so we could put fancy curlicues between our columns and such.

Yes, you can justify using a gradient in the place of a color in
certain, specific circumstances.  But you really can't ever do it in a
reasonably general way, and that makes it useless.  It's much better
to find out what you're *really* doing with the image, and lay out a
general way to use it for any image.

For example, in your code it sort of makes sense to use a vertical
gradient for column-rule-color.  But how do you treat a horizontal
gradient, or a diagonal one?  And what about radial-gradient()?  I
don't think there are good answers to these that aren't arbitrary.

Received on Saturday, 15 August 2009 05:04:53 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:38 UTC