Abro, August 2009

CSS + HTTP-Requests, oder CSS-Sprites und was niemand sagt

CSS-Sprites sind mittlerweile wohl bei jedem Webdesigner angekommen, als Mittel zur Reduzierung der HTTP-Requests und natürlich zum fixen der gewohnten IE-Bugs. Also Ladezeitverbesserung und Allheilmittel fürs Web2.0-Frontend. Als wir alle diese Praxis gelernt haben, hat allerdings niemand auf eine komische Stolperfalle im Browserverhalten hingewiesen, durch die man sporadisch einen Nullnutzen erzielt.

Stop: Was sind CSS-Sprites!?

CSS-Sprites sind im Grunde genau die Sprites, die wir von alten Spielen kennen. Damals wurden zwangsweise mehrere Grafiken zu einer zusammengefasst und in einem Rutsch geladen. Das ganze hatte einfach Geschwindigkeitsvorteile auf den alten Systemen, genau wie in Webbrowsern heute noch.

Vorstellen kann man sich diese Multigrafiken wie eine Tabelle. In jede Zelle kommt eine Grafik. Z.B. “menu-default.png”(100px) und “menu-hover.png”(100px). Das speichern wir als “menu-all.png”(200px) und da drüber kommt jetzt abstrakt gesagt ein Blatt Papier mit einem Loch(100px) drin. Natürlich ist das Blatt Papier ein HTML-Element, aber ich finde so ists verständlicher. Also das perforierte Papier kommt über die Grafik und wenn wir letztere schnell genug unter dem Blatt hin und her bewegen (um 100px ;o) haben wir uns damit einen tollen Hovereffekt gebaut, für den wir nur eine URL (menu-all.png) benötigen.

Viel genauer mag ich darauf auch gar nicht eingehen, andere Blogger können das viel besser erklären. Ich hab da mal kurz gegooglet.

Was niemand zu HTTP-Requests sagt

Nun zum eigentlichen Thema, die HTTP-Requests und sporadisch auftretendes Mehrfachladen der selben Grafiken. Es ist ganz wunderbar, dass wir mit CSS-Sprites einiges an Ladezeit sparen können. Pech nur wenn eins zum andern kommt.

Man kann Grafiken zusammenfassen wie man lustig ist, wenn man diese in der CSS-Datei mehrfach referenziert, dann werden sie auch unter gewissen Umständen mehrfach geladen. Dieses Verhalten der Browser ist auf deutsch gesagt eigentlich ganz schön bescheuert und war für mich auch nur bedingt reproduzierbar, weshalb wohl das Thema noch nirgends aufgeflackert ist. Ich bin mir recht sicher, dass sich diesbezüglich nicht alle Browser gleich verhalten, bin mir aber unschlüssig wie viele Fälle es gibt in denen das Verhalten auftritt. Chrome und Safari traue ich in dieser Hinsicht mehr zu als Firefox, mit dem man unter Zuhilfenahme von Firebug1.4 folgendes Testcase prüfen kann:

Test-1.html, ein HTTP-Request / Test-2.html, zwei HTTP-Requests. Jeweils nur eine Grafik für zwei Divs. Interessant wird das erst, weil sich die Divs auch noch in der Hintergrundfarbe unterscheiden sollen (ist Quatsch solange kein Padding verwendet wird, aber das soll uns nicht stören). Schlussfolglich wäre es eine kürzere und übersichtlichere Schreibweise die Grafik-URL zweimal anzugeben.

1
2
3
4
5
<!-- HTML -->
<div id="test-area">
  <div class="foo"></div>
  <div class="bar"></div>
</div>
1
2
3
4
5
/* CSS kurz, aber zwei HTTP-Requests */
#test-area .foo
{ background  : #000 url(1.png) 0 0 no-repeat; }
#test-area .bar
{ background  : #fff url(1.png) 0 -100px no-repeat; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* CSS lang, aber nur ein HTTP-Request */
#test-area .foo, #test-area .bar
{
  background-image    : url(1.png);
  background-repeat   : no-repeat;
}
#test-area .foo
{
  background-color    : #000;
  background-position : 0 0;
}
#test-area .bar
{
  background-color     : #fff;
  background-position  : 0 -100px;
}

Zugegebenermaßen kann man die lange CSS-Version auch kürzer schreiben, allerdings baut man dadurch eine unübersichtliche Abhängigkeitskette auf. Wie dem auch sei – Test-Seite 2 öffnen, Firebug1.4 öffnen, [Strg]+[F5] = 2 HTTP-Requests.

Was folgt daraus

Man sollte sich bei High-Traffic Websites überlegen Grafik-URLs nur einmal zu referenzieren, wenn CSS-Sprites benutzt werden um HTTP-Requests zu sparen. Da das Mehrfachladen aber beim normalen Seitenaufruf nur sporadisch auftritt und für mich nur per [Strg]+[F5] wirklich reproduzierbar ist, muss man sich die Mühe wohl im Normalfall nicht machen. Ich würde mich aber sehr freuen wenn jemand weitere Informationen zu diesem abstrusen Browserverhalten parat hätte.

[Update 2012]

Der Fehler tritt in aktuellen FireFox-Versionen zum Glück nicht mehr auf.



Ein kreativer Kommentar

  1. CSS-Kobold, 08.12.2009 12:56h

    Danke, sehr interessante Infos. Beschäftige mich auch gerade ein wenig mit CSS … wirklich sinnvoll scheint die ganze Sache mit den Sprites nur bei sehr vielen Grafiken zu werden.

Kommentare sind geschlossen.
Aufgrund interner Umstrukturierungsmaßnahmen ist es uns z.Zt. leider nicht
möglich auf neue Kommentare zu reagieren. Wir bitten dies zu entschuldigen.
Bei dringenden Rückfragen suchen Sie bitten den direkten Kontakt zu uns.
Das Unternehmen Lucido Media GbR wurde am 31.12.2013 stillgelegt. Diese Website existiert weiterhin zu Archivzwecken. Der Gesellschafter Daniel Abromeit führt seine Arbeit ab sofort unter dem Dach der Agentur Koch Essen fort. Für entsprechende Anfragen wenden Sie sich daher bitte an http://koch-essen.de/kontakt/