CSS Sprites & Clipping Paths

In his article ›A (so-called) Sprite Revolution‹, Nils Lauk from Xing introduces a really convincing mechanism to make efficient use of sprites (aka ›pixmaps‹). In short, they gain from sensible names and automated sprite generation for their Icons every time changes are made.

As a slight drawback, one has to be carefully when Icons are placed not in the top left-hand corner and the element has a high line-height. In addition, unforeseen variations in text-volumes or line height can be tricky as it may reveal unwanted areas. Xing uses blank images to ensure only the desired area is cropped out. Fair enough from my point of view but I don’t consider blank images the preferred way to achieve semantically and clutter-free markup.

It came into my mind how I’ve read about something like background-clipping the other day. Mozilla made a good point with -moz-image-rect but it is far from being widely available. Thus, the best approach I am aware of is to inject an additional element using the :before pseudo-selector.

The above is achieved across all major browsers by the following:

.icn-dog
{
	list-style-type: none;
	padding-left:20px;
}

.icn-dog:before
{
	background: url(icons_trans.png)
			-20px 0 transparent no-repeat;
	height:20px;
	width:20px;
	margin-left:-20px;
	margin-top: -20px;
	vertical-align:bottom;
	content:"";
	display:inline-block;
}

To address a bunch of icons with the same dimensions I’d go for combined style declarations like the following:

/* unified style definitions */
.icn-dog,
.icn-cat,
.icn-mouse
{
	list-style-type: none;
	padding-left:20px;
}

.icn-dog:before,
.icn-cat:before,
.icn-mouse:before
{
	background: url(icons_trans.png)
			0 0 transparent no-repeat ;
	height:20px;
	width:20px;
	margin-left:-20px;
	margin-top: -20px;
	vertical-align:bottom;
	content:"";
        /* display: inline-block for any browser */
	display:table-cell;
	display:inline-table;
	display:inline-block;
}

/* specific style definitions */
.icn-dog:before
{
	background-position: 0 0;
}

.icn-cat:before
{
	background-position: 0 -20px;
}

.icn-mouse:before
{
	background-position: 0 -40px;
}

As you see I tried to target as many browsers as possible using alternatives for ‘display:inline-block’. The only one left behind was IE<=7 at this point due to the lacking :before-selector support.

Luckily there is a way to get decent CSS play nice even with IE6. And, by decent CSS I am not referring to gradients, rounded corners and text shadows introduced with CSS3. I am simply keen on the :before selector which belongs to CSS2.1.

After some trial and error I came to the above CSS which works even Internet Explorer 5.5 with the help of ie7.js. It is as simple as adding the following to your head:

<!--[if lt IE 8]>
    <script src="path-to/IE8.js" type="text/javascript">
    </script>
<![endif]-->

By adding ie7.js the whole shebang of neat CSS selectors is at hand, including :nth-child, :only-child, :nth-of-type, :first-of-type, :not and more, so latest CSS standards are ready to use, even when you have to satisfy IE 5.5 users.