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

On Thu, Jan 23, 2014 at 4:02 AM, Erik Dahlström <ed@opera.com> wrote:
> On Thu, 23 Jan 2014 11:45:03 +0100, Jeremie Patonnier
> <jeremie.patonnier@gmail.com> wrote:
>> 2014/1/23 Erik Dahlström <ed@opera.com>
>>
>>> I'm wondering how much of a need there really is to have the fallback
>>> color in the first place, maybe this is something we should revisit?
>>>
>>
>> Let's imagine the following use case:
>>
>>    1. You have an SVG image with a white background
>>    2. I have a rect fill with a dark image (fill: url("stuff.png"))
>>    3. I write some text on top of the rect which color is white
>>    4. If for some reason the image is not loading, the text become not
>>
>>    visible (white text on a white background)
>>
>> Having a fallback color (let's say black) is a safety for such cases.
>
> My next sentence was: "There might be a better alternative".
>
> In other words, what if there was another way to address this use-case? Why
> would it necessarily have to use the current syntax?

There is - the image() function allows precisely this in CSS, and
more.  You feed it a comma-separated list of image urls, with an
optional color at the end, and it uses the first one it can
successfully load and parse.  No grammar issues, and even greater
power.

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


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

~TJ

Received on Thursday, 23 January 2014 15:32:24 UTC