CSS 2.1 ::Artikel

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.

  1. 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.

  2. 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="...">
  3. 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.

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:

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:

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 { ... }

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.


Home|Vollreferenz|Schnellreferenz|Grundlegendes|Tutorials & Artikel|Quiz|Allgemeines

Die URL dieser Seite ist: www.thestyleworks.de/tut-art/pc_dynamic_a_name.shtml
Gedruckt am Sonntag, dem 29. Mai, 2016.
© Copyright All Contents 2002- 2016 K. Langenberg.
Commercial Use prohibited.


Notizen: