: besøgte - CSS-tricks

Anonim

Den :visitedpseudo-class selector kan ændre nogle af styling på et anker link ( ) element, hvis brugerens browser allerede har besøgt linket. Det er beregnet til at hjælpe brugerne med at skelne forskellen mellem links, de har og ikke har besøgt.

a:visited ( color: gray; )

Begrænsninger og anvendelse

Der er en vis bekymring om privatlivets fred omkring :visited, nemlig at et ondsindet websted kan have links til masser af websteder med :visitedstyling, og derefter teste den visuelle stil af linkene med JavaScript for at rapportere tilbage til en server, hvilke websteder brugeren har besøgt. Dette krænker brugerens privatliv og kan potentielt afsløre personligt identificerende oplysninger.

Som et resultat begrænser de fleste browsere, hvilken styling der kan ændres på :visitedlinks, og hvilke stylingoplysninger der kan rapporteres med getComputedStylemetoden.

Dette er en god nedgang i denne situation.

Dette er de egenskaber, der kan ændres med :visited:

  • color
  • background-color
  • border-color (og dets underegenskaber)
  • outline-color
  • Farvedelene af fillog strokeegenskaberne

Du kan kun bruge :visitedtil at ændre disse egenskaber, hvis linket allerede har dem i "ubesøgt" eller :linktilstand. Du kan ikke bruge den til at tilføje egenskaber, der ikke allerede findes på linket. For eksempel:

Du kan ændre background-coloret :visitedlink, hvis linkelementet allerede havde en baggrundsfarve.

Du kan ikke føje et background-colortil et :visitedlink, hvis det ikke havde en baggrundsfarve, da det var et "ubesøgt" link.

Link pseudoklasser i rækkefølge

Det er også nyttigt at vide, at de fleste af linkets pseudoklasser skal erklæres i en bestemt rækkefølge. Ordren er:

  1. Link
  2. Besøgt
  3. Hold markøren
  4. Aktiv

Hvis du inkluderer :focusstyling til dit link, er det almindeligt at tilføje det mellem "svæver" og "aktiv".

Demo

Forlænger :visited

Selvom direkte styling af :visitedlinks er begrænset, er der mange smarte måder at udvide dine muligheder for styling af besøgte links på. I 2015 var der en kofangerafgrøde af blogindlæg, der delte nye ideer til stylinglinks :visited:

Revidering: besøgt , fra Joel Califa, viser et eksempel på at bruge localstoragetil at style besøgte, domæne-links.

Hacking: besøgt , fra Una Kravets, tænder :visitedpå hovedet ved at tilføje et "ubesøgt" tag som :afterindhold til links, som derefter skjules med en baggrundsfarveswapp, efter at linket er besøgt.

At skubbe grænserne for: besøgt med CSS-blandingstilstande , fra Stelian Firez, kombinerer et lille HTML-trick, der tilskrives DuckDuckGo, og for background-blend-mode: screen;at falme et brugerdefineret ikon ud for et besøgt link.

Styling Besøgte links med SVG fra Dudley Storey. Bruger SVG-billeder med fillindstillet til at matche sidens baggrundsfarve, når linket er i :linktilstanden, derefter til en anden farve, efter at linket er :visited. Selvstudiet inkluderer også en alternativ metode, der bruger Unicode-tegn i stedet for SVG.

Relaterede

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

Mere information

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

Browsersupport

Alle browsere understøtter dette.