- From: Brad Kemper <brad.kemper@gmail.com>
- Date: Sun, 4 Mar 2012 10:57:37 -0800
- To: "Tab Atkins Jr." <jackalmage@gmail.com>
- Cc: Andrew Fedoniouk <a.fedoniouk@gmail.com>, "www-style@w3.org" <www-style@w3.org>
Strictly speaking, you don't need variables to take advantage of the image fragments.
On 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
>
Received on Sunday, 4 March 2012 18:58:08 UTC