Ein paar Gedanken aussem Ländle

Der CSS-Zustandsautomat Link, Visited, Hover, Focus und Active

Weiterer Einbau des Blogrolls

Diese Seite enthält einen weiteren Einbau des der Liste der externen Blogs. Auf Grund von technischen Problemen, die im weiteren Verlauf genannt sind, habe ich die Styles aus der Hauptseite entfernt, dort andere verwendet und die im folgenden Beschriebenen CSS-Pseudoklassen nur für diesen Beitrag bzw. nur für diesen div-Block reserviert.

Pseudoklassen – Einführung

Unter Pseudoformate resp. Pseudoklassen werden durchgäng die CSS-Klassen eines HTML- oder XHTML-<a>-Elementes angesehen. Diese Ansicht ist nicht ganz falsch – meistens werden die Klassen zur Auszeichnung dieses Elements genutzt, sie ist aber auch nicht ganz richtig – auch andere Elemente können auf diese Klassen zugreifen. Doch daraum soll es nicht gehen. Hier geht es um die Menge der Klassen und wie man diese zur Anzeigensteuerung nutzt.

Die Pseudoklassen – Übersicht und Problemvorstellung …

Das CSS kennt bislang folgende Pseudoklassen:

1. :link – Dies ist ein Verweis auf eine noch nicht besuchte Seite
2. :visited- Dies ist ein Verweis auf eine besuchte Seite (Ihr Browser hat diese Seite gecached)
3. :focus – Sie können mit der Tabulaturtaste einige – nicht alle – Elemente “durchsteppen”. Das Element, dass Sie dadurch gerade auswählen hat den Focus.
4. :hover – Sie können mit der Maus über ein Element fahren. Wenn ein Klick theroretisch den Linkaufruf auslösen würde, dann wird die hover-Klasse aktiviert
5. :active – Genau in dem Augenblick in dem Sie den Klick ausführen – konkret durch Mouse-Down wird diese Klasse aufgerufen (Nach dem Mouse-Up gibt es die Seite im allgemeinen nicht mehr)

Diese Klassen sind wie gesagt bekannt und offiziell in den Spezifikationen beschrieben. Allerdings stellt man in der Praxis fest, dass man damit zunächst einmal scheinbar gar nicht auskommt. Dazu möchte ich dem Beitrag ein nach meiner Auffassung vollständiges Zustandsdiagramm voranstellen. Dieses Diagramm enthält zehn Klassen und nicht nur fünf.

Das Zustandsdiagramm hat relativ zentral gelegen einen schwarzen Punkt und darunter eine Entscheidungsraute. Wir befinden uns im Seitenaufbau und innerhalb einer Webseite erscheint ein Link. Zu diesem Link wird geprüft, ob es eine gültige Abbildung dieser Seite im Cache des Browsers gibt. Ist das der Fall, dann wird der Link dargestellt wie es in :visited angegeben ist, ist das nicht der Fall, wird auf die Definition in :link zurückgegriffen. Diese Entscheidung ist nicht mehr änderbar in der Zeit, in der die Seite angezeigt wird. An dieser Stelle wird also grundsätzlich entschieden, ob die “rechten” 5 Pseudoklassen zur Anzeige kommen oder die “linken”.

Hier auf dieser Seite wird übrigens in der Liste der externen Blogs über das Pseudoelement :before ein Icon eingebunden. Das Icon hat – so es über :visited geladen wird einen “Erledigt-Haken” und über :link hat es diesen nicht. Man kann also über den Haken erkennen, ob man die Seite schon mal besucht hat, oder nicht. Für Nutzer des Internetexplorers ist dieses Bild aber grundsätzlich unsichtbar und eine Abhilfe ist zwar sinnvoll und geplant, allerdings werde ich diese nicht innerhalb dieses Beitrages beschreiben. Fazit: Man die Aussagen in dem Beitrag nur mit einem hier genannten Browser nachvollziehen.

Das Zustandsautomaten-Teilsystem :link – :visited -:focus

Innerhalb einer Seite kann immer nur ein Element den Focus haben und die Umschaltung ist nur durch die Tastatur möglich. In der Regel kann man per Tabulator oder per Schift-Tabulator die focusfähigen Elemente einer Seite durchlaufen, manchmal kann man auch mit den Kursortasten etwas erreichen und ggf. auch mit Bild-Up und Bild-Down.

An dem Zustandsdiagramm sieht man, dass der eigentliche Zustand aufspaltet. Man hat nicht den Zustand :focus, sondern die beiden Zustände :focus-link und :focus-visited. Nun kann man theoretisch fragen, was man tun muss, wenn man diese Information auch per Icon darstellen will. Das Ziel ist ein Icon in einer anderen Farbe beispielsweise in Rot statt in Blau. Die Frage an der Stelle ist nur: Woher weiß man, ob man in dem Icon einen “Erledigt-Haken” setzen muss oder nicht? In der CSS-Pseudoklasse :focus ist nur Platz für eine einzige Eintragung.

Hier hilft die Kombination der Pseudoklassen

.linkelement a:link:focus:before
{
  content: url(/css/gifs/link_e_rt_n.gif) " ";
}

.linkelement a:visited:focus:before
{
  content: url(/css/gifs/link_e_rt_v.gif) " ";
}

Ich setze :link resp :visited dem :focus voran und kann nun zwei Bildquellen angeben, einmal die Quelle, die ich benötige auf der :link-Seite und einmal die Quelle auf der :visited-Seite.

Das Zustandsautomaten-Teilsystem :link – :visited -:hover

Nun ignorieren wir :focus und bewegen die Maus. Falls der Mauszeiger den Link überstreicht wird :hover aufgerufen. Auch hier haben wir nach dem Diagramm zunächst einmal zwei Unterzustände :hover-link und :hover-visited.

Im Normalfall hat das überfahrene Element nämlich nicht auch noch den Focus. Hätte es diesen, dann kämen die weiteren Zustände hover-focus-link und hover-focus-visited hinzu.

Doch zunächst wird mit den folgenden Anweisungen das “grüne Icon” eingebunden.

.linkelement a:link:hover:before
{
  content: url(/css/gifs/link_e_gn_n.gif) " ";
}

.linkelement a:visited:hover:before
{
  content: url(/css/gifs/link_e_gn_v.gif) " ";
}

Und dann folgt ein gelbes Icon für den hover-focus-Mischstatus.

.linkelement a:link:hover:focus:before
{
  content: url(/css/gifs/link_e_ge_n.gif) " ";
}

.linkelement a:visited:hover:focus:before
{
  content: url(/css/gifs/link_e_ge_v.gif) " ";
}

Das Zustandsautomaten-Teilsystem :active

Durch ein betätigen der Maustaste werden zwei Dinge ausgelöst. Zum einen bekommt das Element den Focus und damit wird automatisch das Focus-Pseudolement aufgerufen. Es kann daher keine Trennung mehr geben zwischen :active-focus-link und :active-link. Aus :active folgt :focus. Damit haben wir auf der Ebene :active wieder nur zwei Unterpseudoklassen.

.linkelement a:link:active:before
{
  content: url(/css/gifs/link_e_pnk_n.gif) " ";
}

.linkelement a:visited:active:before
{
  content: url(/css/gifs/link_e_pnk_v.gif) " ";
}

Nun aber wollen wir :active verlassen. Lassen wir die Maustaste los, dann wird die Seite gelöscht und die durch den Link angegebene neue Seite angezeigt. Man kann das Ende der Seite auch ansehen als Ende des gesamten Zustandautomatensytems. Allerdings wird die Seite auch gecached und ist über die “Zurück-Funktion” des Browsers erreichbar. Betätigt man allerdings die “Zurück-Funktion”, dann wird offenbar auch das Zustandsystem zurück gesetzt. Das ist im Grunde auch logisch, denn mit dem Neuanzeigen der Seite verliert der betrachtete Link sowohl den Focus als auch den Hover-Effekt. Die Seite startet dann wieder im Zustand :link oder :visited.

Wenn man dann aber die Maus vom Link wegbewegt und woanders los lässt, dann bleibt die Linkanzeige zumindest beim Firefox 3.0.4 im Zustand :active stehen. Das ist ein zur Zeit noch offenes Problem. Ich vermute einen Bug und werde das klären.

Zusammenfassung

Fünf Pseudoklassen gibt es in der CSS-Spezifikation – :link, :visited, :focus, :hover und :active. Für eine saubere Anzeige benötig man aber zehn. Dabei ist von den oben genannten Fünf Klassen nur :link und :visited verwendbar. Es sind also acht Mischpseudoklassen zu definieren. Dies sind die Pseudoklassen:

1. link:focus – Damit ist der Focus-Zustand gemeint, der erreicht wird aus dem Zustand :link heraus.
2. link:visted – Damit ist der Focus-Zustand gemeint, der erreicht wird aus dem Zustand :visted heraus.
3. link:hover – Damit ist der Hover-Zustand gemeint, der erreicht wird aus dem Zustand :link heraus.
4. link:visted – Damit ist der Hover-Zustand gemeint, der erreicht wird aus dem Zustand :visted heraus.
5. link:hover:focus – Damit ist der Zustand gemeint, der erreicht wird aus dem Zustand :link heraus, bei dem das Objekt gleichzeitig den Zustand :hover und :focus hat.
6. visted :hover:focus – Damit ist der Zustand gemeint, der erreicht wird aus dem Zustand :visted heraus, bei dem das Objekt gleichzeitig den Zustand :hover und :focus hat.
7. link:active – Damit ist der Zustand gemeint kurz vor dem wieder Loslassen der Maustaste, wobei der Ausgangszustand :link ist.
8. visted :active – Damit ist der Zustand gemeint kurz vor dem wieder Loslassen der Maustaste, wobei der Ausgangszustand :visted ist.

Ergänzung

Ich werde diesen Icon-Teil wieder entfernen. Der IE reagiert überhaupt nicht auf diese Iconvorgabe und der FF hat schon mindestens zwei Bugs, die man ggf. melden müsste. Der eine ist bereits genannt, der andere besteht darin, dass das Icon bei einer Änderung gelöscht und dann erst das andere per http-Request nachgeladen wird. Damit gibt es Überganzzeiten ohne Icon und die können schon mehrere Sekunden lang sein.

_

— Wolfgang Uhr · Mittwoch Dezember 10, 2008

Kommentare

1. — wolfgang · Jan 11, 22:51 · #

   Meine Fehlermeldung bei Mozilla ist accepted

Hinweise zur Kommentareingabe

Merken

Name


E-Mail


Web


Nachricht