Css Pseudo Elemente und Klassen zur verbesserten Usability

Wer mit Stylesheets und Css arbeitet, der wird sicher schonmal auf “a:hover” gestoßen sein. “a” steht hier für das Linktag und hover für eine Eingrenzung (oder Erweiterung, wie man es sieht). Es bedeutet das alle Links, beim überfahren mit der Mouse, nachstehende Formatierungen erhalten, dazu ein Beispiel:

a { color: black; font-size: 1.0em; }

a:hover { color: purple; font-size: 1.2em; }

Dieser Code in einem Stylesheet bewirkt, das alle Links schwarz sind und die Schriftgröße 1.0em haben. Beim überfahren (hover) werden sie allerdings lila und 1.2em groß.
Dies sind Pseudo-Klassen, mit ihnen kann man die Eigenschaften von Elementen entscheident beeinflußen und für den User eine größere Usability schaffen. Diese Elemente sind entscheidend für das Feedback einer Aktion.
Angenommen, wenn man über einen Link fährt und sich nichts verändert (also keine Unterstreichung und auch keine Cursorveränderung) dann würde der User nicht wissen das es sich hier um einen Link handelt.

Beispiel:

a { color: black; text-decoration: none; }

a:hover { color: black; text-decoration: none; cursor: default; }

Feedback ist für unsere Arbeit am Computer immer wichtig, nur wir merken es garnicht sondern akzeptieren es einfach. Angenommen die Tasten auf der Tastatur würden sich beim “drücken” nicht bewegen, und auch kein Geräusch von sich geben, aber dennoch eine Aktion ausführen, so wäre die Usability sehr schlecht. Genauso bei der Computermouse, ohne das “Klick”-Feedback wäre der reibungslose Verlauf der täglichen Arbeit ständig gestört.

So, also wissen wir das Feedback für Web Usability wichtig ist, was bietet uns Css alles um diese zu erhöhen:

Die Syntax von Pseudo Klassen:

selektor:pseudo-klasse {eigenschaft: wert}

Pseudo-Klassen:

link – Links, die noch nicht besucht wurden, können hiermit speziell formatiert werden
hover – wenn sich der Cursor über dem Objekt befindet
active – Objekte die geklickt werden
focus – angewählte Objekte
visited – besuchte Links
first-child – Elemente, die zuerst innerhalb eines Elternteils stehen:
<style type="text/css"> h1:first-child strong { color: purple; } </style>
<h1> <strong>1. fetter Text (Farbe: Lila) </strong> <strong>2. fetter Text (Farbe: Standard) </strong> <strong>3. fetter Text (Farbe: Standard) </strong> </h1>
lang – Für unterschiedliche Sprachen lassen sich differenzierte Designs gestalten, bzw. die Elemente können Accessibility-orientiert plaztiert werden. Entwirt man z.b. eine europäisch-asiatische Seite, muss man nicht nur die unterschiedliche Sprache beachten, sondern auch die kulturell geprägte Leserrichtung. Europäer von Links nach Rechts, Asiaten von Rechts nach Links. Mit “Lang” könnte man quasi das Design der ganzen Website switchen

Mit geringem Aufwand läßt sich die Web Usability der eigenen Website enorm verbessern. Z.B kann man Blöcke (die Navigation oder Registrierungsbereiche) nur leicht darstellen, erst wenn man mit der Mouse drüber fährt werden die Bereiche deutlich (mit der Pseudo-Klasse “focus”). Einziges Manko ist der IE, der nicht immer das macht was die anderen Browser tun. Neben den Pseudo-Klassen gibt es noch die Pseudo-Elemente, mit denen man auch einige nützliche Usability Verbesserungen erreichen kann.

Die Syntax von Pseudo Elementen:

selektor:pseudo-element {eigenschaft: wert}

Pseudo-Elemente: