Gedanken - CSS Slices
1. Ein alter Hut
... ist das, was ich euch jetzt zeige. Aber vielleicht kennen es noch nicht alle von euch. So, ihr habt mit Sicherheit schon bei Links mit Hintergrundbildern gearbeitet. Und die dann bei einem Hover ausgetauscht werden. Also eigentlich nichts Wildes. Aber! Die Sache hat aber zwei Haken.
2. Probleme
Generell
Für jedes Bild, das an den Browser gesendet wird, benötigt man einen Request an den Server. Nehmen wir einfach mal an, wir haben eine Standardformatierung für Links, wo es beim Hover aber vier unterschiedliche Zustände gibt. Die werden repräsentiert durch vier verschiedene Bilder. Also müssten für diesen Fall schon 5 Bilder separat übertragen werden. Und das dauert. Zwar nicht lange, aber es dauert.
Der Internet Explorer 6
... hat obendrein noch eine saudumme Angewohnheit. Der packt diese Hover-Hintergrundbilder nicht in den Browsercache, sondern fordert sie jedes Mal neu an. Und sobald die eine gewisse Dateigröße haben, führt das zu dem bekannten Flackereffekt. Man hat also einen Link mit einem Hintergrundbild, fährt mit der Maus darüber und zack, verschwindet es. Aber da das neue Bild erst geladen werden muss, gibt es für einen sehr kurzen Zeitraum an der Stelle nichts. Und das nervt gewaltig. Leider weiß ich nicht mehr, ob davon auch die Versionen 7 (wahrscheinlich) und 8 (keine Ahnung) betroffen sind. Bin jetzt auch zu faul, das auszuprobieren.
3. Slices
An die Grafiker und Pseudo-Webentwickler. Bitte verwechselt das nicht mit dem gleichnamigen Feature in Photoshop. Das ist etwas anderes. Also, um die oben beschriebenen Probleme zu umgehen, gibt es eine einfache Lösung. Man packt alle Varianten in ein Bild! Und tauscht dann nur noch die Positionsangaben aus.
Die Vorteile liegen auf der Hand. Es gibt nur einen Request zum Server und der Internet Explorer 6 fordert nicht jedes Mal ein neues Bild an, wenn man mit der Maus über einen Link fährt.
Die Beispieldatei
Hier packen wir einfach alle fünf Zustände untereinander. Zuerst kommt das Standardbild und dann die für den Hover-Effekt der jeweiligen Links. Wichtig ist, dass sie nicht nebeneinander stehen. Und warum wohl? Genau, weil ein Link immer in die Breite geht. Und da hätten wir dann mehrere Zustandsbilder nebeneinander.
4. Das Ergebnis
5. Der Code
... ist wirklich einfach. Man legt die Standardanweisungen für den allgemeinen Link fest und ändert über eine Klassenzuweisung beim
Pseudoelement hover nur die Positionsangabe. Aus Platzgründen habe ich diesmal die unübersichtliche Schreibweise gewählt.
a {
display: block;
background-image: url(../../pics/rotate.gif);
background-repeat: no-repeat;
background-position: 2px 2px;
padding: 9px 0 10px 40px;
border: 1px solid #00a650;
margin-bottom: 5px;
width: 100px;
color: #00a650;
}
a.a:hover {background-position: 2px -38px;}
a.b:hover {background-position: 2px -78px;}
a.c:hover {background-position: 2px -118px;}
a.d:hover {background-position: 2px -158px;}
...
<ul>
<li><a href="#" class="a">Zustand A</a></li>
<li><a href="#" class="b">Zustand B</a></li>
<li><a href="#" class="c">Zustand C</a></li>
<li><a href="#" class="d">Zustand D</a></li>
</ul>
Die Postionsangaben
Das ist einfachste Mathematik. In diesem Fall hat jeder Bildauschnitt eine Größe von 30x30 Pixeln. Und jedes "Element" hat einen Abstand von 10 Pixeln zum oberen. Das solltet ihr übrigens auch so machen. Haltet Abstand, dann bekommt ihr weniger Probleme beim Positionieren.
6. Aber
So schön und gut diese CSS Slices auch sind, man sollte es nicht übertreiben. Das ist einfach eine Frage der Organisation. Packt um Himmels Willen nicht alle Bildelemente in eine Datei. Hab ich tatsächlich mal gesehen. 120 Icons in einem Gif. Da braucht man schon eine Übersichtstabelle denn sonst blickte man nicht mehr durch. Konzentriert euch je nach Design auf bestimmte Abschnitte und fasst die zusammen.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt