Re: fill and stroke properties with CSS <image> values

On Thu, Jan 23, 2014 at 7:59 AM, Jeremie Patonnier
<jeremie.patonnier@gmail.com> wrote:
> 2014/1/23 Tab Atkins Jr. <jackalmage@gmail.com>
>> >> Another case is if you want to have an image that fade to a colored
>> >> background. In such case, it's better to fill with an image as small as
>> >> possible and fill the blank with the appropriate color instead of
>> >> having a
>> >> large image mostly full of a plain color. This is more efficient in
>> >> term
>> >> of
>> >> network performance (we load a smaller resource) and rendering
>> >> performance
>> >> (the color can be paint immediately, even if the image take some time
>> >> to
>> >> load).
>> >
>> > I don't understand the point you're trying to make, why wouldn't this
>> > also
>> > be true for an alternative?
>> >
>> > Multiple paints, e.g "fill: url(foo), url(bar)", is in the SVG2 spec
>> > already
>> > (currently just as an example, the <paint> grammar doesn't yet cover
>> > this),
>> > but the WG has resolved to have this feature[1]. I guess it still
>> > remains to
>> > be decided, but I would not expect rendering to stall just because all
>> > of
>> > the paints weren't fully loaded. Draw what there is, and update as
>> > needed.
>>
>> Yes, multiple paints are a completely different issue from the
>> fallback color thing we're discussing.
>
>
> Okay I think I wasn't clear here. The use case I have in mind is the same as
> for:
>
> background: url('dark.png') no-repeat black;
>
> which allows to have an image of an arbitrary size and if the element is
> wider than the image, the extra "empty" part will be fill with the
> associated color.
>
> For what I understand, this is something that could be solve like this:
>
> fill: url('dark.png'), image(black);
>
> But in a web developer point of view, I do not understand the necessity to
> make the syntax more complex. What's wrong to do the same with:
>
> fill: url('dark.png') black;

This *currently* might not work, due to the very grammar issue we're
discussing.  "black" can't be both a fallback color *and* an
additional color to be painted in the fill.

If we decide that we can break from whatever grammar issues are
preventing this, though, then yes, we can just match CSS's
'background' grammar and this would work for your use-case.

> Or possibly:
>
> fill: url('dark.png'), black;

This will work regardless, yes, because it doesn't hit the grammar
issues, so it's just a case of multiple paint layers, and a bare color
is always allowed as a paint server.

~TJ

Received on Thursday, 23 January 2014 17:05:02 UTC