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

Re: [CSS] Image sprites and catalogs

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Sun, 4 Mar 2012 08:58:11 -0800
Message-ID: <CAAWBYDCJFL6jtC+Kt_aH3uB6cPtdDy=T3Ed4=TAUUyk_ZZnv1w@mail.gmail.com>
To: Andrew Fedoniouk <a.fedoniouk@gmail.com>
Cc: www-style@w3.org
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); }

~TJ
Received on Sunday, 4 March 2012 16:58:58 GMT

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