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":
- Keine Layout-Eigenschaften.
display,font-size,content,visibility— auf:visitedignoriert. Deshalb funktionierta:visited::after { content: " ✓" }nicht. - getComputedStyle lügt. Nach der Farbe eines besuchten Links gefragt, gibt es die unbesuchte Farbe zurück — damit JavaScript die Wahrheit nicht lesen kann.
- Hintergrund und Rahmen müssen vorher sichtbar sein. Du kannst die Farbe eines Hintergrunds ändern, aber ihn nicht messbar aus dem Nichts „einschalten".
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
- Exakte URL-Übereinstimmung.
:visitedfunktioniert, wenn du genau diese Adresse besucht hast. Ein Link auf/artikelleuchtet nicht auf, wenn du auf/artikel?ref=xwarst. - SPAs und Links. In einer Single-Page-App kann eine „Navigation" eine Zustandsänderung ohne echte Navigation sein — der Browser zeichnet dann keinen Verlaufseintrag auf und
:visitedgilt nicht. - Kontrast. Lila auf weißem Hintergrund ist lesbar; auf einem dunklen Theme wähle einen helleren Ton.
Siehe auch
- Beispiele — dieses Snippet und anderes fertiges CSS
- Dunkelmodus für jede Website — eine weitere komfortorientierte CSS-Regel
- Cookie-Banner verstecken — CSS-basiertes Entrümpeln der Seite
Installiere JustZix — und erkenne auf einen Blick, wo du schon warst.
Bewerte diesen Beitrag
Noch keine Bewertungen — sei der Erste.