: besøkt - CSS-triks

Anonim

Den :visitedpseudo-klassen velgeren kan endre noen av styling på et anker link ( ) element dersom brukerens nettleser allerede har besøkt link. Det er ment å hjelpe brukere med å skille forskjellen mellom lenker de har og ikke har besøkt.

a:visited ( color: gray; )

Begrensninger og bruk

Det er en viss bekymring for personvern :visited, nemlig at et ondsinnet nettsted kan ha lenker til mange nettsteder med :visitedstyling, og deretter teste den visuelle stilen til lenkene med JavaScript for å rapportere tilbake til en server hvilke nettsteder brukeren har besøkt. Dette krenker brukerens personvern og kan potensielt avsløre personlig identifiserende informasjon.

Som et resultat begrenser de fleste nettlesere hvilken styling som kan endres på :visitedlenker, og hvilken stylinginformasjon som kan rapporteres med getComputedStylemetoden.

Dette er en god nedgang i den situasjonen.

Dette er egenskapene som kan endres med :visited:

  • color
  • background-color
  • border-color (og dets underegenskaper)
  • outline-color
  • Fargedelene til fillog strokeegenskapene

Du kan bare bruke :visitedtil å endre disse egenskapene hvis lenken allerede har dem i "ubesøkt" eller :linktilstand. Du kan ikke bruke den til å legge til egenskaper som ikke allerede er til stede på lenken. For eksempel:

Du kan endre background-colorpå en :visitedlink hvis lenken element allerede hatt en bakgrunnsfarge.

Du kan ikke legge til en background-colori en :visitedlenke hvis den ikke hadde en bakgrunnsfarge da den var en "ubesøkt" lenke.

Koble pseudoklasser i rekkefølge

Det er også nyttig å vite at de fleste koblingens pseudoklasser skal deklareres i en bestemt rekkefølge. Bestillingen er:

  1. Link
  2. Besøkt
  3. Sveve
  4. Aktiv

Hvis du inkluderer :focusstyling for lenken din, er det vanlig å legge den til mellom "sveve" og "aktiv".

Demo

Forlenger :visited

Selv om direkte styling for :visitedlenker er begrenset, er det mange smarte måter å utvide alternativene dine for styling av besøkte lenker. I 2015 var det en bumper avling av blogginnlegg som delte nye ideer for stylinglenker :visited:

Gjennomgang: besøkt , fra Joel Califa, viser et eksempel på bruk localstoragetil å style besøkte koblinger på domenet.

Hacking: besøkt , fra Una Kravets, slår :visitedpå hodet ved å legge til en "ubesøkt" tag som :afterinnhold til lenker, som deretter blir skjult med en bakgrunnsfargebytte etter at lenken er besøkt.

Å skyve grensene for: besøkt med CSS-blandingsmodus , fra Stelian Firez, kombinerer et lite HTML-triks tilskrevet DuckDuckGo og for background-blend-mode: screen;å falme et tilpasset ikon ved siden av en besøkt lenke.

Styling Visited Links with SVG , fra Dudley Storey. Bruker SVG-bilder med fillsett for å matche sidens bakgrunnsfarge når lenken er i :linktilstanden, deretter til en annen farge etter at lenken er :visited. Opplæringen inkluderer også en alternativ metode som bruker Unicode-tegn i stedet for SVG.

I slekt

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

Mer informasjon

  • :visited i W3C-spesifikasjonen
  • :visited ved MDN

Nettleserstøtte

Alle nettlesere støtter dette.