Re: [css-images] image() function with conditions

On Sep 2, 2013, at 9:40 AM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> On Sun, Sep 1, 2013 at 10:42 PM, Dirk Schulze <dschulze@adobe.com> wrote:
>> I know that there already have been proposals to add another argument beside STRING or URL on image() to give the browser a hint if it supports an image format before loading it. Such as:
>> 
>>        background-image: image('image.webp' image/webp, 'image.png');
>> 
>> A browser with support of WebP would load the first image, another that doesn't wouldn't even start to load the first image to see if it can be used.
>> I like that idea, but think it can be extended. (Sorry if the following was proposed already, but I couldn't find a threat about it.)
>> 
>> What about allowing conditions within image()? Something like the proposed srcset attribute on <img> element:
>> 
>>        background-image: image('image-highDPI.png' 2x, 'image-lowDPI.png');
>> 
>> Or in combination with the first proposal:
>> 
>>        background-image: image(('image-highDPI.webp' image/webp 2x, 'image-highDPI.png' 2x, 'image-lowDPI.webp' image/webp, 'image-lowDPI.png');
>> 
>> In my opinion, image() gets more interesting with capabilities like that.
> 
> Yes, more conditional stuff should be added to image() as we come up
> with use-cases for it - it's the intended extension point for these
> things.
> 
> Resolution negotiation in particular, though, is rather special - it's
> not good to treat it as a strictly ordered list of alternatives.
> image-set() is intended for that (and I think it's fine to add the
> type annotations to image-set() as well, probably by defining a
> grammar term that they both use).

I thought about combining both. It seems more complicated to have two image functions that have the same syntax but different virtual purposes. Why not combine both if that is possible. With the current syntax as specified you would need to do:

image-set(image('image-highDPI.png.webp', 'image-highDPI.png.png') 2dppx, image('image-lowDPI.png.webp', 'image-lowDPI.png.png') 1dppx);

and the implementation that does not implement WebP still needs to download at least two images. So why not combine both into one function from the beginning?

And when we are at it: It is not nice for authors that it is '1x', '2x' and so on on the HTML element as described in [1] but something like dppx on CSS [2]. The HTML and CSS WG should work together and come up with a unified way.

Greetings,
Dirk

[1] http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/
[2] http://dev.w3.org/csswg/css-values-3/#resolution-value

> 
> ~TJ

Received on Monday, 2 September 2013 07:58:43 UTC