De :visitedpseudo-class selector kan een deel van de stijl van een anker link ( ) element veranderen als de browser van de gebruiker de link al bezocht heeft. Het is bedoeld om gebruikers te helpen het verschil te onderscheiden tussen links die ze wel en niet hebben bezocht.
a:visited ( color: gray; )Beperkingen en gebruik
Er is enige bezorgdheid over de privacy :visited, namelijk dat een kwaadwillende website links kan hebben naar tonnen websites met :visitedstijl, en vervolgens de visuele stijl van de links met JavaScript kan testen om aan een server te rapporteren welke sites de gebruiker heeft bezocht. Dit schendt de privacy van de gebruiker en kan mogelijk persoonlijk identificeerbare informatie onthullen.
Als gevolg hiervan beperken de meeste browsers welke stijl kan worden gewijzigd op :visitedlinks en welke stijlinformatie kan worden gerapporteerd met de getComputedStylemethode.
Dit is een goed overzicht van die situatie.
Dit zijn de eigenschappen die kunnen worden gewijzigd met :visited:
colorbackground-colorborder-color(en zijn sub-eigenschappen)outline-color- De kleurdelen van de
fillenstrokeeigenschappen
U kunt :visiteddeze eigenschappen alleen wijzigen als de link ze al in de "unvisited" of :linkstatus heeft. U kunt het niet gebruiken om eigenschappen toe te voegen die nog niet op de link aanwezig zijn. Bijvoorbeeld:
U kunt de background-colorvan een :visitedlink wijzigen als het linkelement al een achtergrondkleur had.
U kunt geen a background-coloraan een :visitedlink toevoegen als deze geen achtergrondkleur had toen het een "niet-bezochte" link was.
Koppel pseudo-klassen in volgorde
Het is ook handig om te weten dat de meeste link-pseudo-klassen in een specifieke volgorde moeten worden gedeclareerd. De volgorde is:
- Koppeling
- Bezocht
- Zweven
- Actief
Als u een :focusstijl voor uw link opneemt, is het gebruikelijk om deze toe te voegen tussen "hover" en "active".
Demo
Verlengend :visited
Hoewel directe styling voor :visitedlinks beperkt is, zijn er veel slimme manieren om uw opties voor het stylen van bezochte links uit te breiden. In 2015 was er een enorme oogst aan blogposts met nieuwe ideeën voor stylinglinks :visited:
Opnieuw bezoeken: bezocht , van Joel Califa, toont een voorbeeld van het gebruiken localstorageom bezochte, in-domein links te stylen.
Hacking: bezocht , van Una Kravets, draait :visitedop zijn kop door een "unvisited" -tag als :afterinhoud aan links toe te voegen , die vervolgens wordt verborgen met een achtergrondkleurwissel nadat de link is bezocht.
De grenzen verleggen van: bezocht met CSS- mengmodi, van Stelian Firez, combineert een kleine HTML-truc toegeschreven aan DuckDuckGo en background-blend-mode: screen;om een aangepast pictogram naast een bezochte link te vervagen.
Styling Bezochte Links met SVG , van Dudley Storey. Gebruikt SVG-afbeeldingen met een fillset die overeenkomt met de achtergrondkleur van de pagina wanneer de link de :linkstatus heeft, en vervolgens naar een andere kleur nadat de link is geplaatst :visited. De tutorial bevat ook een alternatieve methode met Unicode-tekens in plaats van SVG.
Verwant
:link:active:hover:focus
Meer informatie
:visitedin de W3C-specificatie:visitedbij MDN
Browser-ondersteuning
Alle browsers ondersteunen dit.