CSS dla zaawansowanych: atrybuty i pseudoklasy

CSS umożliwia zaskakująco dużą kontrolę nad wyglądem strony. Przy użyciu atrybutów dopasowujących można szybko uzyskać popularne efekty: wyróżnienie pierwszej linii akapitu, linków wychodzących itp. Można prawie wszystko, prawie – ponieważ Internet Explorer nie radzi sobie z niektórymi technikami.

W poprzedniej części artykułu ({link2}http://www.internetmaker.pl/artykul/4890,1,css_dla_zaawansowanych_selektory.html{/link2}) poznaliśmy podstawowe selektory CSS. Były to selektory dziedziczące ({stala}child selectors{/stala}) i sąsiadujące ({stala}adjacent sibling selectors{/stala}). Dzięki nim można w łatwy sposób wpływać na bezpośrednich potomków danego obiektu oraz obiekty ustawionych w wybranej kolejności (np. wszystkie akapity znajdujące się bezpośrednio za obrazkiem: img+p).

Nie tylko selektory

Dużo więcej możliwości dają atrybuty ({stala}attribute selectors{/stala}), pseudoklasy takie jak „{stala}:hover{/stala}”, i pseudoelementy (np. „{stala}:first-line{/stala}”). Pozwalają one na zmianę wyglądu elementów niedostępnych przy pomocy typowych wywołań.

Selektory atrybutu działają podobnie do klas, ale rozszerzają ich użycie na wszystkie własności danego obiektu. Dzięki temu można nadać nowy styl np. akapitom, które mają jakąkolwiek klasę lub obrazkom o ustawionym tytule. Podstawowa forma wygląda następująco:

{stala}[atrybut]{/stala} to obiekty mające ustawiony atrybut, np. {stala}p[class]{/stala} oznacza wszystkie akapity mające nadaną klasę. Możemy wybrać również wartość atrybutu:

[atrybut=wartosc]

oznacza wszystkie elementy mające ustawiony dany atrybut na konkretną wartość. Przykładowo {stala}a[href=”http://google.pl”]{/stala} nada styl linkom prowadzącym do Google. Natomiast przyporządkowanie:

[atrybut~=slowo]

znajdzie elementy, których wartość zawiera całe słowo otoczone spacjami lub znajdujące się na początku albo końcu. Przykładowo {stala}p[title~=opis]{/stala} zaznaczy akapit o tytule „jakiś opis”, ale nie „ten akapit też jest opisany” – „opis” nie występuje w nim jako pojedyncze słowo.

W podobny sposób możemy łatwo ostylować wszystkie linki wychodzące z witryny. Wystarczy skorzystać z atrybutu dopasowującego elementy na podstawie początku wartości:

[atrybut^=wartosc]

przyporządkuje elementy, których atrybut zaczyna się na wartość. Wszystkie linki wychodzące zaczynają się od http://, więc wybieramy je w następujący sposób: {stala}a[href^=”http://”]{/stala}. W ten sam sposób można zaznaczyć odnośniki do zasobów innych niż strony www (serwer ftp, e-mail). Niestety, nie zawsze możliwe jest tak proste przypasowanie.

Często zdarza się, że nawet odnośniki znajdujące się w tym samym serwisie zaczynają się na „http” (adresowane są bezwzględnie). Można więc wybrać linki, w których adresie gdziekolwiek znajduje się nazwa domeny. Służy do tego operator gwiazdki:

[atrybut*=wartosc]

W powyższym przykładzie wartość występuje gdziekolwiek w atrybucie. Wszystkie linki znajdujące się w domenie internetmaker.pl będą więc zaznaczone przez przyporządkowanie

a[href*=internetmaker.pl]. 

Pseudoklasy i pseudoelementy

CSS oferuje również możliwość odniesienia się do elementów, które nie są jawnie zdefiniowanymi obiektami. Może to być np. link, ale tylko aktualnie wskazywany kursorem. Pseuoklasy oznacza się dwukropkiem. Jedną z najczęściej wykorzystywanych jest {stala}:hover{/stala}. Oznacza się tak elementy, które są aktualnie wskazane. Pisząc:

a:hover{ /*styl*/ }

możemy wpływać na wygląd wskazywanych odnośników. Warto dodać, że Internet Explorer umożliwia stosowanie tej pseudoklasy tylko w przypadku linków, a pozostałe przeglądarki dla wszystkich elementów.

Podobne do pseudoklas, dość często spotykane pseudoelementy to wskaźniki na pierwszą linię ({stala}:first-line{/stala}) i literę ({stala}:first-letter{/stala}) obiektu. Ab wyróżnić pierwszą linię, na wzór gazet, wystarczy krótki kod:

p:first-line{ /*styl*/ }

Analogicznie przedstawia się tworzenie inicjału:

p:first-letter{ /*styl*/ }

Przykłady pokazujące działanie atrybutów, pseudoklas i kilku pseudoelementów znajdują się w załączonym pliku. Warto uruchomić go pod kilkoma przeglądarkami i porównać ich zachowanie.

Poza standardami…

Bardzo ciekawą pseudoklasą, obsługiwaną przez niektóre przeglądarki, jednak nieznajdującą się w specyfikacji CSS jest operator {stala}:not( wyrazenie ){/stala}. Jest to przeczenie warunków znajdujących się w nawiasie. Dzięki temu możemy np. wybrać wszystkie akapity o klasie innej niż „klasa”:

p:not( [class="klasa"] )

Wracając do przykładu z linkami wychodzącymi poza serwis, możemy zaznaczyć je w następujący sposób:

a:not([href*="http://twojadomena.pl"]) { /* styl */ }

Najczęściej wykorzystywane pseudoklasy i pseudoelementy umieściliśmy w drugiej ramce:

Chociaż użycie selektorów jest wygodne i bardzo efektywne, nie wszystkie przeglądarki potrafią je dobrze obsłużyć. Największe problemy stwarza Internet Explorer (także w najpopularniejszej wersji 7). Należy więc zastanowić się, jak często użytkownicy witryny będą korzystać z tej przeglądarki. Trzeba wówczas wziąć pod uwagę fakt, że nie zobaczą wszystkiego i przygotować także oddzielne style. Bardzo ważne jest, aby osoby takie nie traciły nic na funkcjonalności i użyteczności strony!

Podobnie wygląda sprawa pseudoklas i pseudoelementów – IE albo nie będzie w stanie ich zidentyfikować (np. {stala}:before{/stala} i {stala}:after{/stala}) albo obsłuży akcje jedynie dla odnośników (np. {stala}:hover{/stala}). Inne przeglądarki pozwalają nadać te własności praktycznie wszystkim elementom witryny (np. {stala}:hover{/stala} na obrazku może go powiększyć). W najnowszej, ósmej wersji przeglądarki Microsoftu większość z omawianych elementów powinna być obsługiwana w trybie Standards Compliance.