Dynamische Pseudoklassen und benannte Anker

Dieser Artikel behandelt ein Problem, das bei neueren standardstreuen Browsern auftritt, wenn die Links einer Website in der überkommenen Weise und Reihenfolge link, visited, hover, active deklariert sind.

Kontext:

Zunächst wollen wir uns das Zusammenspiel von HTML und CSS in Bezug auf Links ansehen.

Bereits in CSS 1 gab es die Gruppe der Link-Pseudoklassen, der damals :link, :visited und :active angehörten. Diese Pseudoklassen schließen sich in ihrer Verwendung gegenseitig aus und können nur auf Quellenanker, d. h. Elemente A mit dem Attribut href, angewandt werden.

Mit dem Erscheinen von CSS 2 wurden die dynamischen Pseudoklassen als neue Gruppe eingeführt. :active gehört seitdem in diese Gruppe, dazu kamen noch :hover und :focus. Im Gegensatz zu den Link-Pseudoklassen schließen dynamische Pseudoklassen sich nicht gegenseitig aus und lassen sich (in standardskonformen Browsern) auf alle Elemente anwenden.
In HTML 4.01 besteht ein Link aus zwei Teilen: dem Quellenanker im verweisenden Dokument und dem Zielanker oder benannten Anker im verlinkten Dokument. Der Zielanker kann durch das Attribut name oder durch das Attribut id definiert sein, da beide denselben Namensraum beanspruchen.

Verweisendes Dokument Verlinktes Dokument

Quellenanker
<A href="..."> Zielanker oder benannter Anker
<A name="...">

Identifizierer
<E id="...">
Im Kontext des Hypertextlinks sind die Attribute href und name nur auf das Element A, das Attribut id ist dagegen auf fast alle Elemente anwendbar.

Verweisendes Dokument		Verlinktes Dokument
Quellenanker `<A href="...">`		Zielanker oder benannter Anker `<A name="...">`
Identifizierer `<E id="...">`

Das Problem

Herkömmlicherweise werden die Regeln für Links in CSS so notiert:

A:link { ... } A:visited { ... } A:hover { ... } A:active { ... }

Nach dem Erscheinen der neueren standardstreuen Browser, die die CSS-2-Spezifikation korrekt darstellen, treten durch diese Notation Probleme auf:

Korrekt interpretiert, gilt diese Notierung nicht nur für Quellenanker, sondern bezüglich der dynamischen Pseudoklassen auch für Zielanker. Das führt zu :hover-Effekten an diesen Ankern, die dem Besucher die Anwesenheit eines Quellenankers oder Verweises suggerieren.
Nach CSS 2 sind die dynamischen Pseudoklassen gleichwertig. Vorrang haben daher hier für jede Eigenschaft die zuletzt notierten Werte. Es bleibt deshalb zunächst unklar, an welcher Stelle in diesem Schema die Pseudoklasse :focus eingesetzt werden kann.

Visualisierung

Dieser Absatz ist ein Quellenanker, dessen Hintergrund beim Überfahren korrekterweise grün werden sollte. Ein roter Hintergrund ist falsch.

Dieser Absatz ist ein benannter Anker, dessen Hintergrund beim Überfahren richtigerweise blau werden sollte. Es ist falsch, wenn gar nichts passiert.

Lösungsansätze

1. Verzicht auf benannte Anker

Im Vorblick auf XHTML 2.0, in dem das Attribut name nicht mehr enthalten ist, könnte man ganz auf benannte Anker verzichten und statt dessen immer das Attribut id verwenden. Das hat aber zwei Nachteile:

Den technischen Nachteil, dass ältere Browser, wie NN 4.x, dies noch nicht unterstützen. Solche Links würden also dort nicht funktionieren.
Es gibt auch praktische Einschränkungen, z. B. müssten beim Redesign bereits bestehender Sites alle Inhalte nach dem Attribut name abgesucht werden, wollte man auf benannte Anker völlig verzichten.

Diese Lösung ist bei der Neuerstellung einer Site anwendbar, wenn man keine Rücksicht auf NN 4.x zu nehmen braucht.

2. Deklarierung mit Hilfe des Attributselektors `[href]`

Die Regeln für dynamische Pseudoklassen können mit Hilfe des Attributselektors [href] auf Quellenanker eingeschränkt werden.

A:link { ... } A:visited { ... } A:hover[href] { ... } A:focus[href] { ... } A:active[href] { ... }

Auch diese Möglichkeit ist zu naheliegend, um so einfach zu funktionieren, denn der Attributselektor wird vom IE/Win noch nicht erkannt.

3. Deklarierung des Attributselektors `[name]` und Gegendeklarierung

Diese Lösung ist praktisch die Weiterentwicklung des vorhergehenden Ansatzes. Man deklariert zunächst die dynamischen Pseudoklassen auf die bekannte Art. Diese Regeln werden von allen modernen Browsern mit Ausnahme des IE/Win auch auf benannte Anker angewendet.

Danach erfolgt die Gegendeklarierung mit Hilfe des Attributselektors [name], in der alle Eigenschaften auf ihre ererbten Werte zurückgesetzt werden. Da der IE/Win den Attributselektor nicht erkennt, haben diese Regeln nur in anderen Browsern eine Auswirkung.

A:link { ... } A:visited { ... } A:hover { eigenschaft:wert; } A:focus { eigenschaft:wert; } A:active { eigenschaft:wert; } A:hover[name] { eigenschaft:inherit; } A:focus[name] { eigenschaft:inherit; } A:active[name] { eigenschaft:inherit; }

Hier wird nach Meinung des Verfassers etwas zu sehr auf Umgehungsregeln aufgebaut. Darüber hinaus stellt sich die Frage: was passiert, wenn nun ein neuer Browser herauskommt, der dynamische Pseudoklassen auch für benannte Anker korrekt darstellt, jedoch Attributselektoren nicht unterstützt?

4. Gruppierung von Pseudoklassen ohne `A`

Dieser Ansatz geht einen anderen Weg, in dem die Notierung der Linkselektoren folgendermaßen umgestellt wird:

:link:focus, :visited:focus { ... } :link { ... } :visited { ... } :link:hover, :visited:hover { ... } :link:active, :visited:active { ... }

Die beiden Link-Pseudoklassen :link und :visited deklariert man wie üblich, da das Problem für sie nicht relevant ist.
Der Selektor A wird weggelassen, dadurch vermeidet man eine Deklarierung, die auch für benannte Anker gilt.
Indem man die dynamischen Pseudoklassen mit Link-Pseudoklassen kombiniert, wird sichergestellt, dass die deklarierten Regeln nur für Links gelten.
Der Selektor :link:focus, :visited:focus sollte ganz am Anfang stehen, um Fehler im IE/Win 5.x zu umgehen.
Mit dieser Methode lassen sich auch unterschiedliche Regeln für z. B. besuchte und unbesuchte Hoverlinks deklarieren. Im Beispiel sind die Selektoren aber um die dynamischen Pseudoklassen gruppiert, um Platz zu sparen.

Mit dieser Möglichkeit wird die Lösung des Problems relativ einfach erreicht und sie hat keine negativen Auswirkungen auf ältere Browser.

Zum Abschluß noch ein Hinweis bezüglich IE/Win: dieser Browser versteht die Kombination von Pseudoklassen noch nicht. Selektoren wie :link:hover und :visited:hover interpretiert er ganz einfach wie :hover. Deshalb ergibt sich für Benutzer des IE/Win kein Unterschied in der Darstellung. Die hier vorgestellte Notation macht aber Sinn im Hinblick auf die Nutzer besserer Browser und auf künftige Entwicklungen.
TOP

Hinweis:
Die Anregung zu diesem Artikel geht auf Veröffentlichungen von David Baron, Bill Mason, Tim Rivera
und Netscape DevEdge (nicht mehr online) zurück.