Po przeczytaniu artykułu Rogera Johanssona postanowiłem rozwinąć pomysł, jaki tam przedstawił. Głównym celem tworzenia arkusza stylów przez użytkownika jest stylizacja linków jakie spotkamy codziennie w sieci. Jednak zastosowanie i możliwości takich styli są dużo większe.
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.