: posjećeno - CSS-trikovi

Anonim

:visitedSelektor pseudo-klase možete promijeniti neke od stylinga na sidro veze ( ) elementa, ako je korisnikov preglednik je već posjetio vezu. To bi trebalo pomoći korisnicima da razlikuju razliku između veza koje imaju i koje nisu posjetili.

a:visited ( color: gray; )

Ograničenja i upotreba

Postoji određena zabrinutost zbog privatnosti :visited, naime da zlonamjerna web stranica može imati veze do tona web stranica sa :visitedstilom, a zatim testirati vizualni stil veza s JavaScriptom kako bi izvješćivala na serveru koje je web stranice korisnik posjetio. Ovo krši privatnost korisnika i potencijalno može otkriti podatke koji otkrivaju identitet.

Kao rezultat toga, većina preglednika ograničava koji se stil može mijenjati na :visitedvezama i koji se podaci o stilu mogu prijaviti getComputedStylemetodom.

Ovo je dobar zastoj te situacije.

Ovo su svojstva koja se mogu promijeniti pomoću :visited:

  • color
  • background-color
  • border-color (i njegova pod-svojstva)
  • outline-color
  • Dijelovi u boji filli strokesvojstva

:visitedTa svojstva možete koristiti samo za promjenu ako ih veza već ima u "neposjećenom" ili :linkstanju. Ne možete ga koristiti za dodavanje svojstava koja već nisu prisutna na vezi. Na primjer:

Možete promijeniti background-colorod :visitedveze, ako je element veza već imala boju pozadine.

Ne možete dodati background-coloru :visitedvezu, ako nije imala boju pozadine kada je bio „unvisited” link.

Povežite redoslijed pseudo-klasa

Također je korisno znati da bi većina pseudo-klasa veza trebala biti deklarirana određenim redoslijedom. Narudžba je:

  1. Veza
  2. Posjećeno
  3. Lebdjeti
  4. Aktivan

Ako uključujete :focusstyling veze, uobičajeno je dodavati je između "lebdenja" i "aktivne".

Demo

Proširivanje :visited

Iako je izravno oblikovanje :visitedveza ograničeno, postoji mnogo pametnih načina da proširite svoje mogućnosti za oblikovanje posjećenih veza. 2015. godine zabilježeno je mnogo blogova koji su dijelili nove ideje za oblikovanje :visitedveza:

Ponovno posjećivanje: posjećeno , Joel Califa, pokazuje primjer korištenja localstorageza oblikovanje posjećenih veza unutar domene.

Hakiranje: posjećeno , iz Une Kravets, okreće se :visiteddodavanjem oznake "ne posjećeno" kao :aftersadržaja na veze, koja se nakon skrivanja zamjenom boje pozadine skriva.

Pomicanje granica: posjećeno s CSS načinima miješanja , Steliana Fireza, kombinira mali HTML trik koji se pripisuje DuckDuckGo-u i background-blend-mode: screen;blijedi prilagođenu ikonu pored posjećene veze.

Oblikovanje posjećenih veza sa SVG-om , tvrtke Dudley Storey. Koristi SVG slike s fillpostavljenim za usklađivanje boje pozadine stranice kada je veza u :linkstanju, a zatim u drugu boju nakon veze :visited. Vodič također uključuje zamjensku metodu koja koristi Unicode znakove umjesto SVG-a.

Povezano

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

Više informacija

  • :visited u specifikaciji W3C
  • :visited na MDN

Podrška preglednika

Svi preglednici to podržavaju.