Either fix http or come up with a sensible image format container.

I was thinking, why is everybody defining each slice separately? Sprites are most commonly used with icons, which often have the same dimensions. So it would be easier/more elegant to just describe how the images are sliced. If you have an image file with, say, 8 icons horizontally in 4 states vertically, just slice it 8 by 4, and then just reference the slice number or slice position. Obviously, this wouldn’t allow for sprites in different dimensions in a single image file. But, we could reuse rect from css2 clip for that.

I like the @-rule proposed by others, but it isn’t consistent with the css grammar, because it doesn’t take arbitrary rules, but keywords defined by the W3C. So, if we’re gonna go that way, we’ll have to define just one new @-rule. And while we’re busy, a generic one that we could also use for other resources, like audio, would seem better. It could even replace the @font-face rule; it just seems more sensible to have just one flexible @resource rule, instead of one for each resource type like @font-face, @image, etc.

Anyway, I gave it some thought, mixed some propositions, added a twist of my own and came up with the following:

@resource {} /* create a named resource */

slice-image: url(“image.png”); /* which image file to slice */

slice-by-x: n; /* slice the image horizontally in n slices */
slice-by-y: n; /* slice the image vertically in n slices */
slice-by: x y; /* shorthand for slice-by-x and slice-by-y */

slice-x: n; /* which slice to use horizontally */
slice-y: n; /* which slice to use vertically */
slice: x y; /* shorthand for slice-x and slice-y, or */
slice: n; /* use slice n (counting horizontally, then vertically) or */
slice: rect(x, y, width, height); /* to allow for different sprite dimensions */

And of course, the same goes for background-image and list-style-image: background-slice-image, list-style-slice etc.

In shorthand properties like background and list-style:

slice(“image.png”, rect(x, y, width, height));
slice(res, rect(x, y, width, height));
slice(res, n); /* use sprite n from named resource res or */
slice(res); /* just use the first sprite or */
slice(res, x, y); /* use sprite at x, y */

An example:

a.icon {
slice-image: url(images/icons.png);
background-slice-by: 8 4;
}

a.icon:link, a.icon:visited { background-slice-y: 0 }
a.icon:hover { background-slice-y: 1 }
a.icon:active { background-slice-y: 2 }

a.icon#home { background-slice-x: 0 }
a.icon#news { background-slice-x: 1 }
a.icon#about { background-slice-x: 2 }

Another example, using named resources:

@resource {
resource-name: buttons;
src: url(image/buttons.png);
slice-by: 8 4;
}

ul.nav#home { list-style-image: slice(buttons, 0) }
ul.nav#news { list-style-image: slice(buttons, 1) }
ul.nav#about { list-style-image: slice(buttons, 2) }

For backward compatibility, use both url() and slice():

@resource {
resource-name: backgrounds;
src: url(images/backgrounds.png);
slice: rect(0, 0, 10, 10) rect(10, 0, 50, 50);
}

#header {
background: red url(“red.png”) repeat slice(backgrounds, 0);
}

#content {
background: white url(“white.png”) repeat slice(“backgrounds.png”, rect(10, 0, 10, 10));
}

Obviously, we’re trying to save bandwidth and http overhead, so user agents should only use url() as fallback, ie. they should not try to load url() if slice() is successfully loaded.

With named resources, we could also cascade them (slice sprites again). Imagine an image sliced in 4 sprites, one for top, bottom, left and right; and then slice them up again in 1×10 horizontally or 10×1 vertically. Like this:

@resource { resource-name: gradients; src: url(images/gradients.png); slice-by: 4 4 }
@resource { resource-name: topgradients; src: slice(gradients, 1); slice-by: 1 10 }
@resource { resource-name: bottomgradients; src: slice(gradients, 2); slice-by: 1 10 }
@resource { resource-name: leftgradients; src: slice(gradients, 3); slice-by: 10 1 }
@resource { resource-name: rightgradients; src: slice(gradients, 4); slice-by: 10 1 }

Anyway, this solution would create quite a lot of new css properties, but otherwise I think it’s an elegant and flexible solution, it allows for repetition and position, and it’s consistent with css grammar. What do you think, does it make sense?

PS: Sorry for the long post, I was going for the bonus points ;)

For example, using jQuery you could simultaneously animate various proprties like ‘background-slice-x’ and ‘background-slice-y’, but you couldn’t handle the more generic ‘background-slice’ without the library itself being rewritten to accommodate it.

background: red url(‘single.png’) repeat-x left bottom slice(‘combined.png’,x, y, w, h);
}

and this the detailed version :

background-color:red;
background-image:url(‘single.png’);
background-repeat:repeat-x;
background-position:left bottom;
background-slice:url(‘combined.png’) x y w h;

or more detailed for the latest element :

background-slice-image:url(‘combined.png’);
background-slice-coords:x y w h;

.mint a{background-image:url(/img/mint.png)}
.strawberry a{background-image:url(/img/strawberry.png)}

a.icon1{background-slice:slice(0 0 15px 15px)}
a.icon2{background-slice:slice(0 15px 15px 15px)}
a.icon3{background-slice:slice(0 30px 15px 15px)}

-or-

.mint .icon{background-image:url(/img/mint.png)}
.strawberry icon{background-image:url(/img/strawberry.png)}

.icon.icon1{background-slice:slice(0 0 15px 15px)}
.icon.icon2{background-slice:slice(0 15px 15px 15px)}
.icon.icon3{background-slice:slice(0 30px 15px 15px)}

Example:
see there two sprites:
http://www.gehrmann-design.com/img/mint.png
http://www.gehrmann-design.com/img/strawberry.png

now imagine you do a div.mint for the green theme. And a div.strawberry for the pink theme.

with your syntax you would end up typing:

.mint .icon1{background: slice(‘/img/mint.png’ 0 0 15px 15px)}
.mint .icon2{background: slice(‘/img/mint.png’ 0 15px 15px 15px)}
.mint .icon3{background: slice(‘/img/mint.png’ 0 30px 15px 15px)}

(…)

.strawberry .icon1{background: slice(‘/img/strawberry.png’ 0 0 15px 15px)}
.strawberry .icon2{background: slice(‘/img/strawberry.png’ 0 15px 15px 15px)}
.strawberry .icon3{background: slice(‘/img/strawberry.png’ 0 30px 15px 15px)}

(…)

———–
And you would have to repeat this for every skin you later introduce.

Seperating the properties for the image and the slice would save you a ton of code:

.mint {background-image:url(/img/mint.png)}
.strawberry {background-image:url(/img/strawberry.png)}

.icon1{background-slice:slice(0 0 15px 15px)}
.icon2{background-slice:slice(0 15px 15px 15px)}
.icon3{background-slice:slice(0 30px 15px 15px)}

—–
Introducing a new color sceme would simplay be one line of code:
.blueberry {background-image:url(/img/blueberry.png)}

—–
to keep old browsers happy you could use instead of the simple url() for the background image property a new one like slice-url:

background: slice-url(/img/blueberry.png) slice(0 30px 15px 15px)

We can mix André’s proposition (#20) and Matt’s(#16) :

div{
background: red url(‘single.png’) repeat-x left bottom slice(‘combined.png’,x, y, w, h);
}

On one hand, modern browsers must give priority to the slice value and ignore url property. And on the other, old browsers will not understand slice and will get the url property only.

Example:
HTML:

.icon1{background-slice(0,0,10px,10px);}
.icon2{background-slice(0,11px,10px,10px)}