Nach Teil 1 “messen der Geschwindigkeit” und “serverseitige Komprimierung”, Teil 2 “Javascript und CSS Minify” und Teil 3 “Reduzierung von HTTP-Requests” ist das heute der letzte Teil (4).

Nutzung von CSS-Sprites

Die Verwendung von Sprites kommt aus der Zeit der 8bit Computerspiele hier wurden, um nicht ständig Bilder in den Speicher nachladen zu müssen, mehrere Bilder auf einem vereinigt und mittels Positionierung des einen im Speicher befindlichen Bildes genau der Bereich angezeigt der benötigt wurde. Vielleicht haben sich ein paar von euch mal die Skins von Winamp 2 angesehen auch hier wurden alle Elemente an bestimmten Positionen auf ein Bild gebracht.
Im Web können solche Sprites z.B. für Navigations-Buttons oder Icons eingesetzt werden. Bei einer Standard OL oder UL wird den einzelnen List-Items (LI) dann per CSS ein Hintergrund-Bild zugeteilt und entsprechend Positioniert. Hover-Stadien können so auch direkt mit in den Sprite eingebunden werden und man spart sich JavaScript.
Als kleines Beispiel habe ich hier folgendes Bild verwendet:

Die Einzelnen “Buttons” sind 64px breit und 40 Pixel hoch. Im Body wird eine einfache Liste erstellt:

<ol id="navigation">
   <li id="item1"></li>
   <li id="item2"></li>
   <li id="item3"></li>
</ol>

Das CSS beinhaltet allgemeine Angaben für die Listenelemente und dann die einzelnen Angaben für die Positionierung des “Normal”- und des “Hover”-Zustandes.

#navigation li {
   list-style: none;
   float: left;
   width: 64px;
   height: 40px;
   margin: 0 12px;
}
#item1 {background: url("css-sprite.png") 0 0 no-repeat;}
#item2 {background: url("css-sprite.png") -65px 0 no-repeat;}
#item3 {background: url("css-sprite.png") -130px 0 no-repeat;}
#item1:hover{background: url("css-sprite.png") 0 -41px no-repeat;}
#item2:hover{background: url("css-sprite.png") -65px -41px no-repeat;}
#item3:hover{background: url("css-sprite.png") -130px -41px no-repeat;}

Hier noch der komplette Quelltext als ZIP: hpbw.de css-sprites