: besökt - CSS-tricks

Anonim

Den :visitedpseudo-klass väljare kan förändra en del av styling på en ankarlänk ( ) inslag om användarens webbläsare redan har besökt länken. Det är tänkt att hjälpa användare att skilja mellan länkar de har och inte har besökt.

a:visited ( color: gray; )

Begränsningar och användning

Det finns en viss oro för integritet :visited, nämligen att en skadlig webbplats kan ha länkar till massor av webbplatser med :visitedstyling, testa sedan den visuella stilen för länkarna med JavaScript för att rapportera tillbaka till en server vilka webbplatser användaren har besökt. Detta bryter mot användarens integritet och kan eventuellt avslöja personlig identifierande information.

Som ett resultat begränsar de flesta webbläsare vilken styling som kan ändras på :visitedlänkar, och vilken stylinginformation som kan rapporteras med getComputedStylemetoden.

Detta är en bra nedgång i den situationen.

Det här är egenskaperna som kan ändras med :visited:

  • color
  • background-color
  • border-color (och dess underegenskaper)
  • outline-color
  • Färgdelarna av filloch strokeegenskaper

Du kan bara använda för :visitedatt ändra dessa egenskaper om länken redan har dem i "obesökt" eller :linktillstånd. Du kan inte använda den för att lägga till egenskaper som inte redan finns på länken. Till exempel:

Du kan ändra background-coloren :visitedlänk om länkelementet redan hade en bakgrundsfärg.

Du kan inte lägga till en background-colori en :visitedlänk om den inte hade en bakgrundsfärg när det var en "obesökt" länk.

Länka Pseudoklasser i ordning

Det är också användbart att veta att de flesta av länkens pseudoklasser ska deklareras i en specifik ordning. Ordern är:

  1. Länk
  2. Besökta
  3. Sväva
  4. Aktiva

Om du inkluderar :focusstyling för din länk är det vanligt att lägga till det mellan "sväva" och "aktivt".

Demo

Förlänger :visited

Även om direkt styling för :visitedlänkar är begränsad finns det många smarta sätt att utöka dina alternativ för styling av besökta länkar. År 2015 fanns det en stor skörd av blogginlägg som delar nya idéer för :visitedstylinglänkar:

Återbesök: besökt , från Joel Califa, visar ett exempel på att använda för localstorageatt utforma besökta länkar inom domänen.

Hacking: besökt , från Una Kravets, slår :visitedpå huvudet genom att lägga till en "obesökt" tagg som :afterinnehåll till länkar, som sedan döljs med en bakgrundsfärgsbyte efter att länken har besökts.

Att pressa gränserna för: besökte med CSS-blandningslägen , från Stelian Firez, kombinerar ett litet HTML-trick som tillskrivs DuckDuckGo och för background-blend-mode: screen;att blekna en anpassad ikon bredvid en besökt länk.

Styling Besökta länkar med SVG , från Dudley Storey. Använder SVG-bilder med fillset för att matcha sidans bakgrundsfärg när länken är i :linktillståndet, sedan till en annan färg efter länken :visited. Självstudien innehåller också en alternativ metod som använder Unicode-tecken istället för SVG.

Relaterad

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

Mer information

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

Webbläsarstöd

Alla webbläsare stöder detta.