Q:

Using CSS sprites while still support high-density displays

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?

A:

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.

