: besucht - CSS-Tricks

Anonim

Der :visitedPseudoklassen-Selektor kann einen Teil des Stils eines Anker-link ( ) -Elements ändern, wenn der Browser des Benutzers den Link bereits besucht hat. Es soll Benutzern helfen, den Unterschied zwischen Links zu unterscheiden, die sie besucht haben und die sie nicht besucht haben.

a:visited ( color: gray; )

Einschränkungen und Verwendung

Es gibt einige Datenschutzbedenken :visited, nämlich, dass eine böswillige Website Links zu Tonnen von Websites mit :visitedStil haben könnte. Testen Sie dann den visuellen Stil der Links mit JavaScript, um einem Server zu melden, welche Websites der Benutzer besucht hat. Dies verletzt die Privatsphäre des Benutzers und kann möglicherweise personenbezogene Daten preisgeben.

Infolgedessen beschränken die meisten Browser, welches Styling für :visitedLinks geändert werden kann und welche Styling-Informationen mit der getComputedStyleMethode gemeldet werden können.

Dies ist ein guter Überblick über diese Situation.

Dies sind die Eigenschaften, die geändert werden können mit :visited:

  • color
  • background-color
  • border-color (und seine Untereigenschaften)
  • outline-color
  • Die Farbteile der fillund strokeEigenschaften

Sie können :visiteddiese Eigenschaften nur ändern, wenn der Link sie bereits im :linkStatus "nicht besucht" oder "nicht besucht" enthält . Sie können damit keine Eigenschaften hinzufügen, die im Link noch nicht vorhanden sind. Zum Beispiel:

Sie können die background-coloreines :visitedLinks ändern , wenn das Linkelement bereits eine Hintergrundfarbe hatte.

Sie können background-coloreinem :visitedLink kein hinzufügen , wenn er keine Hintergrundfarbe hatte, als es sich um einen "nicht besuchten" Link handelte.

Verknüpfen Sie Pseudoklassen in der richtigen Reihenfolge

Es ist auch nützlich zu wissen, dass die meisten Link-Pseudoklassen in einer bestimmten Reihenfolge deklariert werden sollten. Die Reihenfolge ist:

  1. Verknüpfung
  2. hat besucht
  3. Schweben
  4. Aktiv

Wenn Sie das :focusStyling für Ihren Link einschließen , wird es häufig zwischen "Hover" und "Aktiv" hinzugefügt.

Demo

Erweitern :visited

Obwohl das direkte Styling für :visitedLinks begrenzt ist, gibt es viele clevere Möglichkeiten, Ihre Optionen für das Styling von besuchten Links zu erweitern. Im Jahr 2015 gab es eine große Anzahl von Blog-Posts, in denen neue Ideen für das Styling von :visitedLinks ausgetauscht wurden :

Wiederbesuchen: besucht von Joel Califa zeigt ein Beispiel für die Verwendung localstoragedes Stils von besuchten In-Domain-Links.

Hacking: besucht von Una Kravets stellt :visitedden Kopf auf den Kopf, indem :afterLinks ein „nicht besuchtes“ Tag als Inhalt hinzugefügt wird , das nach dem Besuch des Links mit einem Hintergrundfarbtausch ausgeblendet wird.

Die Grenzen von: besucht mit CSS- Mischmodi von Stelian Firez kombinieren einen kleinen HTML-Trick, der DuckDuckGo zugeschrieben wird, und background-blend-mode: screen;das Ausblenden eines benutzerdefinierten Symbols neben einem besuchten Link.

Styling Visited Links mit SVG von Dudley Storey. Verwendet SVG-Bilder mit einem fillSatz, der der Hintergrundfarbe der Seite entspricht, wenn sich der Link im :linkStatus befindet, und anschließend nach dem Link in eine andere Farbe :visited. Das Tutorial enthält auch eine alternative Methode, bei der Unicode-Zeichen anstelle von SVG verwendet werden.

verbunden

  • :link
  • :active
  • :hover
  • :focus

Mehr Informationen

  • :visited in der W3C-Spezifikation
  • :visited bei MDN

Browser-Unterstützung

Alle Browser unterstützen dies.