201012Jan

CSS: Sprites für Hintergrundbilder richtig verwenden

Bei der Umsetzung von Website-Layouts in HTML/CSS stellt das Zuschneiden und Exportieren von Grafiken einen Punkt dar, der unter Umständen sehr aufwendig sein kann. Ein Mehraufwand entsteht zum Beispiel durch die Verwendung von CSS-Sprites, da die Bildelemente neu geordnet und in einem Bild zusammengeführt werden müssen. Allerdings bieten CSS-Sprites den Vorteil, dass weniger Dateien anfallen — somit reduziert sich auch die Anzahl der benötigten Anfragen (Requests) einer Website. Dennoch sollten CSS-Sprites auch richtig im CSS-Code benutzt werden, was nicht selbstverständlich ist.
Zur Erinnerung die Funktionsweise von Sprites:

CSS - background-position

Die Grafiken, die ein Sprite enthält, können also frei platziert sein. Für die Positionsangabe im CSS-Code sind lediglich die Koordinaten des gewünschten Ausschnitts wichtig, der gezeigt werden soll.

CSS-Sprites machen erst Sinn, wenn mindestens 2 Grafiken in einer Hintergrundgrafik eingebettet sind. Dies kann beispielsweise bei grafischen Navigationen der Fall sein, wenn sich die einzelnen Menüpunkte voneinander unterscheiden (wie etwa auf dieser Website).
Das CSS-Attribut, das für Sprites wichtig ist, stellt "background-position" dar. Die Eigenschaft "background-repeat" sollte auf "no-repeat" eingestellt sein.

Ein mögliches Beispiel für eine Navigation, die ein Sprite als Hintergrundbild nutzt:

  • a#menu_element1 {
  • background:url(sprite.png) no-repeat 0 0;
  • }
  •  
  • a#menu_element2 {
  • background:url(sprite.png) no-repeat -80px 0;
  • }
  •  
  • a#menu_element3 {
  • background:url(sprite.png) no-repeat -160px 0;
  • }

Das CSS-Sprite würde also 3 Menügrafiken enthalten, die jeweils 80 Pixel breit und horizontal angeordnet wären. Die Kurzform (Shorthand) von "background" bietet sich generell für Hintergrundgrafiken immer an. Allerdings würde sich der Einsatz von einem CSS-Sprite in diesem Beispiel nicht auszahlen, da 3 Anfragen an den Browser gestellt werden. Optimal wäre ein einzelner Request für das Sprite, weshalb der Code so aussehen sollte:

  • a#menu_element1,
  • a#menu_element2,
  • a#menu_element3 {
  • background-image:url(sprite.png);
  • background-repeat:no-repeat;
  • }
  •  
  • a#menu_element1 {
  • background-position:0 0;
  • }
  •  
  • a#menu_element2 {
  • background-position:-80px 0;
  • }
  •  
  • a#menu_element3 {
  • background-position:-160px 0;
  • }

Somit wird die Grafik "sprite.png" nur einmal angefordert und das Sprite kommt seinem eigentlichen Einsatzzweck nach.

Ob sich CSS-Sprites lohnen, sollte man stets in Relation zu den gesamten Grafiken sehen, die bei einer Website anfallen. Zudem eignen sich Sprites auch nicht in allen Fällen, da der sichtbare Bereich von DOM-Elementen auch größer sein kann als der Ausschnitt der Hintergrundgrafik, der gezeigt wird.

RSS-Feed abonnieren Bookmark bei Del.icio.us