← Alle Beiträge

Anleitungen

Besuchte Links hervorheben — und warum CSS so wenig erlaubt

Suchergebnisse, eine Artikelliste, Dokumentation — und keine Möglichkeit zu erkennen, welche Links du schon geöffnet hast. Eine CSS-Regel behebt das. Und nebenbei lohnt es sich zu lernen, warum der :visited-Selektor so seltsam zurechtgestutzt ist.

Die Regel

Im CSS-Tab der Regel, URL-Muster für eine Seite mit Linklisten oder * global:

a:visited {
  color: #9333ea !important;
}

Das ist alles. Besuchte Links werden lila. Wähle eine Farbe, die sich stark von der normalen Linkfarbe unterscheidet, damit der Kontrast sofort lesbar ist.

Warum so wenig möglich ist

Der natürliche Instinkt: Wenn ich die Farbe ändern kann, füge ich auch ein Icon oder einen Hintergrund hinzu. Wirst du nicht — und das ist Absicht.

Würde :visited beliebige Stile erlauben, könnte jede Seite deinen Verlauf erkennen. Sie würde tausend versteckte Links einfügen, jedem über :visited eine andere Größe oder einen anderen Hintergrund geben, das Layout mit JavaScript messen und auslesen, welche URLs du besucht hast. Das war eine echte Schwachstelle (History Sniffing) — und Browser haben sie geschlossen.

Was erlaubt ist, was nicht

Auf :visited wirken nur Farbeigenschaften: color, background-color, border-color, outline-color. Und selbst die werden in eine Richtung „belogen":

Willst du mehr als Farbe?

Abzeichen, Icons, Besuchszähler — die gibt dir :visited nicht. Sie würden ein Verfolgen deines Verlaufs in JavaScript erfordern, was ein separates, viel schwereres Thema ist. Für die meisten Fälle reicht die Farbe allein völlig — denn das Einzige, was du wirklich brauchst, ist „war ich hier oder nicht".

Fallstricke

Siehe auch

Installiere JustZix — und erkenne auf einen Blick, wo du schon warst.

Bewerte diesen Beitrag

Noch keine Bewertungen — sei der Erste.

Probiere es selbst aus

Installiere JustZix und füge ein beliebiges Snippet aus diesem Artikel ein. Zwei Minuten von null bis zu einer funktionierenden Regel auf allen deinen Geräten.

JustZix holen

Funktionen · So funktioniert es · Beispiele · Anwendungsfälle