User Theming mit transparenten CSS-Sprites

Trevor Morris

Eine der nützlichsten Techniken in der Frontend-Entwicklung sind die schlichten CSS-Sprites. Im Webdesign stehen Sprites (englisch gleich Kobold, schemenartige Erscheinung) für Grafikdateien, die aus vielen kleinen Einzelgrafiken zusammengesetzt sind. Sie werden für Navigationen, sonstige Hover-Effekte oder zum Tauschen von Header-Grafiken eingesetzt. Vor allem aber vermindern sie die Ladezeit einer Website zum Teil erheblich.

Sprites sind also eine Sammlung verschiedener Grafiken, wie zum Beispiel Icon-Sets, in einer einzigen Datei. Per CSS weisen Sie DIV-Containern oder Menupünkten für das Hintergrundbild statt einer URL für ein neues Bild per background-position lediglich eine neue Position zu, um den gewünschten Bildausschnitt zu zeigen. Das ist so ähnlich als wenn ein großes Objekt, etwa ein Zeppelin, an einem Hochhausfenster vorbeifliegt. Vom Zeppelin sehen Sie immer nur das, was gerade im Rahmen des Fensters erscheint.

Schnellere Ladezeiten dank CSS-Sprites

CSS Sprites sind eine anerkannte und weit verbreitete Technik. Durch die Empfehlungen einer Yahoo-Dokumentation, die CSS-Sprites als Mittel zum Beschleunigen von Websites propagierte, wurden CSS-Sprites sehr bald von hochperformanten Internetauftritten, darunter Google und Amazon, implementiert. Es gibt zahlreiche Tutorials, die Ihnen helfen, diese Technik zu meistern. Die Grafiken können Sie anschließend per Sprite Generator zusammen setzen.

Die Vorteile

CSS Sprites haben sich als „die“ Technik zum Beschleunigen von Websites und Web-Anwendungen durchgesetzt. Das Zusammenfügen vieler einzelner Bilder in einer Grafikdatei reduziert die Zahl der erforderlichen HTTP-Anfragen einer typischen Website erheblich. Da die meisten Browser für eine Domain lediglich zwei bis sechs gleichzeitig ablaufende Dateianfragen an eine (Sub-)Domain stellen können. Selbst wenn das zusammengesetzte Bild auf eine beachtliche Dateigröße anwächst, sind die Ladezeiten der Website insgesamt dank der entfallenden Serveranfragen und dem Wegfall der Request- und Response-Header für die einzelnen Bilddateien wesentlich kürzer. Wenn Bilder mit ähnlichen Farbpaletten in einem Sprite zusammengefasst werden, werden auch die Informationen für Farbwerte und Komprimierung nur einmal benötigt, anstatt für jede Bilddatei extra. Die Dateigröße des Sprites kann im Vergleich zur Summe der einzelnen Bilder daher deutlich kleiner sein.

Die Probleme

Diese Vorzüge von CSS-Sprites werden oft und gerne genannt, die potentielle Probleme werden dagegen selten diskutiert. Eines der technischen Probleme ist die Speicherplatzbelegung bei Verwendung von Sprites mit Alpha-Transparenz, wie im Blogpost “To Sprite Or Not To Sprite” von Vladimir Vukićević dargelegt.

Ein weiteres Problem ist die Wartung von Sprites, was sowohl die Bilder als auch den CSS-Code betrifft. Beides kann recht kompliziert werden.

Die Upgrade-Mentalität

Eine übliche Praxis im Kampf gegen lange Lade- oder Rechenzeiten ist der Einsatz von mehr Hardware. Wir wissen alle sehr wohl, dass die Preise für Hardware ständig fallen – so gesehen, scheinen größere Festplatten und schnellere Prozessoren eine gute Lösung zu sein. Ich finde jedoch, dass diese Philosophie oder Mentalität in sich einen entscheidenden Schwachpunkt birgt.

Entwickler haben ebenfalls Zugang zu schnelleren Rechnern, das heißt sie codieren auf Basis dieser und für diese ständig schneller werdende Infrastruktur, was zu immer speicherplatzhungrigeren und komplexeren Anwendungen führt. Egal wie leistungsfähig die neue Hardware ist, bleibt aufgrund der ebenfalls ständig größer und rechenintensiveren Programme und Anwendungen nicht mehr freie Speicherkapazität und Rechen-Power übrig. Dies ist eine endloser Kreislauf.

Viele der aktuell verfügbaren Anwenderschnittstellen finden sich heute im Internet. Das bedeutet, dass die Anwender den Großteil der dazugehörigen Komponenten, wie Bilder, CSS-Dateien, JavaScript) herunterladen müssen, bevor sie mit den eigentlichen Inhalten interagieren können. Die gleiche Philosophie, des immer mehr, gilt also auch fürs Web. Websites haben sich in jüngster Zeit zu Web-Anwendungen entwickelt. Viele Web-Apps ersetzen Desktop-Anwendungen wie Tabellenkalkulationen oder Projektmanagement-Software. Anwender müssen mehr und mehr herunterladen, bevor sie in den Genuss der Benutzererfahrung kommen.

Obwohl die Dateigrößen Internetseiten dramatisch gestiegen sind, werden sie dennoch angesehen, weil mehr und mehr Menschen auf Breitband-Internetverbindungen umsteigen und damit immer größere Dateien und Live-Streams aufrufen und herunterladen können. Dieser Trend steht im Einklang mit der Hardware-Upgrade-Philosophie und sollte theoretisch jedwede Probleme hinsichtlich User Experience erfolgreich verhindern.

Allerdings tappen Web-Entwickler in die gleichen Fallen wie Software-Entwickler. Die Folge: Web-Layouts werden stets komplexer. Es werden mehr Bilder gewünscht, und so werden Websites grafisch aufwändiger bebildert – egal ob Einzeldateien oder Sprites. Das scheint die angemessene Reaktion zu sein, es ist jedoch nicht die beste Lösung.

Technische Abwandlung

Wegen der systembedingten Einschränkungen hat es für Web-Anwendungen sehr viele findige Lösungen technischer Probleme gegeben. Das gilt jedoch nicht fürs Internet. Innovation ist aus der Not geboren. Ein schönes Beispiel dafür ist das Spiel mit den Kultfiguren Super Mario Brothers, bei dem die Büsche umgefärbte Wolken sind.

Diese absolut einfache, aber äußerst effiziente Anwendung von Sprites hat mich zu der Überlegung animiert, wie man Benutzern mit dem mehrfachen Gebrauch üblicher Bedienelemente suggerieren kann, dass ein- und derselbe Button ein ganz anderer ist.

Nun zu meiner Idee: Sie basiert darauf, ein transparentes Sprite zu erstellen, so dass die Hintergrundfarbe durchscheint. Wenn Sie mit CSS-Sprites vertraut sind, werden Sie diese kleine Abwandlung schnell und einfach nachbauen können.

Man nehme ein Bild mit einem transparenten Mittelpunkt und legt es über eine Hintergrundfarbe. Das Wechseln der Hintergrundfarbe ändert demzufolge auch das Erscheinungsbild des darüberliegenden Elements. Sie müssen nur darauf achten, dass die das transparente Element umgebende Farbe zur Farbe des Hintergrunds passt, auf den Sie diese Technik anwenden. So vermeiden Sie, dass die Hintergrundfarbe sich mit anderen Farben Ihres Bildes beißt.

Wie auch immer, ein Beispiel erklärt das viel besser …

Praktisches Beispiel

Das folgende Beispiel besteht aus drei Bildern. Eins für alle Schriftarten, ein Bild für beide Tropfen-Sets inklusive Hover- und Active-Zustand und ein drittes Bild für alle Schaltflächen. Das dazugehörige CSS-Stylesheet inklusive JavaScript beziehungsweise jQuery können Sie als Zip-Archiv herunterladen.

Die Bilder

Schriftarten

Das Bild mit den Fontbeispielen enthält transparente Schriftzüge auf weißem Hintergrund – sprich: Auf weißem Hintergrund sind sie nicht sichtbar. Speichern Sie das Beispielfoto, öffnen Sie es in Ihrer bevorzugten Bildbearbeitung, dann können Sie die transparenten Schfriftzüge sehen.

Tropfen

Das Tropfenbild dient im obigen Beispiel als Farbwähler. Eine einzelne Grafik enthält den Tropfen mit dem Farbverlauf auf zwei verschiedenen Hintergründen. Damit wird  background-color korrekt maskiert. Das Bild enthält alle drei in modernen interaktiven Benutzerschnittstellen üblichen Stati – statisch, hoverend/hervorgehoben, gedrückt/aktiv.

Schaltflächen

Bei den Buttons kommt die flexibelste und wahrscheinlich auch für andere Anwendungsfälle nützlichste Technik zum Einsatz. Ein einfaches Sprite, in dem zwei Stati zusammengefasst sind:  — statisch und hoverend/hervorgehoben — was anschließend über den Text gelegt wird, um die Schaltfläche zu erzeugen. Sie müssen nur noch eine Hintergrundfarbe über background-color zuweisen und schon haben Sie in Form und Größe absolut identische und auf sämtlichen Seiten Ihres Internetauftritts einheitliche Schaltflächen mit individuellen Farben und Beschriftungen.

Nachstehend ist der passende CSS-Code, der einfache Button mit fester Breite und grauer Hintergrundfarbe erzeugt. Zudem bietet er zwei verschiedene Zustände, nämlich „Vorsicht“ und „Weiter“, mit den Hintergrundfarben Rot beziehungsweise Grün.

a.button {
  display: block;
  width: 80px; height: 30px;
  margin: 0 20px;
  font-size: 14px; line-height: 30px; color: #fff;
  text-align: center; text-decoration: none;
  background: #4a4a4a url(button.png) no-repeat 0 0;
}
a.button:hover,
a.button:focus,
a.button:active {
  background-position: 0 -40px;
}
a.button.warning {
  background-color: #ea1d22;
}
a.button.go {
  background-color: #309721;
}

Dieser CSS-Schnippsel produziert die folgenden Schaltflächen:

• Normal
• Button
• Continue
• Go!
• Stop!

Fazit

Diese Technik ist sehr nützlich, wenn Sie Icon-Sets oder andere Sets grafischer Elemente für eine Website benötigen. Sie müssen nur einen Satz Schaltflächen oder Symbole erstellen, dann wählen Sie eine Hintergrundfarbe, die am besten zum Theme oder Template Ihrer Website passt.

Obwohl diese Technik vermutlich nie so weit verbreitet sein wird wie die eigentlichen CSS-Sprites, kann diese Methode jedoch sehr nützlich sein, wenn Sie Anwender verschiedene Themes wählen lassen wollen. Oder Sie können das für HTML-Mockups einsetzen. Der Kunde kann dann sehr schnell sehen, wie das Theme der Website mit einer anderen Farbpalette aussehen würde.

Hauptvorteil: Diese Technik reduziert die Anzahl der HTTP-Anfragen. Außerdem verringert es den Speicherverbrauch des Browsers gegenüber einem größeren CSS-Sprite, der Bilder in allen von Ihnen eingesetzten Farben beinhaltet.

Einen Nachteil muss ich auch noch erwähnen: IE6 unterstützt standardmäßig keine transparenten PNG-Dateien. Es gibt PNG-Hacks. Die CSS-Eigenschaft  background-position wird jedoch nicht unterstützt. Mit einer Ausnahme: Der IE-PNG-Fix von TwinHelix unterstützt background-position, erfordert aber JavaScript. Transparenz ist jedoch erforderlich für CSS-Sprites mit solchen Schaltflächen und Tropfen, wie sie oben dargestellt sind. Sie können sich damit behelfen, indem Sie GIFs einsetzen.

(mm),