Using CSS sprites while still support high-density displays

Question

Is it possible to use CSS sprites and still support high-density (e.g., retina) displays? This could mean packing normal and double resolution images into a single sprite sheet... The problem there is how would I specify the offsets? Another possible solution would be to somehow detect (how?) the density of the screen and apply a class to the body.

Has anybody run into this issue? Any elegant solutions?

Answer 1

You can use the min-device-pixel-ratio media query to load a separate sprite sheet (and specify separate offsets), or to specify separate offsets in the same spritesheet.

It would be better to use a separate spritesheet for each density, so that clients don't need to download pixels that they can't display anyway.

You can use a LESS or SASS mixin to specify the offset once and generate a second media-query'd rule that doubles the offset.

Answer 2

LIKE THIS: -webkit-min-device-pixel-ratio

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) {
ul li {
background-image: url('icons-sprite@2x.png');
}
}

This could be retina.png or whatever you have the hd version...

This should work for any HD tablet and mobile