DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Der :visited Pseudoklassen-Selektor kann *einige* der Stile eines Anker-Links (<a>) ändern, wenn der Browser des Benutzers den Link bereits besucht hat. Er soll den Benutzern helfen, den Unterschied zwischen Links, die sie besucht haben und solchen, die sie noch nicht besucht haben, zu erkennen.
a:visited {
color: gray;
}Einschränkungen und Verwendung
Es gibt einige Datenschutzbedenken bezüglich :visited, nämlich dass eine bösartige Website Links zu vielen Websites mit :visited-Styling haben könnte, und dann den visuellen Stil der Links mit JavaScript testen könnte, um an einen Server zurückzumelden, welche Seiten der Benutzer besucht hat. Dies verletzt die Privatsphäre des Benutzers und könnte potenziell persönlich identifizierbare Informationen preisgeben.
Daher schränken die meisten Browser ein, welche Stile für :visited-Links geändert werden können und welche Styling-Informationen mit der getComputedStyle-Methode gemeldet werden können.
Dies ist ein guter Überblick über diese Situation.
Dies sind die Eigenschaften, die mit :visited geändert werden können
colorbackground-colorborder-color(und seine Untereigenschaften)outline-color- Die Farbteile der
fill- undstroke-Eigenschaften
Sie können :visited nur verwenden, um diese Eigenschaften zu ändern, wenn der Link sie bereits im "unbesuchten" oder :link-Zustand hat. Sie können damit keine Eigenschaften hinzufügen, die auf dem Link nicht bereits vorhanden sind. Zum Beispiel
Sie *können* die background-color eines :visited-Links ändern, wenn das Link-Element bereits eine Hintergrundfarbe hatte.
Sie *können keine* background-color zu einem :visited-Link hinzufügen, wenn er als "unbesuchter" Link keine Hintergrundfarbe hatte.
Link-Pseudoklassen in Reihenfolge
Es ist auch nützlich zu wissen, dass die meisten Link-Pseudoklassen in einer bestimmten Reihenfolge deklariert werden sollten. Die Reihenfolge ist
- Link
- Besucht
- Hover
- Aktiv
Wenn Sie :focus-Styling für Ihren Link einschließen, wird es üblicherweise zwischen "hover" und "active" hinzugefügt.
Demo
Erweiterung von :visited
Obwohl das direkte Styling für :visited-Links begrenzt ist, gibt es viele clevere Wege, die Optionen für das Styling besuchter Links zu erweitern. Im Jahr 2015 gab es eine Flut von Blogbeiträgen, die neue Ideen für das Styling von :visited-Links teilten.
Revisiting :visited von Joel Califa zeigt ein Beispiel für die Verwendung von localstorage zum Stylen von besuchten Links innerhalb derselben Domain.
Hacking :visited von Una Kravets dreht :visited auf den Kopf, indem ein "unbesuchter" Tag als :after-Inhalt zu Links hinzugefügt wird, der dann durch eine Hintergrundfarbänderung versteckt wird, nachdem der Link besucht wurde.
Pushing the limits of :visited with CSS blend modes von Stelian Firez kombiniert einen kleinen HTML-Trick, der DuckDuckGo zugeschrieben wird und background-blend-mode: screen;, um ein benutzerdefiniertes Symbol neben einem besuchten Link einzublenden.
Styling Visited Links with SVG von Dudley Storey. Verwendet SVG-Bilder mit fill, die so eingestellt sind, dass sie mit der Hintergrundfarbe der Seite übereinstimmen, wenn sich der Link im :link-Zustand befindet, und dann mit einer anderen Farbe, nachdem der Link :visited ist. Das Tutorial enthält auch eine alternative Methode, die Unicode-Zeichen anstelle von SVG verwendet.
Browser-Unterstützung
Alle Browser unterstützen dies.
asd
Ein weiterer Eintrag für die Liste Erweiterung von :visited.
Dies wurde von Joel Calfas Skript inspiriert und verwendet ebenfalls localstorage, um besuchte Seiten zu speichern. Es kehrt das Konzept um, indem es neue/ungelesene Inhalte hervorhebt (anstelle von gelesenen). Das "Neu"-Flag kann auf "In den letzten X Tagen hinzugefügt" oder auf die gesamte Zeit beschränkt werden, bis der Besucher es sieht http://blog.fofwebdesign.co.uk/17-show-new-content-until-visited-link-tracking
Es sollte erwähnt werden, dass :visited im Inkognito-Modus nicht funktioniert, da Inkognito das Erinnern, ob ein Link besucht wurde, deaktiviert.
Vielen, vielen Dank!!!!! Ich bin ein lernender Neuling und habe den größten Teil des Vormittags damit verbracht, herauszufinden, warum meine "besuchten" Links für bestimmte Eigenschaften nicht geändert wurden. Unglaublich, aber Ihre Seite ist die einzige, auf der ich Informationen über die Einschränkungen von "visited" gefunden habe, nicht einmal W3Schools hatte diese. Und dafür danke ich Ihnen vielmals. Kopfschmerzen vorbei, ich bin doch kein vollständiger Coding-Dödel. Obwohl ich heute ein paar Stunden damit verbracht habe, Eigenschaften und Werte und Code zu ändern, und mir Sorgen gemacht habe, dass irgendwo ein Großbuchstabe falsch gesetzt war. Na ja, man lebt und lernt.
Vielen Dank und freundliche Grüße
Martin Eyre
Mann. Vielen Dank für das
„Sie können :visited nur verwenden, um diese Eigenschaften zu ändern, wenn der Link sie bereits im „unbesuchten“ oder :link-Zustand hat. Sie können damit keine Eigenschaften hinzufügen, die auf dem Link nicht bereits vorhanden sind. Zum Beispiel:“
Es machte mich wahnsinnig, warum ich a:link border auf Bilder setzen konnte, aber nicht auf a:visited.
Wenn man beiden Zuständen in Stylus einen Stil gibt, ändert sich endlich die Farbe von a:visited.
Liebe Grüße aus Österreich
Ich habe gelesen, dass die Einschränkungen und Begrenzungen existieren, um bösartige Websites daran zu hindern, unsere Aktivitäten zu verfolgen. Aber gibt es nicht unzählige Möglichkeiten, wie bösartige Websites wie Google.com unsere Aktivitäten verfolgen könnten? Wenn ja, warum existieren diese Styling-Beschränkungen immer noch?