Please explain me that vk css icons trick

Question

I've seen some interesting css trick on vk.vom recently

background: url(/images/icons/mono_iconset.gif?8) no-repeat left -237px;
width: 15px;
height: 11px;

Here is this spritesheet: Spritesheet.

How is this works?

Answer 1

? has nothing to do here, its the left -237px which determines which icon to show.

It is the background-position: x y along with height that determines which part of an image needs to be shown.

More about css sprites http://cssglobe.com/creating-easy-and-useful-css-sprites/

Answer 2

Seems that the URL parameters have nothing to do with the spritemap itself.

Different heights, on the other hand, are handled by the height in the CSS you provided. Moreover, the y-offset determines which icon will be used.

Answer 3

The URL parameter is probably inserted to avoid problems with caching when deploying a new version of that stylesheet. If you append something using the query string (like ?8), the browser will be tricked into thinking this is a whole other file, so it will discard the cached file and download the new one instead.

The "trick" you are looking for is a CSS sprite. Basicly, every icon is loaded into a single image and the icons in the sprite are used as a background image for a fixed-width container (like an anchor with display: block; or a div). Then, when playing around with the backgound-position property, different parts of the sprite will be visible.

Read more about CSS sprites in this article.