Sprites zum Speichern von Icons verwenden

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Um Bandbreite zu sparen, wollen Sie alle Icons in einer gemeinsamen Bilddatei speichern.

Lösung

Speichern Sie die häufig verwendeten Grafiken in einer gemeinsamen Datei, und stellen Sie dabei sicher, dass um jedes Bild herum genügend Platz ist (siehe nächste Abbildung). Ohne diese Maßnahme würden sich die Icons ganz oder teilweise mit der Überschrift überschneiden. In unserem Beispiel wird jeweils ein Icon in der Nähe einer Überschrift platziert (siehe übernächste Abbildung):

Icons werden in gemeinsamen Bilddatei gespeichert

Abbildung: Die Icons werden in einer gemeinsamen Bilddatei gespeichert.

h2 {
 margin: 0;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 padding: 0 0 0 24px;
 font-weight: normal;
}

Bei Gestaltung muss genügend Platz für Icons gelassen werden

Abbildung: Bei der Gestaltung muss genügend Platz für die Icons gelassen werden.

Mit Hilfe von ID-Selektoren und der Eigenschaft background-position können Sie den Überschriften bestimmte Icons zuweisen (siehe folgende Abbildung):

h2#warning {
 background-image: url(sprite-source.gif);
 background-repeat: no-repeat;
 background-position: -16px 24px;
}
h2#questions {
 background-image: url(sprite-source.gif);
 background-repeat: no-repeat;
 background-position: -16px 60px;
}
h2#comment {
 background-image: url(sprite-source.gif);
 background-repeat: no-repeat;
 background-position: -16px 96px;
}
h2#document {
 background-image: url(sprite-source.gif);
 background-repeat: no-repeat;
 background-position: -16px 132px;
}
h2#print {
 background-image: url(sprite-source.gif);
 background-repeat: no-repeat;
 background-position: -16px 168px;
}
h2#search {
 background-image: url(sprite-source.gif);
 background-repeat: no-repeat;
 background-position: -16px 204px;
}

Alle dargestellten Icons entstammen gleichen Bilddatei

Abbildung: Alle dargestellten Icons entstammen der gleichen Bilddatei.

Diskussion

Einige Entwickler verwenden das gleiche Bild in einer Website immer wieder. Auf diese Weise machen sie sich das lokale Zwischenspeichern der Datei durch den Browser zunutze. Der Einsatz von Sprites treibt dieses Konzept noch ein wenig weiter. Durch das Speichern mehrerer Einzelbilder in einer gemeinsamen Datei können Webentwickler die Anfragen an den Webserver gering halten. Diese Lösung eignet sich allerdings eher für Websites mit mittlerem bis hohem Traffic.

Siehe auch

Den Artikel zu CSS-Sprites.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln