CSS Sprites – Icons und Hintergründe richtig einbinden

Icons und auch Hintergrundgrafiken sind Bestandteil vieler Layouts. Gerade je größer die Seite wird, desto eher kommen auch gerade Icons zum Einsatz. Auf der anderen Seite möchte man die Anzahl der Dateien, und der Zeilen im Quellcode möglichst gering halten.
Eine gute Möglichkeit die Dateigröße, und die Anzahl der einzelnen Dateien zu verringern ist CSS Sprites.

Sprites stammen aus Zeiten, in denen der verwendete Festplatten- und Grafikspeicher noch sehr begrenzt war. Die Technik kam vor allem bei Computerspielen zum Einsatz. Anstatt für jedes Element ein neues Bild in den Grafikspeicher schreiben zu müssen, wurde durch die Sprites-Technik einfach der dargestellte Bildausschnitt verschoben.
Diese Technik können wir auch im Web hervoragend anwenden. Gerade Grafiken, wie Icons, haben fast immer dieselbe Größe und fressen unnötig Platz auf der Festplatte, da sie gar nicht so groß wie der angelegte Speichersektor sind.
Speichern wir also alle Icons in eine Datei. Als Beispiel habe ich ein paar Icons von FamFam gewählt und zusammen in ein File abgespeichert.

Nun legen wir im CSS die Klassen für die Icons an. CSS Sprites benötigt zur Darstellung einzelner Icons mehr Code, als bei einzelnen Grafiken nötig wäre. Im Endeffekt rechnet sich diese CSS Sprits, dennoch sollten wir versuchen das CSS so kurz wie möglich zu halten.

 
.icons {
  width:16px;
  height:15px;
}
.icon_fail {
  background:left top;
}
.icon_cart {
  background:-16px top;
}
.icon_glock {
  background:-32px top;
}
.icon_folder {
  background:-48px top;
}
.icon_cake {
  background:-64px top;
}
.icon_car {
  background:-80px top;
}
.icons {
  background-image: url(icons.png);
  background-repeat:no-repeat;
}
 

Vielleicht kann man bereits erahnen, das im CSS passiert. Aber lasst uns gleich weitermachen: Mit der Anzeige. Dazu brauchen wir lediglich ein 1px-großes Gif. Dieses benennen wir als space.gif und binden folgenden Code ein, um ein Icon darzustellen:

 
<img src="space.gif" alt="Icon" class="icons icon_fail" />
 

Angezeigt wird unser Fail-Icon. Gleiches funktioniert natürlich auch mit jeder anderen Klassenkombination.

Das CSS ist auf den ersten Blick etwas unlogisch aufgebaut, und könnt besser geschrieben werden. Es hat allerdings einen Grund, dass ich den obign Aufbau gewählt habe.

Bei der ersten Definition von icons setze ich die Standardwerte wie Breite und Größe. Auch die Definition von vertical-align wäre hier sinnvoll. Es sollte sich dabei nur um Werte handeln, die von bestimmten Icons bzw. Bildern überschrieben werden könnten.
Nach der Definition von icons werden die einzelnen Icons definiert. Anstatt von background hätte man natürlich auch background-position verwenden können. Zumindest die Lesbarkeit hätte das verbessert. Allerdings sparen wir uns für jedes Icon ein -repeat. Bei 6 Icons mag das noch nicht viel sein, aber nehmen wir an, wir binden auf diese Weise 20 Icons ein...
Nach der Definition der einzelnen Icons definieren wir noch das background-image und background-repeat. Die Eigenchaft background können wir an dieser Stelle leider nicht verwenden, da sie die vorigen Positionen überschreiben würde.