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 16:10:06 -0800
Message-ID: <CAAWBYDCG71Awvq_Rah7GAZRJ_=fKDyeTC2R3MAnbZj_3n6CFOA@mail.gmail.com>
To: Brad Kemper <brad.kemper@gmail.com>
Cc: Andrew Fedoniouk <a.fedoniouk@gmail.com>, "www-style@w3.org" <www-style@w3.org>
On Sun, Mar 4, 2012 at 10:57 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
> Strictly speaking, you don't need variables to take advantage of the image fragments.

Right, but if Andrew felt that the ability to give each sprite a short
name was useful, then variables help out with that.  (It also helps by
allowing you to put all your rectangle declarations together and in
one spot, so if you change your sprite layout later it's a single easy
place to make all the necessary changes.)


On Sun, Mar 4, 2012 at 11:33 AM, Andrew Fedoniouk
<news@terrainformatica.com> wrote:
> 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.

I don't think it's appropriate or sensical to mix functionality like
overlays and image combinations into a mechanism designed for
spriting.  If we want to do something like that we should develop
specialized functionality for it, and let the existing spriting
mechanisms do their job.


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

Yes, it will.  But image() requires support for the xywh fragment
syntax, and it offers some more functionality besides; in general,
it's just a souped-up url().


On Sun, Mar 4, 2012 at 12:20 PM, Antony Kennedy <antony@silversquid.com> wrote:
> 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?

Yes, HTTP2 allows you to proactively push resources to the client
ahead of actual usage, so the images will be ready before the user
actually hovers over something.

~TJ
Received on Monday, 5 March 2012 00:10:54 GMT

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