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

2014/1/23 Tab Atkins Jr. <jackalmage@gmail.com>

> So Jeremie's example is just "fill: image("dark.png", black);".  This
> exact use-case is documented in the spec as Example 5:
> <http://dev.w3.org/csswg/css-images/#image-fallbacks>.
>

Yes, it's exactly what I have in mind… Hurray! for the image() function  \o/


> >> 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;

Or possibly:

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


Best,
-- 
Jeremie
.............................
Web : http://jeremie.patonnier.net
Twitter : @JeremiePat <http://twitter.com/JeremiePat>