Czy słyszałeś już o selektorach atrybutów albo generowaniu treści przy użyciu pseudoelementów w CSS? Jeśli nie, to pora poznać zaawansowane możliwości kaskadowych arkuszy stylów.
Przez lata wiele możliwości kaskadowych arkuszy stylów było ignorowane przez popularne przeglądarki internetowe. Twórcy Internet Explorera i Netscape\’a zamiast dostosowywać swoje produkty do wytycznych W3C, woleli tworzyć własne \”standardy\”.
Dzisiaj sytuacja wygląda nieco inaczej. Netscape
już wypadł z rynku, a w przypadku IE
może stać się to samo. Dlaczego? Oczywiście
ze względu na rosnącą popularność takich
programów, jak Firefox czy Opera. Niejako przy
okazji wymuszają one na firmie z Redmond
większe wsparcie dla standardów sieciowych.
To właśnie konkurencji wśród przeglądarek
zawdzięczamy coraz lepszą obsługę zaawansowanych
możliwości CSS.
Pod względem wsparcia dla CSS najbardziej
zaawansowane jest obecnie najnowsze wydanie
Opery o numerze 9.2. Niedaleko w tyle jest Firefox
2. Obsługują one selektory atrybutów, możliwość
generowania treści przy użyciu CSS, selektory
pseudoklas z CSS2, a ostatnimi czasy zaczynają
powoli wprowadzać obsługę pseudoklas dodanych
w CSS3. Dzięki tym programom udział Internet
Explorera w rynku przeglądarek spadł do około
65%. Co na to Microsoft?
MS trochę zaspał w ostatnich latach, ale obecnie
budzi się do życia. Niedawno światło dzienne
ujrzał Internet Explorer 7, który dał webmasterom
nową nadzieję na pozytywne zmiany. Niestety,
na razie okazały się one pobieżne. IE nie potrafi
jeszcze obsługiwać wszystkich możliwości CSS2,
więc o CSS3 lepiej nawet nie wspominać.
Wspominamy tutaj o trzeciej wersji języka
CSS. Jest ona od kilku lat opracowywana przez
konsorcjum W3C zrzeszające producentów oprogramowania
i specjalistów z całego świata.
Nie jest znany termin ukończenia prac nad CSS3, ale
mimo to twórcy takich przeglądarek, jak Firefox
czy Opera, już teraz wprowadzają jego elementy
do swoich produktów. Dla przykładu najnowszy
Firefox bez problemu radzi sobie z pseudoklasą
{stala}:target{/stala}, a zarówno Opera, jak i Firefox obsługują
takie pseudoklasy, jak {stala}:enabled{/stala}, {stala}:disabled{/stala} oraz
{stala}:checked{/stala}.
Jeżeli chcesz być na bieżąco ze zmianami,
możesz zawsze sprawdzić obsługę różnych
właściwości i wartości CSS w najpopularniejszych
przeglądarkach, odwiedzając stronę
internetową http://www.webdevout.net/browser-
support-css.
Selektory atrybutów
Opis zaawansowanych możliwości CSS
rozpocznijmy od selektorów atrybutów. Wiesz
zapewne, że znacznikom HTML możesz nadawać
atrybuty, np. TITLE, LANG, HOVER. Te elementy
fachowo zwie się właśnie atrybutami. Dzięki
selektorom atrybutów możesz tworzyć style działające
tylko dla elementów, które posiadają dany
atrybut lub dla których atrybut ten przyjmuje
odpowiednią wartość. Jeśli miałeś do czynienia
z wyrażeniami regularnymi występującymi
w różnych językach programowania, zrozumiesz
to w mgnieniu oka. Lecz i dla osób bez większego
doświadczenia powinno to być zagadnienie łatwe
do opanowania.
Posłużmy się przykładem. Załóżmy, że chcemy
nadać obramowanie odnośnikom mającym atrybut ALT. Zrobilibyśmy to w następujący sposób:
img[alt] {
border: 1px solid black;
}
Powyższy kod sprawi, że każdy obrazek mając
atrybut ALT otrzyma również dodatkowe obramowanie.
I to nawet jeśli ten ALT jest pusty. A więc
schemat używania tego selektora wygląda tak:
znacznik[atrybut] {
...
}
To tylko jeden z wielu selektorów atrybutów.
Kolejny sprawdza, czy w atrybucie występuje
określone słowo. Zapisuje się go stosując tyldę
i znak równości:
znacznik[atrybut~=\"wartość\"] {
...
}
Spróbuj teraz napisać regułę, która sprawi,
że specjalne obramowanie wyświetli się wokół
obrazków zawierających w atrybucie ALT słowo
\”webmaster\”. Jest to w istocie bardzo proste
zadanie:
img[alt~=\"webmaster\"] {
border: 1px solid black;
}
Aby selektor zadział, słowo to musi być
od innych oddzielone spacjami. Nie może być
bezpośrednio połączone z żadnym innym znakiem,
nawet myślnikiem. Selektor nie zadziała więc
w takiej sytuacji:
![\"webmaster-to](\"obrazek.gif\")
Jednak zadziała w tej:
Jeżeli tyldę zastąpisz gwiazdką, to selektor
zadziała nawet wtedy, gdy zdefiniowana wartość
będzie się stykać bezpośrednio z innymi znakami.
Tak więc taka reguła:
img[alt*=\"webmaster\"] {
border: 1px solid black;
}
zadziała w przypadku każdego kodu, w którym
występuje słowo \”webmaster\”. Zarówno dla
takiego:
jak i dla takiego:
W podobny sposób można wstawiać strzałki
przed wszystkimi linkami kierującymi poza nasz
serwis. Należy jedynie skorzystać z innego selektora
atrybutu:
a[hover$=\"pdf\"]:after {
content: url(obrazek.png);
}
Czy potrzebne jest dodatkowe wyjaśnienie?
Sprawdzamy, czy atrybut rozpoczyna się ciągiem
znaków \”http\” i jeśli tak, to wstawiamy przed nim
odpowiedni obrazek. Jest to proste, skuteczne
i bardzo przydatne, ponieważ pozwala zaoszczędzić
wiele pracy.
Generując treści za pomocą języka CSS, możesz
wyświetlić wartość samego atrybutu. Spróbujmy
zrealizować pewne niecodzienne zadanie. Napisz
teraz regułę, dzięki której za wszystkimi obrazkami
w formacie PNG zostanie wstawiona wartość ich
atrybutu ALT. Wartość atrybutu wyświetlamy w taki
sposób:
a[hover^=\"http\"]:before {
content: url(strzalka.png);
}
Tak więc reguła powinna zostać napisana następująco:
content: attr(atrybut)
Niestety z powyższym kodem nie radzą sobie
przeglądarki na silniku Gecko, takie jak Firefox,
Mozilla czy Flock. Idealnie interpretuje go jednak
norweska Opera.
Czas na odliczanie…
Zajmijmy się teraz innym aspektem generowania
treści. CSS oferuje bardzo interesującą opcję
tworzenia automatycznego odliczania dowolnych
elementów. Mógłbyś na przykład ponumerować
akapity tekstu. Zacznijmy od otoczenia akapitów
dodatkowym kontenerem:
img[src$=png]:after {
content: attr(alt);
}
Teraz wyzerujmy licznik w kodzie CSS:
Pierwszy akapit
Drugi akapit
Trzeci akapit
Czwarty akapit
Piąty akapit
W ten sposób nadaliśmy również nowemu
licznikowi własną nazwę. Jest ona niezbędna,
ponieważ na jednej stronie może się znajdować
wiele różnych liczników. Teraz posługując się pseudoelementem
{stala}:before{/stala}, wstawmy wartość licznika
przed akapitem:
#akapity {
counter-reset: akapity;
}
Pierwsza właściwość odpowiada za wstawienie
aktualnej wartości licznika. Druga sprawia,
że po każdym wstawieniu licznik zwiększa swoją
wartość. Możesz jeszcze poprawić ten przykład tak,
aby po liczbie wyświetlała się kropka i odstęp:
#akapity p:before {
content: counter(akapity);
counter-increment: akapity;
}
Powyższa funkcjonalność jest już obsługiwana
nie tylko przez Operę, ale również przeglądarki
oparte na silnik Gecko. Użytkownikom tych
przeglądarek możesz więc zaserwować dodatkowe
atrakcje. Zastanów się, do czego można wykorzystać
liczniki.
Może do dzielenia strony na rozdziały
i numerowania nagłówków? Może dodasz dodatkowe
opcje do arkuszy stylów przeznaczonych do
druku? Możliwości jest naprawdę sporo.
Następny selektor atrybutu sprawdza, czy
zawartość atrybutu jest identyczna, jak ta podana
w regule CSS. Aby go zastosować, z wyżej
omawianego selektora wystarczy usunąć znak
gwiazdki:
img[alt=\"webmaster\"] {
border: 1px solid black;
}
Zadziała on tylko i wyłącznie w jednej sytuacji:
Ostatnie dwa selektory sprawdzają, czy
atrybut zaczyna się lub kończy określonym ciągiem
znaków. Pierwszy z nich konstruujemy, używając
znaku \”daszku\”:
img[alt^=\"webmaster\"] {
border: 1px solid black;
}
Aby styl został zaaplikowany, zawartość atrybutu
musi rozpoczynać się ciągiem \”webmaster\”.
Teraz spójrz na selektor odwrotny do tego, który
tworzy się przy użycia znaku dolara:
img[alt$=\"webmaster\"] {
border: 1px solid black;
}
Aby zadziałał, atrybut musi kończyć się słowem
\”webmaster\”. Na przykład:
W jaki praktyczny sposób możesz wykorzystać
pięć omówionych tutaj selektorów? Najwięcej
zdziałasz, wykorzystując metody generowania
treści omówionej w następnej części artykułu, ale
już teraz warto wspomnieć o kilku przykładach.
Wykorzystując ostatni z omówionych selektorów
możesz nadać styl odnośnikom kierującym do
plików o danym formacie. Załóżmy na przykład, że
linki do plików DOC mają mieć niebieski kolor:
a[title$=\"doc\"] {
color: blue;
}
Wykorzystujemy fakt, że ten selektor definiuje
styl dla atrybutów kończących się odpowiednim
znakiem i wpisujemy do niego odpowiednie
rozszerzenie.
Generowanie treści
Automatyczne generowanie treści to kolejny
poziom wtajemniczenia w zaawansowane możliwości
arkuszy stylów. Korzystając z poniższych
technik w połączeniu z selektorami atrybutów,
jesteś w stanie zostać prawdziwym magikiem
CSS. Pamiętaj jednak, że Internet Explorer
w wersji 6 i niższych nie wesprze cię w twoich
sztuczkach.
Podstawową rolę w generowaniu treści przy
użyciu stylów odgrywają pseudoelementy {stala}:before{/stala}
i {stala}:after{/stala}. Ten pierwszy umożliwia wstawienie dowolnej
treści za elementem, do którego odnosi się
reguła CSS. Zmodyfikujmy nieco jeden z poprzednich
przykładów. Za każdym odnośnikiem mającym
w atrybucie ALT słowo \”webmaster\” wstawmy
frazę \”link webmastera\”. Podstawą reguły będzie
ten kod:
a[title$=\"doc\"] {
color: blue;
}
Jak widzisz, jest to banalnie proste. Używamy
w normalny sposób selektora atrybutu i dodajemy
do niego pseudoelement. Ale jak przeprowadzić
operację wstawienia treści? Musimy użyć dodatkowego
elementu content:
a[title*=\"webmaster\"]:after {
...
}
Możesz tę funkcję wykorzystać w bardzo praktyczny
sposób. W jaki sposób napisałbyś kod, który
za wszystkimi odnośnikami do plików PDF wstawia
odpowiedni obrazek? Wystarczy odwołać się do
atrybutu HOVER:
a[title*=\"webmaster\"]:after {
content: \"link webmastera\";
}
