Wie werden CSS-Sprites auf einer Seite oder Website…

CSS-Sprites werden durch die Kombination mehrerer kleiner Bilder in eine große Datei (Sprite) realisiert, wobei dann der benötigte Teil dieses großen Bildes auf den Seitenelementen mit CSS angezeigt wird.

Hauptschritte:

Erstellung des Sprites: Alle Bilder, die kombiniert werden sollen (Icons, kleine Hintergründe usw.), werden in ein einzelnes Bild eingefügt. Dies kann manuell in einem Grafikeditor oder mit automatischen Tools/Generatoren für Sprites erfolgen.
Anwendung von CSS: Für jedes Element, in das ein Bild aus dem Sprite "eingefügt" werden soll, werden folgende CSS-Eigenschaften gesetzt:
- background-image: Gibt den Pfad zur Sprite-Datei an.
- background-repeat: no-repeat;: Deaktiviert die Wiederholung des Hintergrundbildes.
- background-position: Bestimmt die Koordinaten der oberen linken Ecke des Teils des Sprites, der angezeigt werden soll. Diese Koordinaten geben die Verschiebung horizontal und vertikal vom oberen linken Rand des Elements an.
- width und height: Legen die Größe des Bereichs fest, in dem der Sprite-Teil angezeigt wird. Diese Größen entsprechen in der Regel der Größe des ursprünglichen Icons oder Bildes.

Beispiel für die Verwendung bei zwei Icons im Sprite:

/* Sprite-Datei: icons.png */

.icon {
  background-image: url('icons.png'); // Pfad zur Sprite-Datei
  background-repeat: no-repeat; // Nicht wiederholen
  width: 32px; // Breite des Elements
  height: 32px; // Höhe des Elements
  display: inline-block; /* Oder eine andere Methode, um das Element block/inline-block zu machen */
}

/* Icon 1: befindet sich im Sprite bei 0, 0 */
.icon-home {
  background-position: 0 0;
}

/* Icon 2: befindet sich im Sprite bei -40px, 0 (z.B. wenn zwischen den Icons 8px Abstand sind) */
.icon-settings {
  background-position: -40px 0;
}

Vorteile:

Reduzierung der HTTP-Anfragen: Statt mehrerer Anfragen lädt der Browser nur eine Sprite-Datei, was die Ladezeit der Seite verkürzt.
Caching: Es wird nur eine große Datei zwischengespeichert, anstatt vieler kleiner.

Nachteile:

Wartungsaufwand: Beim Hinzufügen/Ändern von Bildern muss der Sprite neu erstellt und die CSS-Koordinaten aktualisiert werden.
Nicht geeignet für große oder stark unterschiedliche Bilder.

Wie werden CSS-Sprites auf einer Seite oder Website implementiert?