Case studies: von Fall zu Fall
Fallbeispiel 1: Listen
Listen werden oft als die hässlichen Entlein in HTML dargestellt. Jeder, der HTML "von der Pike auf" gelernt hat, wird sich einmal mit sortierten oder unsortierten Listen beschäftigt haben. Freunde grafischer Editoren werden Listen als "Aufzählungselemente" kennen. Beide Arten von Webdesignern werden Listen in der Praxis eher selten verwenden.
Unser Fallbeispiel zeigt die Anwendung unsortierter Listen als Navigationselement. Der Vorteil gleich vorweg: Listen bilden semantische Blöcke, die assistive Software als solche erkennen kann. Zudem bilden sie auch im Quellcode einen leicht zu identifizieren Block.
Die einfachste Liste sieht so aus:
<ul id="menu">
<li><a href="start.html">Startseite</a></li>
<li><a href="verein.html">Verein</a></li>
<li><a href="marzipan.html">Marzipan</a></li>
<li><a href="qualitaet.html">Qualität</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
Eine ganz einfache Liste
Besonders schön sieht das nicht aus, aber die Struktur ist klar erkennbar. Mit Hilfe von CSS verschönern wir unsere Liste und verabschieden uns als erstes von den Aufzählungszeichen, indem unsere Liste mit eigenem ID-Attribut ausstatten und im Stylesheet das neue Element mit dem Attribut list-style: none versehen.
#menu a { width: 150px; color: #3F2B07; background: #F6E8CC; text-decoration: none; font: bold 12px verdana, sans-serif; display: block; border: 1px solid #800000; padding: 2px 5px 2px 5px; margin: 5px 0 0 0; }
<ul id="menu">..</ul>
Liste ohne Aufzählungszeichen
Nun erstellen wir über die Pseudoklasse hover auch gleich einen MouseOver-Effekt: sobald der Mauszeiger über ein Listenelement (list-item) fährt, ändert sich dessen Hintergrundfarbe:
Liste mit MouseOver-Effekten
Schon haben wir eine ansprechend aussehende Navigation mit MouseOver-Effekten! Und das alle ohne Javascript und Grafik. Selbstverständlich sind wir mit der Navigation nicht auf die vertikale Darstellung beschränkt - ein display: inline im <li>-Tag bewirkt eine horizontale Navigation.
Der Phantasie sind keine Grenzen gesetzt. Man beachte, dass der zugrunde liegende Quellcode der Liste immer gleich bleibt - geändert wird lediglich das eingesetzte Stylesheet; gewissermaßen haben wir hier ein Paradebeispiel der Trennung zwischen Layout und Inhalt.
Selbst Grafiken lassen sich mit dieser Methode dynamisch austauschen. Hier muss man jedoch darauf achten, dass sich (nur) mit CSS keine neuen Elemente in den DOM-Baum eines Dokumentes einfügen lassen, wie es mit Javascript möglich wäre. Umgehen lässt sich dies, indem man in den "Normalzustand" des zu verändernden Objektes eine "unsichtbare Grafik" - z.B. ein transparentes Bild - als Background einsetzt.