: obiskal - CSS-triki

Anonim

:visitedSelektor pseudo-class lahko spremenite nekatere styling na sidro povezave ( ) elementa, če je uporabnikov brskalnik že obiskali povezavo. Namenjen je uporabnikom, da ločijo razliko med povezavami, ki jih imajo in niso obiskali.

a:visited ( color: gray; )

Omejitve in uporaba

Obstaja nekaj pomislekov glede zasebnosti :visited, namreč, da bi lahko zlonamerno spletno mesto imelo povezave do številnih spletnih mest s :visitedstilom, nato pa preizkusite vizualni slog povezav z JavaScriptom, da strežniku sporoči, katera spletna mesta je uporabnik obiskal. To krši zasebnost uporabnika in bi lahko razkrilo osebne podatke.

Posledično večina brskalnikov omeji, kateri slog lahko spremenite na :visitedpovezavah in katere podatke o stilu lahko sporočite z getComputedStylemetodo.

To je dober izpad te situacije.

To so lastnosti, ki jih je mogoče spremeniti z :visited:

  • color
  • background-color
  • border-color (in njegove pod-lastnosti)
  • outline-color
  • Barvni deli fillin strokelastnosti

Te :visitedlastnosti lahko spremenite le, če jih ima povezava že v stanju »neobiskano« :link. Ne morete ga uporabiti za dodajanje lastnosti, ki še niso prisotne na povezavi. Na primer:

Spremenite lahko background-coloriz :visitedpovezave, če je povezava element že barvo ozadja.

Ne moreš dodati background-colorna :visitedpovezavo, če ni imel barvo ozadja, ko je bil "Neobiskane" link.

Povežite psevdorazrede v vrstnem redu

Koristno je tudi vedeti, da je treba večino psevdo-razredov povezav prijaviti v določenem vrstnem redu. Naročilo je:

  1. Povezava
  2. Obiskano
  3. Lebdi
  4. Aktivno

Če :focusza svojo povezavo vključujete styling, je običajno, da jo dodate med »hover« in »active«.

Demo

Podaljšanje :visited

Čeprav je neposredno oblikovanje :visitedpovezav omejeno, obstaja veliko pametnih načinov, kako razširiti svoje možnosti za oblikovanje obiskanih povezav. Leta 2015 je bilo objavljenih veliko objav objav v spletnih dnevnikih, ki so delili nove ideje za oblikovanje :visitedpovezav:

Ponovni obisk: obiskal , Joel Califa, prikazuje primer uporabe localstoragestilov obiskanih povezav v domeni.

Vdiranje: obiskovalec , Una Kravets, se obrne :visitedna glavo, tako :afterda povezavam doda oznako »neobiskan« , ki se po obisku povezave skrije z zamenjavo barve ozadja.

Premikanje meja: obiskal z načini mešanja CSS , Stelian Firez, združuje majhen trik HTML, pripisan DuckDuckGo, in background-blend-mode: screen;bledi ikono po meri ob obiskani povezavi.

Oblikovanje obiskanih povezav s SVG , Dudley Storey. Uporablja slike SVG z fillnastavitvijo, da se ujema z barvo ozadja strani, ko je povezava v :linkstanju, nato pa z drugo barvo po povezavi :visited. Vadnica vključuje tudi nadomestno metodo, ki uporablja znake Unicode namesto SVG.

Sorodno

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

Več informacij

  • :visited v specifikaciji W3C
  • :visited na MDN

Podpora za brskalnik

Vsi brskalniki to podpirajo.