Als CSS-Sprites werden Grafikdateien bezeichnet, in denen mehrere Icons und Symbole zusammengefasst werden. Entstanden sind die Sprites bereits in einem frühen Stadium der Computerspiele. Damals bestand die Anforderung darin, den Bedarf an Rechen- und Speicherleistung bei der Darstellung zu verringern. Die dabei gewonnenen Erkenntnisse werden heute bei der Programmierung von Websites eingesetzt. Hier werden die CSS-Sprites vor allem mit dem Ziel der Reduzierung der Ladezeiten verwendet. Sie stellen eine gangbare und flexible Alternative zu den ebenfalls möglichen Icon Fonts dar. Die erste Dokumentation dieser Technik zur Gestaltung von Websites stammt aus dem Jahr 2004 und wurde im Fachmagazin „A List Apart“ publiziert.
Schon beim Aufruf einer Website wird die komplette Grafik in den Cache des Browsers geladen. Mit den Eigenschaften „background-position“ und „background-image“ muss der Programmierer angeben, welche Ausschnitte der Grafik bei welchen Aktionen angezeigt werden. Das heißt, die obere Ebene der Darstellung enthält eine Art Maske. Dahinter wird die Grafik bedarfsgesteuert verschoben, sodass nur der jeweils benötigte Ausschnitt in den sichtbaren Bereich gelangt. Auf diese Weise können mit CSS3 Grafiken auch animiert werden, ohne dafür eine GIF-Datei verwenden zu müssen. Außerdem bieten sich die CSS-Sprites als Alternative zu den Image Maps an.
Für das einmalige Laden einer umfangreicheren Grafik benötigt der Browser weniger Zeit als für das Laden zahlreicher kleiner Grafiken. Der Grund dafür sind die Beschränkungen der parallelen Downloads durch die HTTP-Spezifikationen. Ein Nachladen der Grafiken bei Nutzeraktionen wird dadurch überflüssig. Das heißt, die Anzeige der Website kann wesentlich schneller auf Aktionen des Nutzers reagieren. Außerdem wird durch die Sprite-Technik die Anzahl der HTTP-Abrufe der Clients beim Server erheblich verringert. Das bewirkt eine Entlastung der Server und kommt ebenfalls schnellen Antwort- und Ladezeiten zugute.
Bekannte Nutzer der Vorteile der CSS-Sprites sind Amazon, Facebook, Google sowie XING und Yahoo!. Diese Technologie wird inzwischen von zahlreichen Themes für die gängigen Content Management Systeme unterstützt. Das typische Beispiel sind die Farbwechsel beim Überfahren der einzelnen Positionen in der Hauptmenüleiste sowie in den Drop-Down-Menüs.
Interessiert? Erfahren Sie mehr zum Thema "CSS-Sprites" - kontaktieren Sie uns jetzt
Unter der Überschrift „Kreation“ vereinen wir die 4 Kernkompetenzen von baseplus®: Das Design, die Entwicklung, das Online Marketing und Print, in der jeweils anmutenden Farbe. Das konsequente Color-Coding dient der optimierten Benutzerführung, die Claims kommunizieren jeden Bereich zusätzlich.
Klicken Sie hier, um zu sehen was wir meinen