Clever Facebook CSS icon hack

Facebook has blown my mind.

It's not their content or business model that's done it. It's their CSS. Many of the small icons you see on their site, like the flags, the calandar, even the "like" hand, are all part of one graphic that looks like this:

This is a common strategy for old video games: combine many of your images into one graphic and then carve up the individual cells in memmory. This saves file system handles and load times.

But this trick can't be applied to HTML/CSS. The value in a multi-graphic like this is that browsers will cache this one asset and reuse it many times for one page. That means fewer HTTP requests to FB's servers and faster page load times for the end user. Epic Win.

But how does this work? The answer lies in the same tricks used to apply gradient effects: positioning the asset as a background image and creating a small viewport with the box model. Here's the magic:

<style type="text/css">
.tryme {
  background-image: url("facebook_icons.png");
  background-position: -57px -147px;
  height: 13px;
  width: 15px;
}
</style>
<div class="tryme"> </div>

This is a good hack!