: navštíveno - Triky CSS

Anonim

:visitedVolič pseudo-class může změnit některé ze styling na kotva link ( ) prvku, pokud prohlížeč uživatele již navštívil odkaz. Má to pomoci uživatelům rozlišit rozdíl mezi odkazy, které mají a nenavštívili.

a:visited ( color: gray; )

Omezení a použití

Existují určité obavy týkající se ochrany osobních údajů :visited, a to, že škodlivá webová stránka může mít odkazy na spoustu webů se :visitedstylem, a poté otestovat vizuální styl odkazů pomocí JavaScriptu a hlásit zpět serveru, které stránky uživatel navštívil. To porušuje soukromí uživatele a může potenciálně odhalit osobní identifikační údaje.

Výsledkem je, že většina prohlížečů omezuje, jaký styl lze na :visitedodkazech změnit a jaké informace o stylingu lze pomocí getComputedStylemetody nahlásit .

To je dobrá situace.

Jedná se o vlastnosti, které lze změnit pomocí :visited:

  • color
  • background-color
  • border-color (a jeho dílčí vlastnosti)
  • outline-color
  • Barevné části filla strokevlastnosti

:visitedTyto vlastnosti můžete použít pouze v případě, že je odkaz již má v „nenavštíveném“ :linkstavu. Nelze jej použít k přidání vlastností, které již na odkazu nejsou. Například:

Můžete změnit background-colorz :visitedodkazu v případě, že spojovací prvek již měl barvu pozadí.

Nelze přidat a background-colork :visitedodkazu, pokud neměl barvu pozadí, když se jednalo o „nenavštívený“ odkaz.

Propojte pseudotřídy v pořadí

Je také užitečné vědět, že většina pseudotříd odkazů by měla být deklarována v určitém pořadí. Objednávka je:

  1. Odkaz
  2. Navštíveno
  3. Vznášet se
  4. Aktivní

Pokud :focuspro svůj odkaz používáte styl, je běžné jej přidat mezi „vznášet se“ a „aktivní“.

Ukázka

Prodlužování :visited

Ačkoli je přímý styl pro :visitedodkazy omezený, existuje spousta chytrých způsobů, jak rozšířit možnosti stylování navštívených odkazů. V roce 2015 došlo k nárazové plodině blogových příspěvků, které sdílely nové nápady pro stylové :visitedodkazy:

Revisiting: navštívil , od Joel Califa, ukazuje příklad použití localstorageke stylu navštívených odkazů v doméně.

Hackování: navštíveno , od Una Kravets, se otočí :visitedna hlavu přidáním značky „unvisited“ jako :afterobsahu do odkazů, která je poté po návštěvě odkazu skryta záměnou barvy pozadí.

Posouvání limitů: navštíveno pomocí režimů míchání CSS , od Stelian Firez, kombinuje malý trik HTML přisuzovaný DuckDuckGo a background-blend-mode: screen;k vyblednutí vlastní ikony vedle navštíveného odkazu.

Styling Visited Links with SVG , od Dudley Storey. Používá obrázky SVG se fillsadou, aby odpovídala barvě pozadí stránky, když je odkaz ve :linkstavu, a poté další barvě po odkazu :visited. Výukový program obsahuje také alternativní metodu používající znaky Unicode místo SVG.

Příbuzný

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

Více informací

  • :visited ve specifikaci W3C
  • :visited ve společnosti MDN

Podpora prohlížeče

Podporují to všechny prohlížeče.