CSS: Pseudoklassen für Links mit Limits für a:visited

Mit Link-Pseudoklassen kann man HTML-Links entsprechend Ihrem Status stylen. Die üblichsten Klassen hierfür sind :link, :visited, :hover, :focus und :active.

Nur die Pseudoklassen :link und :visited sind speziell für das HTML-Link-Element <a> eingeführt worden. die übrigen sind dynamisch und können auch anderen HTML-Elementen zugeordnet werden.

Für die Gestaltung der Links allgemein nutzt man das a-Element. Die Formatierung hierfür bezieht sich auf alle Links, auch Ankerlinks:

	a { 	
		color: blue;
	}	

Groß- und Kleinschreibung erlaubt, doch keine Leerzeichen

Um die weiteren Zustände genauer zu definieren, folgen die Pseudoklassen dem a-Element nach einem Doppelpunkt. Üblicherweise schreibt man die Pseudoklassen mit Kleinbuchstaben. Rein technisch gesehen könnte man aber auch Großbuchstaben oder eine Mischung verwenden, das macht keinen Unterschied:

a:LINK { }
a:LiNk { }
a:liNK { }

Jedoch darf kein Leerzeichen vorkommen. folgende Kombinationen mit Leerzeichen vor und/oder hinter dem Doppelpunkt funktionieren nicht:

a : link { }
a :link { }
a: link { }

a:link

Die Pseudoklasse :link spricht a-Elemente an, die ein href-Attribut haben und noch nicht geklickt oder mit der Maus berührt wurden. Ankerlinks (<a id=“top“></a>) bleiben von dieser Formatierung unberührt:

	a:link { 	
		color: blue;
	}	

a:visited

mit a:visited gestaltet man Links, die bereits geklickt wurden.

	a:visited { 	
		color: green;
	}	

Limitierungen bei a:visited

Die Pseudoklasse a:visited konnte früher von Datendieben missbraucht werden. In Kombination mit JavaScript oder anderen Techniken, war es möglich, herauszufinden, welche Seiten besucht wurden und welche nicht (History Stealing).

Um diesen Missbrauch zu unterbinden, sind in modernen Browsern bestimmte Limitierungen eingebaut worden. Versucht z. B. ein Angreifer, bestimmte Scripte auszuführen, um an die Historie zu gelangen, wird nur die Information zurückgegeben, dass keine der verlinkten Seiten jemals besucht wurde.

Auch bei der Gestaltung wurden Grenzen gesetzt. Im Firefox z. B. können nur noch folgende Eigenschaften laut der Seite Privacy and the :visited selector im Mozilla Developer Network verwendet werden:

  • color
  • background-color
  • border-color
  • outline-color
  • fill
  • stroke

Es ist auch nicht mehr möglich, besuchten Links Transparenzen zuzuweisen oder ihnen ein Hintergrundbild zu geben.

Kein fester Standard

Momentan ist es so, dass jeder Browserhersteller eigene Maßnahmen ergreift, um den Missbrauch zu unterbinden. Teilweise erhält man wiedersprüchliche Informationen. Hier helfen nur Tests und gezieltes Informieren im Einzelfall.

a:hover

a:hover greift, wenn ein Besucher mit der Maus den Link berührt.

	a:hover { 	
		color: purple;
	}	

Aber nicht auf Touch-Geräten

Bei dieser Klasse ist zu beachten, dass es auf Smartphones und Tablets keinen hover-Status gibt. Man kann nur ein- oder zweimal Tippen mit dem Finger, was einem Klick bzw. Doppelklick gleich kommt. Das „hovern“ entspricht einem einzelnen Klick.

a:focus

Dieser Status tritt ein, wenn man mit der Tab-Taste durch die Links navigiert. Man sieht den Status auch ganz kurz, nachdem man einen Link geklickt hat.

	a:focus { 	
		color: yellow;
	}

a:active

Mit a:active spricht man den Link im Moment des Klicks an, bevor die Seite verlassen wird. Das ist nur eine sehr kurze Zeitspanne. Diesen Status sieht man besser, wenn man den Link klickt und die Maustaste gedrückt hält.

	a:active { 	
		color: red;
	}	

Kombinationen

Die Pseudoklassen können auch aneinandergereiht werden. Somit lässt sich mit a:visited:hover auch der Moment stylen, in dem mit der Maus über einen besuchten Link gefahren wird.

	a:visited:hover { 	
		color: aquamarine;
	}	

Reihenfolge beachten

Links können zum gleichen Zeitpunkt mehrere Pseudoklassen haben. Damit diese sich nicht gegenseitig überschreiben, ist die Reihenfolge, in der die Elemente im Stylesheet angeordnet sind, sehr wichtig.

Wenn z. B. ein Link geklickt wird, hat er am Anfang kurzzeitig auch den hover-Status, da sich die Maus noch auf dem Link befindet. Hier greift sowohl die Pseudoklasse a:hover als auch a:active.

Kämen also die Regeln für a:active vor den Regeln für a:hover, würde man den active-Status niemals zu Gesicht bekommen. Denn sind die Selektoren gleichwertig, gewinnt der Selektor, der weiter hinten im Stylesheet steht. Somit würde a:active von a:hover überschrieben.

Folgende Reihenfolge sollte eingehalten werden, damit keine Konflikte entstehen:

a { }
a:link { }
a:visited { }
a:hover { }
a:focus { }
a:active { }

Es gibt hierfür eine (englische) Eselsbrücke, besonders gut zu merken für Star Wars-Fans:

link – Lord
visited – Vader’s
hover– Handle
focus – Formerly
active – Anakin

Fazit

Es gibt genügend Möglichkeiten, die Links entsprechend Ihrem Status zu gestalten. Hier kann man der Fantasie (fast) freien Lauf lassen, solange man die Reihenfolge einhält.

Zu beachten sind auch die Beschränkungen bei a:visited. Wenn man sich über eine Formatierung ärgert, die nicht greift, muss es nicht unbedingt der eigene Fehler oder ein Bug sein. Es kann sich um eine absichtliche Limitierung des Browsers handeln, um Datendieben das Handwerk zu legen. Die Standards in den Browsern sind bisher nicht einheitlich, daher muss man sich im Problemfall gezielt informieren.

Wer sich näher informieren möchte, gelangt hier zum entsprechenden Teil in der W3C Recommendation Selectors Level 3.