: meglátogatott - CSS-trükkök

Anonim

Az :visitedál-osztály választó megváltoztathatja a horgony link ( ) elem stílusának egy részét, ha a felhasználó böngészője már meglátogatta a linket. Célja, hogy segítsen a felhasználóknak megkülönböztetni a meglévő és meg nem látogatott linkek közötti különbséget.

a:visited ( color: gray; )

Korlátozások és használat

Van némi adatvédelmi aggály :visited, nevezetesen az, hogy egy rosszindulatú webhely rengeteg webhelyre mutató linkkel rendelkezhet :visitedstílusú formában, majd tesztelheti a linkek vizuális stílusát JavaScript-sel, hogy jelentést küldjön egy szervernek, amely webhelyeket a felhasználó meglátogatott. Ez sérti a felhasználó magánéletét, és potenciálisan személyazonosító információkat tárhat fel.

Ennek eredményeként a legtöbb böngésző korlátozza, hogy milyen stílus módosítható a :visitedlinkeken, és milyen stílusinformációk jelenthetők a getComputedStylemódszerrel.

Ez jó lerombolása ennek a helyzetnek.

Ezek a tulajdonságok módosíthatók :visited:

  • color
  • background-color
  • border-color (és altulajdonságai)
  • outline-color
  • A fillés a stroketulajdonságok színes részei

Csak akkor használhatja :visitedezeket a tulajdonságokat, ha a hivatkozás már „nem látogatott” vagy :linkállapotban van. Nem használható olyan tulajdonságok hozzáadására, amelyek még nincsenek meg a linken. Például:

Meg lehet változtatni a background-coloregy :visitedlinket, ha a link elem már a háttér színét.

Nem lehet hozzáadni background-colora :visitedlinket, ha nem rendelkezik a háttér színét, ha ez egy „látogatott” linkre.

Összekapcsolja az ál-osztályokat sorrendben

Hasznos tudni azt is, hogy a link-álosztályok többségét meghatározott sorrendben kell deklarálni. A sorrend:

  1. Link
  2. Meglátogatott
  3. Lebeg
  4. Aktív

Ha :focusa link stílusát is felveszi, akkor gyakran hozzáadja a „lebegés” és az „aktív” közé.

Demó

Kiterjedő :visited

Noha a :visitedlinkek közvetlen stílusa korlátozott, számos okos módszerrel bővítheti a meglátogatott linkek stílusának beállításait. 2015-ben olyan blogbejegyzések voltak rövidek, amelyek új ötleteket osztottak meg a :visitedlinkek stílusához :

Visszalátogatás : meglátogatott , Joel Califa, bemutat egy példát a localstoragemeglátogatott, tartományon belüli linkek stílusának használatára .

Hackelés: Una Kravets felkeresve meglátogatja:visited a fejét azzal, hogy :aftera linkekhez tartalomként egy „nem látogatott” címkét ad hozzá, amelyet a háttér meglátogatása után háttérszíncserével rejt el.

A Stelian Firez-től származó CSS-keverési módokkal: meglátogatott határainak túllépése kombinál egy kis HTML trükköt, amelyet a DuckDuckGo-nak tulajdonítottak, és background-blend-mode: screen;hogy elhalványuljon egy egyedi ikon a meglátogatott link mellett.

Styling Látogatott linkek az SVG-vel , a Dudley Storey-tól. A fillbeállított SVG-képeket az oldal háttérszínéhez igazítja, amikor a link :linkállapotban van, majd egy másik színre a hivatkozás után :visited. Az oktatóanyag egy alternatív módszert is tartalmaz, amely SVG helyett Unicode karaktereket használ.

Összefüggő

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

Több információ

  • :visited a W3C specifikációjában
  • :visited az MDN-nél

Böngésző támogatás

Minden böngésző támogatja ezt.