Einbindung von CSS Sprites optimieren

In meinem Artikel zur Verwendung von CSS Sprites, habe ich empfohlen, ein transparentes Gif einzubinden, um die Icons im Hintergrund anzuzeigen. Per Kommentar wurde ich von Andi darauf hingewiesen, dass dies nicht immer sinnvoll ist. Bestes Beispiel sind Screenreader und auch mobile Webseiten.

Dem Problem mit den Screenreadern kann man natürlich damit begegnen, den Icons sinnvolle alt- und title-Attribute mitzugeben. Anstatt "Icon" sollte man natürlich "Nachricht verfassen" einsetzen. Nutzt man allerdings eine Webseite mit einer mobilen Verbindung tritt ein ganz anderes Problem auf: Das Laden der Hintergrundbilder wird von vielen Anbietern und eingesetzen Browsern verhindert. Warum?
Zum einen versuchen die Provider den Traffic möglichst klein zu halten. Durch nicht geladenen Hintergrundbilder lädt die gesamte Seite schneller und die Kosten bleiben niedrig. Die Meisten Hintergründe dienen auch nur zur Layoutgestaltung und daher nicht weiter störend.
Problematisch wird diese Praktik natürlich beim Einsatz von CSS Sprites. Das transparente GIF wird zwar angezeigt, aber das Icon im Hintergrund fehlt.

Eine gute Möglichkeit dieser Problematik zu begegen ist folgende:
Wir funktionieren den Link selbst zum Icon um. Wir machen also aus folgendem Link unser klickbares Icon:

 
<a href="http://www.milkstyle.de" title="milkstyle" class="icon">milkstyle</a>
 

Ich verzichte im Beispiel auf die Grafik und gebe dem Icon nur einen roten Hintergrund. Wir werden also ein 16x16 Pixel großes, rotes, Quadrat erhalten.

 
.icon {
  width:16px;
  height:16px;
  background: red;
}
 

Unser Link sieht nun folgendermaßen aus:

milkstyle
Ist ja nicht wirklich das gewünschte Ergebnis. Ergänzen wir unsere Klasse um weitere Angaben.

 
.icon {
  width:16px;
  height:16px;
  background: red;
  /* neu */
  display:block;
  text-indent:-999em;
}
 

Nun erhalten wir folgendes Ergebnis:

milkstyle

In meinen Augen ist das Ergebnis zufriedenstellend. Die Icons können also auch ohne transparentes GIF eingebunden werden. Allerdings gibt es hierbei einen klaren Nachteil: Bei dem Link handelt es sich (wegen der festen Höhe und Breite) um ein Block-Element. Während sich die transparente Grafik in den Textfluß eingliedern lässt, muss man dieses Ergebnis immer floaten.
Das CSS lässt sich auf so gut wie jedes andere Element anwenden und wir von allen aktuellen Browsern korrekt dargestellt. Es muss also nicht unbedingt ein Link sein, den wir zum Icon umwandeln.

Tags: CSS, Icon, Sprites, Traffic
Posted in Webentwicklung | Keine Kommentare »