: odwiedzone - CSS-Tricks

Anonim

:visitedSelektor pseudo-klasa może zmienić niektóre z stylizacji na ogniwo kotwica ( ) elementu czy przeglądarka użytkownika już odwiedził link. Ma to pomóc użytkownikom odróżnić linki, które mają, a których nie odwiedzili.

a:visited ( color: gray; )

Ograniczenia i użycie

Istnieją pewne obawy dotyczące prywatności :visited, a mianowicie, że złośliwa witryna może zawierać odsyłacze do ton witryn ze :visitedstylami, a następnie przetestuj wizualny styl linków za pomocą JavaScript, aby zgłosić serwerowi, które witryny odwiedził użytkownik. Narusza to prywatność użytkownika i może potencjalnie ujawnić dane osobowe.

W rezultacie większość przeglądarek ogranicza możliwości zmiany stylów :visitedlinków i informacje o stylach, które można przekazać za pomocą tej getComputedStylemetody.

To dobry przykład tej sytuacji.

Oto właściwości, które można zmienić za pomocą :visited:

  • color
  • background-color
  • border-color (i jego właściwości podrzędne)
  • outline-color
  • Elementy koloru filli strokewłaściwości

Możesz użyć :visiteddo zmiany tych właściwości tylko wtedy, gdy łącze ma już je w stanie „nie odwiedzone” lub w :linkstanie. Nie możesz go użyć do dodania właściwości, których nie ma jeszcze w linku. Na przykład:

Można zmienić background-colorz :visitedlinku jeśli element Link już miał kolor tła.

Nie można dodać background-colordo :visitedlinku, jeśli nie mają kolor tła, gdy był „nieodwiedzonych” link.

Połącz pseudoklasy w kolejności

Warto również wiedzieć, że większość pseudoklas odsyłaczy powinna być zadeklarowana w określonej kolejności. Kolejność to:

  1. Połączyć
  2. Odwiedziłem
  3. Unosić się
  4. Aktywny

Jeśli :focusdodajesz styl dla swojego linku, często dodajesz go między „najechaniem” a „aktywnym”.

Próbny

Rozsuwalny :visited

Chociaż bezpośrednie stylizowanie :visitedlinków jest ograniczone, istnieje wiele sprytnych sposobów na rozszerzenie opcji stylizowania odwiedzanych linków. W 2015 r. Pojawiło się mnóstwo postów na blogach, w których przedstawiono nowe pomysły na stylizowanie :visitedlinków:

Ponowna wizyta: odwiedzone , z Joel Califa, pokazuje przykład użycia localstoragedo stylizacji odwiedzanych linków w domenie.

Hakowanie: odwiedzane , z Una Kravets, odwraca :visitedgłowę, dodając tag „unvisited” jako :aftertreść do linków, który jest następnie ukrywany za pomocą zamiany koloru tła po odwiedzeniu linku.

Przekraczanie granic: odwiedzone z trybami mieszania CSS , od Stelian Firez, łączy małą sztuczkę HTML przypisaną do DuckDuckGo i background-blend-mode: screen;zanika niestandardową ikonę obok odwiedzanego linku.

Stylizacja odwiedzonych linków za pomocą SVG , z Dudley Storey. Używa obrazów SVG z fillustawieniem, aby dopasować kolor tła strony, gdy łącze jest w :linkstanie, a następnie do innego koloru po tym, jak łącze jest :visited. Samouczek zawiera również alternatywną metodę wykorzystującą znaki Unicode zamiast SVG.

Związane z

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

Więcej informacji

  • :visited w specyfikacji W3C
  • :visited w MDN

Wsparcie przeglądarki

Obsługują to wszystkie przeglądarki.