Re: [CSS] Image sprites and catalogs

They're also useful for precaching hover states to avoid the delay in loading images when interacting with UI. Is there a solution for this without using JS?

AK



On 4 Mar 2012, at 19:03, Rik Cabanier <cabanier@gmail.com> wrote:

> Sprites are not just used as a download optimization, they are also more efficient for drawing dumb (but efficient) animations.
> They allow you to upload everything to graphics memory and create a flip-book by simply changing the drawing offset.
> 
> As with HTTP2, once we have true support for vector animations, their usage should diminish.
> 
> Rik
> 
> 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); }
> 
> ~TJ
> 
>