CSS 2.1 ::Referenz ::Pseudoklassen
CSS 2.1: Dynamische Pseudoklassen
Allgemeines:
Dynamische Pseudoklassen ermöglichen es, Elemente mit Hilfe anderer Charakteristika als ihrer Namen, Attribute oder Inhalte zu klassifizieren. Dies sind Merkmale, die ein Element durch Interaktionen des Benutzers annehmen oder verlieren kann. Deshalb werden sie in CSS3 die Bezeichnung 'user action pseudo-classes' erhalten.
Tipp:
Einige Browser fassen aktive Links (nach dem Klick) in eine unschöne Konturlinie ein. Das lässt sich vermeiden, indem man outline:none für alle Elemente A deklariert.
Dynamische Pseudoklassen schließen sich nicht gegenseitig aus, d. h. im Stylesheet können einem Element mehrere dynamische Pseudoklassen zugeordnet sein. Sie dürfen aber nur mit einer Link-Pseudoklasse kombiniert werden.
In CSS 2.1 können dynamische Pseudoklassen auf alle Elemente angewandt werden. Auch hat man völlige Freiheit über die Methode, mit der der Status einzelner Elemente geändert werden kann. Diese mag von Scriptsprachen beeinflusst oder von den Eigenarten unterschiedlicher Anwenderprogramme (Browser, PDA etc.) abhängig sein.
Anwenderprogramme sind nicht gezwungen, die aktuelle Darstellung eines Dokumentes aufgrund von Änderungen dieser Pseudoklasse zu ändern. Wenn sich z. B. durch :hover die Schriftgröße eines Elements ändern soll, dann müsste sich beim Überfahren mit der Maus auch die Position der benachbarten Zeichen ändern. Daher ist es erlaubt, dass Anwenderprogramme derartige Notierungen ignorieren.
Für dynamische Pseudoklassen sind drei Selektoren möglich:
:active:focus:hover
Diese Selektoren sind Statusangaben vergleichbar, die ein Element durch Interaktionen des Benutzers annehmen kann.
Pseudoklasse :active
Die Pseudoklasse :active dient dazu, den aktiven Status eines Elements anzuzeigen. Aktiv ist ein Element z. B. dann, wenn die Maustaste über dem Element gedrückt und gehalten wird oder wenn es im :focus ist und die Enter-Taste gedrückt wird.
Pseudoklasse :focus
Wenn ein Element im Fokus ist, sind Tastenfeld- oder andere Texteingaben möglich. Innerhalb eines Dokuments kann der Benutzer zwischen den Elementen, für die ein :focus definiert ist, mit der Tab-Taste springen. Damit ist :focus praktisch die Tastenfeld-Alternative zu :hover.
Pseudoklasse :hover
Ähnlich :focus, ist :hover eine Pseudoklasse, die anzeigt, dass der Benutzer ein Element auswählen kann, bevor er es aktiviert. In der Regel geschieht dies, indem ein Mauszeiger über dem Element gehalten wird. Anwenderprogramme, die keine interaktiven Medien unterstützen, brauchen auch :hover nicht zu unterstützen.
Reihenfolge der Pseudoklassen
Die Reihenfolge, in der die Pseudoklassen im Stylesheet notiert werden sollten, ergibt sich allein aus der Kaskade. Wenn Gewicht, Ursprung und Spezifizität mehrerer Regeln gleich hoch sind, erhält die zuletzt notierte Regel den Vorrang. Das bedeutet:
Tipp:
Pseudoklassen wurden bisher in der Reihenfolge :link, :visited, :hover, :active notiert. Heute, im Zeitalter der standardstreuen Browser, ist eine andere Reihenfolge besser. Der Artikel Dynamische Pseudoklassen und benannte Anker erklärt, welches Problem mit der hergebrachten Reihenfolge auftritt und wie man es umgeht.
- Die Pseudoklasse
:visitedsollte nach:linkauftreten, damit die Regel für Links zu bereits besuchten Websites Vorrang vor der Regel für allgemeine Links hat. - Aus dem gleichen Grund sollten die Regeln für dynamische Pseudoklassen nach den Regeln für Link-Pseudoklassen stehen, da anderenfalls die dynamischen Pseudoklassen nicht dargestellt würden. Benutzer- Interaktionen hätten damit in Bezug auf Links keine Folgen.
- Innerhalb der dynamischen Pseudoklassen muss
:activeals letzte deklariert werden, wenn aktive Links angezeigt werden sollen.
Code-Beispiel:
:link:hover, :visited:hover { color: #4d0033; }
Browserunterstützung
Die dynamischen Pseudoklassen werden von den meisten modernen Browsern unterstützt, es gibt aber die folgenden Einschränkungen:
- IE/Mac 5.x
- IE/Mac 5.x stellt
:activenicht immer mit allen deklarierten Eigenschaften dar. Die Pseudoklasse:hoverwird nur am Elementaerkannt, IE/Mac 5 erkennt aber:focus. Es ist empfehlenswert, im Einzelfall gründlich zu testen. - IE/Win 5.x, IE/Win 6
- MS IE/Win bis Version 6 stellt
:activenicht immer mit allen deklarierten Eigenschaften dar. Die Pseudoklasse:hoverwird nur am Elementaerkannt,:focusüberhaupt nicht. Auch die Forderung, dass die drei dynamischen Pseudoklassen sich nicht gegenseitig ausschließen sollen, wird nicht uneingeschränkt so interpretiert. - IE 7
- IE 7 unterstützt
:hoveran allen Elementen. Die Forderung der gegenseitigen Exklusivität wird jetzt erfüllt. Was noch aussteht, ist das Erkennen der Pseudoklasse:focus.
Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.
Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.
Besonderheiten im Medientyp handheld:
Die Pseudoklassen :link, :visited, :focus und :active sind Teil des Standards CSS Mobile Profile 1.0. Aufgrund der Einschränkungen vieler Mobilgeräte bei der Realisierung von Farben, Hintergründen und den Werten der Eigenschaft text-decoration wird oft kein Unterschied in der Darstellung dieser Pseudoklassen feststellbar sein.
Ausblick:
CSS3 konzentriert sich nicht so sehr auf die Erweiterung bestehender Pseudoklassen, sondern eher darauf, neue Pseudoklassen zu entwickeln, die dem Besucher mehr Interaktionsmöglichkeiten und dem Webautor mehr Möglichkeiten zur Auszeichnung von Teilen des Dokuments bieten, die nicht im Dokumentstammbaum auftreten.
Verwendete Standards
Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.
