Link-Pseudoklassen / dynamische Pseudoklassen - Benutzerinteraktion sichtbar machen

Am Anfang war der Wunsch, dem Nutzer einer Website anzuzeigen, welche Seiten er bereits besucht hatte und welche noch unbesucht (sprich von ihm ungesehen) waren. Diese Funktion war bereits sehr früh in den Browsern integriert - nur die Farbwahl war sehr unauffällig. Daher wollten viele Designer dies natürlich besser hervorheben.

Das klappte auch recht bald über CSS (bereits in der Version 1) mit den zwei Link-Pseudoklassen

:link
:visited

Das praktische daran ist, dass es ein entweder oder ist. Entweder war die Seite bereits besucht oder eben noch nicht (später kommt dann, warum dynamische Pseudoklassen ein wenig trickreicher sind).

Standardaussehen von unbesuchten/besuchten Links

In CSS konnte man dann nach Belieben alles machen, designtechnisch aufhübschen und für die Usability verpfuschen (zum Verpfuschen später mehr).

Zum Testen benötigen wir nun ein paar Links. Dazu nehmen wir eine Seite, die i.d.R. herzhaft unbesucht ist: das Impressum. Als zweite Seite, die auf jeden Fall besucht wurde. In unserem Beispiel die HTML-Datei, die dieses Beispiel enthält und die ich „css-pseudoklassen.htm“ genannt habe. Der HTML-Code dazu:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Pseudoklassen Beispiel CSS 1 mit :link :visited</title>
    <link href="css-pseudoklassen.css" rel="stylesheet">
</head>
<body>
<h1>Beispiel Pseudoklassen</h1>

<a href="https://www.html-seminar.de/impressum.htm">
https://www.html-seminar.de/impressum.htm
</a>

<a href="css-pseudoklassen.htm">css-pseudoklassen.htm</a>
</body>
</html>

Schauen wir es uns im CSS-Beispiel an, in dem wir nun Hintergrundfarben für die 2 Pseudoklassen :link und :visited vergeben.

:link steht für Links, die bisher noch nicht vom Besucher angesehen worden sind.

:visited steht für Links, die bereits von diesem Besucher mit diesem Browser besucht worden sind. Der Browser speichert im Hintergrund in der Historie, welche Seiten er angezeigt hat. Dies ist alles im Browser gespeichert!

Bedeutet, falls man sich doch schon das Impressum angesehen hat, entweder einen anderen Link im HTML eintragen, oder im Browser die Historie löschen.

Dabei ist der Aufbau zu den bisherigen CSS-Anweisungen sehr ungewohnt.

a:link { ... } 
a:visited { ... }

:link bzw.:visited - i.d.R. wird man es zusammen mit dem HTML-Tag a benutzen, damit nur die Links davon betroffen sind. Als kompletter CSS-Quellcode sieht es dann so aus:

a:link {  background-color: #00FF00; }  /* heftiges grün */
a:visited {  background-color: silver; }

Somit hab wir nun Hintergrundfarben. Designtechnisch nicht schön, aber didaktisch aussagekräftig. Grün für sollte noch angesehen werden. Grau für ist bereits angesehen und erledigt.

Links mit Hintergrundfarben durch :link und :visited

Farben sind zwar hübsch, aber sobald hier weitere Pseudoklassen dazukommen wird es hübsch unübersichtlich. Daher wird hier nun aus didaktischen Gründen ein Hintergrundbild eingeblendet, damit wir den Zustand des Links im Klartext haben (es steht Text auf der Hintergrundgrafik).

Wir haben folgende 5 Hintergrundbilder, die die Zustände von einem Link beschreiben. Später genaueres zu den einzelnen Zuständen.

Zum Testen des Beispiels am besten herunterladen (rechts Maustaste und speichern unter)

Nun wird unser CSS-Code durch die Hintergrundbilder ergänzt. Wir benötigen zusätzlich links Platz vom Link, damit die Hintergrundbilder sichtbar sind:

<style>
a {
    padding-left: 40px;
    background-repeat: no-repeat;
}
a:link {
    background-image: url(icon-beispiel-pseudoklasse-link.gif);
    background-color: #00FF00;
}
a:visited {
    background-image: url(icon-beispiel-pseudoklasse-visited.gif);
    background-color: silver;
}

Nun könnte es so aussehen:

Aussehen von :link und :visited mit Hintergrundgrafik bei alten Browsern

In Wirklichkeit wird es aber so aussehen, dass für :visited zwar die zugeteilte Hintergrundfarbe kommt, aber das Hintergrundbild von :link.

:visited und background-image: funktioniert nicht mehr!

Das ist bei allen neuen Browsern der Fall. Aus Sicherheitsgründen wurden die Pseudoklasse :visited der Funktion background-image beraubt (um Missbrauch zu verhindern). Es funktioniert also, schlicht und ergreifend, background-image mit :visited nicht mehr (was einigen Designern den letzten Nerv rauben wird, die sich daran gewöhnt haben, dass es so funktioniert). Aber das ist nun mal jetzt so. Also haben wir i.d.R. dieses Aussehen:

Soweit, so gut. Mit CSS 2.1 kamen weitere Möglichkeiten in Form von dynamischen Pseudoklassen.

Dynamische Pseudoklassen :focus, :hover und :active

Zu den 2 bestehenden kamen mit CSS 2.1 weitere Pseudoklassen dazu. Diese werden als dynamische Pseudoklassen bezeichnet, da sie auf Aktionen des Benutzers reagieren (wie z.B. das Überfahren eines Links mit der Maus.

Schauen wir uns als erstes die Aufgaben der 3 dynamischen Pseudoklassen an:

:focus Wird die Tastatur zum Auswählen eines Links genutzt (das macht man mit der TAB-Taste :-)), dann bekommt der ausgewählte Link den focus.

:hover wird mit der Maus über den Link gefahren, dann hat er den Status von hover. Hier sehen wir schon, dass sich diese Pseudoklassen nicht gegenseitig ausschließen, daher ist bei der Nutzung das Einhalten der Reihenfolge wichtig!

:active ist der Link, der gerade angeklickt wird (und zwar nur im Moment des Anklickens. Sprich, man klickt, Link ist aktive und die neue Seite wird geladen. Das war es auch schon. Also nicht sonderlich spannend für die meisten Designer :-)

Und nun ergänzen wir das HTML mit weiteren Links (dann ist es besser die Zustände zu sehen).

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Pseudoklassen Beispiel CSS 1 mit :link :visited</title>
    <link href="css-pseudoklassen.css" rel="stylesheet">
</head>
<body>
<h1>Beispiel Pseudoklassen</h1>

<a href="https://www.html-seminar.de/impressum.htm">
https://www.html-seminar.de/impressum.htm
</a>

<a href="css-pseudoklassen.htm">css-pseudoklassen.htm</a>

<a href="https://www.google.com/">https://www.google.de</a>

<a href="https://de.yahoo.com/">https://de.yahoo.com</a>

</body>
</html>

Als Hintergrundfarben bekommt nun

:focus die Farbe Orange,
:hover die Farbe Gelb
:active die Farbe Rot

und die entsprechenden Hintergrundgrafiken

Unser Inhalt der CSS-Datei:

a {
    padding-left: 40px;
    background-repeat: no-repeat;
}
a:link {
    background-image: url(icon-beispiel-pseudoklasse-link.gif);
    background-color: #00FF00;
}
a:visited {
    background-image: url(icon-beispiel-pseudoklasse-visited.gif);
    background-color: silver;
}
a:focus {
    background-image: url(icon-beispiel-pseudoklasse-focus.gif);
    background-color: orange;
}
a:hover {
    background-image: url(icon-beispiel-pseudoklasse-hover.gif);
    background-color: yellow;
}
a:active {
    background-image: url(icon-beispiel-pseudoklasse-active.gif);
    background-color: red;
}

Nun haben wir eine "bunte Sammlung" und können schön die Reaktion der Links durch das CSS sowie die Nutzeraktionen testen.

Im Beispiel oben sehen wir den ersten Link zum Impressum unbesucht, daher grün und mit der :link Hintergrundgrafik.

Auf dem zweiten gelbe Link steht gerade der Mauszeiger, daher hat dieser den Zustand :hover.

Der dritte Link ist orange, da mit der TAB-Taste bis zu diesem Link gegangen wurde. Wollte man diesen Link per Tastatur "anklicken", einfach Enter drücken.

Unser Letzter Link ist grau für :visited (das ist die Seite selbst und somit schon beim ersten Aufruf besucht). Die Hintergrundgrafik ist aber nicht mehr sichtbar, da diese bei :visited der CSS-Befehl background-image nicht mehr funktioniert (aus Sicherheitsgründen, bei allen aktuellen Browsern ).

Wer :active testen will, einfach mal einen Link anklicken und dabei die Maustaste gedrückt halten.

Wichtig ist die Reihenfolge bei Pseudoklassen

Die Reihenfolge der Anweisungen in CSS ist wichtig.

Warum die Reihenfolge wichtig ist? Weil sich die dynamischen Pseudoklassen nicht gegenseitig ausschließen. Sprich, wenn :focus oberhalb im Quellcode von :hover kommt (was so der Normalfall ist), kann zwar der Link durch die Tastatur angewählt werden, aber :hover überschreibt die Werte (manche Browser zeigen noch einen Rahmen von focus wie im folgenden Beispielbild mit dem Browser Google Chrome zu sehen ist).

Reihenfolge von Pseudoklassen ist wichtig! hover überschreibt focus

Ganz dramatisch wird das Ergebnis, wenn :link am Ende steht, dann fühlt es sich an, als würde nichts funktionieren (weil z.B. :hover und :active von :link überschrieben wird. Im folgenden Bild sieht man die selben Nutzerreaktionen. Über die Tastatur wurde der dritte Link ausgewählt und auch die Maus ruht auf dem dritten Link. Aber keine visuelle Reaktion! Eigentlich sollte über :hover der Link gelb dargestellt werden.

falsche Reihenfolge der Pseudoklassen - zuletzt :link im CSS-Code

Einfach mal probieren.

Daher liest man i.d.R. die folgende Faustform für die Reihenfolge

loveforhate

sprich als Reihenfolge

:link
:visited
:focus
:hover
:active

Gepunkteten Rahmen um Links entfernen (speziell bei :focus)

Auffällig ist der Rahmen um den Link, bei Doppelaktion von Tastatur (:focus) und Mauszeiger (:hover). Dieser erscheint auch bei :active. Wer diesen Rahmen beseitigen möchte, dem hilft die CSS-Anweisung:

a:active, a:focus {
    outline: none;
}

Dann ist der Rahmen um den Link mit :focus weg - unser vorheriges Beispiel, wo der dritte Link mit :focus und :hover gleichzeitig aktiv war:

Dies waren die Grundlagen für das Arbeiten mit den Pseudoklassen.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Steuerung per CSS Steuerung mit Feedback

Bitte unterstützen

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

E-Books zum Kurs
von HTML-Seminar.de
E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

Mehr Details