: navštívené - Triky CSS

Anonim

:visitedVolič pseudo-class môže zmeniť niektoré zo styling na kotva link ( ) prvku, ak prehliadač užívateľa už navštívil odkaz. Má pomôcť používateľom rozlíšiť rozdiel medzi odkazmi, ktoré navštívili a ktoré nenavštívili.

a:visited ( color: gray; )

Obmedzenia a použitie

Existujú určité obavy týkajúce sa ochrany osobných údajov :visited, konkrétne to, že škodlivá webová stránka môže mať odkazy na veľa webových stránok so :visitedštýlom. Potom otestujte vizuálny štýl odkazov pomocou JavaScriptu a nahláste späť serveru, ktoré stránky používateľ navštívil. To porušuje súkromie používateľa a mohlo by to potenciálne odhaliť osobné identifikačné údaje.

Výsledkom je, že väčšina prehľadávačov obmedzuje, aký štýl je možné zmeniť na :visitedodkazoch a aké štýlové informácie je možné pomocou tejto getComputedStylemetódy nahlásiť .

Toto je dobrý prehľad tejto situácie.

Toto sú vlastnosti, ktoré je možné zmeniť pomocou :visited:

  • color
  • background-color
  • border-color (a jeho čiastkové vlastnosti)
  • outline-color
  • Farebné časti filla strokevlastnosti

:visitedTieto vlastnosti môžete použiť na zmenu, iba ak ich odkaz už má v „nenavštívenom“ :linkstave alebo stave. Nemôžete ho použiť na pridanie vlastností, ktoré sa v odkaze ešte nenachádzajú. Napríklad:

Môžete zmeniť background-colorz :visitedodkazu v prípade, že spojovací prvok už mal farbu pozadia.

Nemôžete pridať odkaz background-colordo :visitedodkazu, ak nemal farbu pozadia, keď išlo o „nenavštívený“ odkaz.

Prepojte pseudotriedy v poradí

Je tiež užitočné vedieť, že väčšina pseudotried odkazov by mala byť deklarovaná v konkrétnom poradí. Objednávka je:

  1. Odkaz
  2. Navštívené
  3. Vznášať sa
  4. Aktívny

Ak :focuspre svoj odkaz uvádzate štýl, je bežné pridávať ho medzi „ukážku“ a „aktívny“.

Ukážka

Predĺženie :visited

Aj keď je priamy styling :visitedodkazov obmedzený, existuje veľa šikovných spôsobov, ako rozšíriť možnosti štýlovania navštívených odkazov. V roku 2015 došlo k nárazovej úrode blogových príspevkov, ktoré zdieľali nové nápady pre štýlové :visitedodkazy:

Revisiting: navštívil , od Joel Califa, ukazuje príklad použitia localstoragena štýl navštívených odkazov v doméne.

Hacking: navštívil , od spoločnosti Una Kravets, otočil :visitedsvoju hlavu pridaním „nenavštívenej“ značky ako :afterobsahu k odkazom, ktorá sa potom po návšteve odkazu skryje pomocou výmeny farby pozadia.

Posunutie hraníc: navštívené pomocou režimov kombinovania CSS , od Stelian Firez, kombinuje malý trik HTML pripísaný DuckDuckGo a zoslabenie background-blend-mode: screen;vlastnej ikony vedľa navštíveného odkazu.

Styling Visited Links with SVG , od Dudleyho Storeyho. Používa obrázky SVG s fillnastavením, ktoré sa zhoduje s farbou pozadia stránky, keď je odkaz v :linkstave, potom s inou farbou po vytvorení odkazu :visited. Výukový program obsahuje aj alternatívnu metódu, ktorá namiesto znakov SVG používa znaky Unicode.

Súvisiace

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

Viac informácií

  • :visited v špecifikácii W3C
  • :visited na MDN

Podpora prehľadávača

Podporujú to všetky prehľadávače.