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:

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.

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 :active nicht immer mit allen deklarierten Eigenschaften dar. Die Pseudoklasse :hover wird nur am Element a erkannt, 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 :active nicht immer mit allen deklarierten Eigenschaften dar. Die Pseudoklasse :hover wird nur am Element a erkannt, :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 :hover an 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.


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

Die URL dieser Seite ist: www.thestyleworks.de/ref/pc_dynamic.shtml
Gedruckt am Montag, dem 05. Dezember, 2016.
© Copyright All Contents 2002- 2016 K. Langenberg.
Commercial Use prohibited.


Notizen: