[CSS4] Image catalogs (a.k.a. CSS sprites) idea

CSS4 images module define concept of Image Fragments [1] like:

  background-image: image('toolbar.png#xywh=40,0,20,20')

But this solution is not scaleable well when for different DPIs when
we need to use toolbar.png, toolbar-2x.png, toolbar-4x.png images.

And yet such declarations are very hard to maintain.

So thinking about the @image-map construct:

Let's assume we have this declaration:

@image-map my-sprites {
    src: url(toolbar-icons.png);
    cells: 16 2;  /* 16 in a row, 2 rows */
    parts: icon-bold,  /* logical names of cells, one by one */
             icon-italic,
             icon-font-name,
             icon-font-size,
             ...;
}
That defines image catalog made of fragments of toolbar-icons.png file.

So later in CSS we can define something like this:

.toolbar > button.bold {  background-image: image-map(my-sprites,icon-bold);  }
.toolbar > button.italic {  background-image:
image-map(my-sprites,icon-italic);  }
etc.

Note that this group of declarations is using only logical names - is
not tied with pixel sizes of original images.

The src may use multiple image sources:

@image-map my-sprites {
    src: url(toolbar-icons.png) 100dpi,
          url(toolbar-icons-2x.png) 300dpi,
          url(toolbar-icons-print.png) 600dpi );
    cells: 16 2;  /* 16 in a row, 2 rows */
    ...
}
in this case such single declaration will be flexible to different
screen resolutions.

The image-map may also define catalogs of parts of variable sizes:

@image-map my-logos {
    src: ...;
    cells: 16 4;  /* 16 in a row, 4 rows */
    parts: logo-this 1 1 4 4, /* spans 4x4 cells from 0,0 */
             icon-fb 5 1 1 1,  /* spans 1 cell at 5,1 */
             ...;
}

If we have such @image-map then we don't need image-set [2] construct.

We can define just this:

@image-map dpi-aware-img {
    src: url(dpi-aware.png) 100dpi,
          url(dpi-aware-2x.png) 300dpi,
          url(dpi-aware-print.png) 600dpi );
}

And use it as
   background-image: image-map(dpi-aware-img);

Any comments?

[1] http://dev.w3.org/csswg/css4-images/#image-fragments
[2] http://dev.w3.org/csswg/css4-images/#image-set-notation

--
Andrew Fedoniouk.

http://terrainformatica.com

Received on Monday, 12 November 2012 20:43:53 UTC