[css3-images] Extending Jorrit's sprite proposal to irregular coordinates

After some more thought since January, I like Jorrit's sprite
proposal[1].  It solves the problem of defining sprites in a single
location quite well, so if you need to adjust the positioning of the
sprites you need only make a change in one place.

However, it fails to address sprites that are spaced irregularly on a
grid.  This can happen if one has multiple dissimilar images they are
trying to sprite, such as the Google image Jorrit references[2].

My proposal is to adopt named sections within the @sprite block.  In
addition to the three properties already proposed for @sprite
(sprite-image, sprite-offsets-x, sprite-offsets-y), I would add a
fourth property, sprite-regions.  This property takes a
comma-separated list of regions, where each region consists of a name
(css-friendly unquoted identifier?), an x offset (length), a y offset
(length), a width (length), and a height (length), all separated by
spaces.

Within any property that takes an <image>, in addition to the proposed
sprite(sprite-name, col, row) syntax, you would also accept a
sprite(sprite-name, region-name) value that stands in for the named
region.

This allows for easy use of irregularly spaced sprites, while
fulfilling the requirement of centrally-located editting.

[1]: http://lists.w3.org/Archives/Public/www-style/2009May/0157.html
[2]: http://www.google.com/images/nav_logo4.png

~TJ

Received on Friday, 24 July 2009 02:21:58 UTC