Norweska przeglądarka Opera to w tym momencie najbardziej zaawansowany program, jeżeli chodzi o interpretację standardów sieciowych. Oferuje webmasterom największe możliwości i wgląd w rozwiązania, które w innych produktach nie są jeszcze w pełni dostępne. Z tej przyczyny ich stosowanie na zwykłych stronach nie ma na razie większego sensu, ale warto skorzystać z okazji i przygotować się na nadchodzące zmiany w sposobie tworzenia kodu HTML i CSS.
Ostatnie stabilne wydanie Opery, oznaczone nazwą Merlin, nosi numer 9.2. Jej możliwości nie są jednak tak duże jak nowego testowego wydania 9.5 o nazwie kodowej Kestrel. Ta wersja przeglądarki w momencie pisania artykułu wciąż znajduje się w fazie alfa. Jest jednak na tyle ciekawa, że postanowiliśmy przyjrzeć się jej bliżej.
Wraz z Kestrelem do silnika Opery wprowadzono szereg imponujących zmian. Są to zmiany na tyle istotne, że pod względem technicznym Opera odskoczyła konkurencji daleko do przodu. Najważniejsze z wprowadzonych modyfikacji to obsługa właściwości text-shadow umożliwiającej renderowanie tekstu z cieniem oraz pełna obsługa selektorów i pseudoklas CSS3.
Wielu osobom spodoba się także obsługa plików graficznych w formacie SVG jako tła dla elementów HTML (to jednak temat na oddzielny artykuł). W naszym artykule zajmiemy się dokładnym omówieniem części tych zmian, analizą możliwości, jakie za sobą niosą oraz zademonstrowaniem ich działania w praktyce. Wszystkie przykłady znajdziesz oczywiście na płycie CD dołączonej do magazynu.
Renderowany cień tekstu
Tworzenie cienia dla tekstu za pomocą silnika przeglądarki daje nieograniczone możliwości upiększania serwisów internetowych. Można chociażby tworzyć efektowne nagłówki stron bez potrzeby korzystania z plików graficznych, co jest rozwiązaniem dużo bardziej wydajnym i elastycznym, gdyż umożliwia łatwe wprowadzanie zmian.
Oczywiście z cieni należy korzystać w taki sposób, aby zachować czytelność tekstu. Granica między elegancją a kiczem często jest bardzo cienka. Schemat właściwości text-shadow prezentuje się następująco:
text-shadow: kolor X Y rozmycie
Podajemy cztery wartości. Kolor cienia, odchylenie
w osi X, odchylenie w osi Y i jego rozmycie.
Odchylenie jest relatywne w stosunku do pozycji
samego tekstu. Spójrz na ten przykład:
.cien {
text-shadow: #788B51 0 0 0;
}
Efektem jego zastosowania jest cień widoczny
na rysunku 1.
Trzeba przyznać, że rezultat nie należy do imponujących.
Cień w kolorze zielonym jest praktycznie
niewidoczny. Popracujmy nad tym przykładem,
zmieniając odchylenie w obu osiach:
.cien {
text-shadow: #788B51 2px 4px 0;
}
Jak pokazano na rysunku 2, cień jest już
lepiej widoczny, aczkolwiek sprawia, że tekst jest
nieczytelny.
Wyjściem z tej sytuacji jest użycie rozmycia.
Jego wielkość ustawiona na 5 pikseli spowoduje,
że tekst będzie wyraźnie widoczny na tle cienia
(rysunek 3).
Manipulując poszczególnymi wartościami oraz
kolorem tekstu, możesz uzyskać najprzeróżniejsze
efekty wizualne. Zastanówmy się nad kilkoma
przykładowymi możliwościami. Stwórzmy teraz
silnie rozmyty szary cień:
.cien {
text-shadow: #535353 2px 4px 15px;
}
Efekt końcowy widoczny jest na rysunku 4.
Jeszcze inna możliwość to zielony tekst z lekko
rozmytym i odrobinę przesuniętym szarym cieniem:
.cien {
text-shadow: #B0B0B0 0 2px 3px;
color: #599025;
}
Efekt, pokazany na rysunku 5, prezentuje się
całkiem przyjemnie dla oka.
Selektor :last-child
Kolejny selektor, który jest już obsługiwany
przez Firefoksa, a teraz również przez Operę, to
pseudoklasa :last-child podobna do bardziej znanej
pseudoklasy :first-child. Jak sama nazwa wskazuje,
służy ona do oznaczania ostatniego dziecka danego
elementu. Zastosujmy ją do tekstu składającego
się z trzech akapitów, objętego dodatkowym
kontenerem:
Pierwszy akapit
Drugi akapit
Trzeci akapit
Reguła CSS będzie mieć następującą postać:
div#tekst :last-child {
font-size: 0.8em;
}
Określiliśmy, że mniejszy rozmiar tekstu będzie
się odnosił do ostatniego dziecka elementu DIV
oznaczonego identyfikatorem \”tekst\”.
To rozwiązanie również może mieć szereg różnych zastosowań,
np. inny styl dla ostatniego akapitu, w którym
znajdują się informacje o autorze artykułu, czy
ostatniego wiersza w tabeli. Jak zwykle ograniczeniem
jest tylko wyobraźnia i wymogi realizowanego
projektu.
Selektory :first-of-type i :last-of-type
Selektory :first-of-type oraz :last-of-type,
obsługiwane tylko przez Operę i przeglądarki na
silniku KHTML, są w swojej idei zbliżone do wcześniej
omawianych. Selektor :first-of-type pozwala
wybrać pierwszy element danego typu, będący
dzieckiem elementu nadrzędnego, np. pierwszy
akapit, pierwszy obrazek, pierwszy element LI,
pierwszy link w akapicie.
Działanie selektora :last-of-type jest podobne z tą różnicą, że pozwala on
wybrać ostatni element danego typu.
Wróćmy do przykładowego kodu z trzema akapitami.
Nadajmy inny styl pierwszemu akapitowi,
stosując :first-of-type:
div#tekst p:first-of-type {
font-size: 1.2em;
color: red;
}
Zasady jego stosowania powinny być dla ciebie
jasne. Najpierw należy podać selektor nadrzędny,
którego dzieci będziemy brać pod uwagę. Musisz
także określić typ elementu, a następnie selektor
:first-of-type.
W ten sposób nowy styl będzie się
odnosił do pierwszego akapit wewnątrz DIV-
-a o identyfikatorze \”tekst\”. Analogicznie postąpimy,
chcąc nadać styl ostatniemu dziecku będącemu
akapitem:
div#tekst p:last-of-type {
font-size: 0.8em;
color: gray;
}
Selektor :only-of-type
Kolejny omawiany selektor CSS3, czyli :only-of-
-type, nadaje styl elementowi, który jest jedynym
tego typu dzieckiem elementu nadrzędnego.
Przykładowe zastosowanie:
div div:only-of-type {
background: gray;
}
Zademonstrowany kod CSS nada inny styl kontenerowi
DIV, który znajduje się wewnątrz innego
DIV-a, ale tylko wtedy, gdy jest jego jedynym dzieckiem
tego typu. Zadziała więc w przypadku takiego
kodu HTML:
...
Jednak nie w przypadku poniższego kodu:
...
...
Podsumowanie
Korzystając z okazji, jaką było udostępnienie
testowej wersji przeglądarki Opera, omówiliśmy
część zaawansowanych elementów CSS3.
Dysponując taką wiedzą, na pewno poradzisz
sobie w obliczu rosnących możliwości języka
HTML i kaskadowych arkuszy stylów. Rzecz jasna
nie omówiliśmy jeszcze wszystkich dostępnych
selektorów CSS3, ale do czasu, aż znajdą one
zastosowanie w praktyce, na pewno zdążysz je
jeszcze dokładnie poznać.
Wiąże się to ściśle z rozwojem przeglądarek
internetowych. Trudno przewidzieć, kiedy Firefox
dorówna Operze w możliwościach interpretacji
CSS. Kompletną zagadką jest także dalszy rozwój
w tej dziedzinie Internet Explorera.
Co prawda wersja 7.0 przyniosła pewien postęp, ale wciąż
jest on bardzo skromny. Nie należy także zapominać
o przeglądarce Safari, z którą Apple planuje
podbić rynek rynek pecetów. Wszystko zależy od
twórców tych programów. Ty jednak bądź przygotowany.
Selektor :not
Selektor :not, a dokładniej pseudoklasa CSS3,
pozwala nadać styl wszystkim elementem wybranym
przez selektor oprócz tych, które oznaczone
są konkretną klasą lub identyfikatorem. Poniższa
reguła CSS nadaje akapitom czerwony kolor tekstu.
Jedynie akapity oznaczone klasą .czarny nie ulegną
zmianie:
p:not(.czarny) {
color: red;
}
Z poniższych trzech akapitów pierwszy będzie
miał kolor czarny, a dwa następne czerwony:
Przykładowy akapit tekstu.
Przykładowy akapit tekstu.
Przykładowy akapit tekstu.
Efekt działania kodu zaprezentowano na
rysunku 6.
Omawiany selektor działa w taki sam sposób,
jak logiczne zaprzeczenie NOT znane programistom.
Sprawia, że reguła CSS nie obejmie
znacznika ze specjalną klasą lub identyfikatorem.
Oprócz Opery działa on także także w Firefoksie
i przeglądarkach opartych na silniku KHTML (Konqueror,
Safari).
Selektor :nth-child
Selektor :nth-child, czyli selektor następnego
dziecka, daje webmasterowi do ręki dużo większe
możliwości, niż pseudoklasa :not. Mądrze zastosowany,
będzie w przyszłości, jak wiele innych
elementów CSS3, wręcz nieoceniony przy projektowaniu
bardziej zaawansowanych stron internetowych.
Wiele elementów, które dzisiaj tworzy się za
pomocą JavaScriptu, będzie można przygotować
przy użyciu samych arkuszy stylów.
Selektor :nth-child służy do nadawania stylów
dzieciom danego elementu. Na warsztat weźmy
np. listę nieuporządkowaną UL:
- Element pierwszy
- Element drugi
- Element trzeci
- Element czwarty
- Element piąty
- Element szósty
- Element siódmy
- Element ósmy
- Element dziewiąty
- Element dziesiąty
Zacznijmy od najprostszej możliwości i nadajmy
czerwony kolor tekstu pierwszemu elementowi LI:
ul :nth-child(1) {
color: red;
}
Mechanizm działa w następujący sposób.
Definiujemy element nadrzędny, którego dzieci
będziemy brać pod uwagę (dzieci, czyli elementy
znajdujące się bezpośrednio na niższym poziomie
hierarchii w drzewie DOM). Następnie zapisujemy
selektor :nth-child z liczbą w nawiasie. Liczba ta
oznacza, że nowy styl zostanie nadany pierwszemu
elementowi będącemu dzieckiem UL. Efekt działania
kodu obrazuje rysunek 7.
W nawiasach możesz podać dowolną inną
liczbę. Dzięki temu element wskazanego dziecka
otrzyma zawsze inny styl. To jednak tylko najprostsza
z wielu możliwości :nth-child. Spójrz na ten
kod:
ul :nth-child(3n) {
color: red;
}
Oznacza on, że styl będzie nadawany co trzeciemu
elementowi listy. Dzieje się tak dzięki użyciu
litery \”n\”. Efekt prezentuje się jak na rys. 8.
Gdyby więc w regule zapisać \”2n\”, to kolor
tekstu zmieniłby się we wszystkich parzystych elementach.
Na to jest jednak inna prostsza metoda,
o której za chwilę się dowiesz.
Oprócz powtarzania stylu co określoną liczbę
elementów, możesz określić, od którego elementu
ma się zacząć powtarzanie. Zmodyfikujmy
poprzedni przykład tak, aby liczenie elementów
rozpoczęło się od pierwszego z nich:
ul li:nth-child(3n+1) {
color: red;
}
Liczba podana po znaku plusa oznacza element,
od którego ma się rozpocząć liczenie. Nie
sprawi teraz żadnego problemu zmiana stylu dla co
piątego elementu, licząc od drugiego itd. Rezultat
widać na rysunku 9.
Teraz zagadka: co się stanie, gdy zamiast
znaku \”+\” podamy \”-\”? Liczenie rozpocznie
się od elementu minusowego, który jest tylko
abstrakcyjny, gdyż w rzeczywistości nie istnieje.
Jaki będzie więc efekt działania kodu zaprezentowanego
poniżej:
ul li:nth-child(3n-1) {
color: red;
}
Jako pierwszy zostanie wybrany element nr 2,
co pokazano na rysunku 10.
Niektórzy mogliby zapytać, dlaczego nie element
nr 3, skoro styl jest nadawany co trzeciemu
elementowi? Ponieważ w obliczeniach pod uwagę
jest brane także zero. Warto o tym pamiętać,
a szczególnie powinny na ten fakt zwrócić uwagę
osoby niezajmujące się programowaniem. Dla
programistów takie smaczki są oczywiste.
Wróćmy do łatwego oznaczania elementów parzystych
i nieparzystych. W omawianym selektorze
służą do tego dwa słowa podawane w nawiasie:
\”odd\” i \”even\”. Taki kod pokoloruje wszystkie
elementy parzyste:
ul#piaty li:nth-child(even) {
color: red;
}
Z kolei poniższa reguła wpłynie na elementy
nieparzyste:
ul#piaty li:nth-child(odd) {
color: red;
}
Jest to rozwiązanie proste i oszczędzające
czas. Przykładowe zastosowania to np. możliwość
łatwiejszego nadania stylów tabelom lub pierwszemu
akapitowi tekstu.
