W3C home > Mailing lists > Public > www-style@w3.org > March 2012

Re: [CSS] Image sprites and catalogs

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Sun, 4 Mar 2012 11:33:25 -0800
Message-ID: <CALRQH7--vLhx6pi1VwEVu7_vsi-qfaWDe9b+tRO0rhOq8svdPw@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: www-style@w3.org
On Sun, Mar 4, 2012 at 8:58 AM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> On Sat, Mar 3, 2012 at 4:06 PM, Andrew Fedoniouk <a.fedoniouk@gmail.com> wrote:
>> It would be nice if it will be possible to define catalog images
>> (image lists) in CSS directly.
>>
>> Something like this:
>>
>> @image-list MyIcons {
>>    image: url(my-huge-catalog.png);
>>    parts: cut-icon 0 0 16 16,
>>             copy-icon 16 0 16 16,
>>             paste-icon 32 0 16 16;
>>   ...
>> }
>>
>> And later in styles to use these catalog parts as
>>
>> button#cut {   background-image: MyIcons(cut-icon);   }
>> button#copy {   background-image: MyIcons(copy-icon);   }
>> .....
>>
>> I think that web app designers will appreciate that.
>
> Spriting is an unfortunately-necessary performance hack due to the
> design of HTTP (in particular, the high time-cost of starting a new
> connection, which must be done for every file).  This will become less
> necessary as HTTP2 (previously SPDY) is implemented and rolled out.
>
> In the meantime, a combination of Image Values and Variables will
> solve the problem.  You can replace your code with this:
>
> :root {
>  data-cut-icon: image("my-huge-catalog.png#xywh=0,0,16,16");
>  data-copy-icon: image("my-huge-catalog.png#xywh=16,0,16,16");
>  data-paste-icon: image("my-huge-catalog.png#xywh=32,0,16,16");
> }
> ...
> button#cut { background-image: data(cut-icon); }
> button#copy { background-image: data(copy-icon); }
>

Yes, variables can be used for that purpose but @image-list
potentially is more flexible
syntactically speaking. I can imagine sprite compositions like
"overlay checkmark" below.

 @image-list MyIcons {
    image: url(my-huge-catalog.png);
    parts: checkmark 100 100 16 16
             cut-icon 0 0 16 16 overlay checkmark,
             copy-icon 16 0 16 16 ,
             paste-icon 32 0 16 16;
   ...
}
or some other image compositions, filters and effects that otherwise
do not fit into
CSS background/list-image/border-image syntax.

And yet, I am not sure I understand why do you need image() here:

> :root {
>  data-cut-icon: image("my-huge-catalog.png#xywh=0,0,16,16");
>  data-copy-icon: image("my-huge-catalog.png#xywh=16,0,16,16");
>  data-paste-icon: image("my-huge-catalog.png#xywh=32,0,16,16");
> }

url("my-huge-catalog.png#xywh=0,0,16,16")  will work just fine, no?

image() could be useful there if it by itself would support fragment
identifications like this:

image("my-huge-catalog.png", 0 0 16 16 );
image("my-huge-catalog.svg", "#cut" );

-- 
Andrew Fedoniouk.

http://terrainformatica.com
Received on Sunday, 4 March 2012 19:33:53 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:51 GMT