Zwei CSS Pseudoklassen, die oft vergessen werden

In meinem letzten Beitrag wurde ich in den Kommentaren aufgefordert auf :focus, :active und outline einzugehen. Letzteren CSS-Befehl werde ich allerdings außen vor lassen, und nur kurz anschneiden. Pseudoklassen sind seit CSS1 Bestandteil und beschreiben den Zustand eines Elementes. Seit CSS1 gibt es Pseudoklassen für den A(nker)-Tag (a:link a:visited …). Mit CSS2 kamen aber einige Pseudoklassen hinzu, unter anderem auch :focus.

:active

:active als Pseudoklasse ist seit CSS1 bekannt. Es wird vielen bekannt sein, aber die Verwendung von active wird doch meist außer Acht gelassen. Dabei kann :active seit CSS2 nicht nur für Anker-Elemente, sondern für alle Elemente benutzt werden. Ich vermute, dass :active keine Aufmerksamkeit bekommt, liegt nicht unfern der Beispiele, die es seiner Zeit gab. Zu 80% wurde :active ein „color: lime;“ zugeordnet. Es hängt in den Köpfen, ähnlich wie ein Hambuger Urteil vom 12.09.1998 welches nie rechtskräftig geworden ist

Betrachtet man :active objektiv, fällt auf, dass es dem Nutzer ein Feedback zurück gibt.
:active gibt dem Benutzer ein Feedback beim Mausklick zurück. Ein Aspekt, den man näher durchleuchten sollte, wenn man beim Punkt User Experience angelangt ist. Hierfür kann z.B. eine leichte Abstufung der Hintergrundfarbe für einen „sinnvollen“ Einsatz sorgen. Ein Beispiel für den Einsatz von :active sollte vielen bekannt sein – die Apple Seite. Der Button wird mit dem Mausklick „eingedrückt“ (in nenne es jetzt einfach mal so). Ein klares Feedback an den Besucher. Designer-Notiz: Macht auch mehr her.

:focus

Mit CSS2 kamen weitere Pseudoklassen hinzu. Eine davon ist :focus. :focus beeinflusst die Eigenschaften von Input-Elementen. Vielen wird dieses Vorgehen aus „früheren“ Zeiten bekannt sein, da hat man dieses Problem gern via JavaScript gelöst. Die Pseudoklasse in CSS dient aber, genauso wie :active, eher der User Experience und vor allem der Usability. Mit :focus ist es möglich relativ einfach z.B. die Hintergrundfarbe eines Formularfeldes verändern, während der User das Feld aktiviert hat.

Input-Feld mit :focus-Werten

Wie man sehen kann, kann man allein mit diesen beiden Pseudoklassen einen bemerkenswerten Unterschied schaffen. Es hängt manchmal eben von der Liebe zum Detail ab.
Die CSS-Eigenschaft outline lasse ich an dieser unter den Tisch fallen, da diese erst ab IE8 von den Redmondern unterstützt werden. Ich befürchte, es gibt noch Menschen, die „optimieren“ auf zwei Versionen davor (IE6).
Kurz notiert: Mit outline kann ich einen Rahmen Elemente ziehen. Im Gegensatz zu border wird dieser Rahmen aber nicht außen am Element gesetzt.