: vizitat - CSS-Tricks

Anonim

:visitedSelectorul pseudo-clasă poate schimba o parte din stilul pe un link de ancorare ( elementul) în cazul în care browser - ul utilizatorului a vizitat deja link - ul. Este menit să ajute utilizatorii să distingă diferența dintre linkurile pe care le-au vizitat și pe care nu le-au vizitat.

a:visited ( color: gray; )

Limitări și utilizare

Există o anumită îngrijorare privind confidențialitatea :visited, și anume faptul că un site web rău intenționat ar putea avea legături către tone de site-uri web cu :visitedstil, apoi să testeze stilul vizual al linkurilor cu JavaScript pentru a raporta la un server ce site-uri a vizitat utilizatorul. Acest lucru încalcă confidențialitatea utilizatorului și ar putea dezvălui informații de identificare personală.

Drept urmare, majoritatea browserelor restricționează stilul care poate fi modificat pe :visitedlinkuri și ce informații despre stil pot fi raportate cu această getComputedStylemetodă.

Aceasta este o degradare bună a acestei situații.

Acestea sunt proprietățile care pot fi modificate cu :visited:

  • color
  • background-color
  • border-color (și sub-proprietățile sale)
  • outline-color
  • Părțile de culoare ale fillși strokeproprietățile

Puteți utiliza :visitedpentru a modifica acele proprietăți numai dacă linkul le are deja în starea „nevizitat” :link. Nu îl puteți utiliza pentru a adăuga proprietăți care nu sunt deja prezente pe link. De exemplu:

Aveți posibilitatea să modificați background-colorunui :visitedlink dacă elementul de legătură deja a avut o culoare de fundal.

Nu puteți adăuga un background-colorla un :visitedlink dacă nu avea o culoare de fundal când era un link „nevizitat”.

Conectați Pseudo-Clase în ordine

De asemenea, este util să știți că majoritatea pseudo-claselor de linkuri trebuie declarate într-o ordine specifică. Ordinea este:

  1. Legătură
  2. Vizitat
  3. Planare
  4. Activ

Dacă includeți :focusstilul pentru linkul dvs., este obișnuit să îl adăugați între „hover” și „active”.

Demo

Se extinde :visited

Deși stilul direct pentru :visitedlinkuri este limitat, există o mulțime de moduri inteligente de a vă extinde opțiunile pentru stilizarea linkurilor vizitate. În 2015 a existat o recoltă rapidă de postări pe blog care împărtășeau idei noi pentru :visitedlinkuri de stil :

Revizitarea: vizitat , de la Joel Califa, prezintă un exemplu de utilizare localstoragea stilului de linkuri vizitate, în domeniu.

Hacking: vizitat , de la Una Kravets, se întoarce :visitedprin adăugarea unei etichete „nevizitate” ca :afterconținut la linkuri, care este apoi ascunsă cu un swap de culoare de fundal după ce linkul este vizitat.

Împingerea limitelor: vizitat cu moduri de amestecare CSS , de la Stelian Firez, combină un mic truc HTML atribuit lui DuckDuckGo și background-blend-mode: screen;pentru a estompa o pictogramă personalizată lângă un link vizitat.

Stilul legăturilor vizitate cu SVG , de la Dudley Storey. Folosește imagini SVG cu fillset pentru a se potrivi cu culoarea de fundal a paginii atunci când linkul este în :linkstare, apoi la o altă culoare după ce linkul este :visited. Tutorialul include, de asemenea, o metodă alternativă care utilizează caractere Unicode în loc de SVG.

Legate de

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

Mai multe informatii

  • :visited în specificația W3C
  • :visited la MDN

Suport pentru browser

Toate browserele acceptă acest lucru.