Idea

Pomysł polega na wykorzystaniu pseudo-klas :before i :after dla oznaczenia rodzaju łącza. Odpowiednia stylizacja linków, które same otwierają się w nowych oknach, albo linków do dokumentów PDF jest bardzo użyteczna. Nie musimy już kontrolować paska stanu lub zgadywać, co zobaczymy po kliknięciu danego linka.

Roger wykorzystał nie tylko pseudo-elementy, ale także zaawansowane selektory. Selektor atrybutu a[href="val"] należy do CSS 2.1, a selektor a[href$="val"] to element dostępny w wersji CSS3.

Trzeba przyznać, że nie jest rozwiązanie uniwersalne, które działa we wszystkich przeglądarkach. Wspomniane selektory nie działają w Internet Explorer 6, ale są przeważnie wspierane przez nowoczesne przeglądarki. Należy więc stosować je głównie jako style użytkownika, które będą przechowywane na lokalnym komputerze w katalogu przeglądarki.

Wersja podstawowa

Wygląd linków modyfikujemy poprzez dodanie odpowiedniej zawartości na początku lub na końcu linka. Przykładowo linki, które otwierają się w nowych oknach mają atrybut target, a właśnie selektor atrybutu pozwala na łatwe ich stylowanie.

a[target="_blank"]:before,
a[target="new"]:before {
	margin: 0 5px 0 0;
	padding: 1px;
	border: 1px solid #444;
	color: #333;
	background: #eee;
	font-family: sans-serif;
	content: "279C";
}

Powyższy kod jest zmodyfikowanym przykładem z artykułu Rogera. Dla wszystkich linków z atrybutem target równym _blank lub new będą obowiązywać przedstawione reguły. Oczywiście możemy je dowolnie zmodyfikować, dodając nowe lub usuwając istniejące deklaracje.

Strzałka skierowana w prawo na siwym tle niekoniecznie musi nam się kojarzyć z nowym oknem przeglądarki, ale to od użytkownika zależy w jaki sposób zmieni wygląd linków.

Inny przykładem niech będą bardzo często spotykane w sieci linki do plików PDF, MP3 czy jakichkolwiek innych. Ich stylizacja może będzie niesłychanie prosta dzięki poniższym regułom CSS.

a[href$="pdf"]:after {
	margin: 0 0 0 5px;
	content: " (PDF)";
	color: #999;
}

Umieszczenie napisu z typem pliku, którego linkuje jest bardzo pomocne. Informacja z prawej strony linku jest bardzo czytelna, a dla własnych potrzeb możemy ją zmienić.

Przygotowanie takiego zestawu nie powinno sprawić żadnych problemów, a dla zainteresowanych zamieszczam przykład wersji podstawowej dla najpowszechniejszych plików.

Wersja rozszerzona

Dla osób o większych wymaganiach estetycznych mogę zaproponować ikonki w wymiarach 16×16 pikseli zamiast tekstu z typem pliku. Łatwo tego dokonać poprzez zmianę reguł dla konkretnych typów plików.

Ikona dla danego typu plików będzie centralnie pozycjonowana w poziomie i w pionie jako tło. Margines odsuwa obrazek od łącza. Ustawienie szerokości i wysokości dla tego pseudo-elementu nie daje oczekiwanego efektu, ponieważ tylko wartość content może go rozciągnąć. W związku, z tym dajemy pustą zawartość oraz dopełnienie z prawej strony, równe szerokości obrazka.

a[href$=".pdf"]:before {
	margin: 0 5px 0 0;
	background: url(img/pdf.png) center center no-repeat;
	content: "";
	padding-right: 16px;
}

W ten sposób tworzymy style dla innych rodzajów plików. Pozostaje jeszcze kwestia sposobu przechowywania samych ikon dla tych reguł. Najłatwiej jest utworzyć katalog z ikonami, które wykorzystamy w stylach, analogicznie jak to zostało pokazane powyżej.

Innym sposobem jest zapisanie samej ikony w pliku CSS poprzez ciąg base64. Plusem tej metody jest zapisanie wszystkich obrazków w jednym pliku CSS. Minus to konieczność tworzenia takiego ciągu dla każdej ikony oddzielnie.

a[href$=".pdf"]:before {
	...
	background: url(data:image/png; base64,<base64 STRING>") center center no-repeat;
	...
}

Na koniec pozostaje nam jeszcze zapisanie wybranych styli jako user-css. Przykładowo Firefox3, którego używam posiada katalog chrome i tam właśnie zapisane są style użytkownika w pliku userContent.css.

Podsumowanie

Użyteczność takiego arkusza styli jest naprawdę duża. Sposób jego utworzenia nie powinien sprawić problemów nawet początkującym użytkownikom sieci, a na pewno oszczędzi wielu niespodzianek podczas klikania linków.

Wybór między informacją w postaci tekstu lub obrazka, jak i samych ikon zależy od osobistych preferencji użytkowników. Na koniec możemy jeszcze zobaczyć przykład stylowania linków w wersji rozszerzonej.