: aplankyta - CSS-gudrybės

Anonim

:visitedPseudo klasės selektorių galima pakeisti kai kuriuos stiliaus ant inkaro nurodo ( ) elementas, jei vartotojo naršyklė jau aplankė nuorodą. Tai skirta padėti vartotojams atskirti turimų ir neaplankytų nuorodų skirtumus.

a:visited ( color: gray; )

Apribojimai ir naudojimas

Yra tam tikras susirūpinimas dėl privatumo :visited, būtent tai, kad kenkėjiška svetainė gali turėti nuorodas į daugybę svetainių su :visitedstiliaus, tada išbandykite nuorodų vizualinį stilių naudodami „JavaScript“, kad praneštų serveriui, kuriose svetainėse vartotojas lankėsi. Tai pažeidžia vartotojo privatumą ir gali atskleisti asmenį identifikuojančią informaciją.

Todėl dauguma naršyklių apriboja, kokį stilių galima pakeisti :visitednuorodose ir kokią stiliaus informaciją galima pranešti taikant šį getComputedStylemetodą.

Tai yra geras tos situacijos nusileidimas.

Tai yra savybės, kurias galima pakeisti :visited:

  • color
  • background-color
  • border-color (ir jo sub-savybės)
  • outline-color
  • Spalvotos fillir strokesavybių dalys

:visitedŠias ypatybes galite naudoti tik tada, jei nuorodoje jos jau yra „nelankytos“ arba :linkbūsenos. Negalite jo naudoti norėdami pridėti ypatybių, kurių dar nėra nuorodoje. Pavyzdžiui:

Nuorodą galite pakeisti background-color, :visitedjei nuorodos elementas jau turėjo fono spalvą.

Jūs negalite pridėti background-colorprie :visitednuorodą, jei jis neturėjo fono spalvą, kai ji buvo "unvisited" nuorodą.

Susiekite „Pseudo“ klases eilės tvarka

Taip pat naudinga žinoti, kad dauguma nuorodų pseudoklasių turėtų būti deklaruojamos tam tikra tvarka. Užsakymas yra:

  1. Nuoroda
  2. Aplankyta
  3. Užveskite pelės žymeklį
  4. Aktyvus

Jei įtraukiate :focusnuorodos stilių, įprasta ją pridėti tarp „užveskite“ ir „aktyvi“.

Demonstracija

Pratęsimas :visited

Nors tiesioginis :visitednuorodų stilius yra ribotas, yra daug protingų būdų išplėsti lankomų nuorodų stiliaus parinktis. 2015 m. Buvo sukurtas trumpas tinklaraščio įrašų skaičius, kuriame dalijamasi naujomis idėjų stiliaus :visitednuorodomis:

Peržiūra: aplankyta , iš Joelio Califos, rodo localstoragelankomų domeno nuorodų stiliaus pavyzdį .

Įsilaužimas: aplankytas , nuo Unos Kravets, apsisuka :visitedant :afternuorodų kaip turinį pridėdamas „nelankytą“ žymą , kuri paslėpta fono spalvų apsikeitimu po to, kai aplankoma nuoroda.

Peržengus ribas: aplankyta naudojant CSS mišinio režimus , iš Steliano Firezo, sujungiamas nedidelis HTML triukas, priskirtas „DuckDuckGo“, ir background-blend-mode: screen;išnyksta pasirinktinė piktograma šalia aplankytos nuorodos.

„Styling Visited Links“ su SVG iš „Dudley Storey“. Naudojami SVG vaizdai su fillrinkiniu, kad atitiktų puslapio fono spalvą, kai nuoroda yra :linkbūsenoje, tada į kitą spalvą, kai nuoroda yra :visited. Pamokoje taip pat yra alternatyvus metodas, naudojant „Unicode“ simbolius, o ne SVG.

Susijęs

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

Daugiau informacijos

  • :visited W3C specifikacijoje
  • :visited MDN

Naršyklės palaikymas

Visos naršyklės tai palaiko.