Privatsphäre und der :visited-Selektor

Ursprünglich stellte der CSS :visited-Selektor ein Risiko für die Privatsphäre und Sicherheit dar. Mit ein wenig JavaScript konnten Websites den Browserverlauf eines Nutzers aufdecken und herausfinden, welche Seiten der Nutzer besucht hatte. Dies wurde durch Methoden wie window.getComputedStyle und andere Techniken erreicht. Dieser Prozess war schnell und ermöglichte es Websites nicht nur festzustellen, wo der Nutzer im Web war, sondern auch viele Informationen über die Identität des Nutzers zu erraten.

Um dieses Problem des Datenschutzes zu entschärfen, beschränken Browser die Menge an Informationen, die von besuchten Links abgerufen werden können.

Kleine Notlügen

Um die Privatsphäre der Nutzer zu wahren, lügen Browser in bestimmten Situationen gegenüber Webanwendungen:

  • Die window.getComputedStyle-Methode und ähnliche Funktionen wie element.querySelector geben immer Werte zurück, die darauf hinweisen, dass ein Nutzer keinen der Links auf einer Seite je besucht hat.
  • Bei der Verwendung eines benachbarten Selektors, wie etwa :visited + span, wird das angrenzende Element (in diesem Beispiel span) so gestylt, als wäre der Link nicht besucht.
  • In seltenen Fällen, wenn Sie verschachtelte Link-Elemente verwenden und das übereinstimmende Element sich von dem Link unterscheidet, dessen Anwesenheit im Verlauf überprüft wird, wird das Element so gerendert, als wäre der Link unbesucht.

Sie können besuchte Links stylen, jedoch gibt es Einschränkungen, welche Stile angewendet werden können. Nur die folgenden Stile können auf besuchte Links angewendet werden:

Darüber hinaus werden selbst bei den oben genannten Stilen keine Transparenzunterschiede zwischen unbesuchten und besuchten Links angewendet. Diese Einschränkung verhindert die Verwendung des alpha-Parameters in verschiedenen <color>-Funktionen oder des transparent-Schlüsselworts, um zwischen den beiden Zuständen zu unterscheiden.

Hier ist ein Beispiel, wie man Stile mit den vorgenannten Einschränkungen verwenden kann:

css
:link {
  outline: 1px dotted blue;
  background-color: white;
  /* The default value of `background-color` is `transparent`. You need to
     specify a different value, otherwise changes on `:visited` won't apply. */
}

:visited {
  outline-color: orange; /* Visited links have an orange outline */
  background-color: green; /* Visited links have a green background */
  color: yellow; /* Visited links have yellow colored text */
}

Auswirkungen auf Webentwickler

Folgendes sollten Sie in Betracht ziehen, wenn Sie Websites entwickeln:

  • Das Ändern von background-image-Werten basierend auf dem besuchten Status eines Links wird nicht funktionieren, da nur Farben verwendet werden können, um besuchte Links zu stylen.
  • Farben, die ansonsten transparent sind, werden nicht angewendet, wenn sie über einen :visited-Selektor gestylt werden.

Siehe auch