CSS - Reaktywujemy :visited

Krótko: dzisiaj o :visited, zmianach, 'obchodzeniu' tych zmian i o samym pomyśle wprowadzania tego typu ograniczeń. Pokażę jak zrobić dla linków ikonki dzięki którym będzie można rozróżnić linki odwiedzone, od tych nieodwiedzonych (z uwzględnieniem nowych ograniczeń).

Czekają nas zmiany (na plus i na minus) dotyczące pseudoklasy :visited związane z prywatnością. W przeglądarce Safari 5 zmiany już wprowadzono, a w Firefoksie 'nowe zasady' będą obowiązywać już za niedługo. Użytkownicy Firefoksa 4.0b1 już mogą dostrzec, że na wybranych stronach 'coś nie działa'. Kiedy miliony użytkowników Firefoksa zaktualizuje swoje przeglądarki, to już o nowym podejściu do :visited będzie trzeba pamiętać (większości nie da się już lekceważyć).

Ograniczenia są dość duże, ale nie oznacza to konieczności rezygnacji z naszej pomysłowości.

Przykładowo na archiwalnym blogu Riddla możemy obejrzeć ciekawe zastosowanie pseudoklasy :visited - linki do wybranych artykułów mają odmienny wygląd który jasno pokazuje, które z nich były przez nas czytane, a które nie (fragment widać poniżej).

Po zainstalowaniu bety Firefoksa 4 efektu już nie zobaczę. Jednak da się to rozwiązać w inny sposób - wystarczy zwykły CSS i nieco pomysłowości. Jednak zanim opiszę 'co i jak', to najpierw trochę wprowadzenia w temat nowego podejścia do :visited.

:visited - komu on właściwie przeszkadza?

Chodzi o prywatność. Tak po prostu. W sieci pojawiło się przynajmniej kilka popularnych stron, które zaczęły wykorzystywać nieprzewidzianą wcześniej właściwość :visited do tego, aby przykładowo sprawdzać czy dana osoba odwiedza strony z pewnymi konkretnymi treściami. Takie sprawdzanie nie jest trudne: wystarczy wstawić do dokumentu link i odpowiednio go ostylować. Następnie wykorzystując JS odczytać kolor / rozmiar / lub cokolwiek innego, czym różni się link odwiedzony, od tego nieodwiedzonego. Automatyzując całość można osiągnąć ciekawe rezultaty.

Internautom takie zagrania nie podobają się - wiadomo. Możliwość zobaczenia napisu typu "Oglądasz pornole w sieci" nie jest jeszcze niczym, co by miało prowadzić do takich zmian. Jednak autor strony może z taką informacją zrobić cokolwiek - to już jest problem. Tak więc słusznie podjęto się jego rozwiązania - moim zdaniem niezbyt optymalnego, ale o tym później.

Jakie ograniczenia?

Już nie będziemy mieć swobody takiej jak dawniej (przynajmniej jeśli chodzi o wybrane przeglądarki). Linki możemy stylować dowolnie, ale już tym z pseudoklasą :visited możemy jedynie zmienić kolor tekstu, kolor tła, kolor obramowania, czy też rzadziej stosowany outline-color.

Słówko 'zmienić' powyżej jest istotne - jeśli chcemy ustawić inne tło dla a:visited, to musimy je nadać wcześniej także dla 'zwykłego' a. To, że nasz link znajduje się przykładowo na białym tle (biały element pod linkiem) nie oznacza tego, że tło samego linka jest zdefiniowane.

To są jedyne możliwości jeśli chodzi o CSS (coś jeszcze?).

Elementy zagnieżdżone w <a> (czyli wszystkie a:visited element) również można stylować, ale z ograniczeniami jak powyżej.

Dlaczego wyeliminowano możliwość stosowania tła graficznego dla linków odwiedzonych?
Popatrzmy:

a {
  background-image: url(image.jpg?visited=no);
}

a:visited {
  background-image: url(image.jpg?visited=yes);
}

Chyba łatwo domyślić się, że po stronie serwera dałoby się przechwycić informacje o tym, czy dany link jest linkiem odwiedzonym, czy też nie.

Zauważymy, że nie mamy do dyspozycji niczego, co mogłoby zmieniać położenie, czy rozmiar linków - możliwość takich zmian pociągnęłaby za sobą łatwość wyciągania informacji z historii dzięki sprawdzaniu zachowań elementów sąsiednich.

Konstrukcja w CSS typu a:visited + element też nie pozwoli nam na sprytne obejście ograniczeń.

Czyli mamy białą listę sposobów stylowania a:visited i nic poza tym użyć już nie możemy, bo po prostu nie zadziała. Z poziomu JS odczytując cokolwiek na temat konkretnego linku odwiedzonego dostaniemy dane takie, jak gdyby to był link nieodwiedzony - czyli żegnajcie wszystkie 'DidYouWatch...' (tu trzeba dodać, że tylko w założeniach).

I jak tu teraz tworzyć ciekawe rozwiązania z :visited?

Zakładamy, że interesuje nas zdecydowana większość użytkowników. Bazując na rozwiązaniu Riddla pokazanym wyżej, zrobiłbym to tak: przykład działający w przeglądarkach Safari 5 i Firefox 4. W innych przeglądarkach też zadziała, ale skupiam się na tych z nowymi ograniczeniami.

Nie mamy możliwości zmiany elementów graficznych (tło graficzne, obrazek, itp) dla wyróżniania elementów odwiedzonych. Nie wyklucza to jednak tego, że grafiki użyjemy w celu rozróżnienia linków odwiedzonych.

W przykładzie dla linków odwiedzonych nie zmieniałem niczego, poza kolorem tła pewnego elementu. Czyli ponownie wykorzystuje png, jego przeźroczystość i podmianę koloru. Najpierw tworzymy zwykłe menu dodając paddingami miejsce na ikonki po lewej stronie (całości opisywać dokładniej nie trzeba). Następnie do całości dodajemy trochę kodu:

li a {
	position:relative;
}

li a:before {
	content: url(icon.png);
	background-color:#E4E4E4;
	position: absolute;
	top:0;
	left:0;
	width:26px;
	height:27px;
}

li a:visited:before {
	background-color:#000;
}

Kolejno:

• Dla linków ustawiamy position:relative; dzięki czemu będziemy mogli łatwo pozycjonować ikonki
• Wykorzystując generowaną zawartość dodajemy ikonkę w png z odpowiednią 'dziurką' w środku. 'Dziurkę' maskujemy odpowiednim tłem, określamy rozmiary i ustawiamy w odpowiednim miejscu.
• Dla linków odwiedzonych zmieniamy tło pod ikonką. Ikonka pozostaje ta sama. Nowe ograniczenia nie pozwalają na jej podmianę tutaj, jednak sztuczka z 'dziurką' daje efekt podmienionej ikonki.

Wykorzystując metodę przeźroczystych plików .png można na wiele ciekawych sposobów oznaczać linki odwiedzone. Czyli ograniczenia nie są znów aż tak dotkliwe, jak mogłoby się początkowo wydawać.

Inny przykład bazujący na tym rozwiązaniu.

:visited - czy aż tak potrzebny?

Bez :visited da się żyć. Jednak bywa często przydatny. Osobiście jego braku nie zauważyłbym w przypadku 'samotnych' linków otoczonych treścią. Moim zdaniem najlepiej pamiętać o nim w przypadku skupiska linków, tym bardziej, jeśli te linki ciągle się zmieniają. Mam tu na myśli wyżej opisywaną listę linków na blogu Riddla, czy też inne skupiska linków takie jak "Najpopularniejsze" (prawa kolumna) na Joggerze - do niedawna linki tam obecne miały zmieniony kolor tła jeśli były odwiedzone, dzięki czemu łatwiej można było je dostrzec.

Dla mnie dodatkowy element dla a:visited taki jak ikonka, czy też pojawienie się określonego tła jest lepszym zaakcentowaniem różnicy, niż stosowanie 'wyblakłego' koloru.

Czy takie ograniczenia były potrzebne?

Moim zdaniem nie. Wystarczyło zastosować ograniczenia tylko dla linków wychodzących poza określoną domenę (analogicznie jak zasięg działania JS). Tak więc przykładowo ikonki na blogu Riddla działałyby nadal.

Prywatności nie dałoby się naruszyć w przypadku, kiedy z odwiedzonymi linkami wewnętrznymi moglibyśmy robić co tylko byśmy chcieli (jak do tej pory) - przecież i tak możemy poznawać które podstrony naszej witryny zostały odwiedzone dzięki innym metodom.

Czyli odebrano webmasterom coś, czego nie trzeba było odbierać. Nie widzę żadnego powodu dla którego należy ograniczać :visited wszystkim linkom. Może jest jakiś istotny powód, o którym nie wiem?

Co teraz stracimy?

Załóżmy, że mamy stronę którym linki do prac / artykułów / czy czegokolwiek innego są ułożone w taki sposób, że najpierw znajdują się linki do stron nieobejrzanych, a dopiero po nich cała reszta, z którą odwiedzający się zapoznał. Do tej pory działało to tak, że za pomocą jQuery linki były sortowane.

Drugi przykład: Na swoim blogu pod wpisami chce umieścić linki do nieczytanych przez Ciebie wpisów - zrobiłbym to ukrywając te przeczytane za pomocą CSS. Teraz już tak się nie da.

Kolejny przykład: mam portfolio ze zdjęciami - miniaturki obejrzane przyciemniam tak, aby te nieodwiedzone rzucały się w oczy.

Sposobów na wykorzystanie :visited jest wiele. Teraz nie będziemy mieli tak łatwo. Warto zwrócić uwagę, że opisywane przykłady dotyczą linków 'lokalnych' (nie wychodzących poza określoną domenę).

Przykładów kiedy funkcjonalność z linkami 'zewnętrznymi' byłaby ograniczona, będzie z pewnością mniej. Tutaj podpadłby przykładowo Jogger ze swoimi linkami do blogów.

A co zrobić jeśli koniecznie potrzebujemy zachować :visited?

Dla linków wychodzących poza domenę nie istnieje sposób całkowitej 'reaktywacji'. Dla linków 'wewnętrznych' już tak. Wystarczy wykorzystać cookies. Sposób niezbyt idealny, ale jeśli ktoś uważa, że zaznaczenie linków odwiedzonych jest ważne na jego witrynie, to bez większych problemów może takie rozwiązanie wdrożyć.

Gdy gość na stronie odwiedzi daną podstronę, to w cookies zostaje zapisana informacja o tym w postaci id strony, czy też innej cechy wyróżniającej. Dzięki temu dostaniemy listę podstron odwiedzonych. Następnie trzeba te informacje wykorzystać w przypadku konkretnych linków, np. tych z portfolio, itd przypisując im odpowiednią klasę.

Czyli w projekcie zamiast a:visited można używać a.visited.

Do zaznaczania linków rozsianych w treści taka metoda będzie bardzo nietrafiona. Tutaj swobodnie wystarczy zmiana tła, koloru tekstu, czy dodania podkreślenia (border-bottom).

Coś jeszcze?

W jednym z kolejnych wpisów opiszę (wraz przykładem) w jaki sposób wyciągnąć od gości na stronie (korzystających z Firefoksa 4) informacje na temat tego, czy odwiedzają strony 'z pewnymi treściami' - oczywiście bez ich wiedzy ;)

Jeśli znalazłeś jakieś błędy powyżej, to napisz.