: apmeklēja - CSS-triki

Anonim

:visitedPseido-klases selektoru var mainīt dažus stilizēt uz enkura saite ( ) elements, ja lietotāja pārlūkprogramma jau apmeklējis saiti. Tas ir paredzēts, lai palīdzētu lietotājiem noteikt atšķirību starp saitēm, kuras viņi ir apmeklējuši un nav apmeklējuši.

a:visited ( color: gray; )

Ierobežojumi un lietošana

Pastāv zināmas bažas par privātumu :visited, proti, ka ļaunprātīgai vietnei varētu būt saites uz daudzām vietnēm ar :visitedstilu, pēc tam pārbaudiet saišu vizuālo stilu ar JavaScript, lai ziņotu serverim, kuras vietnes lietotājs ir apmeklējis. Tas pārkāpj lietotāja privātumu un, iespējams, varētu atklāt personu identificējošu informāciju.

Rezultātā lielākā daļa pārlūkprogrammu ierobežo to, kādu stilu var mainīt :visitedsaitēs un kādu stila informāciju var ziņot, izmantojot šo getComputedStylemetodi.

Tas ir labs situācijas sabrukums.

Šīs ir īpašības, kuras var mainīt ar :visited:

  • color
  • background-color
  • border-color (un tā apakšīpašības)
  • outline-color
  • Krāsu daļas fillun strokeīpašības

Varat izmantot :visitedšo rekvizītu mainīšanu tikai tad, ja saitei tie jau ir “neapmeklēti” vai :linkstāvoklī. To nevar izmantot, lai pievienotu rekvizītus, kas vēl nav saitē. Piemēram:

Jūs varat mainīt background-colorpar :visitedsaiti, ja saite elements jau bija fona krāsu.

Saitei nevar pievienot a background-color, :visitedja tai nebija fona krāsas, kad tā bija “neapmeklēta” saite.

Saistiet pseidoklases secībā

Ir arī noderīgi zināt, ka lielākā daļa saišu pseidoklases ir jādeklarē noteiktā secībā. Pasūtījums ir:

  1. Saite
  2. Apmeklēja
  3. Virziet kursoru
  4. Aktīvs

Ja :focussavai saitei pievienojat stilu, parasti to pievieno starp “kursors” un “aktīvs”.

Demonstrācija

Pagarināšana :visited

Lai gan tiešā :visitedsaišu veidošana ir ierobežota, ir daudz gudru veidu, kā paplašināt apmeklēto saišu veidošanas iespējas. 2015. gadā bija emuāra ziņu buferis, kurā tika dalītas jaunas idejas :visitedsaišu veidošanai :

Pārskatīšana: apmeklēts no Džoela Kalifa parāda piemēru localstorageapmeklēto, domēna saišu stilizēšanai.

Datorurķēšana: apmeklētais , no Unas Kravecas, ieslēdzas :visited, pievienojot :aftersaitēm kā saturu “neapmeklētu” tagu , kas pēc saites apmeklēšanas tiek paslēpts ar fona krāsu maiņu.

Pārsniedzot robežas: apmeklēts ar CSS sajaukšanas režīmiem , no Stelian Firez, apvieno nelielu HTML triku, kas piešķirts DuckDuckGo, un background-blend-mode: screen;izbalināt pielāgotu ikonu blakus apmeklētajai saitei.

Apmeklēto saišu veidošana no Dudley Storey SVG . Izmanto SVG attēlus ar filliestatījumu, lai tie atbilstu lapas fona krāsai, kad saite ir :linkstāvoklī, un pēc tam uz citu krāsu pēc saites esamības :visited. Pamācībā ir iekļauta arī alternatīva metode, kurā SVG vietā tiek izmantotas Unicode rakstzīmes.

Saistīts

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

Vairāk informācijas

  • :visited W3C spec
  • :visited pie MDN

Pārlūka atbalsts

Visas pārlūkprogrammas to atbalsta.