Podręcznik CSS

Tytu oryginau: Smashing CSS: Professional Techniques for Modern Layout
Tumaczenie: ukasz Piwko

ISBN: 978-83-246-3599-3
Numer katalogowy: 6647
2011 John Wiley & Sons, Ltd.
All Rights Reserved. Authorised translation from the English language edition published by
John Wiley & Sons Limited. Responsibility for the accuracy of the translation rests solely with Helion S.A.
and is not the responsibility of John Wiley & Sons Limited. No part of this book may be reproduced in any
form without the written permission of the original copyright holder, John Wiley & Sons Limited.
Polish edition copyright 2011 by Helion S.A. All rights reserved.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording or by any information storage retrieval system,
without permission from the Publisher.
Wszelkie prawa zastrzeone. Nieautoryzowane rozpowszechnianie caoci lub fragmentu niniejszej publikacji
w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metod kserograficzn, fotograficzn, a take
kopiowanie ksiki na noniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich
niniejszej publikacji.
Wszystkie znaki wystpujce w tekcie s zastrzeonymi znakami firmowymi bd towarowymi ich wacicieli.
Autor oraz Wydawnictwo HELION dooyli wszelkich stara, by zawarte w tej ksice informacje byy kompletne
i rzetelne. Nie bior jednak adnej odpowiedzialnoci ani za ich wykorzystanie, ani za zwizane z tym ewentualne
naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponosz rwnie adnej
odpowiedzialnoci za ewentualne szkody wynike z wykorzystania informacji zawartych w ksice.
Wydawnictwo HELION
ul. Kociuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
WWW: http://helion.pl (ksigarnia internetowa, katalog ksiek)
Drogi Czytelniku!
Jeeli chcesz oceni t ksik, zajrzyj pod adres
http://helion.pl/user/opinie?tfacss_p
Moesz tam wpisa swoje uwagi, spostrzeenia, recenzj.
Printed in Poland.
x
x
x
Pole ksik na Facebook.com

Kup w wersji papierowej
Oce ksik
x
x
Ksigarnia internetowa
Lubi to! Nasza spoeczno
PODZIKOWANIA WYDAWCY ORYGINAU

Oto wybrane osoby, ktre przyczyniy si do powstania tej ksiki:
Editorial and Production
VP Consumer and Technology Publishing Director: Michelle Leete
Associate Director Book Content Management: Martin Tribe
Associate Publisher: Chris Webb
Publishing Assistant: Ellie Scott
Project Editor: Brian Herrmann
Copy Editor: Debbye Butler
Editorial Manager: Jodi Jensen
Sr. Project Editor: Sara Shlaer
Editorial Assistant: Leslie Saxman
Marketing
Senior Marketing Manager: Louise Breinholt
Marketing Executive: Kate Parrett
Composition Services
Compositor: Jennifer Mayberry
Proofreader: Susan Hobbs
Indexer: Potomac Indexing, LLC
Dla Kathryn, Carolyn i Rebeki,

ktre s mym najpikniejszym snem.
O autorze
Eric A. Meyer jest znanym na caym wiecie specjalist od jzykw HTML i CSS oraz
standardw sieciowych. Pracuje w tym zawodzie od 1993 roku. Jest zaoycielem firmy
Complex Spiral Consulting, ktrej klientami s m.in. takie firmy, jak America On-Line,
Apple, Adobe, Microsoft, Progressive Insurance, Sherwin-Williams i wiele innych.
Jest jednym z inicjatorw ruchu promujcego mikroformaty oraz wsporganizatorem
(razem z Jeffreyem Zeldmanem) An Event Apart, serii konferencji dla osb zajmujcych
si tworzeniem witryn internetowych. Meyer jest rwnie autorem piciu bestsellerw
powiconych tematyce kaskadowych arkuszy stylw i projektowaniu stron internetowych.
Podzikowania
Dzikuj Chrisowi Webbowi za zaangaowanie mnie w prace nad tym projektem i cierpliwe
przeczekiwanie wszystkich moich opnie i potkni. Byy chwile, kiedy wydawao si,
e ju nic z tego nie bdzie. Wtedy do akcji wkracza Chris ze swoim dobrym humorem
i stoickim spokojem, po czym wszystko wracao na waciwe tory. Podziwiam Ci i mam
nadziej, e ktrego roku uda nam si w kocu ustali czas wsplnego urlopu, abymy
mogli napi si razem daiquiri przy basenie.
Dzikuj take Debbye Butler i Brianowi Herrmannowi za przeprowadzenie mnie za rk
przez proces korekty i pokazanie mi, gdzie zapuciem si na manowce, gdzie le dobraem
sowa, a gdzie po prostu wyraziem si niejasno.
Dzikuj wszystkim, ktrzy czytaj moje publikacje, czy to papierowe, czy w internecie.
Dzikuj Wam z caego serca.
Dzikuj mojej onie i crkom. Nie potrafi znale sw, aby opisa, jak bardzo jestem
Wam wdziczny.
Eric A. Meyer
Cleveland Heights, Ohio
13 sierpnia 2010
Spis treci
CZ I
PODSTAWY
15
Rozdzia 1
Narzdzia
Firebug
Pasek narzdzi Web Developer
Pasek narzdzi Internet Explorer Developer Toolbar
Dodatek Dragonfly dla Opery
Dodatek WebInspector do przegldarki Safari
XRAY
Narzdzie Selectoracle
Diagnostyczny arkusz stylw
Zerowanie stylw
Skrypt IE9.JS
17
18
24
29
33
35
37
38
40
42
45
Rozdzia 2
Selektory
Pseudoco tam
Precyzyjne ldowanie
Precyzja selektorw
Regua wanoci
Co si dzieje, gdy zostanie pominita jaka warto
w zapisie skrconym?
Wybircze przesanianie wasnoci wzapisie skrconym
Selektor uniwersalny
Identyfikatory a klasy
czenie identyfikatorw z klasami
Przypisywanie jednego elementu dowielu klas
Selektory atrybutw
Selektor atrybutu class
Identyfikatory a selektory atrybutw
Selektor podacuchw wartociatrybutw
Selektor podacuchw wartociatrybutw cig dalszy
Selektory dzieci
Czciowa imitacja selektora elementw dzieci
Selektory elementw siostrzanych
Generowanie treci
47
48
50
51
52
53
55
57
58
61
61
62
64
65
66
68
70
72
73
75
SPIS TRECI
CZ II
NIEZBDNIK
79
Rozdzia 3
Porady
Sprawdzaj poprawno kodu!
Kolejno wasnoci pisma
Wysoko linii
Bezjednostkowe wartoci wasnociline-height
Okrelaj styl obramowania
Ustawianie koloru obramowania
Wyczanie wywietlania elementw
Wyczanie widocznoci elementu
Wyrzucanie elementw poza ekran
Obrazy zamiast tekstu
Style dla druku
Pisanie arkuszy stylw dla druku
cza blokowe
Margines czy dopenienie?
Wycinanie list
Definiowanie punktorw list
Punktory w tle
Generowanie markerw
Masz do dyspozycji wicej kontenerw, ni mylisz
Ta dokumentu
Arkusze serwerowe
81
82
83
83
84
86
86
88
89
90
92
94
95
96
97
99
100
102
105
107
110
111
Rozdzia 4
Ukady
Stosowanie obrysu zamiast obramowania
Ustawianie blokw na rodku
Kontenery elementw pywajcych przepenienie
Pywajce kontenery elementwpywajcych
Clearfix
Kliring elementw przylegajcych
Prosty ukad dwukolumnowy
Prosty ukad trzykolumnowy
Faszywe kolumny
Technika Liquid Bleach
One True Layout
wity Graal
Pynne siatki
Ukad oparty na jednostkach em
Ujemne marginesy w ukadzie normalnym
Pozycjonowanie w kontekcie
Wyjcie poza kontener
Pozycjonowanie na sztywno nagwkw i stopek
115
116
118
121
123
125
126
128
129
132
135
138
142
146
150
154
156
158
161
10
SPIS TRECI
Rozdzia 5
Efekty
Complexspiral
Menu podrczne w CSS
Menu CSS
Nieregularne ksztaty
Zaokrglanie rogw przed nastaniem CSS 3
Zaokrglanie rogw przy uyciu CSS 3
Sprajty CSS
Sliding Doors
Przesuwane drzwi z przycinaniem
Paralaksa CSS
Nieregularne ksztaty pywajce
Lepsze nieregularne ksztaty pywajce
Pola obrazw
Ograniczanie rozmiaru obrazw
CZ III NAJNOWSZE TECHNIKI

Rozdzia 6
Rozdzia 7
Skorowidz
165
166
170
172
174
177
181
183
185
189
191
193
197
201
202
205
Tabele
Nagwek, tre gwna i stopka tabeli
Nagwki wierszy
Formatowanie wedug kolumn
Tworzenie map z danych tabelarycznych
Wykresy z tabel
207
208
211
213
217
224
Pie przyszoci
Formatowanie elementw HTML 5
Imitacja elementw HTML 5 za pomoc nazw klas
Zapytania o media
Formatowanie wybranych elementw-dzieci
Formatowanie wybranych kolumn
Kolory RGB z kanaem alfa
Kolory HSL i HSL z kanaem alfa
Cienie
Definiowanie wielu obrazw w tle elementw
Przeksztacenia dwuwymiarowe
233
234
236
237
242
246
249
250
252
254
258
269
11
Wstp
Technologia CSS staa si tak niezwykle popularna dorwnaa ju prawie samemu
jzykowi HTML e czasami a trudno w to uwierzy. Mona j spotka ju wszdzie,
od przegldarek internetowych, przez sklepy internetowe, po aplikacje do czatowania,
iniewyglda na to, aby miao si cokolwiek w tej kwestii zmieni. W miar jak zakres
uyciajzyka staje si coraz szerszy, jego moliwoci coraz bardziej si powikszaj.
Niniejsza ksika zawiera opis okoo setki porad, technik, narzdzi i sztuczek dotyczcych
tworzenia najwyszej jakoci witryn internetowych przy uyciu CSS. Kady opis jest
niezaleny od pozostaych, tzn. moesz otworzy ksik na dowolnej stronie i przeczyta to,
co si na niej znajduje, bez obaw, e stracisz co wanego z poprzednich stron. Oznacza
to, e do zrozumienia tekstu potrzebna jest przynajmniej podstawowa znajomo technik
CSS oraz wiedza, do czego technologia ta suy. Potrzebny poziom umiejtnoci najlepiej
mona by okreli jako zaawansowany pocztkujcy lub rednio zaawansowany. Jeli
wic dopiero zaczynasz poznawa CSS albo wiesz na ten temat wicej ni twrcy samej
specyfikacji CSS, ta ksika raczej nie jest dla Ciebie. Wszyscy pozostali znajd tu mnstwo
cennych porad i duo si naucz.
W pierwszej czci przedstawiem krtki przegld najprzydatniejszych narzdzi i podstawowych
technik, wliczajc niektre najmniej znane selektory CSS. W czci drugiej opisuj rne
rzeczy, jakie mona zrobi przy uyciu CSS, tzn. rozmaite ciekawe efekty, rne sposoby
osignicia tego samego celu, ukady itp. W czci trzeciej zostay opisane najnowsze
zaawansowane techniki, ktrych moe nie uda Ci si realnie wykorzysta w cigu
najbliszych dni, ale z pewnoci bd nabieray znaczenia w niedugim czasie.
Przykady kodu mona pobra z serwera FTP wydawnictwa Helion pod adresem
ftp://ftp.helion.pl/przyklady/tfacss.zip.
Niecae 10 lat temu kady, kto myla, e jzyk CSS odchodzi do lamusa, mgby by w jaki
sposb usprawiedliwiony, lecz dzi, w roku 2011, technologia ta rozkwita jak nigdy dotd.
Licz na to, e spodoba Ci si tre tej ksiki tak samo, jak mnie podobao si jej pisanie!
I
CZ
PODSTAWY
Rozdzia 1. Narzdzia
Rozdzia 2. Selektory
1
ROZDZIA
PODRCZNIK CSS
NARZDZIA
W PROCESIE TWORZENIA stron internetowych

(a nawet aplikacji) w duym stopniu korzystamy
z rozmaitych narzdzi. Jeli chodzi o CSS, to
uywamy zarwno narzdzi wspomagajcych
pisanie kodu CSS, jak i samych arkuszy stylw
do tworzenia narzdzi, ktre pomagaj nam
wpracy.
S nawet takie narzdzia, ktre rozszerzaj

podstawowe moliwoci przegldarek w zakresie
obsugi CSS. Jestemy konstruktorami, artystami
i sprawcami w tym rozdziale poznasz
narzdzia, bez ktrych nie bdziesz mg si
juwicej oby.
CZ I: PODSTAWY
FIREBUG
Firebug (rysunek 1.1) to jedno z dwch moich ulubionych narzdzi pracy (drugie opisaem
dalej, w podrozdziale Pasek narzdzi Web Developer). Jest to cakowicie darmowe
rozszerzenie do cakiem darmowej przegldarki Firefox. Jeli korzystasz z innej aplikacji,
toczytaj dalej, bo w niej rwnie moesz korzysta z dodatku Firebug!
18
Rysunek 1.1. Strona internetowa rozszerzenia Firebug

Aby zainstalowa to rozszerzenie, otwrz w przegldarce Firefox stron getfirebug.com,
kliknij przycisk instalacji (aktualnie znajduje si w pobliu prawego grnego rogu ekranu
i ma napis Install Firebug 1.5.2) i zezwl na instalacj. Uruchom ponownie Firefoksa
iprzygotuj si na ostr jazd.
Nie ma szans, abym opisa wszystkie moliwoci oferowane przez dodatek Firebug na kilku
stronach jednej porady. Mao tego, nawet cay rozdzia by nie wystarczy. Przedstawiam
zatem kilka najwaniejszych opcji.
Przycisk HTML (rysunek 1.2) wywietla w okienku po lewej stronie struktur HTML
dokumentu (symbole plus i minus su do rozwijania i zwijania poddrzew dokumentu).
W tym widoku najechanie kursorem na dowolny element powoduje jego wyrnienie na
samej stronie. Mona w ten sposb zobaczy, jaki jest obszar treci elementu oraz jakie s
jego marginesy i dopenienie, ktre zostan zaznaczone rnymi kolorami, co jest po prostu
fantastyczne. W obecnej implementacji obszar treci jest oznaczany kolorem niebieskim,
dopenienie jasnofioletowym, a marginesy tym. Nie kolory s tu jednak wane,
leczsama moliwo podejrzenia na stronie tych poszczeglnych obszarw elementu.
ROZDZIA 1: NARZDZIA
Rysunek 1.2. Widok ukadu elementw rozszerzenia Firebug

Klikajc zakadk Styl, mona wywietli po prawej stronie widoku HTML okienko z kodem
CSS dotyczcym aktualnie badanego elementu (rysunek 1.3). Mona w nim zobaczy nie
tylko to, co sami napisalimy podczas tworzenia strony, lecz rwnie wszystkie standardowe
style przegldarki odnoszce si do danego elementu. Arkusze stylw przegldarki pochodz np.
z plikw html.css i quirk.css (s to tzw. style wasne przegldarki, a ich wywietlanie mona
wyczy w menu zakadki Styl).
Warto wiedzie, e Firebug moe czasami wywietla wasnoci, ktrych nigdy nie
definiowalimy, np. -moz-background-clip. Jeli mamy pewno, e to nie nasze wpisy,
moemy je ignorowa. Ponadto wszystkie wasnoci zapisane w formie skrconego zapisu
zostan rozpisane na poszczeglne wasnoci skadowe. Jeli wic w arkuszu napiszemy regu:
font: 1em "Andale Mono", "Courier New", Courier, monospace;
w dodatku Firebug zostanie ona przedstawiona tak:

font-family: "Andale Mono","Courier New",Courier, monospace;
font-size: 1em;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: normal;
19
CZ I: PODSTAWY
20
Rysunek 1.3. Rozszerzenie Firebug dziaajce w osobnym oknie z zakadk Styl w penej krasie
Mimo i ten sposb prezentacji stylw nie jest zy przypomina nam, e skrcony
zapis wasnoci czsto mwi o wiele wicej, ni w istocie bymy chcieli to trzeba si
napocztku do niego przyzwyczai (wicej na temat skrconego zapisu wasnoci pisz
wrozdziale 2.).
Kolejna rzecz warta uwagi, to fakt, e reguy w okienku Styl s wywietlane w kolejnoci
od najprecyzyjniejszej. To znaczy na pocztku znajduje si regua o najwyszym poziomie
precyzji w zastosowaniu do badanego elementu, pod ni jest druga w tej kolejnoci itd.
(wicej na temat precyzji pisz w rozdziale 2., w podrozdziale Precyzja selektorw).
Kady element na stronie mona dokadnie zbada, klikajc go prawym przyciskiem myszy
i wybierajc w menu kontekstowym, ktre zostanie wywietlone, pozycj Zbadaj element
(rysunek 1.4). Tryb inspekcji rozszerzenia Firebug mona te wczy poprzez kliknicie
ikony przedstawiajcej prostokt i kursor, umieszczonej obok ikony Firebug. Gdy bdziesz
porusza si po stronie, wskazywane elementy bd zaznaczane, a kliknicie jednego z nich
spowoduje wywietlenie jego szczegw.
Kad deklaracj CSS mona wyczy, klikajc obok niej z lewej strony. Jest to bardzo
przydatna opcja, gdy chcemy sprawdzi, jak rne wasnoci wsppracuj ze sob, poprzez
wyczanie po jednej z nich. Na rysunku 1.5 natomiast widzimy, e najedajc kursorem
na warto koloru, mona zobaczy w maym okienku, jaki rzeczywicie kolor ona
reprezentuje.
ROZDZIA 1: NARZDZIA
Rysunek 1.4. Opcja menu kontekstowego Zbadaj element
21
Rysunek 1.5. Wyczone style i okienko koloru
CZ I: PODSTAWY
Ponadto na karcie Styl mona wywietli ostateczne wartoci kadej wasnoci CSS
zastosowanej do wybranego elementu (rysunek 1.6), a wic takie, ktre zostay
zastosowane do niego przez przegldark w ostatecznym wyniku, bez wzgldu na
to, czyco o nich wspominalimy w naszym arkuszu, czy nie. Pamitaj, e wszystkie
wasnoci CSS maj domylne wartoci i dziki tej opcji mona je wszystkie zobaczy.
Wtym widoku mona np.dowiedzie si, ile dokadnie pikseli wynosi wasno
line-height w naszym nagwku.
22
Rysunek 1.6. Obliczone wartoci stylw

Mona te sprawdzi dokadne wymiary komponentw modelu polowego elementu,
takie jak wysoko, szeroko, dopenienie, marginesy itd. (rysunek 1.7). Wartoci te s
podawane w pikselach. Najlepsze jest jednak to, e kiedy najedziemy kursorem na jedno
zpl wywietlonych w tym widoku, na stronie pojawiaj si specjalne linijki, umiejscowione
wzdu zewntrznych krawdzi wybranego elementu.
Moliwoci jest znacznie wicej. Jak wida na rysunku 1.8, mona zmienia wartoci
atrybutw elementw (np. class), a nawet ich tre, dodawa i zmienia wasnoci
iwartoci CSS itd. Zapoznaj si z interfejsem dodatku Firebug, klikajc lewym i prawym
przyciskiem myszy wszystko, co si da.
Ostrzeenie: na karcie Styl nie s uwzgldniane reguy CSS z uyciem pseudoelementw.
Jeli np. w arkuszu znajduje si regua o selektorze p:first-letter, to nie zobaczymy jej
podczas inspekcji elementu p. Pseudoklasy s wywietlane, ale pseudoelementy nie.
Najwiksze problemy z tym mog wystpowa przy zastosowaniu rozwizania clearfix
ztreci generowan (wicej na ten temat pisz w rozdziale 4., w podrozdziale Clearfix).
ROZDZIA 1: NARZDZIA
Rysunek 1.7. Karta Ukad
23
Rysunek 1.8. Edycja kodu CSS na karcie Styl
CZ I: PODSTAWY
Jeli nie uywasz przegldarki Firefox, a chcesz korzysta z podstawowych dobrodziejstw
rozszerzenia Firebug, wejd na stron getfirebug.com/lite.html (rysunek1.9). Znajdziesz tam
wskazwki na temat wczenia tego dodatku wprzegldarkach Internet Explorer, Opera
iSafari. Aby korzysta z dodatku, moeszgodoczy do testowanej przez siebie strony
albododa go jako zakadk doulubionych (polecam t drug opcj).
24
Rysunek 1.9. Firebug Lite w przegldarce Internet Explorer

Ta wersja ma mniej opcji ni wersja dla Firefoksa (std sowo Lite w nazwie), ale i tak
oferuje bardzo duo moliwoci.
PASEK NARZDZI WEB DEVELOPER

Drugim obok rozszerzenia Firebug podstawowym narzdziem pracy kadego twrcy stron
internetowych jest Web Developer (WD). Jest to cakowicie darmowe rozszerzenie do cakiem
darmowej przegldarki Firefox.
Aby je pobra i zainstalowa, wejd na stron chrispederick.com/work/web-developer.
Alternatywnie moesz otworzy stron addons.mozilla.org i tam poszuka tego dodatku
(rysunek 1.10).
Podobnie jak w przypadku rozszerzenia Firebug, nie ma szans, abym na kilku stronach
zmieci wszystko, co mona napisa o Web Developer. Tu rwnie nawet cay rozdzia
by nie wystarczy. Opisz tylko kilka najciekawszych opcji, ale pamitaj, eby pniej
samodzielnie gruntownie przeanalizowa wszystkie pozostae.
ROZDZIA 1: NARZDZIA
Rysunek 1.10. Strona paska narzdzi Web Developer w witrynie addons.mozilla.org

Zyskujesz moliwo wyczenia pamici podrcznej przegldarki, co jest bardzo przydatne,
gdy podczas pracy nad stron wprowadzasz duo drobnych modyfikacji i pami podrczna
zaczyna zawadza. Moesz te wyczy obsug JavaScriptu (rysunek 1.11), co z kolei
pozwala zobaczy, co bdzie si dziao na stronie po wyczeniu wszystkich skryptw
albogdy skrypty z jakiego powodu nie zostan wczytane.
Niektre opcje z menu CSS s dostpne rwnie w rozszerzeniu Firebug, ale do najciekawszych
naley moliwo wyczenia wszystkich stylw osadzonych albo tylko stylw doczonych
za pomoc elementu link (rysunek 1.12) lub tylko stylw rdliniowych (aczkolwiek
nie namawiam do uywania tych ostatnich). Mona nawet wyczy wikszo stylw
przegldarki, ale to dla tych, ktrzy chc pooglda rne dziwne rzeczy.
W menu Informacje (widocznym na rysunku 1.13) znajdziesz mnstwo ciekawych
drobiazgw, np. szczegy dotyczce klas i identyfikatorw, dane na temat kolejnoci
elementw div, zestawienie kolorw uytych na stronie itp. Moesz te wczy tryb
informowania o elementach. Jeli klikniesz w tym trybie jaki element, zostan wywietlone
informacje na temat jego atrybutw i ich wartoci, jego pooenia na stronie, jego elementw
nadrzdnych i podrzdnych itd. Menu Informacje udostpnia podobne dane jak narzdzie
XRAY, o ktrym wicej napisz nieco dalej w tym rozdziale.
25
CZ I: PODSTAWY
Rysunek 1.11. Menu Wycz
26
Rysunek 1.12. Wyczanie doczonych arkuszy stylw w menu CSS
ROZDZIA 1: NARZDZIA
Rysunek 1.13. Wywietlanie informacji o klasach i identyfikatorach za pomoc opcji z menu Informacje
Za pomoc opcji w menu Zaznacz (rysunek 1.14) mona zaznaczy na stronie wybrane
rodzaje elementw np. wszystkie elementy blokowe, rdliniowe, odnoniki,
pozycjonowane, komrki tabeli itd. jak rwnie okreli wasny zbir elementw
ikolorw. Ponadto mona ustali, czy na stronie wraz z obrysami maj by wywietlane
nazwy elementw. To menu oferuje znacznie wiksze moliwoci, ni mogoby si wydawa
na pierwszy rzut oka. Na swoje potrzeby nazywam je menu diagnostyki ukadu, poniewa
pozwala zaznaczy obrysem zestawy elementw i szybko oceni, jak s rozmieszczone
wzgldem siebie, oraz wykry potencjalne usterki.
W menu Narzdzia znajduj si opcje oferujce szybki dostp do kilku narzdzi do
sprawdzania poprawnoci kodu, znajdowania bdw i do konsol do wykrywania bdw.
Z tych wszystkich opcji najlepsze s Sprawd poprawno lokalnego pliku CSS i Sprawd
poprawno lokalnego pliku HTML (rysunek 1.15). Kada z nich serializuje kod otwartej
strony na posta acucha znakw i wysya go do odpowiedniego walidatora. Jeli wic
wybierzesz pierwsz z tych opcji, program wyle do walidatora CSS kod arkuszy stylw,
jelinatomiast wybierzesz drug do walidatora HTML zostanie wysany kod znacznikw,
po czym otrzymasz raport na temat stanu tego kodu. Opcja ta jest nieoceniona, gdy
pracujemy pod ochron zapory internetowej albo bezporednio na plikach zapisanych
na twardym dysku, ktre nie s dostpne w internecie, a wic te i dla walidatora.
Dzikilokalnemu sprawdzaniu poprawnoci kodu nie jest to ju problemem.
27
CZ I: PODSTAWY
Rysunek 1.14. Zaznaczenie elementw blokowych za pomoc opcji z menu Zaznacz
28
Rysunek 1.15. Menu Narzdzia

Jak napisaem na pocztku, to tylko prbka moliwoci paska WD, dlatego musisz powici
troch czasu na dogbne zapoznanie si z nim, aby znale narzdzia, ktre uatwi Ci prac.
ROZDZIA 1: NARZDZIA
PASEK NARZDZI
INTERNET EXPLORER DEVELOPER TOOLBAR
Uytkownicy przegldarki Internet Explorer 7 nie maj moliwoci korzystania z paska
narzdzi Web Developer (zobacz poprzedni podrozdzia), ale mog w zamian zainstalowa
dodatek Internet Explorer Developer Toolbar (IEDT).
Adres URL strony tego dodatku to jeden z tych klasycznych, nieskoczenie dugich
iniemoliwych do rozszyfrowania adresw Microsoftu. Dlatego otwrz swoj ulubion
wyszukiwark (np. na zo Microsoftowi wybierz Google) i w polu wyszukiwania
wpisz fraz Internet Explorer Developer Toolbar. Szukana strona powinna zosta
wywietlona na pierwszym miejscu. Wejd na ni i zainstaluj dodatek, jeli uywasz IE 7.
Nie jest on obsugiwany przez IE 8, ale do tej przegldarki wrcimy za chwil.
Po zakoczeniu instalacji rozwi menu Narzdzia znajdujce si w pobliu prawego
grnego rogu okna przegldarki, obok menu Strony (rysunek 1.16) nie chodzi tu o menu
Narzdzia po lewej stronie, midzy menu Ulubione i Pomoc. W wymienionym menu kliknij
pozycj Paski narzdzi, a nastpnie Paski eksploratora i w kocu IE Developer Toolbar.
29
Rysunek 1.16. Szukanie opcji IE Developer Toolbar w IE 7
CZ I: PODSTAWY
Gdy wczysz pasek IEDT, w dolnej czci okna Internet Explorera wywietli si specjalne
okno, podobne do tego, ktre znamy z dodatku Firebug (rysunek 1.17). W jego grnej czci
znajduj si rne menu. Dodatek mona uruchomi take w osobnym oknie. W tym celu
naley klikn ikon przedstawiajc dwa mae okienka, umieszczon w prawym grnym
rogu okna dodatku. Moliwo powikszenia okna w ten sposb najbardziej przydaje si
podczas pracy w rodowiskach o maej rozdzielczoci, takich jak netbooki czy projektory.
30
Rysunek 1.17. Pasek narzdzi IE Developer Toolbar w akcji

Jedn z najciekawszych funkcji tego paska jest moliwo przeczania si midzy widokiem
wywietlania wartoci obliczonych stylw a widokiem ostatnio zadeklarowanych stylw
przyuyciu pola wyboru Show Default Style Values (rysunek 1.18). Podobnie za pomoc
opcji Show Read-Only Properties moemy wywietli wszystkie aspekty waciwoci DOM
(ang. Document Object Model) badanego elementu. Opcja ta zdecydowanie nie jest dla
Ciebie, jeli nie znasz si na JavaScripcie i DOM (na pewno nie jest dla mnie).
Pasek IE Developer Toolbar oferuje cz funkcji dostpnych w pasku Web Developer,
a najbardziej przydatne z nich, takie jak np. zaznaczanie elementw i sprawdzanie
poprawnoci kodu HTML i CSS, znajduj si na samym wierzchu. W menu View (widok)
dostpna jest te ciekawa opcja o nazwie CSS Selector Matches (rysunek 1.19), wywietlajca
wyskakujce okienko ze wszystkimi reguami CSS i informacj, ile razy kada z nich jest
zastosowana do elementw na stronie. Jeli znajdziesz regu, ktra nie dotyczy adnego
elementu (oznaczona komentarzem 0 match(es) for:), zastanw si, czy nie trzeba jej usun.
ROZDZIA 1: NARZDZIA
Rysunek 1.18. Pasek IE Developer Toolbar z wyczon opcj Show Default Styles
Rysunek 1.19. Raport funkcji CSS Selector Matches
31
CZ I: PODSTAWY
Przegldarka IE 8 ma wbudowany zestaw narzdzi deweloperskich, a wic nie trzeba w niej
instalowa adnych dodatkw. Dokumentacja tego zestawu znajduje si w internecie,
ale niestety pod adresem niewiele atwiejszym do zapamitania ni adres wczeniej
opisywanego paska narzdzi dla IE 7. Dlatego lepiej skorzystaj z jakiej wyszukiwarki
internetowej, wpisujc w niej fraz Discovering Internet Explorer Developer Tools
(niestety, aktualnie dokumentacja dostpna jest tylko w jzyku angielskim przyp. tum.).
Odnonik do waciwej strony powinien si wywietli na samej grze.
Aby uruchomi dodatek Narzdzia deweloperskie, rozwi menu Narzdzia przegldarki
(rysunek 1.20) i kliknij opcj o tej samej nazwie albo nacinij klawisz F12. To wszystko,
co trzeba zrobi. Narzdzia deweloperskie przypominaj wygldem pasek IE Developer
Toolbar, a wic wygldaj jak krzywka dodatku Firebug z paskiem narzdzi Web
Developer. Ukad menu jest bardzo podobny do paska narzdzi IE 7, natomiast
znajdujcym si pod nimi zakadkom bliej do dodatku Firebug.
32
Rysunek 1.20. Narzdzia deweloperskie w przegldarce IE 8

Jedn z rzeczy, ktre nie podobaj mi si w funkcji Narzdzia deweloperskie, jest sposb
prezentacji arkuszy stylw na karcie CSS, ktry dla mnie jest niezrozumiay. Na pewno nie
zastosowano kolejnoci wedug precyzji selektora. Wykazano wprawdzie, ktre deklaracje
s przesaniane przez inne deklaracje, ale zapomniano o posortowaniu ich w jaki sensowny
sposb, przez co z opcji tych korzysta si trudniej ni w dodatku Firebug.
Podsumowujc, mimo i funkcja Narzdzia deweloperskie i pasek narzdzi IE Developer
Toolbar nie oferuj tak wielu opcji jak Firebug i Web Developer Toolbar, s one bardzo
przydatne i powinny znale si w arsenale kadego programisty stron internetowych,
korzystajcego z przegldarek Internet Explorer. Narzdzia te mog by bardzo pomocne
przy wykrywaniu rde problemw z ukadem i innych osobliwoci tych przegldarek.
ROZDZIA 1: NARZDZIA
DODATEK DRAGONFLY DLA OPERY

Jeli w codziennej pracy korzystasz z przegldarki Opera, musisz zapozna si z dodatkiem
o nazwie Dragonfly (rysunek 1.21). Jest to rodowisko programistyczne, ktre mona
znale w standardowym wyposaeniu Opery od wersji 9.5. Wicej informacji na jego temat
znajdziesz na stronie opera.com/dragonfly.
33
Rysunek 1.21. Strona dodatku Dragonfly

Aby wczy dodatek Dragonfly, naley rozwin menu Strona/Narzdzia deweloperskie
iklikn opcj Opera Dragonfly albo nacisn kombinacj klawiszy Shift+Ctrl+I (Windows)
lub Option+Command+I (Mac).
Dragonfly wygldem przypomina dodatek Firebug, ale midzy tymi narzdziami wystpuj
spore rnice. Przede wszystkim na karcie Styles po prawej stronie mog by wywietlane
zarwno style obliczone, jak i style zadeklarowane (rysunek 1.22) i kad z tych grup mona
rozwin lub zwin.
Rysunek 1.23 przedstawia kart Ukad, na ktrej wywietlany jest schemat pola badanego
elementu. Oprcz wymiarw poszczeglnych komponentw wywietlane s dodatkowo
wartoci w pikselach rozmaitych waciwoci, jak offsetTop czy scrollLeft.
CZ I: PODSTAWY
34
Rysunek 1.22. Narzdzie Dragonfly z rozwinit grup stylw obliczonych
Rysunek 1.23. Karta Ukad narzdzia Dragonfly
ROZDZIA 1: NARZDZIA
DODATEK WEBINSPECTOR
DO PRZEGLDARKI SAFARI
Jeli Twoim gwnym narzdziem pracy jest przegldarka Safari, to musisz koniecznie
zapozna si z narzdziem inspektor WWW.
Aby je wczy, otwrz okno Preferencje, przejd na kart Zaawansowane, a nastpnie
zaznacz pole wyboru Pokazuj menu Programowanie w pasku menu (rysunek 1.24).
Po wykonaniu tych czynnoci rozwi menu Programowanie i wybierz w nim pozycj
Poka inspektora www lub nacinij kombinacj klawiszy Ctrl+Alt+I (Windows) albo
Option+Command+I (Mac). Skrt nie jest przecznikiem, tzn. jeli inspektor WWW jest
wczony, to nacinicie tej kombinacji klawiszy nie spowoduje jego zamknicia. Do tego
potrzebna jest mysz. Skrt Command+W (lub Ctrl+W w Windows) dziaa tylko wwczas,
gdy inspektor WWW jest uruchomiony we wasnym oknie. Jeli zastosuje si go, gdy
inspektor WWW jest zadokowany w oknie gwnym przegldarki, to zostanie zamknita
caa przegldarka.
35
Rysunek 1.24. Wczanie menu Programowanie

Mimo i interfejs inspektora WWW jest bardzo podobny do interfejsu dodatku
Firebug, midzy tymi narzdziami wystpuj istotne rnice. Np. w okienku po prawej
stronie wywietlane s style obliczone (tu nazwane stylami nadanymi) w postaci
grupy (rysunek1.25). Podobnie jak w przypadku rozszerzenia Firebug, to, co tu wida,
niedokadnie odpowiada temu, co zadeklarowalimy, poniewa skrcone zapisy wasnoci
srozwijane. Jeli zaznaczysz pole wyboru Poka dziedziczone, lista znacznie si wyduy.
CZ I: PODSTAWY
Rysunek 1.25. Style nadane
36
Na dole znajduj si zgrupowane reguy dotyczce badanego elementu. Kad z grup mona
rozwin i zwin. Jeszcze niej znajduje si podokienko Miary, w ktrym mona sprawdzi
wymiary pola tworzonego w ukadzie przez badany element (rysunek 1.26).
Rysunek 1.26. Style i informacje o polu elementu
ROZDZIA 1: NARZDZIA
XRAY
Jeli potrzebujesz lekkiego narzdzia do inspekcji elementw, dziaajcego we wszystkich
przegldarkach, to widoczny na rysunku 1.27 XRAY jest stworzony dla Ciebie.
Maograniczony zakres zastosowania, ale jeli szukasz czego prostego, to naley t cech
traktowa jako zalet.
37
Rysunek 1.27. Strona XRAY

Wejd na stron westciv.com/xray i przecignij pole z napisem XRAY na swj pasek zakadek
(albo do menu Zakadki, jeli chcesz ukry narzdzie). Teraz, gdy wejdziesz na jak stron,
moesz zbada na niej dowolny element, wywoujc XRAY i wybierajc element, ktry Ci
interesuje.
Gdy wybierzesz element, bdzie on wyrniony, zostan wywietlone jego wymiary oraz
wywietli si okno XRAY (rysunek 1.28) z dodatkowymi informacjami na temat miejsca
elementu w drzewie dokumentu, jego klas i identyfikatorw oraz z podstawowymi
wasnociami CSS. Aby obejrze szczegy innych elementw w hierarchii, wystarczy je
zaznaczy. Aby wyczy XRAY, naley klikn krzyyk w prawym grnym rogu jego okna.
CZ I: PODSTAWY
38
Rysunek 1.28. Narzdzie XRAY w akcji
Podobnym narzdziem, cho o nieco innym przeznaczeniu, jest MRI (westciv.com/mri).
Umoliwia ono wpisanie dowolnego selektora i sprawdzenie, jaki to wywoa efekt.
NARZDZIE SELECTORACLE
Nazwa Selectoracle (rysunek 1.29) brzmi jak jaka reklama bazy danych, ale ni nie jest.
Jest to internetowe narzdzie zamieniajce selektory w tekst przypominajcy uproszczony
angielski (nazwa powstaa z poczenia angielskich sw Selector i Oracle).
Wejd na stron gallery.theopalgroup.com/selectoracle i wpisz jeden albo kilka dowolnych
selektorw CSS. Wybierz jzyk (dostpny jest jeszcze hiszpaski) i kliknij przycisk Explain
This! (wyjanij to). W odpowiedzi otrzymasz objanienie wszystkich wprowadzonych przez
siebie selektorw. Np. dla selektora:
ul li:nth-child(2n+3):not(:last-child)
ROZDZIA 1: NARZDZIA
39
Rysunek 1.29. Strona Selectoracle
otrzymamy nastpujce objanienie:
Selects any li element that is an odd numbered child starting with the third child and that is
not a last child that is a descendant of a ul element (wybiera wszystkie elementy li bdce
nieparzystym dzieckiem, zaczynajc od trzeciego dziecka, i niebdce ostatnim dzieckiem
elementu ul).
Moe na pocztku wydaje si to troch niejasne, ale po powtrnym przeczytaniu powoli
staje si zrozumiae. Poza tym nie przejmuj si zbytnio tym selektorem, poniewa w chwili,
gdy powstawa ten tekst, adna przegldarka nie potrafia go jeszcze w peni obsugiwa.
Pamitaj jednak, e jeli trafisz na jaki selektor, ktrego nie rozumiesz, to moesz
sprbowa znale pomoc na stronie Selectoracle.
Czy marzye kiedy o tym, aby Twoja przegldarka krzyczaa, gdy wczytujesz w niej strony
z przestarzaymi i niewygodnymi elementami, takimi jak font? Teraz jest to moliwe
w sensie wizualnym dziki diagnostycznym arkuszom stylw.
CZ I: PODSTAWY
DIAGNOSTYCZNY ARKUSZ STYLW

Dziki diagnostycznemu arkuszowi stylw mona szybko si dowiedzie, e co jest nie
tak z kodem HTML na stronie. Przykady takich arkuszy mona znale np. pod adresami
meyerweb.com/eric/tools/css/diagnostic (dostpne s take wersje dla CSS 3 i zgodna z IE 7)
iaccessites.org/site/2006/07/big-red-angry-text.
Po co to komu? Oto jeden z wierszy kodu mojego diagnostycznego arkusza stylw:
*[style], font, center {outline: 5px solid red;}
Regua ta rysuje czerwon obwdk wok wszystkich elementw z atrybutem style,

wszystkich elementw font oraz wszystkich elementw wyrodkowanych. Mona je
jeszcze bardziej uwidoczni, stosujc np. ty kolor ta. Chodzi o to, aby wykry wszystkie
przypadki zastosowania podejrzanego kodu HTML, czy zosta on dodany przez system
zarzdzania treci, czy w jakikolwiek inny sposb.
Moe Ci si wydaje, e wszystkie problemy z kodem da si wykry za pomoc walidatora,
ale nie zawsze jest to moliwe. Oczywicie narzdzie to na pewno ostrzee nas, e na stronie
znajduje si element font, ale jest wiele problemw, ktrych walidator nie wykryje. Wemy
na przykad typowy odnonik skonstruowany przy uyciu JavaScriptu:
<a href="#" onclick="javascript:nextPage();">Dalej</a>
40
Kod jest poprawny, wic walidator nie zgosi adnego problemu. A jednak, jeli kto
korzysta z przegldarki nieobsugujcej JavaScriptu, ten odnonik nie zadziaa. Takim
odnonikom powinno towarzyszy jakie alternatywne rozwizanie z uyciem normalnej
wartoci atrybutu href. Dlatego w innym miejscu mojego diagnostycznego arkusza stylw
znajduje si nastpujca regua:
a[href="#"] {background: lime;}
Pokae nam ona wszystkie odnoniki, ktre maj w atrybucie href tylko warto wstawian
za pomoc JavaScriptu (w regule wykorzystaem selektor atrybutu wicej na jego temat
pisz w rozdziale 2., w podrozdziale Selektory atrybutw).
Jak naley uywa diagnostycznego arkusza stylw? Mona go doda do arkuszy witryny
w czasie pracy nad ni i usun go po skoczeniu pracy albo ustawi jako arkusz stylw
uytkownika w przegldarce i wwczas bdzie mona go stosowa do kadej odwiedzanej
strony.
Poniej zamieszczono peny kod diagnostycznego arkusza stylw, ktry znajduje elementy
bez treci, obrazy bez atrybutw alt i title, puste elementy obrazw, tabele bez atrybutw
summary, nagwki tabel z niepoprawnymi wartociami atrybutu scope oraz odnoniki
z niepoprawnymi lub pustymi atrybutami title i href. Ta wersja arkusza nie dziaa
wprzegldarce IE 7 ze wzgldu na uyte w nim selektory atrybutw. W IE 8 te nie zadziaa
z powodu uycia pseudoklas :not() i :empty(). Na rysunku 1.30 wida stron testow tego
arkusza.
ROZDZIA 1: NARZDZIA
div:empty, span:empty,
li:empty, p:empty,
td:empty, th:empty {padding: 0.5em; background: yellow;}
*[style], font, center {outline: 5px solid red;}
*[class=""], *[id=""] {outline: 5px dotted red;}
img[alt=""] {border: 3px dotted red;}
img:not([alt]) {border: 5px solid red;}
img[title=""] {outline: 3px dotted fuchsia;}
img:not([title]) {outline: 5px solid fuchsia;}
table:not([summary]) {outline: 5px solid red;}
table[summary=""] {outline: 3px dotted red;}
th {border: 2px solid red;}
th[scope="col"], th[scope="row"] {border: none;}
a[href]:not([title]) {border: 5px solid red;}
a[title=""] {outline: 3px dotted red;}
a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}
41
Rysunek 1.30. Strona testowa diagnostycznego arkusza stylw
CZ I: PODSTAWY
ZEROWANIE STYLW
Jedn z rzeczy, o ktr moe nigdy nie podejrzewae arkuszy CSS, jest to, e s one
stosowane do formatowania dokumentw HTML zawsze, nawet wtedy, gdy nie napiszesz
ani jednej reguy. W rzeczywistoci do kadego niestylizowanego dokumentu (przykad
na rysunku 1.31) stosowana jest caa masa arkuszy stylw, z ktrych wszystkie pochodz
bezporednio od przegldarki. Domylny rozmiar i grubo nagwkw, rozdzia elementw
od fragmentw tekstu, punktory obok elementw list, a nawet rozrnienie pl blokowych
irdliniowych pochodz od zestawu domylnych arkuszy stylw przegldarki.
42
Rysunek 1.31. Dokument bez stylw, ale w istocie o piknym stylu

Domylne style w przegldarkach oczywicie s rne. Nie naley tego uznawa za jakie
bdy w przegldarkach, poniewa nie istnieje adna oficjalna specyfikacja, ktra by
okrelaa, jak takie domylne style maj wyglda. Wikszo przegldarek stara si jak
najwierniej naladowa to, co robia przegldarka Mosaic. Tak, Mosaic, poniewa j starano
si naladowa w przegldarce Netscape 1.0, ktr prbowano naladowa w IE 3 itd. Jeli
dobrze przyjrzysz si domylnym stylom, to spostrzeesz, e mona w nich znale wiele
rzeczy takich samych jak we wczesnych wersjach beta przegldarki Mosaic.
ROZDZIA 1: NARZDZIA
W odpowiedzi na te niespjnoci zaczto tworzy arkusze stylw zerujce domylne
ustawienia (rysunek 1.32). Ich zadaniem jest zlikwidowanie jak najwikszej liczby rnic
midzy przegldarkami poprzez bezporednie ustawienie rnych wasnoci. Najprostsza
ztakich regu znajduje si poniej:
* {margin: 0; padding: 0;}
43
Rysunek 1.32. Dokument po zastosowaniu prostego arkusza zerujcego

Wiele osb uywa tej techniki, poniewa jest prosta. Niektrym jednak nie odpowiada
zerowanie wszystkich elementw cznie z elementami formularzy, takimi jak pola
tekstowe czy pola wyboru. Poniewa aktualnie przegldarki bardzo rnie obsuguj CSS
dla elementw formularzy (a niektre w ogle tego nie robi), wyzerowanie wszystkich
elementw w celu ujednolicenia formatowania moe w tym przypadku da skutek odwrotny
od zamierzonego.
W zwizku z tym opracowano bardziej skomplikowane arkusze zerujce. Bardzo popularny
znajduje si pod adresem meyerweb.com/eric/tools/css/reset. Oto urywek wzity z samego
pocztku:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
CZ I: PODSTAWY
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
body {
line-height: 1;
}
Wow! To caa masa elementw. Chodzi o to, aby wybra wszystkie elementy niebdce
kontrolkami formularza (input, select, textarea) i ujednolici ich formatowanie.
Pierwsza regua zeruje marginesy, dopenienie, obramowanie i obrys wszystkich elementw
oraz ustawia im jednakowy rozmiar pisma i takie same wyrwnanie poziome. Druga
natomiast zmniejsza wysoko linii elementu body. Warto ta zostanie odziedziczona
przez wszystkie elementy potomne tego elementu.
44
W arkuszu tym znajduje si wicej regu stylistycznych tego rodzaju. Niektre np. usuwaj
wypunktowanie z elementw list i cudzysowy automatycznie wstawiane w elementach
blockquote i q. Ma to na celu ujednolicenie wygldu dokumentu we wszystkich
przegldarkach przed rozpoczciem pisania arkuszy, ktre zamieni go w dzieo sztuki.
Teraz moe sobie mylisz: Chwileczk, to znaczy, e musz cofn wszystko, co do tej pory
zrobiem! Nigdy bym nie ustawi wysokoci linii na jeden, bo tekst byby za bardzo cinity
w pionie! Nie mam te ochoty bawi si w pionowe wyrwnywanie elementw indeksu
grnego i dolnego!.
To s uzasadnione wtpliwoci. Dlatego kady powinien wzi taki arkusz stylw
idostosowa go do swoich potrzeb. Jeli np. wasnoci line-height zawsze nadajesz
warto 1.4, aby uzyska przejrzysty tekst, wystarczy, e zmienisz odpowiedni deklaracj
warkuszu zerujcym:
body {
line-height: 1.4;
}
Przy okazji moesz doda swoje standardowe kolory ta i tekstu oraz okreli krj pisma,
ktrego zawsze uywasz:
body {
font: smaller/1.4 Helvetica, sans-serif;
background: #ABACAB;
color: #444;
}
ROZDZIA 1: NARZDZIA
Jeli nie planujesz zmienia wygldu list, moesz wyeliminowa regu usuwajc punktory
(ja akurat bym j zostawi, ale przecie wszyscy si jako rnimy). Dodaj reguy precyzyjnie
okrelajce sposb i gboko wcicia list, oddzielajce akapity od elementw listy, zdefiniuj
wasny sposb interpretacji elementu strong itd.
Po wykonaniu tych wszystkich dziaa otrzymasz ju nie zerujcy, lecz raczej
przebudowujcy arkusz stylw. Za jego pomoc cakowicie zmienisz podstawow
konstrukcj dokumentw, ktra bdzie stanowia Twj punkt wyjcia do dalszej pracy.
Oprcz tego, e za pomoc arkuszy CSS moesz przestawi kad przegldark na inny tryb
dziaania, moesz je ulepsza za pomoc JavaScriptu. Nie artuj.
SKRYPT IE9.JS
Dziki skryptowi IE9.js Deana Edwardsa moesz sprawi, aby przegldarki od IE 5 do IE
8 obsugiway HTML i CSS w sposb bardzo podobny do (jeszcze oficjalnie niewydanej)
przegldarki IE 9. Skrypt ten mona pobra pod adresem code.google.com/p/ie7-js (rysunek
1.33) ta sidemka na kocu to nie pomyka, zostaa w nazwie jako relikt przeszoci,
poniewa projekt pocztkowo mia nazw IE7.js, pniej IE8.js, a teraz jest ju IE9.js.
45
Rysunek 1.33. Strona projektu IE7.js
CZ I: PODSTAWY
IE9.js to zestaw procedur w jzyku JavaScript, ktre jeli strona jest przegldana za pomoc
innej przegldarki ni Internet Explorer 9 analizuj cay kod HTML i CSS w celu
sprawdzenia, ktre elementy i wasnoci nie s obsugiwane przez uywan przegldark.
Nastpnie skrypt wykonuje kilka magicznych sztuczek za kulisami i naprawia to, co jest
popsute.
Wemy np. selektory atrybutw, ktre nie s obsugiwane przez IE 5 i IE 6. Gdybymy
napisali tak regu:
a[href] {text-decoration: none; color: red;}
to przegldarki te zignorowayby j i nasze odnoniki pozostayby niezmienione (chocia

ucieszyby si z tego Jakob Nielsen, projektant strony nie podzieliby ju jego entuzjazmu).
Jeli jednak uyjemy skryptu IE9.js, naprawi on wszystko za nas i style naszych odnonikw
bd dziaa jak nigdy dotd! Jedyne, co musisz zrobi, to do kadej strony, ktra tego
potrzebuje, doczy plik IE9.js.
46
Oczywicie nic z tego nie bdzie, jeli przegldarka bdzie miaa wyczon obsug
JavaScriptu. Po prostu trzeba rozway potencjalne korzyci i to, czego moemy si
spodziewa po grupie docelowej uytkownikw strony. Czy wielu z nich uywa jeszcze IE 6?
Czy jest due prawdopodobiestwo, e wyczyli oni obsug JavaScriptu? Tak naprawd te
same pytania trzeba sobie zada przed rozpoczciem pracy nad kadym projektem, a wic
nie przysporzy nam to wiele dodatkowej pracy.
Najczciej zalecan technik doczania skryptu IE9.js do stron jest zamknicie elementu
script w komentarzu warunkowym:

Skrypt jednak sam decyduje, czy istnieje potrzeba jego uruchomienia, a wic pod tym
wzgldem komentarz ten jest zbdny. W takim przypadku jednak bdzie pobierany przez
kadego uytkownika, bez wzgldu na uywan przez niego przegldark. Jeli zastosujemy
komentarz warunkowy, skrypt bdzie pobierany tylko przez te przegldarki, ktre go
potrzebuj.
Jak ju wspomniaem, istniej wersje skryptu uaktualniajce starsze wersje IE do wersji 7.
i 8. Jeli wic stwierdzisz, e IE9.js nie spenia Twoich oczekiwa, moesz wyprbowa te
jedn z poprzednich wersji.
2
ROZDZIA
PODRCZNIK CSS
SELEKTORY
SELEKTORY S SERCEM technologii CSS.

Bez nich nie daoby si przypisywa stylw
doelementw, nie mwic ju o dobieraniu
si do ich atrybutw. To byoby straszne.
Dziki moliwoci odwoywania si do rnych
rodzajw elementw moemy za pomoc tylko
kilku wierszy kodu CSS spowodowa naprawd

due zamieszanie w dokumencie.
W tym rozdziale poznasz szczegy dziaania
rnych selektorw oraz nauczysz si korzysta
z wielu z nich.
CZ I: PODSTAWY
PSEUDOCO TAM
W technologii CSS wystpuj dwa rodzaje pseudoczego tam pseudoklasy
ipseudoelementy. W CSS 2.1 dostpne s nastpujce pseudoklasy:
:link: nieodwiedzone cze
:visited: odwiedzone cze
:hover: element, nad ktrym znajduje si kursor
:focus: element z fokusem
:active: aktywny element (np. odnonik w czasie, gdy element jest klikany)
:first-child: element bdcy pierwszym dzieckiem innego elementu
:lang(): element o okrelonej wartoci atrybutu lang
A oto lista pseudoelementw CSS 2.1:

::first-line
::first-letter
::before
::after
48
Co je rni? Rnica polega na sposobie, w jaki pseudoklasy i pseudoelementy wpywaj

na stron. Pseudoklasy dziaaj w pewnym sensie tak, jakby dynamicznie dodaway do
dokumentu zwyke klasy. Natomiast pseudoelementy wstawiaj do dokumentu nowe
elementy.
Wemy np. pseudoelement ::first-letter. Zamy, e chcemy sprawi, aby pierwsza
litera kadego nagwka h1 bya dwa razy wiksza od pozostaych liter (jak na rysunku 2.1).
atwizna:
h1::first-letter {font-size: 250%;}
Rysunek 2.1. Powikszenie pierwszej litery elementu h1
ROZDZIA 2: SELEKTORY
Ta regua ma takie samo dziaanie, jakbymy napisali:
h1 pierwsza-litera {font-size: 250%;}
<h1><pierwsza-litera>C</pierwsza-litera>ze, dzieciaki!</h1>
Czy wanie to dzieje si wewntrz mechanizmu przegldarki? Kto wie? Jedyne, co mona
stwierdzi na pewno, to fakt, e tak to dziaa. Std nazwa pseudoelement.
Natomiast pseudoklasy dziaaj tak, jakby dynamicznie doczay do elementw klasy.
Wyobramy sobie, e przegldarka przypisuje kademu elementowi w dokumencie
bdcemu pierwszym dzieckiem jakiegokolwiek innego elementu klas pierwsze-dziecko.
Wwczas moglibymy przypisa styl tym elementom, stosujc nastpujc regu:
li.pierwsze-dziecko{border-left: none;}
Wystarczy, e zamienisz tylko kropk na rednik, tzn. li:first-child, i uzyskasz taki sam
efekt bez koniecznoci zamiecania swojego kodu ca mas klas.
Zapewne ciekawi Ci te, dlaczego na pocztku pseudoelementw znajduj si dwa
dwukropki. Taki standard zapisu zosta wprowadzony poza specyfikacj CSS 2.1 i jak na
razie adna przegldarka nie zmusza do jego stosowania. Rwnie dobrze mona stosowa
tylko jeden dwukropek.
Na marginesie warto doda, e w CSS 3 wprowadzono sporo nowych pseudoklas,
ktrewchwili obecnej nie s zbyt szeroko rozpoznawane przez przegldarki:
:target
:root
:nth-child()
:nth-of-type()
:nth-last-of-type()
:first-of-type
:last-of-type
:only-of-type
:only-child
:last-child
:empty
:not()
:enabled
:disabled
:checked
49
CZ I: PODSTAWY
PRECYZYJNE LDOWANIE
Czsto bardzo przydatna jest moliwo wskazania w dokumencie identyfikatora fragmentu.
C to takiego? spytasz. Nic strasznego. Spjrz niej:
<a href="http://przyklad.pl/law.html#podr2-7">Podrozdzia 2.7</a>
Kady, kto kliknie takie cze, zostanie przeniesiony nie tylko na odpowiedni stron, lecz
wylduje dokadnie w miejscu wskazywanym przez identyfikator fragmentu strony (#podr2-7).
Ten sam efekt mona uzyska za pomoc kotwicy, ale lepiej jest uywa identyfikatorw.
Otoobie moliwoci:
<h3><a name="podr2-7">Wyjtki</a></h3>
<h3 id="podr2-7">Wyjtki</h3>
W obu tych przypadkach przegldarka przeniesie nas w odpowiednie miejsce w dokumencie,

ale nie wywietli adnej wizualnej wskazwki, e do takiego miejsca przeszlimy. Dlatego
mamy do dyspozycji pseudoklas :target. Gdybymy np. chcieli jako zaznaczy wszystkie
elementy h3 bdce punktami docelowymi identyfikatora fragmentu (jak na rysunku 2.2),
moglibymy napisa tak regu:
h3:target {color: 20689a;
background: #ffff66;}
50
Rysunek 2.2. Wyrnienie elementu docelowego
Oczywicie mona te zastosowa specjalne formatowanie do kadego elementu bdcego
punktem docelowym. Wwczas selektor h3 naley zastpi selektorem uniwersalnym,
jakwida poniej:
*:target {color: 20689a;
background: #ffff66;}
Z technicznego punktu widzenia selektor uniwersalny w tym przypadku jest opcjonalny.

Gdybymy napisali po prostu :target, te byoby dobrze.
Jeli chcesz, aby Twoja strona bya bardziej w duchu Web 2.0, moesz zastosowa efekt
zanikajcego ta. Gdy uytkownik przejdzie do miejsca docelowego na stronie, to
najpierw przybierze okrelony kolor, ktry potem powoli zaniknie, co bdzie wskazywa,
e wykonano jakie zadanie. Mona to atwo zrobi przy uyciu pseudoklasy :target
ianimowanego GIF-a. Utwrz obraz GIF zmieniajcy powoli kolor z jakiego wybranego
nakolor ta Twojej strony i zastosuj go w tle.
*:target {background: url(/pix/yellow-fade.gif);}
PRECYZJA SELEKTORW
Precyzja selektorw, mimo i dla niektrych trudna do pojcia, jest kluczem do zrozumienia
interakcji zachodzcych midzy rnymi reguami CSS.
Jest to liczbowa reprezentacja dokadnoci selektora. Okrela si j na podstawie trzech
czynnikw:
Kady selektor elementu wnosi precyzj rzdu 0,0,0,1.
Kada klasa, pseudoklasa i kady selektor atrybutu ma precyzj 0,0,1,0.
Kady identyfikator ma precyzj 0,1,0,0.
Nie denerwuj si (jeszcze). Lepiej najpierw spjrz na ponisze przykady.

div ul ul li
0,0,0,4
Cztery selektory elementw.
div.aside ul li
0,0,1,3
Jeden selektor klasy, trzy selektory elementw.
a:hover
0,0,1,1
Jeden selektor pseudoklasy, jeden selektor elementu.
div.navlinks a:hover 0,0,2,2
Jeden selektor pseudoklasy, jeden selektor klasy,

dwaselektory elementw.
#title em
0,1,0,1
Jeden selektor identyfikatora, jeden selektor elementu.
h1#title em
0,1,0,2
Jeden selektor identyfikatora, dwa selektory elementw.
51
CZ I: PODSTAWY
To powinno Ci pomc zrozumie sposb konstrukcji wartoci okrelajcych precyzj.
Doczego su te wszystkie przecinki? Ot kady poziom precyzji jest jakby samodzieln
wartoci. Tak wic selektor skadajcy si z jednego selektora klasy ma wiksz precyzj ni
skadajcy si z 13 selektorw elementw. Ich wartoci byyby nastpujce:
.aside /* 0,0,1,0 */
div table tbody tr td div ul li ol li ul li pre /* 0,0,0,13 */
Jedynka na trzeciej pozycji w wartoci pierwszego selektora bije zero na tej samej pozycji
w wartoci drugiego selektora. To oznacza, e trzynastka na czwartej pozycji drugiego
selektora w tym przypadku jest bez znaczenia. Przecinki sprawiaj, e atwiej jest rozpozna,
do czego nale poszczeglne liczby. Gdyby ich nie byo, otrzymalibymy wartoci 10 i 13
iwycignlibymy bdny wniosek, e drugi selektor jest precyzyjniejszy od pierwszego
(wewczeniejszych wersjach CSS, zanim wprowadzono zapis z przecinkami, rzeczywicie
byo z tym mnstwo problemw).
Wiele osb apie si te na tym, e myli, i na precyzj selektorw ma wpyw strukturalny
ukad elementw HTML. Wemy np. ponisze dwie reguy:
ul li {font-style: normal;}
html li {font-style: italic;}
52
Ktra z nich wemie gr? Obie zawieraj po dwa selektory elementw, a wic obie maj
precyzj 0,0,0,2. Dlatego zastosowana zostanie ta, ktra zostaa wpisana ostatnia, a wic
html li. Nie ma adnego znaczenia, e element ul jest skadniowo bliszy elementowi li.
Precyzja selektorw to prosta warto liczbowa. Nie bierze si w niej pod uwag w aden
sposb struktury dokumentw. W tym przypadku wszystkie elementy listy zostan
napisane pismem pochyym, poniewa jeli dwie reguy maj tak samo precyzyjne selektory,
zastosowana zostaje ostatnia z nich.
Zapewne zastanawiasz si, jak rol odgrywa to pierwsze zero w zapisie precyzji, skoro
napisaem, e pod uwag brane s tylko trzy czynniki. Dotyczy ono stylw rdliniowych,
awic w poniszym kodzie to elementu div bdzie niebieskie.
div#header {background: purple;} /* 0,1,0,0 */
<div id="header" style="background: blue;"> 
REGUA WANOCI
Regua wanoci ma posta !important i przewysza si reguy precyzji. Jeli jeste
programist, to musz Ci od razu poratowa dodatkowym objanieniem !important
wcale nie oznacza nie important.
Notacja ta suy do oznaczania wybranych deklaracji jako wane. Oto prosty przykad:
a:hover {color: red !important; text-decoration: none;}
Jako wana zostaa tu oznaczona tylko deklaracja color: red. Aby tak samo oznaczy inne
deklaracje, trzeba kad z nich opatrzy osobnym dopiskiem !important.
Mwic najprociej, kada deklaracja oznaczona jako !important jest waniejsza
od wszystkich deklaracji bez takiego oznaczenia koniec i kropka. W przypadku
przedstawionym poniej cze bdzie zielone:
div#gohome a#home {color: red;}
div a {color: green !important;}
<div id="gohome"><a id="home" href="/">Strona gwna</a></div>
Pierwszej regule nie pomoga nawet bardzo wysoka precyzja selektora (0,2,0,2), poniewa
regua !important i tak jest waniejsza.
Oczywicie, jeli dodamy oznaczenie !important take do pierwszej reguy, sytuacja zmieni si
diametralnie.
div#gohome a#home {color: red !important;}
div a {color: green !important;}
Poniewa obie deklaracje kolorw s oznaczone jako !important, konflikt zosta rozwizany
wedug typowych zasad kaskadowoci. Innymi sowy, znowu do gosu dosza precyzja
selektorw i cze bdzie czerwone.
Z tego wynika, e regu !important naley stosowa z rozwag. Jeli zaczniesz jej naduywa
do przesaniania rnych deklaracji, to w kocu moesz doprowadzi do tego, e bdziesz
musia jedne deklaracje !important przesania innymi, te kolejnymi itd., a w kocu
wszystkie zostan oznaczone w ten sposb i adna nie bdzie specjalnie wana.
CO SI DZIEJE, GDY ZOSTANIE POMINITA

JAKA WARTO W ZAPISIE SKRCONYM?
Wszyscy znamy czsto uywane skrcone formy zapisu wasnoci, takie jak background,
border, font, margin czy padding. Stanowi one bardzo wygodny sposb wyraenia
kilku waciwoci elementw za jednym razem. Co si jednak stanie, gdy w zapisie takim
pominiemy niektre wartoci? Zobaczmy:
strong {font: bold italic small-caps medium/1.2 Verdana, sans-serif;}
Ta regua spowoduje, e wszystkie elementy strong bd napisane pismem pochylonym,

kapitalikami o rednim rozmiarze i przy uyciu fontu Verdana (albo jakiego innego
bezszeryfowego) oraz z wysokoci wiersza 1.2 wida to na rysunku 2.3.
53
CZ I: PODSTAWY
Rysunek 2.3. Szaowy element strong

Wyobramy sobie teraz, e powysz regu nieco okroilimy:
strong {font: medium Verdana, sans-serif;}
Teraz uzyskamy tekst redniego rozmiaru napisany Verdan (lub innym bezszeryfowym
krojem pisma, jeli Verdana bdzie niedostpna) i o normalnej gruboci. Na rysunku 2.4
wida, e pogrubienie rzeczywicie znikno.
54
Rysunek 2.4. Przypadkowe usunicie pogrubienia
Wynik taki uzyskalimy dlatego, e w skrconym zapisie wasnoci wszystkie wartoci, ktre
nie zostan bezporednio zdefiniowane, przyjmuj okrelon warto domyln. Dlatego nie
okrelajc gruboci, stylu i wariantu pisma, napisalimy regu rwnoznaczn z ponisz:
strong {font: normal normal normal small/normal Verdana, sans-serif;}
Tak, nawet wasnoci line-height jest przypisywana domylna warto, ktra moe
przesoni ewentualn warto odziedziczon.
Jeli nie zaplanujemy swojego arkusza stylw bardzo starannie, to moemy mie z tym
powane kopoty. Wemy pod rozwag dwie ponisze reguy. Pierwsza z nich pochodzi
zoglnego arkusza dla caej witryny, a druga z arkusza osadzonego na stronie.
body {background: #FCC url(/i/pagebg.gif) 10px 25% no-repeat fixed;}
body {background: url(i/body-bg.gif);}
Te dwie reguy sprawi, e na naszej stronie zostanie wywietlony nowy obraz zwielokrotniony
w tle. Jego pocztek bdzie znajdowa si w lewym grnym rogu i bdzie on przewijany wraz
z treci strony. Jest to efekt tego, e druga regua jest rwnoznaczna z ponisz:
body {background: transparent url() 0 0 repeat scroll;}
Jeli tego wanie chcielimy, to tak powinnimy wanie napisa. Ale bardziej
prawdopodobne wydaje si, e chcielimy zamieni jeden obraz na inny. W takim
przypadku powinnimy zastosowa konkretn wasno:
body {background-image: url(i/body-bg.gif);}
Tak samo zachowuj si wszystkie pozostae wasnoci w zapisie skrconym. Wyjtkami s

tu margin, padding, border-style, border-width i border-color. W tych przypadkach
brakujce wartoci s kopiami podanych. Oto kilka przykadw rnego zapisu wasnoci
o takim samym znaczeniu.
margin: 1em; margin: 1em 1em 1em 1em;
padding: 10px 25px; padding: 10px 25px 10px 25px;
border-color: red green blue; border-color: red green blue green;
Kolejno okrelania wartoci jest nastpujca: gra, prawa strona, d i lewa strona.
WYBIRCZE PRZESANIANIE WASNOCI

WZAPISIE SKRCONYM
To, e w zapisie skrconym wasnoci niepodane wartoci s automatycznie uzupeniane,
wcale nie oznacza, e powinnimy go unika. W istocie moe nawet si nam opaca
zadeklarowa 80% wszystkiego, czego chcemy w zapisie skrconym, a potem pozostae 20%
zmieni za pomoc konkretnych wasnoci.
Wyobramy sobie, e chcemy utworzy przerywan ramk o szerokoci boku 3 pikseli
iczarn z trzech stron, a czerwon z czwartej strony (rysunek 2.5). Do tego celu mona by
napisa osobn deklaracj dla kadego boku, ale wwczas mielibymy duo powtrze tego
samego kodu. Dlatego lepiej jest napisa tak:
border: 3px dotted black;
border-left-color: red;
Rysunek 2.5. Kolorowanie jednej krawdzi na czerwono
55
CZ I: PODSTAWY
Pierwsza deklaracja ustawia wasnoci wszystkich krawdzi, a druga zmienia tylko t jedn,
ktra nas interesuje. Co ciekawe, obie te deklaracje moemy zamieci w jednej regule.
Innym dobrym przykadem, kiedy trzeba wybirczo przesania niektre ustawienia
skrconego zapisu wasnoci, s style nagwkw, ktre czsto rni si midzy sob tylko
rozmiarem tekstu. Jeli odpowiadaj Ci domylne rozmiary przypisywane nagwkom,
wystarczy napisa regu podobn do poniszej:
h1, h2, h3, h4, h5, h6 {font-weight: normal;
font-style: italic;
font-family: Helvetica, sans-serif;
line-height: 1.5;}
Jeli jednak masz zamiar ustawi wasne rozmiary nagwkw, jak na rysunku 2.6, zastosuj
nastpujc technik:
h1, h2, h3, h4, h5, h6 {font: italic 100%/1.5 Helvetica, sans-serif;}
h1 {font-size: 225%;}
/* itd. */
56
Rysunek 2.6. Zmienione rozmiary nagwkw za pomoc nadpisania wybranych wasnoci
Kiedy korzystasz z tej techniki, pamitaj, aby konkretne wasnoci byy zadeklarowane
za wasnoci w zapisie skrconym. Poniewa selektory bd miay tak sam precyzj,
zastosowane zostan te, ktre zostay zapisane jako ostatnie.
SELEKTOR UNIWERSALNY
Teraz nauczysz si stosowa znak gwiazdki jako selektor (*). Nie ekscytuj si jednak zbytnio,
bo nie jest on a tak uniwersalny, jak Ci si wydaje. Oto prosty przykad jego uycia:
* {color: blue;}
Gwiazdka nazywa si selektorem uniwersalnym, a wic wybiera wszystkie elementy

zdokumentu i stosuje do nich zdefiniowane w regule style.
Wyglda to jak wyraenie wieloznaczne i w pewnym sensie nim jest, poniewa pozwala
dobra si do caej masy elementw bez wymieniania ich nazw. W ramach przykadu
wyobramy sobie, e chcemy wybra wszystkie elementy z poniszego elementu div:
<div>
<h1>Hej-ho! </h1>
<p>Jestem sobie<em>akapitem</em>.</p>
<ol>
<li>Uno</li>
<li>Deux</li>
<li>Drei</li>
</ol>
</div>
Nic atwiejszego:
div * {border: 1px solid red;}
Wynik jest dokadnie taki sam, jak gdybym napisa:

div h1, div p, div em, div ol, div li {border: 1px solid red;}
No, moe prawie taki sam. Wizualnie nie ma rnicy (co wida na rysunku 2.7), ale jest
rnica, jeli chodzi o precyzj selektorw. Selektor uniwersalny do wartoci precyzji caego
selektora nie wnosi nic, tzn. ma precyzj 0,0,0,0. To znaczy, e selektor div * ma precyzj
0,0,0,1, a div h1 i wszystkie pozostae w tej grupie 0,0,0,2. Poza tym szczegem wszystko
pozostae jest w obu przypadkach takie same.
Jeli masz nadziej, e za pomoc gwiazdki moesz odwoa si do wszystkich nagwkw
naraz, stosujc zapis w rodzaju h*, zamiast wylicza h1, h2, h3, h4, h5, h6, to musz
Ci rozczarowa tak si nie da. Selektor uniwersalny mona stosowa do elementw tylko
wsposb pokazany powyej i w aden inny.
57
CZ I: PODSTAWY
Rysunek 2.7. Dodanie czerwonego obramowania do wszystkich potomkw elementu div
IDENTYFIKATORY A KLASY
Jednym z pierwszych powanych dylematw, przed jakimi staje kady adept aspirujcy do
miana programisty CSS jest: uywa klas (atrybut class) czy identyfikatorw (atrybut id)?
58
Jak to zwykle w yciu bywa, na to pytanie istnieje jedna prosta odpowied i kilka
innych, bardziej skomplikowanych. Prosta wersja brzmi nastpujco: Uywaj klas do
oznaczania wszystkich elementw, ktre mog wystpi na stronie wicej ni jeden raz,
aidentyfikatorw do elementw, ktre mog wystpi tylko raz. Przez sowo oznacza
rozumiem uywanie wyrazw, ktre dobrze opisuj zastosowanie oznaczanych elementw.
Ten sposb wykorzystania klas i identyfikatorw stanowi 99,44% ich cakowitego uycia.
Typowymi, czsto spotykanymi przykadami identyfikatorw s header (nagwek)
ifooter (stopka), poniewa zakada si, e kady z tych elementw wystpuje na kadej
stronie tylko w jednym egzemplarzu. Nazwy klas s bardziej zrnicowane i mog to by
np. more (dooznaczenia odnonikw prowadzcych do dodatkowych informacji), tabs
(dooznaczania kart w nawigacji) czy odd (do oznaczania co drugiego wiersza w tabeli).
W wersji bardziej skomplikowanej musimy wzi pod uwag nie tylko to, czy nasza etykieta
ma by niepowtarzalna, czy nie, lecz rwnie wpyw, jaki nasza klasa lub identyfikator
wywrze na precyzj caego selektora. Poniewa selektory z identyfikatorami maj wysz
precyzj od tych z klasami, niewykluczone, e nie bdzie mona przesoni jakiej reguy.
Oto prosty przykad. Wyobramy sobie, e mamy w arkuszu ponisze dwie reguy:
#header {background: black;}
#header a {color: white;}
Po pewnym czasie dochodzimy jednak do wniosku, e nasza strona kontaktowa powinna by

przystpniejsza i postanawiamy zmieni kolor nagwka na przyjemny dla oka jasnoszary,
aczy nawigacyjnych na odprajcy, rednio intensywny zielony. Poniewa na tej
stronie znajduje si kilka zbiorw czy nawigacyjnych, piszemy takie reguy:
#header {background: #BBB;}
.navlinks a {color: #257000;}
Niestety, cza nawigacyjne w nagwku pozostan biae, co bdzie efektem wysokiej
precyzji selektora #header a (rysunek 2.8).
Rysunek 2.8. Niezbyt atrakcyjne cza w nagwku

Problem mona rozwiza, stosujc taki zapis:
#header a, .navlinks a {color: #257000;}
Albo nawet:
#header .navlinks a, .navlinks a {color: #257000;}
Oba dziaaj, lecz aden z nich nie jest zbyt elegancki (ale i tak jest lepszy ni dodanie sowa
!important do reguy .navlinks a). Innym rozwizaniem tego problemu jest zamiana
identyfikatora nagwka na klas:
<div class="header">
Zastpiem id="header" atrybutem class="header". Teraz z pewnoci bdziemy

mieli znacznie mniej trudnych do rozwizania problemw z precyzj selektorw
zidentyfikatorami. W arkuszu oglnym witryny mielibymy nastpujcy kod:
.header {background: black;}
.header a {color: white;}
a w stylach lokalnych strony kontaktowej:

.header {background: #BBB;}
.navlinks a {color: #257000;}
W wyniku otrzymamy adne, zielone odnoniki, jak na rysunku 2.9.
59
CZ I: PODSTAWY
Rysunek 2.9. Atrakcyjne cza w nagwku

To wszystko, co trzeba byo zrobi. Jest to argument za tym, aby stosowa tylko lub prawie
tylko same klasy.
60
Innym argumentem jest to, e nigdy nie wiadomo, kiedy jaki element na stronie
przestanie by niepowtarzalny. Doskonaym przykadem jest tu nagwek, poniewa na
stronie nagwkw moe by kilka. Jeli uwaasz, e to dziwne, to pomyl np. o portalach
informacyjnych. Kada sekcja i kade pole w pasku bocznym moe mie wasny nagwek
i wasn stopk. Nadanie wszystkim tym elementom spjnych klas wydaje si bardzo
rozsdnym rozwizaniem.
Mona oczywicie si spiera, e to nie s prawdziwe nagwki strony tylko nagwki
prasowe czy co tam jeszcze innego. Jest to kwestia semantyki, ktrej nie da si atwo
rozstrzygn. To, co jedni nazywaj pierwszym wierszem, inni mog nazwa nagwkiem.
Chodzi mi tylko o to, e element, ktry kiedy oznaczylimy jako niepowtarzalny, ktrego
dnia moe okaza si nie tak unikatowy, jak si nam wydawao. Najlepszym sposobem na
zabezpieczenie si na wypadek wystpienia tego problemu jest uywanie tylko klas.
Czy w takim razie uywanie identyfikatorw ma w ogle sens? Istniej elementy na stronie,
co do ktrych moemy mie absolutn pewno, e zawsze pozostan niepowtarzalne w obrbie
jednej strony. Czasami zastosowanie identyfikatora moe by podyktowane wanie chci
wykorzystania jego zwikszonej precyzji w stosunku do innych identyfikatorw. Oprcz
tego identyfikatory mog odgrywa wan rol w skryptach, tworzeniu czy do wybranych
miejsc na stronie i innych technikach bdcych poza zakresem zastosowania CSS. Trzeba
tylko pamita, aby na nie uwaa.
Problem z precyzj selektorw z identyfikatorami mona rozwiza jeszcze w inny sposb,
ktry zosta opisany dalej, w podrozdziale Identyfikatory a selektor atrybutw.
CZENIE IDENTYFIKATORW Z KLASAMI

Czasami trafiaj si elementy, ktre jednoczenie s niepowtarzalne, a zarazem nale do
jakiej szerszej klasy elementw. Wyobramy sobie, e mamy w pasku bocznym kilka maych
paneli. Kady z nich jest otoczony obramowaniem i ma okrelon kombinacj kolorw
ikrojw pisma, ale kady jest te na swj sposb niepowtarzalny, np. ma inny obraz w tle.
W takich przypadkach dla elementw mona zdefiniowa zarwno klasy, jak i identyfikatory:
<div class="panel" id="weather">
<div class="panel" id="stocks">
<div class="panel" id="latest">
Do kadego z tych elementw moemy si odwoa w arkuszu stylw tak, jak nam pasuje:
.panel {
border: 1px solid silver;
background: #EEE top left no-repeat;
color: #333;
font: x-small sans-serif;}
#weather {
background-image: url(/pix/panel-weather.jpg);}
#stocks {
background-image: url(/pix/panel-stocks.jpg);}
#latest {
background-image: url(/pix/panel-latest.jpg);}
Selektory klas i identyfikatorw mona nawet czy:

.panel#weather {font-weight: bold;}
#latest.panel {color: #511;}
Kolejno zapisu selektorw nie ma znaczenia, co wida w powyszym przykadzie, a wic

nie musz one te odpowiada kolejnoci atrybutw w elemencie HTML.
PRZYPISYWANIE JEDNEGO ELEMENTU

DOWIELU KLAS
Czsto zapominan cech atrybutu class jest to, e mona mu przypisa dowoln liczb
wyrazw rozdzielonych spacjami, co w istocie oznacza, e kady element HTML mona
przyporzdkowa do wielu klas.
Jako przykad wykorzystamy wczeniejszy kod HTML i pozbdziemy si z niego wszystkich
atrybutw id:
<div class="panel weather">
<div class="panel stocks">
<div class="panel latest">
61
CZ I: PODSTAWY
Nastpnie musimy odpowiednio zmieni selektory CSS, aby odwoyway si do klas zamiast
identyfikatorw:
.panel {
border: 1px solid silver;
background: #EEE top left no-repeat;
color: #333;
font: x-small sans-serif;}
.weather {
background-image: url(/pix/panel-weather.jpg);}
.stocks {
background-image: url(/pix/panel-stocks.jpg);}
.latest {
background-image: url(/pix/panel-latest.jpg);}
.panel.weather {font-weight: bold;}
.latest.panel {color: #511;}
Kolejno zapisu klas w atrybucie HTML nie ma znaczenia dla ich kolejnoci w arkuszu
stylw. Dlatego zapis .panel.weather jest rwnoznaczny z zapisem .weather.panel, jeli
chodzi o precyzj. Nie ma te znaczenia, czy midzy nimi w rdle HTML znajduj si
jeszcze jakie inne nazwy klas, np.:
62
<div class="weather alert tornado watch panel">
Do tego elementu take mona si odwoywa za pomoc selektorw .panel.weather

i.weather.panel.
Jeszcze tylko jedna drobna uwaga przegldarka IE 6 (i jej wczeniejsze wersje) nie
rozpoznaje prawidowo selektorw zoonych z kilku klas w arkuszach stylw. Jeli
napiszemy .panel.weather, przegldarka zinterpretuje to jako .weather. Elementom
HTML mona przypisywa wiele klas naraz, ale w kodzie CSS trzeba si do nich odwoywa
pojedynczo. Zatem selektory .weather i .panel zostan poprawnie zinterpretowane przez
IE 6. Natomiast selektor .weather.panel zostanie potraktowany jako odwoanie do kadego
elementu z atrybutem class zawierajcym warto panel, co nie jest rwnoznaczne z tym,
co napisalimy.
SELEKTORY ATRYBUTW
Selektory atrybutw wprowadzono w CSS 2 i rozszerzono w CSS 3. Aktualnie s one
obsugiwane przez wszystkie najwaniejsze przegldarki (nie obsuguje ich przegldarka IE
6, wic jeli jest to dla Ciebie problem, wr do podrozdziau Skrypt IE9.js w rozdziale 1.).
Oglna zasada dziaania tego typu selektorw opiera si na posiadaniu przez elementy
okrelonych atrybutw lub okrelonych cech wartoci atrybutw. Przy ich uyciu mona np.
odwoa si do wszystkich elementw a, ktre s czami:
a[href]
Powyszy selektor wybiera wszystkie elementy a majce atrybut href, a pomija takie,
ktre tego atrybutu nie maj, czyli najczciej nazwane kotwice (np. <a name="top">).
Wpewnym sensie selektor ten jest zwilejsz wersj selektorw a:link i a:visited, np.:
a[href] {color: green;}
Efekt powyszej reguy wida na rysunku 2.10.
Rysunek 2.10. Wybr czy z atrybutem href

Zauwamy, e sama warto atrybutu href nie ma w tym przypadku najmniejszego
znaczenia, a wic podany w niej adres URL (lub cokolwiek innego wpisanego tam przez nas)
moe by niepoprawny. Dla tego selektora element <a href="#"> jest tak samo dobry jak
<a href="http://w3.org/">.
Co w takim razie mamy zrobi, gdybymy chcieli odwoa si do wszystkich hiperczy
prowadzcych pod wybrany adres? Jeli interesuje Ci konkretny adres URI, moesz
zastosowa technik przedstawion poniej (rysunek 2.11):
a[href="http://w3.org/"] {font-style: italic;}
Rysunek 2.11. Wybr czy z okrelonym adresem URL w atrybucie href

Ta regua dotyczy tylko tych elementw a, ktrych atrybut href ma warto
http://w3.org/. Zwr uwag na sposb, w jaki si wyraziem nie napisaem:
hiperczy prowadzcych do witryny internetowej W3C, poniewa nie o to chodzi.
Wane jest to, e dopasowanie musi by dokadne, co do znaku. Gdybymy mieli element
<a href="http://www.w3.org/">, pokazany selektor zignorowaby go. Selektor i warto
atrybutu musz by identyczne.
63
CZ I: PODSTAWY
Technika ta nie jest moe najprzydatniejsza w przypadku hiperczy, ale mona j np.
wykorzysta do wybierania rnych obrazw w celu zdefiniowania stylu np. logo firmy.
Jeli korzystasz z systemu zarzdzania treci, ktry wstawia logo w grnej czci strony
zapomoc nastpujcego elementu img:
<img src="/img/2010/mainlogo.png" alt="ConHugeCo Inc." />
to mona si do niego odwoa przy uyciu nastpujcego selektora:

img[src="/img/2010/mainlogo.png"]
Nie trzeba dodawa adnych klas ani identyfikatorw wystarczy wykorzystanie jako
punktu zaczepienia wartoci atrybutu elementu, oczywicie przy zaoeniu, e warto ta
zawsze bdzie taka sama (jeli interesuje Ci mniej dokadne dopasowywanie wartoci,
zobacz dalej podrozdzia Selektory wyboru podacuchw w atrybutach).
Jeszcze jedn rzecz wart uwagi jest nastpujcy zapis w specyfikacji CSS: to, czy w nazwach
i wartociach atrybutw s rozrniane wielkie i mae litery, zaley od jzyka dokumentu
(www.w3.org/TR/CSS2/selector.html#matching-attrs). To znaczy, e w niektrych jzykach
znacznikw wielko liter w nazwach atrybutw ma znaczenie, a w innych nie. W jzyku
XHTML wielko liter ma znaczenie i oglnie lepiej jest przyj zaoenie, e tak samo jest
we wszystkich innych jzykach.
64
SELEKTOR ATRYBUTU CLASS

Po przeczytaniu poprzedniego podrozdziau mona doj do wniosku, e za pomoc
selektorw atrybutw mona odtworzy selektor .class. Jest to prawda, da si to zrobi,
alenie w aden ze sposobw, ktre przedstawiem do tej pory.
Oto sposb uzyskania dokadnego odpowiednika selektora div.panel przy uyciu selektora
atrybutw:
div[class~="panel"]
Zauwaye tyld znajdujc si w tym kodzie przed znakiem rwnoci? W tym przypadku
jest ona bezwzgldnie potrzebna, poniewa oznacza, e ten selektor wybiera podane sowo
zlisty sw oddzielanych spacjami. Taki may zawijas, a taki wany!
Aby nie byo wtpliwoci, zobaczmy, co si stanie, jeli tyld usuniemy. Nasz selektor
wygldaby wwczas nastpujco:
div[class="panel"]
Selektor ten wybiera wszystkie elementy div z atrybutem class o wartoci panel licz
si tylko takie, ktre maj warto dokadnie panel. Jeli w atrybucie class byoby wpisane
panel weather, to selektor bez tyldy nie zadziaa, poniewa panel to nie jest dokadnie
tosamo co panel weather. Natomiast selektor div.panel wybierze element
<div class="panel weather"> bez problemu.
Dodanie tyldy sprawia, e selektor zachowuje si dokadnie tak, jak w przypadku skadni
z uyciem kropki. W zwizku z tym dwa ponisze selektory s identyczne pod kadym
wzgldem oprcz liter, z ktrych si skadaj:
div[class~="panel"]
div.panel
Teraz pewnie sobie mylisz: wietnie, zawsze chciaem pozna dug i zawi skadni
selektora do wybierania klas. Dlatego zaznaczam, e selektory atrybutw nie su tylko do
wyboru elementw na podstawie wartoci ich atrybutw id i class. Przedstawionej notacji
mona uywa w stosunku do wszystkich atrybutw dopuszczajcych w wartociach listy
wyrazw oddzielanych spacjami (przez wyraz rozumiem tu cig znakw).
Oto kilka innych przykadw uycia tego rodzaju selektora:
img[alt~="figura"]
Kady obraz, ktrego atrybut alt zawiera wyraz figura.
table[summary~="data"]
Kada tabela, ktrej atrybut summary zawiera wyraz data.
*[title~="2009"]
Kady element, ktrego atrybut title zawiera cig znakw 2009.
IDENTYFIKATORY A SELEKTORY ATRYBUTW

Selektorw atrybutw mona uywa nie tylko do naladowania w skomplikowany sposb
selektorw klas, lecz rwnie do imitowania selektorw identyfikatorw. Obie ponisze
reguy odnosz si do tego samego elementu:
p#lead-in {font-weight: bold;}
p[id="lead-in"] {font-weight: normal; font-style: italic;}
Wszystko w porzdku, ale spjrzmy na wynik zastosowania kadej z tych dwch regu.
Akapit o identyfikatorze lead-in bdzie mia tekst pogrubiony i jednoczenie pochylony
(rysunek 2.12).
Jest to spowodowane tym, e selektor atrybutw ma precyzj 0,0,1,0 tak sam jak klasy
i pseudoklasy. W zwizku z tym precyzja pierwszej reguy wynosi 0,1,0,1, a drugiej 0,0,1,1.
T bitw o zastosowanie wasnoci font-weight wygrywa pierwsza regua, ktra jest
precyzyjniejsza.
Jest to jedna z zawioci precyzji selektorw, ktra moe spowodowa powstanie
cakiem nowych rodzajw formatowania. Moe pamitasz z jednego z wczeniejszych
podrozdziaw, e identyfikatory maj wysz precyzj od klas i mog je przesania,
z ktrego to powodu czasami moe by korzystniejsze uywanie tylko klas. Jeli grupa
docelowa Twojego serwisu skada si wycznie z internautw uywajcych przegldarek
obsugujcych selektory atrybutw, moesz bez przeszkd stosowa atrybuty class i id,
do tych drugich odwoujc si tylko za pomoc selektora atrybutw. W ten sposb pozbdziesz
si problemu zwizanego z tym, e selektor #ID przesania wszystkie inne selektory.
65
CZ I: PODSTAWY
Rysunek 2.12. Poczenie stylw spowodowane rnicami w precyzji selektorw
66
SELEKTOR PODACUCHW
WARTOCIATRYBUTW
Gdy zakoczono prace nad specyfikacj CSS 2, natychmiast rozpoczto prace nad kolejn
wersj technologii, ktr moemy nazywa CSS 3, chocia nie ma ona ju formy pojedynczej
specyfikacji (mona by dugo o tym opowiada). Jednym z obszarw, ktrym powicono
najwicej uwagi, byy selektory, a wic te i selektory atrybutw. Zdefiniowano niezwykle
przydatny w codziennej pracy zestaw wzorcw dopasowujcych podacuchy.
Najprostszy z nich dopasowuje podacuchy w zwyky sposb. Aby lepiej zrozumie istot
jego dziaania, spjrzmy na poniszy stary przykad:
a[href="http://w3.org/"]
Ten selektor jest doskonay, jeli chcemy odwoa si do odnonika prowadzcego pod
konkretny adres URL. Wyobramy sobie jednak, e na swojej stronie mamy du liczb
odnonikw do rnych stron witryny W3C i wszystkie chcemy sformatowa w taki sam
sposb. Najlepiej by byo, gdybymy mogli dokona wyboru odnonikw na podstawie
czci w3.org adresu (rysunek 2.13). Oto sposb realizacji tego zadania:
a[href*="w3.org"] {font-weight: bold;}
Rysunek 2.13. Wybr wszystkich czy, ktre w adresie URL zawieraj podacuch w3.org
Do uzyskania danego efektu wystarczya nam tylko gwiazdka przed znakiem
rwnoci. Nie naley jednak myli jej w tym zastosowaniu z selektorem uniwersalnym
ani symbolem wieloznacznym z Uniksa czy narzdzia grep. Umieszczenie jej przed
znakiem rwnoci oznacza tylko, e ten cig znakw musi wystpowa w ktrym
miejscu w wartoci atrybutu.
Technik t mona oczywicie stosowa w odniesieniu do kadego elementu i atrybutu.
Wracajc do przykadu wyboru logo firmy, moglibymy napisa taki selektor:
img[src*="mainlogo.png"]
Ten selektor wybierze wszystkie elementy img wskazujce obraz o nazwie mainlogo.png
lub majcy cig znakw mainlogo.png gdziekolwiek w wartoci atrybutu src. W zwizku
z tym wybraby oba ponisze elementy:
<img src="/img/2010/mainlogo.png.gif" alt="ConHugeCo Inc." />
<img src="/img/2010/mainlogo.pngdir/big.png" alt="ConHugeCo Inc." />
Przy okazji nie polecam nadawania takich nazw plikom.

Selektor ten mona wykorzysta na wiele rnych sposobw, np. do formatowania
wszystkich obrazw pochodzcych z okrelonego katalogu poprzez wybr za
pomoc selektora nazwy katalogu, z ktrego s pobierane. Analogicznie mona
zastosowa odrbne formatowanie dla czy prowadzcych do rnych obszarw
witryny, wykorzystujc w selektorze nazwy poszczeglnych katalogw wystpujcych
watrybucie href.
a[href*="/contact"] {color: maroon;}
a[href*="/news"] {font-weight: bold;}
Pamitaj, aby wartoci atrybutw zawsze traktowa tak, jakby wielko liter miaa w nich
znaczenie (tak jest po prostu atwiej). Wwczas dwa pierwsze elementy przedstawione
poniej zostan dopasowane, a trzeci nie.
67
CZ I: PODSTAWY
img[alt*="Figure"] {border: 1px solid gray;}
<img src="fig1.gif" alt="Rysunek 1. Modrzew." />
<img src="fig2.gif" alt="Rysunek 2. Prezydent Kowalski, bardzo wany polityk." />
<img src="digg.gif" alt="Kilku mczyzn zastanawiajcych si, co przedstawia
rysunek." />
Ostatni obraz nie zostanie sformatowany, poniewa rysunek i Rysunek to dwa rne sowa.
W tym przypadku rozrnienie to wydaje si przydatne, poniewa (biorc pod uwag
zawarto atrybutu alt) trzeci obraz nie jest rysunkiem w formalnym sensie. Tak si tylko
zoyo, e jego atrybut alt zawiera to sowo. Nie znaczy to jednak, e nie musimy uwaa,
bo poniszy element rwnie zostaby sformatowany przez nasz regu:
<img src="lost.gif" alt="Techniki kryminalistyczne. Rysunek linii papilarnych." />
Jest sowo Rysunek jest dopasowanie.

Jeli chcemy dopasowa wyrazy napisane zarwno ma, jak i wielk liter, moemy to
ograniczenie obej, stosujc nastpujcy selektor:
img[alt*="ysunek"] {border: 1px solid gray;}
68
Ten selektor wybierze wszystkie wystpienia podanego cigu znakw, a wic zarwno
rysunek, jak i Rysunek, a take wszelkie inne acuchy znakw, w ktrych pojawi si podany
podacuch.
To jeszcze nie wszystko na temat wyboru podacuchw. Czytaj dalej, aby dowiedzie si
szczegw.
SELEKTOR PODACUCHW
WARTOCIATRYBUTW CIG DALSZY
Podczas gdy moliwo wyboru podacucha w dowolnym miejscu wartoci atrybutu
bardzo si przydaje (zobacz poprzedni podrozdzia), czasami wolelibymy ograniczy
zakres poszukiwania tylko do pocztku lub koca wartoci atrybutu. Da si to zrobi.
Jeli chcesz dokona wyboru podacucha na pocztku wartoci atrybutu,
uyjnastpujcego wzorca:
a[href^="http"]
Dziki daszkowi (^) powyszy selektor sformatuje wszystkie elementy a, ktrych atrybut
href ma warto zaczynajc si od cigu znakw http. W ten sposb mona atwo wybra
wszystkie cza do zewntrznych stron, jeli przyj, e wszystkie cza wewntrzne s
reprezentowane przez adresy wzgldne i e adnemu folderowi w swoim systemie plikw
nienadalimy nazwy http. Oto przykadowa prosta regua z uyciem opisywanego selektora:
a[href^="http"] {font-weight: bold;}
A poniej mamy co nieco bardziej skomplikowanego:
a[href^="http"] {padding-right: 18px;
background: url(/pix/external.png) 100% 50% no-repeat;}
Wynik wida na rysunku 2.14.
Rysunek 2.14. Dodanie ikon do czy, ktre zaczynaj si od liter http

Aby dokona selekcji na podstawie wystpowania okrelonego podacucha na kocu
wartoci atrybutu, naley zastosowa nastpujcy wzorzec:
a[href$=".pdf"]
Znak dolara ($) powoduje, e selektor wybierze wszystkie elementy a, ktrych atrybut href
koczy si podacuchem .pdf. W ten sposb mona bardzo atwo oznaczy wszystkie
odnoniki prowadzce do plikw PDF (jak na rysunku 2.15). Na przykad:
a[href$=".pdf"] {padding-right: 18px;
background: url(/pix/pdf.png) 100% 50% no-repeat;}
Rysunek 2.15. Ikony PDF do czy do plikw w tym formacie
69
CZ I: PODSTAWY
Znakomicie! Oto kilka innych pomysw na wykorzystanie selektorw atrybutw
doformatowania czy:
a[href^="https"]
cza szyfrowane
a[href^="mailto"]
cza do adresw e-mail
a[href^="aim"]
cza do usugi AOL Instant Messenger
a[href$=".doc"]
dokumenty programu Microsoft Word
a[href$=".xls"]
dokumenty programu Microsoft Excel
a[href$=".zip"]
archiwa ZIP
Nie zapominaj jednak, e przedstawione tu selektory mona stosowa do dowolnego rodzaju

elementw. Jeli przypomnisz sobie przykad z rysunkami z poprzedniego podrozdziau,
to spostrzeesz, e wikszo opisywanych tam problemw mona atwo rozwiza przy
uyciu selektora z daszkiem:
img[alt^="Rysunek"] {border: 1px solid gray;}
Teraz wybieramy tylko te elementy img, ktrych atrybut alt ma warto zaczynajc si
od acucha Rysunek, i nie przejmujemy si tym, e wyraz ten moe wystpi take gdzie
dalej w tekcie. Te bd przez nasz selektor pomijane.
70
SELEKTORY DZIECI
Jednym z najczstszych sposobw, w jakie odwoujemy si do elementw HTML za pomoc
CSS, jest wykorzystanie ich miejsca w hierarchii dokumentu. Do tego celu zwykle
wykorzystujemy selektor potomkw, np.:
div#header a {color: #DEFACE;}
Powysza regua sformatuje wszystkie elementy a bdce potomkami kadego elementu div
o identyfikatorze header.
Bardzo czsto wanie takiego selektora nam potrzeba chcemy wybra wszystkie cza
znajdujce si w nagwku bez wzgldu na to, w ktrym konkretnie jego miejscu si
znajduj i czy co jest jeszcze przed nimi.
Czasami jednak potrzebny jest dostp do elementu bdcego bezporednim potomkiem
(dzieckiem) innego elementu. Wyobramy sobie, e chcemy wybra elementy listy bdce
dziemi (nie potomkami) elementu ol (rysunek 2.16). Jeli w tej uporzdkowanej licie
znajdowayby si jakie listy nieuporzdkowane, ich elementy nie zostayby wzite pod
uwag. Do tego potrzebny jest selektor dzieci.
ol > li {list-style-type: upper-alpha;}
Rysunek 2.16. Wybr elementw listy bdcych dziemi listy uporzdkowanej

Ograniczenie wyboru elementw tylko do dzieci wybranego elementu daje znak wikszoci.
Gdybymy go usunli, regua zostaaby zastosowana do wszystkich elementw listy
znajdujcych si w elemencie ol, nawet tych, ktre znajduj si w listach zagniedonych
wtej licie (rysunek 2.17).
71
Rysunek 2.17. Uporzdkowanie list nieuporzdkowanych

Tak, to jest moliwe i wcale nie oszukuj. Na rysunku 2.17 znajduje si lista
nieuporzdkowana ze znacznikami listy uporzdkowanej, ktra powstaa w wyniku
usunicia z selektora kombinatora wyboru elementw dzieci.
CZ I: PODSTAWY
CZCIOWA IMITACJA
SELEKTORA ELEMENTW DZIECI
Jeli Twoja strona musi by zgodna ze starszymi przegldarkami, takimi jak IE 6, ktre nie
obsuguj kombinatora wyboru elementw dzieci, a nie chcesz rozwiza tego problemu
przy uyciu JavaScriptu (zobacz podrozdzia Skrypt IE9.js w rozdziale 1.), to moesz
posuy si selektorem uniwersalnym.
Zamy, e chcemy otoczy obramowaniem kady element div bdcy dzieckiem elementu
div o identyfikatorze main (rysunek 2.18). Przy uyciu normalnego selektora dzieci
napisalibymy co takiego:
div#main > div {border: 1px solid gray;}
72
Rysunek 2.18. Podrbka selektora dzieci
Jak wic robi si imitacj tego efektu? Tak:
div#main div {border: 1px solid gray;}
div#main * div {border: 0;}
Druga z tych regu wybiera wszystkie elementy div bdce potomkami dowolnego
elementu bdcego potomkiem elementu div o identyfikatorze main. W istocie cofa ona
efekt pierwszej reguy. Obie te reguy dotycz elementw div bdcych najwyej wnukami
elementu div#main i obie ustawiaj waciwoci obramowania, a wic s w konflikcie.
Poniewa maj tak sam precyzj, ostatecznie zostanie zastosowana druga z nich. Jednake
elementy div znajdujce si w elemencie div#main s wybierane tylko przez pierwsz regu,
a wic te bd miay obramowanie.
Trzeba jednak pamita o jednej wanej rzeczy ta technika dobrze dziaa tylko
zwasnociami niedziedzicznymi. Jeli uyjemy jej do wasnoci dziedzicznych,
moemyotrzyma niezamierzone efekty. Wemy np. ponisze dwie reguy:
ol li {font-weight: bold;}
ol * li {font-weight: normal;}
Teraz zamy, e chcemy, aby tekst list nieuporzdkowanych, znajdujcych si w listach
uporzdkowanych przypisanych do pewnej klasy, by pogrubiony (rysunek 2.19):
ol.urgent ul {font-weight: bold;}
Rysunek 2.19. Style dziedziczne przesonite przez style przypisane bezporednio

Dziki tej dodatkowej regule elementy list nieuporzdkowanych bd niepogrubione.
Jest to spowodowane tym, e ogldany przez nas wczeniej selektor ol * li ma bezporednie
zastosowanie do tych elementw. Zadeklarowana tam normalna grubo pisma przesania
pogrubienie, ktre w normalnej sytuacji zostaoby odziedziczone po regule ol.urgent li.
Problem ten nie wystpuje podczas uywania wasnoci niedziedzicznych, a wic np.
background, border, display, margin, padding itd. Jeli nie wiesz, ktre wasnoci s
dziedziczne, moesz to sprawdzi na stronie http://www.w3.org/TR/CSS2/propidx.html

albo w specyfikacji CSS.
SELEKTORY ELEMENTW SIOSTRZANYCH

Wiemy ju, e elementy mona wybiera na podstawie ich relacji dziecko-rodzic
iprzodek-potomek, ale to nie wszystko. Moliwe jest take odwoywanie si do elementw
siostrzanych, tzn. takich, ktre maj wsplnego rodzica. Relacj tego typu pokazano
narysunku 2.20 elementy siostrzane s wyrnione.
Rysunek 2.20. Elementy siostrzane
73
CZ I: PODSTAWY
Oczywistym przykadem elementw siostrzanych s elementy nalece do tej samej listy,
ale relacja ta czy wszystkie rodzaje elementw, ktre maj wsplnego rodzica.
W CSS istnieje kombinator pozwalajcy dokona wyboru elementu w zalenoci od tego,
jaki jest jego poprzedni element siostrzany. Gdybymy np. chcieli usun grny margines ze
wszystkich elementw p znajdujcych si bezporednio pod nagwkiem h1 (rysunek 2.21),
to wystarczyoby napisa tak regu:
h2 {margin-bottom: 0;}
h2 + p {margin-top: 0;}
74
Rysunek 2.21. Wybr akapitw znajdujcych si bezporednio za nagwkami drugiego stopnia
Selektory elementw siostrzanych umoliwiaj formatowanie elementw wystpujcych
wpewnych specyficznych kombinacjach. Przy ich uyciu mona np. zwikszy odstp
midzy list a wystpujc bezporednio przed ni tabel albo midzy nagwkiem
aelementem div wystpujcym bezporednio po nim.
Dostpny jest te drugi tego samego rodzaju kombinator, sucy do wybierania elementu
siostrzanego, znajdujcego si za wybranym elementem, ale nie bezporednio do niego
przylegajcego. Ma on posta tyldy:
h1 ~ ul {list-style-type: lower-alpha;}
Ta regua sformatuje kady element ul znajdujcy si za elementem h1, ktry mieci si

wtym samym elemencie rodzica, a wic w poniszym kodzie zostan sformatowane
wszystkie listy oprcz pierwszej.
<body>
<ul></ul>
<h1>Planowanie</h1>
<p>To jest streszczenie.</p>
<ul></ul>
<ul></ul>
<h2>Wstp</h2>
<p>Mamy kilka przemyle na ten temat.</p>
<ul></ul>
</body>
Wszystkie elementy w tym dokumencie s elementami siostrzanymi, poniewa maj

wsplnego rodzica element body. Pierwsza lista w tym kodzie nie znajduje si za
elementem h1, a wic selektor h1 ~ ul nie wybierze jej do sformatowania. Pozostae tak
i midzy nimi a elementami h1 wystpuj jeszcze inne elementy, a wic formatowanie
zostanie zastosowane.
GENEROWANIE TRECI
Ruchem, ktry zatar nieco wyran granic midzy warstw treci a warstw prezentacji,
byo dodanie do CSS moliwoci generowania treci i wstawiania jej do dokumentw.
Su do tego pseudoelementy :before i :after oraz wasno content.
Oto prosty przykad (zilustrowany na rysunku 2.22) zastosowania tych technik w celu
umieszczenia krtkiego tekstu przed treci kadego elementu listy:
li:before {content: "Punkt: "; border-bottom: 1px solid gray;}
75
Rysunek 2.22. Wstawianie treci na pocztku elementw listy

Zwr uwag na spacj wewntrz wartoci wasnoci content jest ona czci tej
wartoci. Gdyby jej nie byo, tekst elementu znajdowaby si nieco bliej wygenerowanej
treci, chyba e zdefiniowano by jej dopenienie (co jest jak najbardziej dozwolone,
tylko my tego po prostu nie zrobilimy).
Aby byo jasne mona wstawia tylko tekst, nie elementy strukturalne. Jeli za pomoc
wasnoci content sprbujemy przesa znaczniki, zostan one wywietlone jako zwyky
tekst (rysunek 2.23).
li:before {content: "<em>Punkt:</em> "; border-bottom: 1px solid gray;}
CZ I: PODSTAWY
Rysunek 2.23. Przekazanie znacznikw jako surowego tekstu

Ups!
Mona natomiast uy kadego znaku, jaki obsuguje dana przegldarka (rysunek 2.24).
Trzeba tylko zna jego kod szesnastkowy i wpisa go po znaku ukonika.
li:before {content: "\BB ";}
76
Rysunek 2.24. Wstawianie znaku za pomoc specjalnego kodu

Teoretycznie do dokumentu mona wstawi dowolny znak z repertuaru Unicode, wpisujc
go bezporednio do arkusza stylw z kodowaniem ustawionym na peny Unicode. Mogoby
to jednak powodowa problemy na serwerach, ktre s przystosowane do przesyania
plikw CSS wycznie w formacie ASCII. Jeli uda Ci si przezwyciy te trudnoci, moesz
zapomnie o kodach szesnastkowych znakw i wpisywa je bezporednio. Pamitaj jednak,
aby skrupulatnie przetestowa swoje strony, poniewa niektre starsze przegldarki mog
nie najlepiej radzi sobie z obsug standardu Unicode.
Elementy :before i :after nazywaj si pseudoelementami, poniewa wstawiaj tre w taki
sposb, jakby znajdowaa si w jakim elemencie. Ten tworzony przez nie pseudoelement
jest wstawiany na pocztku (:before) albo na kocu (:after) treci elementu, ktry
wybralimy. Pseudoelementy mona formatowa za pomoc stylw tak jak np. elementy span.
Tre generowana daje spore pole do popisu, ale trzeba uwaa na to, co si generuje. Co si
stanie ze stron, jeli arkusze CSS nie zostan wczytane albo nie s w ogle obsugiwane
(dotyczy to niektrych urzdze przenonych)? Jeli w postaci treci generowanej
wstawiasz tekst o kluczowym znaczeniu dla zrozumienia zawartoci strony, to w przypadku
wystpienia problemw z CSS moesz mie powane kopoty. Dlatego zaleca si, aby treci
generowanej uywa wycznie w ramach technik zwanych stopniowym ulepszaniem (ang.
progressive enhancement), polegajcych na dodawaniu zaawansowanych funkcji w postaci
rozszerze, ktre nie s niezbdne do funkcjonowania strony.
wietnym przykadem zastosowania techniki stopniowego ulepszania jest wstawianie
hiperczy do wersji stron przeznaczonych do druku (rysunek 2.25). W tym celu naley
doda do swojego arkusza stylw przeznaczonego dla druku nastpujc regu:
a[href]:after {content: " [" attr(href) "]"; font-size: smaller;}
77
Rysunek 2.25. Wstawianie adresw URL do stylw dla druku

Technik t naley okreli mianem stopniowego ulepszania, poniewa jeli funkcja ta w jakiej
przegldarce nie zadziaa, na wydrukowanej stronie bd po prostu wywietlone adresy.
Jeli zadziaa, strona zostanie bez wtpienia ulepszona (wicej na temat tej techniki mona
przeczyta w artykule Going To Print pod adresem http://alistapart.com/articles/goingtoprint).
Obsuga treci generowanej jest szeroko rozpowszechniona, ale do przegldarek Internet
Explorer dotara dopiero w wersji 8. Wczeniejsze wersje mona jednak zmusi do wsppracy
przy uyciu skryptu IE9.js (zobacz rozdzia 1.).
II
CZ
II
NIEZBDNIK
Rozdzia 3. Porady
Rozdzia 4. Ukady
Rozdzia 5. Efekty
3
ROZDZIA
PODRCZNIK CSS
PORADY
KADEMU CZASEM W YCIU przydaj si

dobre rady. Do moich ulubionych nale
lepszy may dom na uboczu w miej okolicy
ni wielki dom w niebezpiecznym miejscu
inie jedz oowiu. To samo dotyczy take CSS
krtka sentencja zawarta w kilku sowach
moe szybko naprowadzi Ci na waciwy tor.
Z tego rozdziau dowiesz si, jakie znaczenie

ma ustawienie odpowiedniej kolejnoci
wartoci, jak poprawnie stosowa wartoci
bezjednostkowe, jak sprawi, aby elementy
znikay, nauczysz si kontrolowa wygld
obramowania elementw, sztuczek zwizanych
z formatowaniem list, tworzy arkusze stylw
przeznaczone dla druku i wiele wicej.
CZ II: NIEZBDNIK
SPRAWDZAJ POPRAWNO KODU!

Moe to adna nowo dla Ciebie. Moe zastanawiasz si, dlaczego marnuj cenny atrament
i inne wartociowe surowce na opis tak oczywistych kwestii. Jak czsto w takim razie
sprawdzasz poprawno kodu swoich stron? Raz na zakoczenie pracy nad projektem,
czywielokrotnie w cigu caego procesu?
Nie twierdz, e trzeba sprawdza stron po kadym zapisaniu najdrobniejszych zmian,
ale warto wyrobi sobie nawyk robienia tego w regularnych odstpach czasu. Dziki temu
mona wykry usterki w zarodku, zanim zdeformuj ca struktur strony.
Istnieje kilka dobrych narzdzi do sprawdzania kodu HTML i CSS. Jeli chodzi o HTML,
to najpopularniejszym narzdziem jest program udostpniany przez organizacj W3C pod
adresem validator.w3.org (rysunek 3.1). Rwnie popularny jest jego odpowiednik dla CSS
zamieszczony pod adresem jigsaw.w3.org/css-validator.
82
Rysunek 3.1. Walidator HTML W3C

Co zrobi, jeli jestemy uwizieni za zapor sieciow albo pracujemy na laptopie
zzainstalowanym lokalnym serwerem? Wwczas naley skorzysta z funkcji sprawdzania
kodu dodatku Firebug i innych tego typu narzdzi. Jeli masz dostp do internetu, masz
te moliwo sprawdzenia kodu swoich stron, bez wzgldu na to, czy s one publicznie
dostpne, czy nie (bardzo czsto korzystam z moliwoci sprawdzania kodu lokalnie tylko
po to, by nie wyj z wprawy w korzystaniu z tego narzdzia).
ROZDZIA 3: PORADY
KOLEJNO WASNOCI PISMA

Kolejno fontw w deklaracjach CSS to jedna z tych rzeczy, o ktre potyka si wiele osb,
nie wiedzc nawet, co je przewrcio.
Wikszo wasnoci CSS przyjmuje wiele sw kluczowych, ktre mona ustawia w dowolnej
kolejnoci, i na dodatek nie ma wymogu, aby stosowa wszystkie z nich (wemy np. wasno
background, ktra przyjmuje od jednej do piciu wartoci nie ma znaczenia, w jakiej
kolejnoci zostan one ustawione). Jednym z niewielu wyjtkw w tej dziedzinie jest wasno
font, ktra ma okrelony minimalny zestaw wymaganych sw kluczowych i musz one by
ustawione w odpowiedniej kolejnoci.
Oto najprostsza moliwa deklaracja wasnoci font:
font: <font-size> <font-family>;
Oczywicie nawiasy trzeba zastpi konkretnymi wartociami, np.:

font: 100% sans-serif;
Chodzi o to, e obie te wartoci musz by podane w takiej, a nie innej kolejnoci najpierw
rozmiar, potem rodzina. Jeli zmienisz ich kolejno albo pominiesz ktr z nich, kada
nowoczesna przegldarka z mety tak deklaracj zignoruje.
Ponadto, jeli chcesz uy jeszcze innych sw kluczowych w deklaracji, musisz je (oprcz
jednego, ktre jest tematem nastpnego podrozdziau) wpisa przed tymi, ktre s wymagane:
font: bold italic 100% sans-serif;
font: italic small-caps 125% Georgia, serif;
font: italic bold small-caps 200% Helvetica, Arial, sans-serif;
Zwr uwag, e wartoci przed rozmiarem mog wystpowa w dowolnej kolejnoci

inie ma to adnego znaczenia. Wane jest tylko to, aby znajdoway si przed okreleniem
rozmiaru. Jeli wpiszemy je w innym miejscu, to przegldarki bd ignorowa nasz
deklaracj.
WYSOKO LINII
Jeli opisane wczeniej zasady dotyczce stosowania wasnoci font wydaway Ci si dziwne,
to to, co zobaczysz teraz, jest czystym wariactwem.
Wczeniej napisaem, e minimalna warto wasnoci font skada si z dwch wartoci
wcile okrelonej kolejnoci rozmiar i rodzina. To prawda, ale okazuje si, e do wartoci
rozmiaru mona doczepi warto wysokoci linii (wasnoci line-height rysunek 3.2):
font: 100%/2.5 Helvetica, sans-serif;
Wartoci wasnoci font-size i line-height nie s oddzielone spacj, lecz ukonikiem

(cociekawe, jest to jedyny przypadek uycia ukonika w caej technologii CSS).
83
CZ II: NIEZBDNIK
84
Rysunek 3.2. Zwikszona wysoko linii

Dodanie wartoci wasnoci line-height do deklaracji wasnoci font jest nieobowizkowe,
ale jeli ju to zrobimy, to miejsce jej wstawienia nie jest dowolne. Warto t trzeba wstawi
zaraz za wartoci rozmiaru pisma i rozdzieli je ukonikiem.
BEZJEDNOSTKOWE WARTOCI
WASNOCILINE-HEIGHT
Wasnoci line-height mona przypisywa wartoci bez jednostki. Nie jest zabronione
rwnie stosowanie jednostek, ale oglnie rzecz biorc, jest to niezalecane.
Jaka jest rnica? Jeli zdefiniujemy warto z jednostk, np. 1em lub 100%, zostanie ona
poobliczeniu przekazana elementom potomnym. Zamy np., e zastosowalimy
poniszy arkusz CSS do dokumentu zawierajcego nastpujcy urywek kodu HTML:
ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px;}
small {font-size: 80%;}
<ul>
<li>Jestem list z <small>maym tekstem</small>.</li>
</ul>
ROZDZIA 3: PORADY
Po obliczeniu wasno line-height elementu ul bdzie miaa warto 15px, poniewa
wartoci wasnoci line-height wyraone za pomoc jednostek em (i procentw) s obliczane
na podstawie obliczonej wartoci wasnoci font-size elementu. Warto wasnoci font-size
zadeklarowaem bezporednio, wic wiemy, e jest wyraona w pikselach.
Teraz najciekawsze do elementw potomnych zostanie przekazana obliczona warto
15px. Innymi sowy, elementy li i small odziedzicz warto 15px. Koniec. Nie zmieni
jej, gdy zmieni si ich wasny rozmiar pisma. Po prostu bior te 15px i uywaj ich, co jest
rwnoznaczne z sytuacj, w ktrej bymy napisali:
ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px; line-height: 15px;}
small {font-size: 80%; line-height: 15px;}
Wyobra sobie, e usuwamy jednostk em z wartoci line-height, tak e arkusz stylw

wyglda nastpujco:
ul {font-size: 15px; line-height: 1;}
li {font-size: 10px;}
small {font-size: 80%;}
<ul>
<li>Jestem list z <small>maym tekstem</small>.</li>
</ul>
Teraz elementom potomnym (li i small) przekazywana jest sama liczba, ktr wykorzystuj
one jako wspczynnik skali mnonik, jeli wolisz a nie jako obliczony wynik.
Kady element, ktry odziedziczy t warto 1, pomnoy j przez obliczon warto
wasnoci font-size. Element listy, ktry ma deklaracj font-size: 10px, bdzie mia
obliczon warto line-height: 10px. Nastpnie przekae t jedynk do elementu small,
ktry pomnoy j przez swoj obliczon warto font-size. To da w wyniku osiem pikseli,
a wic wysoko linii wyniesie rwnie osiem pikseli.
Ostateczny wynik bdzie rwnowany z poniszym:
ul {font-size: 15px; line-height: 1;}
li {font-size: 10px; line-height: 10px;}
small {font-size: 80%; line-height: 8px;}
To dua rnica (rysunek 3.3). Dlatego wanie zaleca si, aby wasnoci line-height, ktra
ma zosta zastosowana na rzecz elementw typu html lub body (i wszystkich innych, ktre
mog mie potomkw), nadawa wartoci bez jednostek.
Rysunek 3.3. Rnica midzy wartociami wasnoci line-height z jednostk i bez jednostki
85
CZ II: NIEZBDNIK
OKRELAJ STYL OBRAMOWANIA

Dobrze dobrane obramowanie moe zwikszy walory estetyczne kadego projektu, ale jeli
nie okrelimy jego stylu, nic nam z tego nie wyjdzie.
Piszc bez stylu, nie mam na myli stylu CSS, lecz wasno border-style.
Zamy, e napisalimy ponisz regu z wasnoci skrtow border:
form {border: 2px gray;}
wietnie, tylko e formularze nie zostan objte adnym obramowaniem. Powd jest
prosty pominlimy warto wasnoci border-style, przez co zostaa uyta jej warto
domylna. Co to za warto? Ta warto to none. W zwizku z tym powysza regua jest
rwnowana poniszej:
form {border: 2px gray none;}
Obramowanie z wasnoci border-style ustawion na none nigdy nie zostanie narysowane,

bez wzgldu na warto wasnoci border-width obramowanie, ktre nie istnieje, nie moe
mie adnej gruboci.
86
USTAWIANIE KOLORU OBRAMOWANIA

Od czasu do czasu musimy albo po prostu chcemy zastosowa na stronie wypuke (outset)
albo wklse (inset) obramowanie. Nie jestem tu od oceniania gustu, tylko chc wskaza
na pewien potencjalny problem, ktry jest z tym zwizany. Wemy nastpujc regu:
div {border: 5px red outset;}
Nic nadzwyczajnego, prawda? Ale spjrz, jak ta regua zostanie zinterpretowana w rnych
przegldarkach (rysunek 3.4).
Rysunek 3.4. Rne interpretacje stylw obramowania inset i outset
ROZDZIA 3: PORADY
To nie jest bd i adna z tych przegldarek nie interpretuje zdefiniowanych wasnoci
le. Po prostu w specyfikacji CSS nie okrelono jednoznacznie, jak przegldarki maj
modyfikowa kolory w celu uzyskania iluzji wklsoci bd wypukoci obramowania.
Oto, co jest w niej napisane:
Kolor obramowania w stylu groove, ridge, inset i outset zaley od
wasnoci koloru obramowania elementu, ale aplikacje klienckie mog
rzeczywiste kolory oblicza przy uyciu dowolnego algorytmu
(www.w3.org/TR/CSS21/box.html#border-style-properties).
Zwr szczegln uwag na drug cz tej wypowiedzi: aplikacje klienckie mog rzeczywiste
kolory oblicza przy uyciu dowolnego algorytmu. W wiecie przegldarek od zawsze jest
tak, e jeli zezwoli si na wybr rnych opcji, to kada przegldarka wybierze inn. I tak
jest te w tym przypadku.
Moe nie przeszkadzaj Ci te rnice w interpretacji stylu obramowania i w porzdku.
Moim zadaniem nie jest ferowanie wyrokw. Jeli jednak wolisz, aby obramowanie w kadej
przegldarce wygldao tak samo (jak na rysunku 3.5), musisz zadeklarowa zwyke
obramowanie i wasnorcznie ustawi kolory:
#innie {border-color: #800 #F88 #F88 #800;}
#outie {border-color: #F88 #800 #800 #F88;}
87
Rysunek 3.5. Takie same kolory obramowania w rnych przegldarkach
CZ II: NIEZBDNIK
To oczywicie dotyczy tylko stylw inset i outset obramowania. Aby utworzy jednolite
kolory dla groove i ridge (rysunek 3.6), trzeba te elementy umieci w kontenerach (albo
wstawi kontenery do elementw), obramowanie kadego z nich ustawi na normalne
(solid) i zastosowa kolory, ktre utworz dany efekt, np.:
#innie {border-color: #800 #F88 #F88 #800;}
form {border: 3px solid; border-color: #F88 #800 #800 #F88;}
<form>
<div class="wrap">
(tre, elementy formularza itp.)
</div>
</form>
Rysunek 3.6. Spjne obramowania w stylu ridge
88
WYCZANIE WYWIETLANIA ELEMENTW

Czy kiedykolwiek chciae ukry element na stronie przed uytkownikami, ale nie usuwa go
z kodu rdowego dokumentu? Mona to zrobi na kilka sposobw, z ktrych kady ma
swoje wady i zalety. Przestudiujemy je w tym podrozdziale i kilku nastpnych.
Najprostszym sposobem na ukrycie elementu jest wyczenie jego wywietlania za pomoc
odpowiedniej wasnoci CSS.
.hide {display: none;}
Ta regua sprawi, e na stronie nie zostanie wywietlony aden element przypisany do klasy
hide. Oznacza to, e elementy te nie wygeneruj w ukadzie strony adnego pola, ktre
by zajmoway, a wic nie bd miay adnego wpywu na ukad. To tak, jakby elementy te
wogle nie istniay, s jak nieuchwytny ninja.
Z uywaniem wasnoci display: none wi si jednak potencjalne problemy. Jeden z nich
jest tylko potencjalny, ale drugi wystpuje zawsze. Potencjalny problem polega na tym,
e jeli za pomoc JavaScriptu ustawimy warto wasnoci display elementu na none,
tonie wiadomo, jak j pniej przywrci. To jest trudniejsze, ni si wydaje. Zamy,
enapisalimy poniszy kod:
var obj = document.getElementById('linker');
obj.style.display = 'none';
ROZDZIA 3: PORADY
Jeli pniej zechcemy ten element przywrci do widoku za pomoc JS, to jakiej wartoci
uyjemy? To oczywicie zaley od elementu, o ktry nam chodzi. Jeli bdzie to span,
tonadalibymy mu warto inline, gdyby to by p to warto block. A moe nie,
przecie elementy span mona zamienia na blokowe, a elementy div na rdliniowe.
Istnieje jedno bardzo dobre rozwizanie tego problemu nie przypisywa adnej wartoci:
obj.style.display = ;
Dziki temu element zostanie przywrcony do odpowiedniej wartoci display, jaka bdzie
potrzebna w dalszej czci arkusza lub w arkuszach wbudowanych przegldarki.
Innym czsto stosowanym rozwizaniem jest nieustawianie wasnoci display
bezporednio, lecz przypisanie elementu do jakiej klasy, np. hide. Aby go wywietli,
wystarczy pniej tylko usun t klas. To rozwizanie jest o tyle bardziej skomplikowane,
e wymaga napisania (albo znalezienia w wyszukiwarce Google) skryptu JavaScript
usuwajcego i dodajcego wartoci atrybutu class, niemniej jednak jest ono bardzo dobre.
Drugi problem, ktry wystpuje zawsze, jest zwizany z tym, e jak na razie elementy
zwasnoci display ustawion na none s niewidoczne dla technologii pomocniczych,
takich jak np. czytniki ekranu. Poniewa elementu nie wida na ekranie, czytnik go nie
zobaczy i o to zazwyczaj chodzi, ale nie zawsze.
Wyobra sobie, e wstawiasz na stron specjalne odnoniki pozwalajce przej bezporednio
do gwnej treci strony. Chcesz, aby cza te suyy osobom korzystajcym z czytnikw
ekranu, pozwalajc im przeskoczy szybko do odpowiedniego miejsca w dokumencie, ale
nie chcesz, aby byy wywietlane na ekranie, bo osobom przegldajcym stron wzrokowo
s niepotrzebne. Jeli dla kontenera tych odnonikw zdefiniujemy wasno display:
none, to znajd si one poza zasigiem wszystkich uytkownikw, zarwno widomych,
jakiniewidomych. Osoby, ktre ich potrzebuj, nie usysz nic o ich istnieniu.
Analogicznie jest z menu rozwijanymi (bez obsugi zdarze myszy) ukrytymi przed
widomymi uytkownikami jeli ustawimy im wasno display: none, to take
czytniki ekranu ich nie znajd.
WYCZANIE WIDOCZNOCI ELEMENTU

Technik bardzo podobn do wasnoci display jest wasno visibility, za ktrej
pomoc rwnie mona znie element z widoku na ekranie:
.hide {visibility: hidden;}
Powysza regua sprawi, e wskazywany przez ni element bdzie niewidoczny, co moe

si wydawa identyczne z dziaaniem wasnoci display: none. Jest jednak midzy tymi
wasnociami wana rnica element z wasnoci visibility: hidden nie zostaje
usunity z ukadu strony, co wida na rysunku 3.7.
89
CZ II: NIEZBDNIK
Rysunek 3.7. Niewidoczny element
90
Co dobrego oprcz zajmowania wolnego miejsca moe nam przyj z uycia niewidocznego
elementu? Nie ma z nim kontaktu za pomoc myszy, nie da si do niego dosta przy uyciu
klawiatury i nie wida go. Czemu w takim razie ma to suy?
Rozwizanie to wietnie nadaje si do formatowania elementw pozycjonowanych
bezwzgldnie, ktre i tak nie bior udziau w normalnym ukadzie elementw na stronie
(le na wierzchu i nie s uwzgldniane przy rozmieszczaniu pozostaych elementw).
Mona wic wcza i wycza ich widoczno bez zmieniania ukadu strony. Dodatkowo
mona je ukrywa i wywietla z powrotem bez koniecznoci zabawiania si z wasnoci
display, co pozwala unikn problemw opisanych w poprzednim podrozdziale.
Niestety, problemy z dostpnoci pozostaj te same elementy z wasnoci visibility:
hidden s cakowicie ignorowane przez prawie wszystkie czytniki ekranu. Take menu
rozwijane ukryte t technik pozostaj dla nich niewidoczne.
WYRZUCANIE ELEMENTW POZA EKRAN

Mamy wic problem chcemy, aby niektre elementy byy niewidoczne wizualnie, ale byy
dostpne dla czytnikw ekranu. Oto jedno z moliwych rozwiza:
.hide {position: absolute; top: -10000em; left: -10000em;}
Dziki tej regule trzeci akapit (ten, ktry powodowa wystpienie pustego miejsca
narysunku 3.7) zostanie jakby usunity ze strony, co wida na rysunku 3.8.
ROZDZIA 3: PORADY
Rysunek 3.8. Wyrzucanie elementw poza ekran przy uyciu pozycjonowania

Oto, jak to dziaa. Nasza regua wzia trzeci akapit, zastosowaa do niego pozycjonowanie
bezwzgldne i wyrzucia go daleko poza krawd ekranu. Dziki temu, mimo i element
znikn z widoku wizualnie, nadal jest dostpny przynajmniej dla niektrych czytnikw
ekranu. Dlatego wanie technik t oglnie uwaa si za najlepsz do ukrywania elementw.
Z technicznego punktu widzenia przesunlimy lewy grny rg elementu o 10000 em
(tzn. wielkoci pisma w tym elemencie) nad lewy grny rg bloku go zawierajcego i 10000
na lewo od niego. W wielu przypadkach ten blok zawierajcy to element gwny, czyli np.
html. Bez wzgldu na wszystko jest praktycznie niemoliwe, eby tak daleko wyrzucony
poza ekran element by kiedykolwiek widoczny na stronie.
Moliwoci przywrcenia elementu jest kilka. Jeli chcesz, aby po uwidocznieniu by nadal
bezwzgldnie pozycjonowany, wystarczy, e odpowiednio zmienisz wartoci jego wasnoci
top i left, np.:
.show {top: 0; left: 0;}
Jeli jednak wolisz wdroy go do normalnego ukadu elementw na stronie, moesz

przywrci mu domylny typ pozycjonowania.
.show {position: static;}
Przy zastosowaniu tej metody nie trzeba przywraca wartoci wasnoci top i left,
poniewa w pozycjonowaniu statycznym s one i tak ignorowane. Czy je zmienisz, czy nie,
to i tak nie bdzie miao adnego znaczenia.
91
CZ II: NIEZBDNIK
Jest jeszcze trzecia moliwo, ktra wchodzi w gr wwczas, gdy chcemy przywrci
element do ukadu i musi on odgrywa rol blokowego kontenera dla elementw, ktre
zawiera. Sytuacja taka ma miejsce np. wwczas, gdy chcemy pozycjonowa bezwzgldnie
elementy znajdujce si w przywracanym elemencie. W takim przypadku element ten
mona pozycjonowa wzgldnie, ale trzeba zadeklarowa wartoci przesunicia.
.show {position: relative; top: 0; left: 0;}
Gdybymy nie podali ustawie top: 0; i left: 0;, to element zostaby przesunity
wzgldem swojego normalnego pooenia w ukadzie normalnym. To spowodowaoby
powstanie luki w miejscu, w ktrym by by, gdyby nie zosta przesunity o te 10000 em.
Oczywicie przesunicie nie musi wynosi 10000 em. Moe to by dowolna warto, nie
wiksza od 65 535 w nielicznych starszych przegldarkach lub 16777271 w Safari 3 albo
2147483647 w pozostaych. Ponadto mona uy dowolnej jednostki dostpnej w CSS,
a wic np. pikseli, cycerw czy cali. Oglnie rzecz biorc, chodzi o to, aby uy bardzo
duej wartoci, by mie pewno, e element nie pojawi si na stronie, jeli go celowo
nieprzywoamy z powrotem.
OBRAZY ZAMIAST TEKSTU

92
Jedn z najstarszych technik projektowych stosowanych przy uyciu CSS jest tzw.
zastpowanie tekstu (ang. image replacement IR). Jest to w istocie zbir technik
polegajcych na uyciu obrazw w miejscu, w ktrym powinien znajdowa si tekst, tak
aby napisany na grafice tekst by widoczny, dostpny w druku itd. Techniki te stosuje si
najczciej do zastpowania krtkich porcji tekstu, takich jak np. logo firmowe, nagwki
stron (rysunek 3.9) itp. Nie nadaj si one natomiast do zastpowania caych akapitw.
Rysunek 3.9. Nagwek z tekstem zastpionym grafik
ROZDZIA 3: PORADY
Najpopularniejsza (tak popularna, e niektrzy robili sobie koszulki ze zwizanymi z ni
napisami) technika IR znana jest pod dwiema nazwami: Phark i Rundle Method. Jej zasada
jest prosta i polega na zwyczajnym przesuniciu tekstu w lewo za pomoc ujemnego wcicia,
jak najdalej si da.
h1 {height: 140px; text-indent: -9999px;
background: url(page-header.gif);}
Jest to wic metoda bardzo podobna do sztuczki z ukrywaniem poza ekranem caych
elementw przy uyciu pozycjonowania bezwzgldnego. W tym przypadku jednak poza
ekran usuwamy tylko zawarto tekstow elementu, pola samego elementu nie ruszajc.
W druku to elementw jest domylnie nieuwzgldniane. Mimo i istnieje moliwo
zmiany tego, to jednak bardzo rzadko si z niej korzysta. W zwizku z tym w arkuszu stylw
do druku (szczegy na ten temat znajdziesz w kolejnym podrozdziale) mona po prostu
napisa tak:
h1 {text-indent: 0; background: none;}
Deklaracja background: none jest w tym wypadku tylko zabezpieczeniem, poniewa

praktycznie nikt nie wcza opcji drukowania ta. Jednak na wszelki wypadek regua ta
uniemoliwi wydrukowanie tekstu elementu h1 na obrazie graficznym.
Jednym z przypadkw, w ktrych ta technika nie zdaje egzaminu, jest sytuacja, gdy
wprzegldarce uytkownika wyczone jest wywietlanie obrazw albo, co zdarza si
czciej, jeli obraz z jakiego powodu nie zostanie wczytany. Nagwek bdzie wtedy
poprostu niewidoczny, co przyniesie skutek taki, jak wida na rysunku 3.10.
Rysunek 3.10. Efekt niedostpnoci obrazu
93
CZ II: NIEZBDNIK
Istnieje kilkanacie rozmaitych technik zastpowania tekstu, z ktrych kada rozwizuje
problem w inny sposb. Niektre polegaj na umieszczeniu treci elementu w elemencie
span i wyczeniu jego wywietlania bd wyrzuceniu go poza ekran. Inne natomiast
polegaj na dodaniu obrazu jako treci odzwierciedlajcej obraz w tle.
Warto take wspomnie o jeszcze jednej bardzo prostej technice zastpowania tekstu,
ktr jest po prostu wstawienie obrazu w treci. Na przykad:
<h1><img src="page-header.gif" alt="Dive Into Fishing"></h1>
Ten obraz bdzie widoczny zarwno na ekranie, jak i na wydruku, poniewa przegldarki
drukuj obrazy znajdujce si w treci stron. Ponadto technika ta jest bardzo przyjazna
dla czytnikw ekranu, ktre wiedz, e w przypadku napotkania obrazu naley przeczyta
zawarto ich atrybutu alt. Oczywicie, jeli uytkownik wyczy wywietlanie obrazw,
to nic z tego nie bdzie. Jeli jednak obraz nie zostanie wczytany z jakiego innego powodu,
to zamiast niego zostanie wywietlony przynajmniej tekst zastpczy z atrybutu alt.
STYLE DLA DRUKU

94
Jeli nie tworzysz stylw dla druku w swojej witrynie, to moe nadszed czas, aby to jeszcze
raz przemyle. Nawet jeli chcesz, aby Twoje strony po wydrukowaniu wyglday tak samo
jak na ekranie, moesz skorzysta z okazji i zoptymalizowa kontrast kolorw (najpewniej
odcieni szaroci), pamitajc, e nie bdzie koloru ani obrazw ta.
To nic trudnego. Arkusz stylw dla druku moemy doczy do strony na jeden z trzech
sposobw:
<style type="text/css" media="print"></style>
<link type="text/css" rel="stylesheet" media="print" href="print.css">
@import url(print.css) print;
Najczciej stosuje si metod z uyciem elementu link, poniewa osadzanie caego

arkusza stylw na kadej stronie to mao efektywne rozwizanie, a do importu arkusza
stylw rwnie potrzebne jest osadzenie arkusza stylw na kadej ze stron. Ponadto
wimportowaniu arkuszy stylw dla druku przez wiele lat przeszkadzay bdy przegldarek
zwizane z ich obsug.
W arkuszu stylw dla druku mona np. usun takie efekty jak zastpowanie tekstu (zobacz
poprzedni podrozdzia). Warto te w tym miejscu zapewni ciemny kolor tekstu, gdy biay
tekst na czarnym tle na ekranie prawie na pewno zmieni si w druku w biay tekst na biaym
papierze, co bez wtpienia znacznie utrudnia odczyt.
Ma to miejsce dlatego, e obrazy zamieszczone w tle prawie nigdy nie s drukowane.
Oczywicie prawie kada przegldarka ma opcj drukowania tych grafik, ale domylnie jest
ona wyczona i jeli si nad tym zastanowi, jest to bardzo dobre rozwizanie (wyobra
sobie, jak szybko ubywaoby atramentu w drukarce, gdybymy drukowali biay tekst na
ciemnoniebieskim tle). Poniewa prawie nikt nie zmienia tego ustawienia, naley przyj
zaoenie, e w druku nie zostan wywietlone adne ta. Dlatego najlepiej jest je w arkuszu
dla druku zwyczajnie usun.
ROZDZIA 3: PORADY
Mona to zrobi ruchem zamaszystym:
* {background: transparent; color: black;}
albo wybirczo wyznaczy elementy, ktre wymagaj poprawki:

body, #navbar, #aside, .warning, .blockquote {
background: transparent; color: black;}
PISANIE ARKUSZY STYLW DLA DRUKU

Jaki jest najlepszy sposb na prac nad arkuszami stylw dla druku? Bezporednio
wprzegldarce, chyba e wolisz skorzysta jaki milion razy z opcji podgldu wydruku.
Juwyjaniam, o co chodzi.
Zapewne masz ju jeden czy dwa arkusze stylw z definicj ukadu elementw na stronie.
Zamy, e s doczone do strony w nastpujcy sposb:
<link type="text/css" rel="stylesheet" href="basic.css">
<link type="text/css" rel="stylesheet" href="theme.css">
Mimo i nie jest to nigdzie bezporednio napisane, oba te arkusze maj zastosowanie do
wszystkich typw mediw. Innymi sowy, powyszy zapis jest rwnoznaczny z dodaniem
atrybutu media="all".
<link type="text/css" rel="stylesheet" href="basic.css" media="all">
<link type="text/css" rel="stylesheet" href="theme.css" media="all">
Czy na pewno chcesz, aby te wszystkie style zostay zastosowane w druku? Jeli nie,
towarto all lepiej zmieni na screen.
<link type="text/css" rel="stylesheet" href="basic.css" media="screen">
<link type="text/css" rel="stylesheet" href="theme.css" media="screen">
Mamy ju obsuon domyln sytuacj. Teraz musimy jeszcze doda arkusz stylw
dladruku:
<link type="text/css" rel="stylesheet" href="basic.css" media="screen">
<link type="text/css" rel="stylesheet" href="theme.css" media="screen">
<link type="text/css" rel="stylesheet" href="print.css" media="print">
wietnie! Tylko e po odwieeniu strony nadal widzimy to samo, poniewa korzystamy

z medium typu screen. Poniewa nie chcielibymy w nieskoczono wcza i wycza
podgldu wydruku ani te drukowa strony po naniesieniu kadej poprawki w arkuszu,
musimy zmusi stron, aby wywietlaa si na ekranie tak, jakby bya drukowana.
W zasadzie ju w poprzednim akapicie wyjaniem, jak to zrobi. Wystarczy arkusz stylw
przeznaczony dla druku oznaczy tymczasowo jako arkusz dla ekranu, a rzeczywiste
arkusze dla ekranu jako przeznaczone dla jakiego innego rodzaju medium
95
CZ II: NIEZBDNIK
(rysunek 3.11). Ja np. uywam typu medium tty, poniewa jest chyba najmniej podobne
do ekranu zewszystkich moliwych, a ponadto ma krtk nazw. Oto przykad:
<link type="text/css" rel="stylesheet" href="basic.css" media="tty">
<link type="text/css" rel="stylesheet" href="theme.css" media="tty">
<link type="text/css" rel="stylesheet" href="print.css" media="screen">
96
Rysunek 3.11. Podgld stylu druku w przegldarce

Teraz moesz sobie uywa do woli, poprawia i odwiea a do uzyskania takiego efektu,
jaki sobie wymarzye. Gdy skoczysz prac, zmie warto screen z powrotem na print,
atty na screen i dokonaj jednego wydruku, aby si upewni, e wszystko jest w porzdku.
CZA BLOKOWE
Podstawow technik pozwalajc uzyska wiele ciekawych opcji ukadu elementw
nastronie przy niewielkim nakadzie kodu rdowego s zabawy z wasnoci display.
Dokerem w tym rozdaniu jest moliwo zamiany czy, ktre s rdliniowe, na elementy
blokowe.
Aby zrozumie, dlaczego tak jest, wyobra sobie list odnonikw w pasku bocznym strony.
Najczciej umieszcza si je na licie nienumerowanej, w ktrej kade cze zawiera si
wjednym elemencie tej listy. Porwnajmy wic dwie identyczne listy czy. Jedyna rnica
ROZDZIA 3: PORADY
midzy nimi bdzie polegaa na tym, e jedna bdzie utworzona na bazie odnonikw
blokowych, a druga nie (rysunek 3.12). Specjalnie oznaczyem kolorem to odnonikw,
aby pokaza, na czym polega rnica.
Rysunek 3.12. Dwie listy odnonikw blokowych i nieblokowych

Odnoniki rdliniowe s znacznie mniej wygodne w uyciu, gdy oferuj zdecydowanie
mniejsze pole do klikania. Co wicej, gdybymy chcieli utworzy efekt podwietlania ta po
najechaniu na cze kursorem, w przypadku odnonikw rdliniowych zmienioby si tylko
to pod tekstem, a nie caego pola.
Aby zmieni odnonik na blokowy, nie trzeba duo pracy:
#sidebar ul a {display: block;}
Ta regua zostaa uyta do zmiany odnonikw na rysunku 3.12.

Gdy cze wygeneruje pole blokowe, zachowuje si ono identycznie jak zwyke pola
blokowe generowane przez akapity, nagwki, elementy div itp., poniewa jest to w istocie
ten sam rodzaj pola. Mona definiowa marginesy, dopenienie i wszystkie inne wasnoci
elementw blokowych.
MARGINES CZY DOPENIENIE?

Czy kiedykolwiek zastanawiae si tak naprawd intensywnie nad wciciami list
albo t niewielk, pust przestrzeni, ktra jest tworzona domylnie wok kadej strony?
Jeli tak, to wiesz moe, skd si one bior? Jak si okazuje, przyczyny ich powstawania nie
zawsze s takie same.
Zacznijmy od pustej przestrzeni wok strony. Jak wiadomo, tre strony jest oddzielona od
krawdzi przegldarki okoo 8-pikselowym odstpem, jak wida na rysunku 3.13. Przestrze
t mona zlikwidowa za pomoc stylw resetujcych albo poprzez nadanie odpowiedniego
stylu elementowi body. Jak naley to zrobi? Czy mamy usun margines, czy dopenienie?
97
CZ II: NIEZBDNIK
Rysunek 3.13. Pusta przestrze wok treci strony
98
Jeli chcesz przypodoba si wszystkim przegldarkom, to musisz zrobi i jedno, i drugie,

poniewa wikszo z nich tworzy ten odstp za pomoc marginesu, ale Opera uywa
dotego celu dopenienia.
Zanim zaczniesz szuka staroytnych norweskich zakl, musisz sobie zda spraw z tego,
e twrcy przegldarek nie popenili w tej kwestii bdu. Nie ma specyfikacji, w ktrej
szczegowo opisano by sposb tworzenia odstpu midzy krawdzi okna przegldarki
a treci stron internetowych (ani nawet takiej, w ktrej by napisano, e w ogle musi
on wystpowa). Istnieje wany argument za tym, aby w tej roli stosowa dopenienie.
Niemato jednak znaczenia, gdy przegldarki stosuj rne rozwizania. Zatem piszmy:
body {padding: 0; margin: 0;}
To rozwie problem w kadej znanej przegldarce (moe oprcz Netscape 4, ale kogo to
obchodzi).
Analogicznie wcicia w listach zostay w niektrych przegldarkach utworzone za pomoc
marginesw, a w innych przy uyciu dopenienia. Jeli wic napiszemy
ul, ol {margin-left: 0;}
to usuniemy wcicie list tylko w niektrych przegldarkach. Jeli chcemy uzyska ten sam
efekt wszdzie, musimy te usun lew stron dopenienia.
ul, ol {margin-left: 0; padding-left: 0;}
Oczywicie wcicia nie musimy wcale usuwa. Gdy ju usuniesz ustawienia zarwno lewego
marginesu, jak i dopenienia w celu zmiany wcicia list, moesz pniej ustawi dowolne ich
wartoci. Moesz np. definiowa wcicie list za pomoc dopenienia. Wwczas wystarczy napisa:
ul, ol {margin-left: 0; padding-left: 2.5em;}
ROZDZIA 3: PORADY
Moesz te rozoy t warto na obie wasnoci:
ul, ol {margin-left: 1.25em; padding-left: 1.25em;}
Niektrzy preferuj korzystanie z samych marginesw:

ul, ol {margin-left: 2.5em; padding-left: 0;}
W wielu przypadkach nie ma znaczenia, ktr metod zastosujemy, ale wszystko si

zmieni, gdy zdefiniujemy to naszych list (rysunek 3.14). Ma to zwizek z tym, e
markery elementw list punktory, kwadraty, litery, liczby itp. s umieszczane obok
elementw, tak jakby byy pozycjonowane bezwzgldnie (w istocie nie uywa si do tego
celu pozycjonowania bezwzgldnego, ale efekt jest bardzo podobny). Jeli bdziemy chcieli,
aby markery elementw listy znalazy si w obrbie widocznego ta, to wcicie musimy
ustali przy uyciu dopenienia. Jeli natomiast chcemy, aby byy poza tem powinnimy
zastosowa margines.
99
Rysunek 3.14. Porwnanie rnych rodzajw wcicia list
WYCINANIE LIST
W poprzednim podrozdziale bya mowa o wcinaniu list, a teraz bdzie o wycinaniu.
Czy pojcie wycinanie list w ogle funkcjonuje? Moe i nie, ale i tak jest lepsze ni
wiszce wcicie, ktre rwnie mona czasami spotka w opisach tego typu rzeczy, a ktre
jest kompletnie bez sensu.
To, o czym teraz mwimy, to technika wysuwania pierwszego wiersza elementu listy w lewo,
tak e wisi po lewej stronie reszty treci elementu (rysunek 3.15).
Ten przyjemny dla oka efekt pozwala wyrni wizualnie listy bez zamiecania strony
niepotrzebnymi punktorami czy czym podobnym. Ponadto naprawd atwo mona go
uzyska:
ul {text-indent: -2em; list-style: none;}
CZ II: NIEZBDNIK
Rysunek 3.15. Wycicie
100
To wszystko. Zwr uwag na deklaracj list-style: none. Gdybym jej nie wpisa,
to pierwszy wiersz kadego elementu listy byby wycity, ale jego tekst nachodziby
napunktory. Dlatego nie naley miesza wycinania list z markerami.
Wycina mona oczywicie wszystko, co si chce, a wic take akapity, nagwki, elementy div
i pre czy komrki tabeli. Tylko e w listach technika ta znajduje najczstsze zastosowanie.
DEFINIOWANIE PUNKTORW LIST

Punktory do listy mona doda na wiele sposobw. Najprostszym i zarazem najmniej
precyzyjnym z nich jest uycie wasnoci stylu listy kaskadowych arkuszy stylw.
Zamy, e mamy list gwiazd znajdujcych si najbliej Ziemi i chcielibymy, aby kady
element tej listy by oznaczony ma gwiazdk zamiast kkiem, prostoktem czy dyskiem
(rysunek 3.16).
ul.stars{list-style-image: url(star.gif);}
atwizna. Potencjalny problem z tym zwizany polega na tym, e nie mamy adnej kontroli
nad pooeniem tych obrazw. Ich odlego od lewego brzegu tekstu i wyrwnanie w pionie
wzgldem pierwszego wiersza cakowicie zale od przegldarki i nie mamy tu nic do powiedzenia.
Teraz zamy, e chcemy uy zwykych markerw listy powiedzmy typu disc ale chcemy,
aby miay inny kolor ni tre elementw (rysunek 3.17).
ROZDZIA 3: PORADY
Rysunek 3.16. Gwiazdy gwiazd
101
Rysunek 3.17. Zmiana koloru markerw
CZ II: NIEZBDNIK
To niestety wymaga zastosowania pewnej sztuczki. Kady element listy musimy umieci
wjakim elemencie np. div albo span. Zademonstruj to na przykadzie tego pierwszego
elementu.
ul.stars {color: red; list-style: disc;}
ul.stars div {color: black;}
<ul class="stars">
<li><div>Soce</div></li>
<li><div>V645 Centauri (Proxima Centauri)</div></li>
<li><div>Alpha Centauri A</div></li>
...
</ul>
W tym konkretnym przypadku moglibymy zamieni element div na span bez wpywu na
ostateczny efekt. Ale gdybymy chcieli doda jeszcze jakie obramowanie albo to, to rnice
w zastosowaniu tych dwch elementw byyby ogromne (zgoda, mona by je zlikwidowa
przy uyciu wasnoci display).
Jeli sdzisz, e w CSS powinny by jakie sposoby zmieniania stylu samych markerw list
bez koniecznoci wstawiania dodatkowych znacznikw do dokumentw, to poinformuj
Ci, e one istniej, tylko e nie zaimplementowano ich w adnej przegldarce.
102
PUNKTORY W TLE
Chcemy zatem zastosowa wasne markery do elementw listy, ale nie podoba nam si to,
e przegldarka umieci je, gdzie zechce. Nie ma problemu. Moesz wyczy standardowe
wywietlanie markerw i umieci swoje obrazki w tle elementw listy (rysunek 3.18).
ul.stars {list-style: none;}
ul.stars li {background: url(star.gif) 0 0.1em no-repeat; padding-left: 16px;}
Dziki temu, e nad pooeniem obrazu w tle elementu mamy o wiele wiksz kontrol, ta
technika daje znacznie wiksze moliwoci ni uycie standardowej wasnoci list-style-image.
Oczywicie trzeba pamita o dodaniu dopenienia z lewej strony, aby tre elementu nie
zostaa wywietlona na obrazie punktora!
Wielk sztuk jest wyrwnanie obrazu z pierwszym wierszem tekstu elementu. W zasadzie
nie mona mie 100% pewnoci, e obraz pozostanie idealnie wyrwnany co do jednego
piksela np. z lini podstawow pisma pierwszej linii tekstu. Mona uzyska efekt bardzo
zbliony do ideau i w wielu przypadkach uda si go osign, ale nigdy nie mona by tego
pewnym. Jest to jeden z przypadkw, kiedy musimy zaakceptowa moliwo wystpienia
drobnych usterek albo zastosowa inne rozwizanie.
Najwiksz zalet tej metody jest to, e wcale nas ona nie ogranicza do pierwszego wiersza
tekstu. Markery bdce w tle mona wyrwna w pionie wzgldem caego elementu, nawet jeli
jego tre skada si z wielu wierszy. Jeli t technik poczy si z odpowiednio zdefiniowanymi
krawdziami obramowania, to mona uzyska naprawd bardzo fajne efekty (rysunek 3.19).
ROZDZIA 3: PORADY
Rysunek 3.18. Punktory w tle
103
Rysunek 3.19. Markery w tle wyrwnane w pionie
CZ II: NIEZBDNIK
Jeli chcesz rne rodzaje elementw listy oznaczy rnymi rodzajami markerw (jak
na rysunku 3.20), to wystarczy, e oznaczysz je odpowiednimi klasami i dla kadej klasy
zdefiniujesz inny obraz.
ul.stars {list-style: none;}
ul.stars li {background: 0 0.1em no-repeat;
padding-left: 16px;}
ul.stars li.m {background-image: url(star-m.gif);}
ul.stars li.k {background-image: url(star-k.gif);}
<ul class="stars">
<li class="g">Soce</li>
<li class="m">V645 Centauri (Proxima Centauri)</li>
<li class="g">Alpha Centauri A</li>
<li class="k">Alpha Centauri B</li>
...
</ul>
104
Rysunek 3.20. Rne markery w tle

Jedn z wad tego podejcia jest to, e markery umieszczone w tle elementw prawie
nikomu si nie wydrukuj. Dlatego w arkuszu stylw dla druku warto je zastpi
zwykymi markerami.
ROZDZIA 3: PORADY
GENEROWANIE MARKERW
Istnieje jeszcze jeden bardziej zaawansowany sposb na utworzenie wasnych markerw list,
ale nie dziaa on w starszych przegldarkach. W technice tej wykorzystuje si poczenie
wycinania z generowaniem treci (rysunek 3.21).
105
Rysunek 3.21. Generowanie markerw

ul.stars li:before {content: url(star.gif);margin-right: 8px;}
ul.stars li {text-indent: -20px; list-style: none;}
To wszystko. Nie trzeba dodawa adnych nowych elementw, gdy s one dodawane
na pocztku kadego elementu listy automatycznie w postaci treci generowanej. Tre
generowana oznacza, e obrazy s wstawiane jako elementy rdliniowe, a wic mona je
wyrwnywa pionowo wzgldem linii podstawowej pisma itp.
Oczywicie mona zastosowa rne ikony, odwoujc si do rnych klas (rysunek 3.22).
ul.stars li.m:before {content: url(star-m.gif);}
ul.stars li.k:before {content: url(star-k.gif);}
Dziki temu, e te markery s wstawiane do treci strony, bd widoczne take na wydruku,

tak jakby zostay dodane za pomoc elementu img albo wasnoci list-style-image.
Korzy z tego jest taka, e zamiast wczytywa obrazy, mona wstawia zwyke znaki, ktre
mona formatowa niezalenie od treci, a ponadto nie trzeba dodawa adnych nowych
elementw HTML. Wczeniejsze style moemy zastpi poniszym arkuszem (wynik jego
dziaania pokazano na rysunku 3.23):
CZ II: NIEZBDNIK
Rysunek 3.22. Generowanie rnych markerw
106
ul.stars
ul.stars
ul.stars
ul.stars
li {text-indent: -1.25em; list-style: none;}

li:before {content: "\2605"; margin-right: 0.75em;}
li.m:before {color: red;}
li.k:before {color: orange;}
Rysunek 3.23. Generowanie markerw Unicode
ROZDZIA 3: PORADY
Ta technika nie daje tak duej kontroli nad markerami jak obrazy w tle, przez co istnieje
ryzyko, e tekst w pierwszej linii nie bdzie idealnie wyrwnany z tekstem w dalszych
linijkach. Oglnie jednak rzecz biorc, mona uzyska bardzo dobry efekt, a poza tym
problem ten dotyczy tylko elementw list zawierajcych wicej ni jeden wiersz tekstu.
MASZ DO DYSPOZYCJI
WICEJ KONTENERW, NI MYLISZ
Bardzo czsto stosowanym zabiegiem jest umieszczanie caej treci strony
w elemencie-kontenerze div w taki sposb:
<body>
<div class="wrapper">
</div>
</body>
Najczciej tumaczy si to tym, e uatwia to ustawienie treci na rodku okna albo

zdefiniowanie jeszcze kilku innych kontenerw nienalecych do treci. W tym przykadzie
mamy elementy body i div, dla ktrych typowo definiuje si nastpujce style:
body {background: #ABACAB; text-align: center;}
div.wrapper {width: 800px; margin: 0 auto; text-align: left;)
To klasyczny kod ustawiajcy projekt na rodku okna przegldarki i dziaajcy nawet w starych
przegldarkach IE, ktre nie rozpoznaway wartoci auto marginesw i mylay, e wasno
text-align suy do wyporodkowywania blokw.
Ale przecie tre strony ju przed dodaniem elementu div znajdowaa si w dwch
kontenerach elementach body i html. Tak, element html rwnie mona formatowa.
Czemu by nie? Dla CSS jest to zwyky element, jak wszystkie inne. Nie ma w nim nic
niezwykego oprcz faktu, e stoi na najwyszym poziomie hierarchii w drzewie
dokumentu, a wic jest jego korzeniem.
W zwizku z tym powysze dwie reguy moemy zmodyfikowa nastpujco:
html {background: #ABACAB; text-align: center;}
body {width: 800px; margin: 0 auto; text-align: left;)
Teraz ten sam efekt (rysunek 3.24) uzyskalimy bez dodatkowego elementu div,
ktrymoemy usun.
107
CZ II: NIEZBDNIK
Rysunek 3.24. Ukad
108
Gdy ju zdasz sobie spraw, e za pomoc CSS mona formatowa take elementy html
i body, otworz si przed Tob nowe interesujce moliwoci. Zamy np. e chcemy
zaprojektowa stron z dwoma kolorowymi paskami wzdu grnej krawdzi okna
ilogo umieszczonym na dolnym pasku. Pewnie daoby si to jako zrobi przy uyciu
dodatkowego elementu div, ale poniej przedstawiam alternatywne rozwizanie, ktre
niewymaga dodawania tego elementu (rysunek 3.25):
html {border-top: 5px solid navy;}
body {border-top: 55px solid silver; margin: 0; padding: 0;}
img.logo {position: absolute; top: 10px; left: 10px;}
Podobny efekt mona oczywicie uzyska przy uyciu zwielokrotniania obrazw w tle
(rysunek 3.26).
html {background: url(stars-m.png) 14px 41px repeat-y;}
body {background: url(stars-k.png) 54px -20px repeat-x;}
img.logo {position: absolute; top: 10px; left: 10px;}
ROZDZIA 3: PORADY
Rysunek 3.25. Paski i gwiazdki
109
Rysunek 3.26. Duo gwiazd
CZ II: NIEZBDNIK
TA DOKUMENTU
Wszyscy przyzwyczailimy si do tego, e aby wypeni tem cae okno przegldarki,
ustawiamy to elementu body. Ale nie zgadniesz, co si stanie, gdy dodatkowo ustawisz to
elementu html.
html {background: #ABACAB;}
body {background: #DED;}
Spjrz na rysunek 3.27. Okno przegldarki wypenia to elementu html, a to elementu

body jest widoczne tylko w obszarze treci i jego dopenienia. Dzieje si tak bez wzgldu na
to, czy element body siga doln krawdzi do dolnej krawdzi okna przegldarki, czy nie.
Jeli nie, to pod spodem wida to elementu html. To samo by byo, gdyby element body
mia ustawiony dolny margines, a element html mia dolne dopenienie, albo gdyby oba te
warunki byy spenione.
110
Rysunek 3.27. Element body nie zawsze wypenia widoczny obszar okna
Jeli usuniemy z arkusza stylw regu definiujc to elementu html, to cae okno zapeni si
kolorem elementu body.
Dzieje si tak dlatego, e w specyfikacji jzyka HTML zapisano, i kanwa, czyli obszar,
wktrym rysowana jest strona internetowa, pobiera swoje to z elementu html. Jeli element
html nie ma zdefiniowanego ta, to jest ono pobierane z elementu body. Jeli element body
rwnie nie ma ta, to zostaje zastosowany jaki domylny kolor.
ROZDZIA 3: PORADY
Jest to specjalny przypadek, ktrego opis znajduje si w specyfikacji. W przypadku innych
elementw nie jest tak, e to (lub jakakolwiek inna wasno CSS) jest przekazywane w gr
drzewa dokumentu. Pamitaj o tym, gdy bdziesz ustawia to dla elementu html.
ARKUSZE SERWEROWE
Ile razy zdarzya Ci si nastpujca sytuacja:
1. Wprowadzasz zmiany w arkuszu stylw na swoim komputerze.
2. Wysyasz zmodyfikowany arkusz na serwer testowy.
3. Przechodzisz do okna przegldarki i odwieasz je.
4. Nic si nie zmienia.
5. Robisz twarde odwieenie i dalej nic.
6. Sprawdzasz, czy wysyanie plikw zakoczyo si powodzeniem.
7. Jeszcze raz odwieasz i nadal nic.
8. Dodajesz kilka regu !important. Wysyasz plik na serwer, odwieasz, nic.
9. Zaczynasz przeklina swj komputer.
10. Sprawdzasz w Firebugu, co przesania Twoje nowe style. Spostrzegasz, e w ogle nie
zostay zastosowane.
11. Szukasz przyczyn jeszcze kilka minut, a w kocu odkrywasz, e odwieae stron
na serwerze produkcyjnym, a nie testowym.
12. Przeczasz si na serwer testowy i widzisz wszystkie zmiany.
13. Klniesz ze zoci, e jeste taki gupi.
Takie sytuacje przydarzay mi si tak czsto, e a wstyd si przyzna. Ostatnim razem,
gdy to miao miejsce, w kocu zdaem sobie spraw, e mgbym przecie na serwerze
testowym serwowa specjalny arkusz stylw, taki, ktry pozwalaby od razu si zorientowa,
e jestem na tym serwerze, bez potrzeby demolowania caego projektu. To pozwolioby mi
zaoszczdzi mnstwo nerww.
html {background: url(staging-bg.png) 100% 50% repeat-y;}
Istnieje wiele sposobw na zrealizowanie tego pomysu. Najelegantsza metoda polega na

uyciu nagwkw HTTP do wysyania specjalnego, dodatkowego arkusza stylw. Jeli
korzystasz z serwera Apache, wystarczy, e dodasz do pliku .htaccess w katalogu gwnym
poniszy wiersz kodu:
Header add Link "</staging.css>;rel=stylesheet;type=text/css"
Teraz musisz jeszcze tylko zapisa w katalogu gwnym swojego serwera testowego plik
staging.css i gotowe. Oczywicie plik ten moesz zapisa w dowolnym innym miejscu, tylko
pamitaj, aby odpowiednio zmieni ciek w nawiasach ostroktnych w swojej dyrektywie.
Mona take stosowa adresy bezwzgldne, typu http://example.com/staging.css. Nie zapomnij
tylko o nawiasach ostroktnych, bo s wymagane.
111
CZ II: NIEZBDNIK
Zawsze istnieje ryzyko, e przeniesiesz pliki staging.css i .htaccess na serwer produkcyjny.
Jeli si tego obawiasz, zrezygnuj z pliku .htaccess i zamiast tego wysyaj plik staging.css
zapomoc odpowiednich dyrektyw w pliku httpd.conf:
<Directory /cieka/do/katalogu/gwnego/witryny>
Header add Link "</staging.css>;rel=stylesheet;type=text/css"
</Directory>
ciek /cieka/do/katalogu/gwnego/witryny naley zastpi waciw wasn ciek

do katalogu, w ktrym znajduj si pliki Twojej witryny. Zalet tej metody jest to, e ryzyko
skopiowania pliku httpd.conf na inny serwer jest znacznie mniejsze. Nie jest to niemoliwe,
ale bardzo mao prawdopodobne.
Jedn z wad serwowania arkuszy stylw za pomoc nagwkw HTTP jest fakt, e metoda
ta nie dziaa w przegldarkach Internet Explorer i Safari. Dlatego wanie technika ta jest
rzadko stosowana do serwowania CSS w publicznie dostpnych witrynach internetowych.
Nie ma oczywicie adnych przeciwwskaza do korzystania z niej w rodowisku testowym,
jeli uywamy np. Firefoksa albo Opery.
Teraz wyobra sobie, e nie korzystasz z serwera Apache albo nie masz moliwoci
grzebania w jego plikach konfiguracyjnych, a chcesz zastosowa opisywan technik.
112
Uytkownicy serwera IIS mog wysya arkusze stylw poprzez nagwki HTTP,
korzystajc ze wskazwek podanych na stronie http://technet.microsoft.com/en-us/library/
cc753133(WS.10).aspx. Mona to zrobi zarwno z poziomu interfejsu IIS Managera,
jakiwiersza polece.
Jeli wszystkie swoje strony zapisujesz w formacie PHP, to nie musisz bawi si
wkonfiguracj serwera, ale na kadej stronie, na ktrej chcesz wczy swj arkusz
stylw, musisz umieci odpowiedni dyrektyw PHP. Ta metoda dziaa we wszystkich
przegldarkach:
Najprociej jest doda poniszy kod do kadej strony PHP:
<?php if ($_SERVER['HTTP_HOST'] == "staging.example.com") { ?>
<link rel="stylesheet" href="/staging.css" type="text/css" />
<?php } ?>
Ten kod wpisuje do dokumentu cze do arkusza stylw, a jeli jaka przegldarka go
nieobsuguje, to i tak nie pokae adnego stylu.
Ta metoda dziaa doskonale w przypadku serwowania plikw z domeny staging.example.
com. Lepszym rozwizaniem, ktre bdzie dziaa z kadego serwera z okrelonym
acuchem w nazwie domeny, a nawet z serwera lokalnego, dziaajcego na naszym
komputerze osobistym, jest:
<?php
if(preg_match("/staging|test|dev|localhost|127\.0\.0\.1/", $_SERVER[HTTP_HOST])){ ?>
<link rel="stylesheet" href="/staging.css" type="text/css" />
<?php } ?>
ROZDZIA 3: PORADY
Mona te zastosowa warunkowe wysyanie nagwkw HTTP przy uyciu PHP, ale jeli na
kadej stronie chcesz stosowa wykrywanie serwera, to rwnie dobrze moesz zastosowa
wstawianie cza do arkusza stylw.
Na pewno podobne rozwizania mona zaprogramowa przy uyciu innych jzykw
programowania uywanych do tworzenia stron internetowych. Przedstawione urywki kodu
pokazuj, czego naley szuka.
Za powyszy kod PHP dzikuj dwm uczonym dentelmenom: Zacharyemu Johnsonowi
(http://www.zachstronaut.com/) i Alanowi Hoganowi (http://alanhogan.com/), natomiast
trzeciemu, Peterowi Wilsonowi (http://peterwilson.cc/) za pokazanie mi strony
zewskazwkami dotyczcymi serwera IIS.
113
4
ROZDZIA
PODRCZNIK CSS
UKADY
TO, E JEDNYM z podstawowych zastosowa

kaskadowych arkuszy stylw jest tworzenie
ukadu elementw na stronie, nie jest dla
nikogo zaskoczeniem. Dziwne natomiast jest to,
e technologia ta nie oferuje adnej konkretnej
techniki przeznaczonej wanie do tego celu
(warto przy okazji zauway, e nigdy nie
istniaa technika do opracowywania ukadu
stron internetowych; ludzie myleli, e ukad

oparty na tabelach jest dobrym rozwizaniem,
bo nie byo innego). W tym rozdziale
przedstawiam kilka porad na temat tego, jak
uproci kod ukadw stron, oraz opisuj
kilka najczstszych technik rozmieszczania
elementw na stronie.
CZ II: NIEZBDNIK
STOSOWANIE OBRYSU ZAMIAST OBRAMOWANIA

Na pocztek kilka sw na temat stosowania obrysw, ktre na pierwszy rzut oka wygldaj
jak obramowanie, ale rni si od niego bardzo istotnym szczegem, ktry ma due
znaczenie dla ukadu. Obrysy mona stosowa na opublikowanych stronach, a poza tym
ste bardzo przydatnym narzdziem diagnostycznym podczas pracy nad ukadami.
Pracujc nad ukadem strony, mona uwidoczni pola wszystkich elementw przy uyciu
reguy podobnej do poniszej (patrz rwnie rysunek 4.1):
div {outline: 1px dashed red;}
116
Rysunek 4.1. Elementy div z obrysami

Moe Ci si wydawa, e ten sam efekt mona uzyska za pomoc wasnoci border,
aleniemasz racji. Chodzi o to, e obramowanie jest uwzgldniane w ukadzie, a obrys nie.
Wyjani to na przykadzie. Wyobramy sobie, e mamy trzy elementy div stanowice
kolumny, ktre chcemy zmieci w kontenerze o szerokoci 960 pikseli (jeli nie lubisz
pikseli, to to samo dotyczy take jednostek em, procentw i wszystkich innych jednostek
miary). Dla kadej z tych kolumn ustawiasz wasnoci float: left i width: 33% i prbujesz
zobaczy, gdzie dokadnie bd si znajdowa ich krawdzie. Jeli zastosujesz obramowanie,
to ostatnia z kolumn zostanie przeniesiona pod dwie wczeniejsze (rysunek 4.2). Jest to
spowodowane tym, e szeroko kadej kolumny wynosi 320 pikseli plus grubo lewej
i prawej krawdzi, a wic w sumie 322 piksele. Jeli warto t pomnoymy przez liczb
kolumn, to otrzymamy wynik 966 pikseli, a wic wicej ni szeroko kontenera, ktra
wynosi 960 pikseli. Mamy problem!
ROZDZIA 4: UKADY
Rysunek 4.2. Trzecia kolumna znika z widoku

To wanie miaem na myli, piszc, e obramowanie jest uwzgldniane w ukadzie,
aobrys nie jest. Obrysy s dodawane ju po narysowaniu elementu, a wic gdybymy je
dodali w przypadku opisywanym w poprzednim akapicie, to adna kolumna nie straciaby
przeznaczonego dla siebie miejsca.
Choby nada obrysowi nie wiem jak du grubo, nigdy nie spowoduje on przesunicia
elementu div ani w ogle czegokolwiek na stronie. Obrysy mog najwyej nachodzi
nasiebie, co wida na rysunku 4.3.
Ta waciwo obrysw stanowi ich wielk zalet, jeli chodzi o tworzenie schematu
struktury elementw ukadu. Jeli elementy ukadaj si nie po naszej myli, to moemy
doda im obrysy, aby zobaczy, gdzie dokadnie znajduj si ich krawdzie, i nie musimy si
martwi, e kompletnie stamsimy nasz cay ukad.
Druga rnica midzy obrysem a obramowaniem jest taka, e obrys musi otacza element
zwszystkich stron i moe mie tylko jeden kolor. Innymi sowy, nie da si osobno
zdefiniowa np. lewej i grnej krawdzi obrysu, tak jak mona to zrobi w przypadku
obramowania. Obrys otacza element z wszystkich stron albo z adnej. Analogicznie do
koloru nie mona w obrysie zmienia szerokoci ani stylu. Jeli ustawisz dwupikselowy
przerywany ty obrys, to bdzie on taki na caej swojej dugoci.
Warto wiedzie, e obrys mona zdefiniowa razem z obramowaniem. Wwczas obrys jest
rysowany poza obramowaniem, tak e wewntrzna strona obrysu styka si z zewntrzn
stron krawdzi obramowania. Jeli element ma margines, to obrys jest rysowany nad nim,
ale nie zmienia ani nie przesuwa go w aden sposb.
117
CZ II: NIEZBDNIK
Rysunek 4.3. Wielkie przerywane obrysy
118
USTAWIANIE BLOKW NA RODKU

Czasami chcemy wyrodkowa cay element w jego kontenerze (zdarza si, e kontenerem
tym jest element body). W CSS nie ma wasnoci sucej specjalnie do tego celu, ale mona
j imitowa za pomoc odpowiednich ustawie marginesw.
Jeli elementy ukadu maj cile okrelone wymiary, sprawa jest bardzo prosta. Wystarczy
tylko obliczy, ile miejsca powinno zostawa po obu stronach rodkowanego elementu,
inat warto ustawi marginesy (rysunek 4.4). Na przykad:
div#contain {width: 800px;}
div#main {width: 760px; margin: 0 20px;}
W tym przypadku wystarczyo wykonanie prostych oblicze. Moglibymy nawet usun

regu div#main i zastosowa tylko dopenienie w kontenerze:
div#contain {width: 760px; padding: 0 20px;}
Ten sam efekt, inne podejcie.

Jeli jednak znana jest szeroko elementu do wyrodkowania, a nie wiadomo, jak szeroki
bdzie jego kontener, naley uy marginesw. Trzeba uciec si do maego podstpu.
ROZDZIA 4: UKADY
Rysunek 4.4. Jedno pole wyrodkowane w innym

Zamy, e mamy element div, ktry chcemy wyrodkowa w elemencie body. Nie znamy
jednak szerokoci elementu body, poniewa okno przegldarki moe mie rn szeroko.
Jeli elementowi div nadamy konkretn szeroko, to nie ma problemu, bo wystarczy,
eustawimy jego marginesy lewy i prawy na auto (rysunek 4.5).
div#main {width: 55em; margin: 0 auto;}
Dziaanie tej techniki jest zgodne ze specyfikacj CSS, w ktrej zapisano, e jeli element ma
okrelon szeroko, a jego marginesy lewy i prawy s ustawione na warto automatyczn,
to przegldarka powinna obliczy rnic szerokoci tego elementu i jego kontenera, wynik
podzieli na p i uzyskan warto przypisa marginesom z obu stron elementu. W ten
sposb element zostaje wyrodkowany.
To oczywicie nie spowoduje wyrwnania do rodka treci elementu. Aby to zrobi,
naleaoby napisa (rysunek 4.6):
div#main {width: 55em; margin: 0 auto; text-align: center;}
Jeli element div byby szerszy od swojego kontenera, to w przypadku jzykw pisanych
od lewej do prawej strony przegldarka wyrwna go (nie jego tre) do lewej krawdzi,
awprzypadku jzykw pisanych od prawej do lewej wyrwna go do prawej.
119
CZ II: NIEZBDNIK
Rysunek 4.5. Wyrodkowanie elementu za pomoc marginesw o automatycznej szerokoci
120
Rysunek 4.6. Wyrodkowanie elementu za pomoc marginesw o automatycznej szerokoci

i wyrwnanie tekstu do rodka
ROZDZIA 4: UKADY
KONTENERY ELEMENTW PYWAJCYCH

PRZEPENIENIE
Poniewa elementy pywajce stanowi tak wan cz ukadu w CSS, czsto trzeba je
umieszcza w jakim specjalnym elemencie-kontenerze, ktry moe si rozszerza, aby je
pomieci. Domylnie jednak kontenery tak nie dziaaj (s ku temu bardzo dobre powody;
szczegowe informacje znajdziesz na stronie http://complexspiral.com/publications/
containing-floats/), przez co moesz znale si w sytuacji podobnej do przedstawionej poniej:
div#main {border: 2px dashed gray; background: #9AC;}
div.column {float: left; width: 28%;
padding: 0 1%; margin: 0 1%;}
Widzisz t przerywan lini nad kolumnami na rysunku 4.7? To jest cae obramowanie
wok elementu div#main. Element ten ma zerow wysoko, przez co pywajce w nim
kolumny wystaj poza niego (to nie jest bd ani usterka w CSS; jeli chcesz wiedzie
dlaczego, przeczytaj tekst pod podanym wczeniej adresem1).
121
Rysunek 4.7. Zoony kontener, ktry wizualnie nie otacza zawartych w nim kolumn
Element div#main mona zmusi do otoczenia pywajcych w nim kolumn na kilka
sposobw. Najprociej jest wykorzysta wasno overflow (rysunek 4.8).
div#main {border: 2px dashed gray; background: #9AC;
overflow: auto;}
1 Tekst jest dostpny wycznie w jzyku angielskim przyp. red.
CZ II: NIEZBDNIK
Rysunek 4.8. Rozcignicie kontenera na elementy pywajce przy uyciu wasnoci overflow
122
Tak, to dziaa i tak, ma to swoje przyczyny, ale nie bdziemy tego tu roztrzsa (jeli jednak
Ci to ciekawi, przeczytaj paragraf 10.6.7 specyfikacji CSS 2.1). Jeli chcesz mie pewno,
e stare wersje przegldarki IE nie narobi Ci kopotw, zastosuj dodatkowo okrelenie
szerokoci:
overflow: auto; width: 100%;}
Wasno width moe mie dowoln warto oprcz auto i przypominam, e jest tu
potrzebna tylko po to, by zmusi stare wersje przegldarki IE do poprawnego dziaania. Jeli
nie obchodz Ci te programy, moesz t deklaracj szerokoci usun.
Zalet tego podejcia jest to, e element odgrywajcy rol kontenera (div#main) pozostaje
wnormalnym ukadzie dokumentu. To oznacza, e wszystko, co znajdzie si za nim w kodzie
rdowym, zostanie wywietlone pod nim na stronie w przegldarce, nawet jeli element
ten bdzie od tego wszy. Dziki temu dalsza tre nie wypynie obok naszych kolumn.
Ponadto kontener ten bdzie automatycznie przyjmowa szeroko swojego elementu
zawierajcego, a wic jeli napiszemy deklaracj width: 100%, nasz kontener rozcignie si
jak kady inny zwyky element.
Zauwamy jednak, e w przykadzie zdefiniowalimy dla elementu div#main dwupikselowe
obramowanie z wszystkich stron. To oznacza, e jeli ustawimy szeroko na 100%, to element
ten bdzie szerszy od swojego elementu zawierajcego o cztery piksele. Problemu tego
unikniemy, jeli ustawimy szeroko na auto, co spowoduje dopasowanie szerokoci elementu
do jego kontenera, ale wwczas mog pojawi si problemy ze starymi przegldarkami IE.
ROZDZIA 4: UKADY
To jeszcze nie koniec zmartwie. Jeli uyjemy wartoci auto dla wasnoci overflow,
to przegldarka moe, jeli uzna to za stosowne, doda do elementu div#main paski
przewijania. Wydaje si, e w praktyce to si nie zdarza, ale syszaem o nielicznych
przypadkach, kiedy to miao miejsce, a wic warto na to uwaa, tak na wszelki wypadek.
PYWAJCE KONTENERY
ELEMENTWPYWAJCYCH
Innym sposobem na poradzenie sobie z problemem zawierania elementw pywajcych
wkontenerze jest ustawienie samego kontenera rwnie jako elementu pywajcego.
float: left;}
div.column {float: left; width: 28%;
padding: 0 1%; margin: 0 1%;}
W tej technice wykorzystuje si fakt, e elementy pywajce z definicji mog by kontenerami

innych elementw pywajcych. Ponadto powinny przyjmowa tak szeroko, jaka jest
potrzebna, i ani odrobin wiksz. W przypadku, ktry rozwaamy, moe to by jednak
niebezpieczne. Szeroko kolumn jest ustawiona na jedn trzeci szerokoci elementu
div#main, ale jeli element ten ma by pywajcy, to przegldarka moe sama zdecydowa,
jaka ma by jego szeroko. Nie da si przewidzie, jaki bdzie tego rezultat.
Mona to atwo poprawi, nadajc elementowi div#main konkretn szeroko (rysunek 4.9).
float: left; width: 100%;}
Rysunek 4.9. Umieszczenie elementw pywajcych w pywajcym kontenerze
123
CZ II: NIEZBDNIK
Rysunek 4.9 wyglda identycznie jak 4.8, prawda? A jednak kady z nich powsta przy
uyciu innego kodu CSS. Jest to jeden z obszarw kaskadowych arkuszy stylw, w ktrych
mona ten sam wynik uzyska na wiele sposobw, a wybr konkretnego to kwestia
preferencji i uwarunkowa projektowych.
Element div#main znowu bdzie wysunity w prawo o cztery piksele z powodu obramowania.
Poniewa jednak elementy pywajce nie nale do normalnego ukadu, problemu tego nie
moemy rozwiza poprzez zastosowanie deklaracji width: auto. W przypadku elementw
pywajcych taka deklaracja oznacza, e o ich szerokoci decyduje przegldarka.
Ponadto, gdy tworzymy taki element pywajcy jak ten, ryzykujemy, e tre naleca do
ukadu normalnego, znajdujca si za nim w kodzie rdowym, zostanie wywietlona obok
niego. Aby temu zapobiec, mona zdefiniowa wasno clear. Jeli wiemy, jaki element
bdzie reprezentowa t dalsz tre, to moemy napisa co w tym rodzaju (przyjmuj tu
zaoenie, e po naszym elemencie div#main zawsze bdzie wystpowa element #footer):
div#footer {clear: left;}
Jeli nie ma pewnoci, e za elementem div#main bdzie wystpowa zawsze ten sam
element, mona uy selektora przylegajcego elementu siostrzanego z selektorem
uniwersalnym (rysunek 4.10):
div#main + * {clear: left;}
124
Rysunek 4.10. Wykorzystanie selektora przylegajcego elementu siostrzanego i wasnoci clear do zepchnicia stopki
pod pywajce kolumny
ROZDZIA 4: UKADY
CLEARFIX
Mianem clearfix okrela si pewn star technik, ktra zostaa ju w duym stopniu
wyparta przez dwie opisane wczeniej, ale s sytuacje, w ktrych jej zastosowanie jest
dogodniejsze. Dotyczy to w szczeglnoci starszych wersji przegldarki Internet Explorer,
ktre w niektrych sytuacjach le interpretuj wspomniane ju metody.
Najprostszym wariantem metody clearfix jest wstawienie do dokumentu jakiego elementu
izdefiniowanie dla niego wasnoci clear, np.:
div#main + * {clear: left;}
<div class="column one">...</div>
<div class="column two">...</div>
<div class="column three">...</div>
<br class="clearfix">
<p>...</p>
Kluczowym elementem tego kodu jest br. Element ten zejdzie pod umieszczone przed nim
pywajce kolumny i pocignie za sob wszystko, co znajduje si za nim. Aby si tak stao,
trzeba zdefiniowa nastpujc regu CSS (rysunek 4.11):
.clearfix {display: block; clear: both;}
125
Rysunek 4.11. Zepchnicie stopki pod pywajce kolumny za pomoc techniki clearfix
CZ II: NIEZBDNIK
Ta regua CSS sprawi, e element br znajdzie si pod pywajcymi kolumnami. W starszych
przegldarkach element ten moe te spowodowa pojawienie si pustego wiersza, a wic
przed zastosowaniem tej metody warto j przetestowa. Jeli bdziesz mie problem z pustym
wierszem, sprbuj nastpujcej modyfikacji arkusza stylw:
.clearfix {display: block; clear: both;
font-size: 0; height: 0;}
Niektrzy zamiast elementu br uywaj elementu hr, tumaczc to tym, e peni on

funkcj separatora dwch czci dokumentu i powinien by widoczny w przegldarkach
nieobsugujcych CSS. Element hr jednak na pewno spowoduje powstanie pustej przestrzeni
w przegldarkach obsugujcych CSS, poniewa jest on uwzgldniany w ukadzie elementw
na stronie. Jeli mylisz, e mona temu zapobiec przy uyciu deklaracji display: none,
to niestety mylisz si, poniewa po jej zastosowaniu element hr nie bdzie w ogle obecny
w ukadzie, a wic nie zrealizuje te swojego zadania! Dlatego t dodatkow przestrze
najczciej usuwa si za pomoc sztuczek z marginesami:
hr.clearfix {display: block; clear: left;
font-size: 0; height: 0;
visibility: hidden;
margin: -0.66em 0;}
126
Wynik zastosowania tej reguy powinien by taki sam jak w przypadku poprzedniej,
ale powinno si j dla pewnoci przetestowa. Poza tym, jeli chcesz kontrolowa
pooenie elementw z dokadnoci co do jednego piksela, to ten wariant metody nie
jest najszczliwszym wyborem. W takim przypadku lepiej na tym wyjdziesz, jeli uyjesz
elementu br.
Istnieje jeszcze inny wariant tej metody, w ktrym uywa si treci generowanej, ale
wnajnowszych wersjach przegldarek jej stosowanie jest utrudnione ze wzgldu na zmiany
w obsudze tego rodzaju treci, a poza tym pojawiy si nowe moliwoci uzyskania tego
samego efektu, ktre zostay opisane nieco wczeniej. Jeli interesujesz si histori, zajrzyj
pod adres http://positioniseverything.net/easyclearing.html (pomi tylko pierwsz uwag).
KLIRING ELEMENTW PRZYLEGAJCYCH

Ta porada jest podobna do poprzedniej, gdy rwnie opisuje sposb przeniesienia
elementu pod element, do ktrego przylega, pod warunkiem e element przenoszony
ielementy pywajce maj tego samego rodzica.
Spjrz na poniszy kod HTML:
<p>...</p>
ROZDZIA 4: UKADY
Midzy ostatnim kolumnowym elementem div a znajdujcym si za nim akapitem nie ma
adnego innego elementu. Jak w takim razie zepchn ten akapit pod kolumny (rysunek 4.12)?
Nic prostszego:
div.three + p {clear: both;}
127
Rysunek 4.12. Wykorzystanie selektora przylegajcego elementu siostrzanego i wasnoci clear do zepchnicia stopki
pod pywajce kolumny
Poniewa kolumny i akapit maj wsplnego rodzica, s elementami siostrzanymi. Dziki
temu do elementu p moemy si dobra przy uyciu kombinatora + (przylegajcego
elementu siostrzanego).
Regu t mona te uoglni, jeli selektor p zastpi si selektorem uniwersalnym:
div.three + * {clear: both;}
Dziki temu w d zostanie zepchnity kady element, bez wzgldu na to, czy bdzie to
akapit, lista, tabela, element pre, czy cokolwiek innego.
Pamitaj, e mona bardzo atwo zepsu t metod. Wystarczy umieci kolumny
wdodatkowym elemencie div.
<div class="columns">
</div>
<p>...</p>
CZ II: NIEZBDNIK
Teraz akapit nie zostanie zepchnity pod kolumny, poniewa nie ma ju wsplnego rodzica
z nimi (a wic nie jest ich elementem siostrzanym). Taki obrt rzeczy spowodowa cakowite
wyczenie naszego selektora. W przypadku takiej struktury dokumentu naley uy jednej
z metod opisanych wczeniej, np. z wykorzystaniem wasnoci overflow: auto.
PROSTY UKAD DWUKOLUMNOWY

Nie ma nic prostszego ni umieszczenie obok siebie dwch kolumn tekstu wystarczy
zamieni je na elementy pywajce. Jeli chcesz, eby wszystko znajdujce si za nimi zostao
przeniesione pod nie, przeczytaj poprzednie porady albo po prostu zastosuj wasno clear
do kadego nastpnego elementu.
Rozwamy poniszy urywek strony:
<div class="footer">...</div>
Jedyne, co musimy z tym zrobi, to ustawi te dwie kolumny obok siebie. Pozostaje tylko
zdecydowa, ktra ma by po lewej stronie, a ktra po prawej. eby byo ciekawiej, zamy,
e chcemy pierwsz kolumn (column one) ustawi z prawej strony. Nic trudnego:
128
.column {float: right; width: 50%;}
To wystarczy, aby kolumny znalazy si obok siebie. Na razie bd stamszone prawie jedna
na drugiej i bd wyglda paskudnie, ale znajd si obok siebie!
Wprowadzajc proste modyfikacje do arkusza, moemy sprawi, e efekt stanie si nieco
znoniejszy (co podobnego wida na rysunku 4.13):
.column {float: right; width: 30%; margin: 0 10%;}
Oczywicie w tej chwili mamy jeszcze problem ze stopk, ktrej grna krawd znajduje
si na rwni z grnymi krawdziami kolumn. Rozwizanie jest proste i polega na uyciu
wasnoci clear:
.footer {clear: both;}
To jest prosty ukad dwukolumnowy, ktry ma dwie wielkie zalety. Po pierwsze, umoliwia
ustawienie kolumn w dowolnej kolejnoci bez wzgldu na ich kolejno w kodzie
rdowym. Jak wiemy, pierwsza kolumna nie musi pywa po lewej stronie, rwnie dobrze
moe by po prawej. Po drugie, jeli zmienimy zdanie i uznamy, e kolumny powinny by
w odwrotnej kolejnoci, wystarczy, e zmienimy deklaracj float: right na float: left.
Buka z masem!
ROZDZIA 4: UKADY
Rysunek 4.13. Dwie proste kolumny

No i oczywicie do okrelenia szerokoci mona uy dowolnej jednostki pikseli, em,
procentw itp. Wszystko zaley od tego, czy kolumny maj by pynne (tzn. dostosowywa
si szerokoci do szerokoci okna), czy stae (o niezmiennej szerokoci, najczciej
okrelanej w pikselach). Mona by dugo dyskutowa nad tym, ktry rodzaj kolumn jest
lepszy, dlatego zostawiam Czytelnika z rad: Wybierz ten, ktry najlepiej pasuje do
Twojego projektu.
PROSTY UKAD TRZYKOLUMNOWY

Zamiana ukadu dwukolumnowego na trzykolumnowy (rysunek 4.14) to atwe zadanie.
Wystarczy tylko doda element div, przypisa mu odpowiedni klas i zamieni kolumny
na elementy pywajce.
.column {width: 20%; margin: 0 5%; float: left;}
.two {width: 30%;}
.footer {clear: both;}
<div
<div
<div
<div
class="column one">...</div>
class="column two">...</div>
class="column three">...</div>
class="footer">...</div>
129
CZ II: NIEZBDNIK
Rysunek 4.14. Prosty ukad trzykolumnowy
130
Tak przedstawia si podstawowa struktura. W istocie jest to zwyky ukad dwukolumnowy,

wzbogacony o dodatkow kolumn. Pokazuj go po to, aby na jego przykadzie omwi
pewne zagadnienia zwizane z formatowaniem kolumn pywajcych.
Po pierwsze, jest moliwe, e zauwaye ju we wczeniejszych podrozdziaach, i
marginesy lewy i prawy elementw pywajcych nie ulegaj scaleniu, lecz stykaj si
ipozostaj obok siebie bez zmian. Dlatego ostatnia pokazana regua CSS odsunie kolumny
od siebie o 10% (5%+5%). Gdyby te 5% przeliczy np. na 20 pikseli, to kolumny byyby
oddalone od siebie o 40 pikseli.
Po drugie, nie ma atwego sposobu na umieszczenie midzy kolumnami pionowego
separatora rozcigajcego si na ca ich wysoko. Jest to jedno z ogranicze technologii
CSS, ktre gnbi jej uytkownikw od ponad dekady i wci daje si we znaki. Problem
praktycznie nie istnieje, jeli wiadomo, e rodkowa kolumna bdzie zawsze (ale to zawsze)
najdusza. Wwczas mona zdefiniowa lew i praw krawd jej obramowania
i po kopocie.
Trzeba popracowa troch w arkuszu stylw, ale nie za wiele (rysunek 4.15).
.column {width: 20%; margin: 0 2%; padding: 0 2%; float: left;}
.two {width: 30%; border: 1px solid gray; border-width: 0 1px;}
ROZDZIA 4: UKADY
Rysunek 4.15. Separatory kolumn w postaci bocznych krawdzi obramowania rodkowej kolumny
Dziki temu, e rodkowa kolumna jest najwysza, jej boki mog suy jako separatory.
Trzeba byo dostosowa marginesy i dopenienie kolumn, aby odsun troch te separatory
od treci kolumn, ale to nic wielkiego. Moglibymy nawet zmieni tylko definicje stylw
kolumny rodkowej, a style reguy .column pozostawi w spokoju:
.two {width: 30%; border: 1px solid gray; border-width: 0 1px;
margin: 0; padding: 0 4%;}
Wynik byby praktycznie identyczny, moe rniby si od poprzedniego pooeniem

separatorw o jeden czy dwa piksele.
Jeli dziwi Ci uyte w tych reguach liczby, to jest to uzasadnione. Skd si wzia warto
4% dla dopenienia i skd wziem informacj, e wynikiem dzielenia 5% przez 2 jest 2%?
To moja uwaga nr 3, ktra mwi, e przy definiowaniu obramowania pynnych kolumn
trzeba zachowa szczegln ostrono. Wyobramy sobie, e podzielilimy 5% marginesu
na p. Gdybymy mieli zdefiniowane obramowanie, mogoby nam wyj co takiego
(rysunek 4.16).
.column {width: 20%; margin: 0 2.5%; padding: 0 2.5%; float: left;}
.two {width: 30%; border: 1px solid gray; border-width: 0 1px;}
131
CZ II: NIEZBDNIK
Rysunek 4.16. Nieumylne wypchnicie trzeciej kolumny na d
132
Jak wida, trzecia kolumna spada pod dwie pozostae. Stao si to dlatego, e zabrako
dla niej miejsca obok dwch pozostaych kolumn. A miejsca zabrako, poniewa suma
szerokoci, marginesw, dopenie i krawdzi obramowania wynosi wicej ni 100%
100%+2 piksele, mwic dokadnie. Nawet jeden piksel ponad 100% to o jeden za duo.
Rozwizanie tego problemu jest tylko jedno dokadnie sprawdzaj swoje obliczenia.
Jelinatomiast chodzi o pionowy separator kolumn, przeczytaj dwa kolejne podrozdziay.
FASZYWE KOLUMNY
Jedn z najlepszych metod uzyskiwania kolumn o rwnej wysokoci w CSS jest tzw. technika
faszywych kolumn, ktr spopularyzowa Dan Cederholm (http://simplebits.com/) w swoim
artykule opublikowanym w A List Apart w 2004 roku.
Aby z niej skorzysta, trzeba najpierw utworzy zwyke kolumny.
Kolumny te najlepiej rozmieci jako elementy pywajce, gdy rozmieszczanie kolumn

zapomoc pozycjonowania to bardzo ze rozwizanie. Kluczowe w tej technice (rysunek 4.17)
jest ustawienie szerokoci kolumn w pikselach i oglnie zastosowanie tej jednostki do
wszystkich ustawie (oprcz, miejmy nadziej, rozmiaru pisma).
.column {width: 300px; margin: 0 5px; padding: 0 5px; float: right;}
ROZDZIA 4: UKADY
Rysunek 4.17. Rozmieszczenie trzech kolumn

Teraz musimy narysowa separatory. Do tego potrzebny nam bdzie element o wysokoci
przynajmniej rwnej wysokoci kolumn, a najlepiej dokadnie tak samo wysoki jak one.
Doskonale nada si do tego kontener w postaci elementu div.
<div class="contain">
</div>
Musimy zrobi jeszcze dwie rzeczy. Po pierwsze, trzeba zmusi kontener do rozcignicia si
na kolumnach.
div.contain {width: 960px; overflow: auto;}
Po drugie, potrzebny nam bdzie obraz graficzny, ktry wstawimy w to kontenera w celu
uzyskania rysunku separatorw (rysunek 4.18).
Rysunek 4.18. Obraz do uycia w tle z rysunkiem separatorw kolumn
133
CZ II: NIEZBDNIK
Wysoko tego obrazu wynosi tylko kilka pikseli, poniewa zostanie on i tak pionowo
zwielokrotniony (rysunek 4.19).
div.contain {width: 960px; margin: 0 auto; overflow: auto;
background: url(separators.png) 0 0 repeat-y;}
134
Rysunek 4.19. Separatory kolumn zdefiniowane w postaci obrazu ta

Gotowe!
Oczywicie separatory nie s jedyn moliwoci, mona zastosowa kady pionowo
powtarzalny wzr, wcznie z kolorami wypenienia ta kolumn (rysunek 4.20).
Wystarczy tylko zamieni obraz na inny, odpowiednio zmodyfikowany.
div.contain {width: 960px; margin: 0 auto; overflow: auto;
background: url(filled-columns.png) 0 0 repeat-y;}
T technik mona obsuy dowoln liczb kolumn, trzeba tylko odpowiednio zmieni
obraz w tle.
Dopki szeroko kolumn bdzie ustawiana w pikselach (trzyma si tego wiele osb),
wszystko bdzie w porzdku. Wiele potencjalnych problemw zwizanych z t metod
mona atwo przezwyciy przy uyciu opcji powikszania dostpnej we wszystkich
nowoczesnych przegldarkach. Nie oznacza to jednak, e wszystkie. Jeli okno przegldarki
bdzie miao mniejsz szeroko od naszej strony, to zostan wywietlone poziome paski
przewijania, a jeli okno przegldarki bdzie duo szersze od naszej strony, po bokach
zostan due obszary pustego miejsca. Moe nie martwi Ci te problemy, ale naprawd
warto te sprawy przemyle.
ROZDZIA 4: UKADY
Rysunek 4.20. Wypenienie ta kolumn kolorem

Jeli interesuje Ci technika podobna do faszywych kolumn, dziaajca w ukadach
pynnych, to przeczytaj nastpny podrozdzia.
TECHNIKA LIQUID BLEACH

Wyobra sobie, e chcesz, aby separatory i ta kolumn rozcigay si na ca ich dugo, ale
kolumny musz mie zmienn szeroko. Jeli masz taki problem, to technika Liquid Bleach
jest stworzona dla Ciebie. Jest to metoda tworzenia wielokolumnowych pynnych ukadw,
ktr opracowali wsplnie Doug Bowman (znany jako wynalazca techniki Sliding Doors)
i Eric Meyer pod koniec 2004 roku. Pierwszy czon tej nazwy oznacza obsug ukadw
pynnych, a drugi to nazwa wczesnego bloga Douga.
Pocztkowa struktura kodu w technice Liquid Bleach jest bardzo podobna do techniki
faszywych kolumn, z jednym wyjtkiem.
<div class="inner">
</div>
</div>
135
CZ II: NIEZBDNIK
W tej metodzie potrzebny jest jeden kontener dla kadej luki midzy kolumnami, a wic
innymi sowy, potrzeba o jeden kontener mniej, ni jest kolumn. Poniewa tu zajmujemy
si ukadem trzykolumnowym, potrzebujemy dwch kontenerw. Ponadto dla kadego
kontenera potrzebujemy jednego wzoru separatora lub ta.
Zaczniemy od napisania kilku deklaracji dotyczcych pynnej szerokoci kolumn.
.two {width: 30%;}
Nastpnie utworzymy tylko jeden obraz dla ta. Na rysunku 4.21 wida tylko kawaek tego
obrazu, poniewa ma on szeroko a 3000 pikseli!
Rysunek 4.21. Pierwszy obraz separatora

Widoczny na rysunku obraz z lewej strony separatora ma kolorowe wypenienie,
azprawej jest cakowicie przezroczysty (szaro-biaa szachownica to sposb oznaczania
przezroczystych obszarw przez program Photoshop).
136
A teraz najwaniejsze separator musi trafia na luk midzy dwiema kolumnami.

Tenobraz umiecimy midzy kolumnami lew i rodkow (rysunek 4.22). Separator musi
znajdowa si w odlegoci 25% szerokoci kontenera od jego lewej krawdzi, gdy to jest
wanie punkt styku tych dwch kolumn. Musimy w takim razie zrobi dwie rzeczy.
Rysunek 4.22. Ustawienie pierwszego obrazu w tle
ROZDZIA 4: UKADY
Po pierwsze, z powyszego rysunku wynika, e separator znajduje si w odlegoci rwnej
25% szerokoci 3000-pikselowego obrazu od jego lewej krawdzi, a wic jego rodek wypada
na 750. pikselu, liczc od lewej strony obrazu.
Po drugie, potrzebujemy poniszej reguy CSS:
.inner {background: url(lb01.png) 25% 0 repeat-y; overflow: auto;}
Jak wida, punkt znajdujcy si na 750. pikselu obrazu (25%) pokrywa si z punktem pooonym
w odlegoci 25% szerokoci kontenera od lewej krawdzi tego kontenera. Dopki 25%
szerokoci kontenera bdzie wartoci mniejsz od 750 pikseli, wszystko bdzie w porzdku!
Do wstawienia drugiego separatora bdzie nam potrzebny drugi obraz o konstrukcji
podobnej do pierwszego. Ten separator ma si znajdowa midzy kolumnami rodkow
i praw, jak na rysunku 4.23. Szeroko prawej kolumny wynosi 30% 20% realnej
szerokoci i po 5% na boczne marginesy. To oznacza, e separator musi znajdowa si
wodlegoci rwnej 70% szerokoci naszego obrazu od jego prawej krawdzi, czyli 2100
pikseli, jeli obraz ten ma szeroko 3000 pikseli. Na lewo od separatora znajduje si
przezroczysty obszar, a na prawo kolorowe wypenienie. Do jego ustawienia na miejscu
wystarczy krtka regua CSS:
.contain {background: url(lb02.png) 0 70% repeat-y; overflow: auto;}
137
Rysunek 4.23. Ukad po ustawieniu drugiego obrazu ta

Teraz bez wzgldu na to, jakiej szerokoci bdzie okno przegldarki, separatory bd
znajdoway si na waciwych miejscach. Dopki okno nie przekroczy 3000 pikseli
szerokoci, nasz ukad bdzie wyglda prawidowo.
CZ II: NIEZBDNIK
Ostatnia uwaga jeli chcesz wypeni kolorem rodkow kolumn (rysunek 4.24),
tonie musisz ju dodawa adnych znacznikw HTML. Wystarczy, e zdefiniujesz kolor
ta zewntrznego kontenera.
.contain {background: #DECADE url(lb02.png) 70% 0 repeat-y; overflow: auto;}
138
Rysunek 4.24. Ukad po zdefiniowaniu koloru ta dla rodkowej kolumny

Kolor jest widoczny, poniewa przewituje przez przezroczyste obszary obrazw w tle.
Jeli nie chcesz wypenia kolumn adnym kolorem, tylko potrzebujesz separatorw
doukadu pynnego, moesz uy tego samego kodu CSS z obrazami przedstawiajcymi
tylko powtarzalne w pionie separatory bez adnych dodatkw. Wwczas obraz moe mie
szeroko rwn szerokoci separatora.
.inner {background: url(sep01.png) 25% 0 repeat-y; overflow: auto;}
.contain {background: url(sep02.png) 75% 0 repeat-y; overflow: auto;}
To wszystko, co jest potrzebne. Jeli separatory bd przesunite o piksel czy dwa w ktr
stron, dodaj do nich przezroczysty obszar o odpowiedniej szerokoci.
ONE TRUE LAYOUT

Nazwa opisywanej tu techniki (jedyny suszny ukad) jest moe troch napuszona,
ale nie ma wtpliwoci, e to wietna metoda. Spopularyzowa j pod koniec 2005 roku
Alex Robinson (http://positioniseverything.net/articles/onetruelayout/), a jej gwne
ROZDZIA 4: UKADY
zaoenie brzmi: pywajce kolumny mona rozmieszcza na stronie niezalenie od ich
umiejscowienia w kodzie rdowym dokumentu. Jest to spory postp w stosunku do
przedstawionych wczeniej prostych ukadw, w ktrych rozmieszczenie kolumn byo
zwizane z ich miejscem w rdle.
Realizacja tej techniki wymaga tylko kolumn w postaci elementw div i niewielkiej
iloci kodu CSS. Nie trzeba stosowa adnych dodatkowych kontenerw, tak jak to byo
wprzypadku wczeniejszych prb.
Jak zwykle na pocztek potrzebny jest zestaw trzech kolumn. W tym wypadku gwna tre
strony bdzie si znajdowaa w pierwszej kolumnie, a pozostaa w dwch nastpnych.
Najpierw wszystkie kolumny zamienimy w elementy spywajce w lewo i nadamy im jakie

szerokoci (rysunek 4.25). Dla uproszczenia uyjemy pikseli jako jednostki, ale rwnie
dobrze mogyby to by jednostki em czy procenty (jedyny warunek jest taki, aby wszystkie
kolumny miay szeroko ustalon w tej samej jednostce, chocia i t zasad da si nagi).
.column {float: left; padding: 0 20px; margin: 0 20px;}
.two, .three {width: 200px;}
.one {width: 300px;}
Rysunek 4.25. Trzy pywajce kolumny
139
CZ II: NIEZBDNIK
Teraz przyjmujemy zaoenie, e pierwsza kolumna ma by w rodku, druga po prawej,
atrzecia po lewej stronie, jak wida na rysunku 4.26. Do tego potrzebne s dwie
dodatkowe reguy:
.one {width: 300px; margin-left: 300px;}
.three {margin-left: -920px;}
140
Rysunek 4.26. Przecignicie trzeciej kolumny na lew stron

To wszystko, czego nam trzeba.
Jak to dziaa? Lewy margines pierwszej kolumny przesuwa j w prawo, pozostawiajc puste
miejsce o szerokoci rwnej cakowitej szerokoci (tre + dopenienie + marginesy) trzeciej
kolumny, powikszonej o oryginalny lewy margines pierwszej kolumny (ktry wynosi
20 pikseli). Nastpnie lewy margines lewej kolumny przecign j w lewo nad dwiema
poprzednimi kolumnami i umieci j w obszarze marginesu pierwszej kolumny. To caa
historia.
Teraz zamy, e chcemy, aby druga kolumna bya z lewej, a trzecia z prawej strony
(rysunek 4.27). atwizna. Zachowaj poprzedni regu .one, a regu .three zastp ponisz:
.two {margin-left: -640px;}
Zasada dziaania tej techniki jest taka sama jak wczeniej. Wszystko sprowadza si do tego,
aby po lewej stronie zapewni wystarczajc ilo miejsca dla kolumny, ktr chcemy tam
umieci, a nastpnie do przesunicia tej kolumny w to miejsce.
ROZDZIA 4: UKADY
Rysunek 4.27. Przesunicie drugiej kolumny ze rodka na lewo

I oczywicie to samo mona zrobi dla prawej strony:
.column {float: right; padding: 0 20px; margin: 0 20px;}
.two, .three {width: 200px;}
.one {width: 300px; margin-right: 320px;}
.two {margin-right: -640px;}
Trzy kolumny nie s ograniczeniem w tej metodzie. Moesz onglowa czterema, picioma
kolumnami lub wiksz ich liczb, jak tylko sobie yczysz. Im wicej kolumn, tym sprawy
staj si bardziej skomplikowane, ale przecie gdyby to byo atwe, to kady mgby sobie
ztym poradzi, prawda?
Aby ustawi wszystkie kolumny na rodku okna, trzeba je umieci w dodatkowym
kontenerze, np.:
.contain {width: 1000px; margin: 0 auto;}
</div>
141
CZ II: NIEZBDNIK
Jak ju wspominaem, uywam w przykadach pikseli, bo wtedy atwiej jest zrozumie
wykonywane obliczenia. Nie oznacza to jednak, e jest to jedyna dozwolona jednostka.
Tosamo mona robi z pynnymi kolumnami o szerokociach zdefiniowanych w procentach
(rysunek 4.28):
column {float: right; padding: 0 2.5%; margin: 0 2.5%;}
.two, .three {width: 20%;}
.one {width: 30%; margin-right: 32.5%;}
.two {margin-right: -70%;}
142
Rysunek 4.28. Kolumny o szerokoci ustalonej procentowo
WITY GRAAL
Rozwiniciem techniki jedynego susznego ukadu jest technika o rwnie skromnej
nazwie wity Graal. Jako pierwszy opisa j Matthew Levine kilka miesicy po debiucie
jedynego susznego ukadu. Metoda ta opiera si na wymienionej poprzedniczce
ima pewne dodatki wniesione przez skromnego czowieka, jakim jest autor tej ksiki.
Umoliwia tworzenie hybryd ukadw pynnych i sztywnych przy zachowaniu niezalenoci
od kolejnoci kolumn (oryginalny artyku opisujcy t metod mona znale pod adresem
http://alistapart.com/articles/holygrail).
W tym podejciu mamy trzy kolumny, z ktrych dwie zewntrzne s sztywne, a rodkowa
pynna, czyli zmienia rozmiar w zalenoci od iloci dostpnego miejsca. Wszystko jak
zwykle zaczyna si od trzech elementw div reprezentujcych kolumny i kontenera:
ROZDZIA 4: UKADY
</div>
Pierwsz kolumn tak jak poprzednio umiecimy w rodku. Drug kolumn przesuniemy
na lew stron, a trzeci na praw. Kolumny druga i trzecia musz mie sta szeroko,
tzn. zdefiniowan za pomoc innej jednostki ni procenty (gdybymy chcieli, aby wszystkie
kolumny miay szeroko wyraon w procentach, uylibymy oryginalnej metody
jedynego susznego ukadu, opisanej w poprzednim podrozdziale). Moglibymy uy
jako jednostki pikseli, ale dodamy troch pieprzu i uyjemy jednostki em. Zatem drugiej
kolumnie nadamy szeroko 13 em, a trzeciej 15 em.
OK, tak wic po lewej stronie mamy 13 em, a po prawej 15 em (rysunek 4.29).
Najpierw sformatujemy kontener:
.contain {padding: 0 15em 0 13em;}
143
Rysunek 4.29. Ukad po zdefiniowaniu odpowiedniej wielkoci dopenienia

Teraz zmieniamy kolumny w elementy pywajce i utykamy je na waciwych miejscach.
Oto regua ustawiajca w kontenerze pierwsz (czyli rodkow) kolumn:
.column {float: left; position: relative;}
.one {width: 100%;}
CZ II: NIEZBDNIK
Niebawem wyjani, o co chodzi z deklaracj position: relative. Na razie ustawimy
szeroko pozostaych kolumn i umiecimy je na odpowiednim miejscu (rysunek 4.30).
.two {width: 13em; margin-left: -100%;}
.three {width: 15em; margin-right: -15em;}
144
Rysunek 4.30. Jedna kolumna na swoim miejscu, druga jeszcze nie

Jak wida, nie wszystko jeszcze zrobione. Pierwsza kolumna nie jest na swoim miejscu, tylko
pokrywa si z kolumn rodkow. Stao si tak dlatego, e zostaa przeniesiona z prawej
strony kontenera na lew. Aby umieci j we waciwym miejscu, musimy troch wicej
popracowa.
Naszym zadaniem jest przecignicie lewej kolumny jeszcze dalej w lewo (rysunek 4.31),
na odlego rwn jej szerokoci. Do tego wanie potrzebna jest deklaracja position:
relative. Ustawimy dla kolumny przesunicie z prawej strony rwne odlegoci, na jak
chcemy j przesun, czyli rwn jej szerokoci.
.two {width: 13em; margin-left: -100%; right: 13em;}
Ten sam efekt uzyskalibymy, stosujc przesunicie left: -13em;.

I to w sumie caa filozofia. Po prostu przenielimy boczne kolumny nad obszar dopenienia
kontenera i wszystko pasuje jak ula. Oczywicie, jeli do kolumn dodamy marginesy
idopenienie, to bdziemy musieli wykona dodatkowe obliczenia, ale podstawowa zasada
pozostanie niezmieniona.
ROZDZIA 4: UKADY
Rysunek 4.31. Wszystkie trzy kolumny na swoich miejscach

Zamy, e kolumny boczne chcemy odsun nieco od treci. Moemy to osign poprzez
zastosowanie odpowiedniej kombinacji obramowania i dopenienia w rodkowej kolumnie.
.contain {padding: 0 2em; border: 1em solid white; border-width: 0 15em 0 13em;}
Zwr uwag, e po bokach mamy grube krawdzie obramowania. To wanie one tworz
miejsca dla kolumn bocznych. Natomiast dopenienie odsunie tre rodkowej kolumny
nieco dalej od krawdzi, a wic rwnie od kolumn bocznych.
To pociga za sob konieczno zmiany stylw kolumn bocznych. W drugiej kolumnie
(czyli lewej w tym przykadzie) musimy tylko zwikszy warto wasnoci right do
poziomu jej szerokoci (ktra jest rwna gruboci lewej krawdzi obramowania rodkowej
kolumny) powikszonej o lewe dopenienie rodkowej kolumny.
.two {width: 13em; margin-left: -100%; right: 15em;}
Jeli chodzi o praw kolumn, to pewnie korci Ci, eby zwikszy ujemn warto prawego
marginesu. Niestety, tak nie zawsze si da. Lepiej zostaw margines w spokoju, a dodaj
wasno przesunicia left.
.three {width: 15em; margin-right: -15em; left: 2em;}
Oczywicie rwnie dobrze mona by zastosowa ujemne przesunicie w prawo. Bez wzgldu
na to, ktr metod wybierzemy, wynik bdzie taki jak na rysunku 4.32.
145
CZ II: NIEZBDNIK
Rysunek 4.32. Jeszcze inny sposb ustawienia prawej kolumny na swoim miejscu
146
Drobn korzyci z zastosowania tego podejcia jest to, e jeli kiedy zechcemy zastosowa
kolor w tle ktrejkolwiek z kolumn bocznych, to wystarczy, e ustawimy na ten kolor
odpowiedni krawd obramowania rodkowej kolumny.
Jest jeszcze jedna rzecz, o ktrej nie powinnimy zapomina nie pozwlmy, aby projekt
zrobi si zbyt wski. Do tego wystarczy prosta regua dla elementu body:
body {min-width: 50em;}
Teraz element body nie bdzie mg by szerszy ni 50 em, a wic wystarczy w nim miejsca
dla obu kolumn bocznych i jeszcze zostanie 22 em dla kolumny rodkowej. Oczywicie t
warto mona ustawia dowolnie, chocia gdybymy zastosowali jak inn jednostk,
niemoglibymy by tak pewni wyniku.
PYNNE SIATKI
Technika o nazwie Fluid Grids (pynne siatki) zostaa po raz pierwszy szczegowo
opisana przez Ethana Marcottea (na stronie http://alistapart.com/articles/fluidgrids).
Jest to metoda pozwalajca zmieni ukad oparty na strukturze siatkowej w pynniejsz
kompozycj, w ktrej budowie wykorzystana jest mieszanina wartoci wyraonych
wjednostkach em i procentach. Co ciekawsze, jednostk em mona w kadej chwili
zastpi dowoln inn.
Prac zaczniemy jednak od pikseli.
ROZDZIA 4: UKADY
No moe nie cakiem. Piksele s najwygodniejsz jednostk, gdy zaczyna si prac od
gotowego projektu ukadu np. w Photoshopie. Tam pomiarw dokonuje si w pikselach,
alepniej si ich pozbdziemy. Ale bez obaw, wszystko bdzie dobrze.
Na rysunku 4.33 wida projekt ukadu z zaznaczonymi podstawowymi dugociami.
147
Rysunek 4.33. Wizualizacja wymiarw ukadu strony
Jeli zsumujemy wszystkie szerokoci, to otrzymamy liczb 1010 pikseli. Aby uzyska
procentowy udzia kadego z elementw w tej oglnej liczbie, szeroko kadego z nich
musimy podzieli przez 1010.
Ale chwileczk! Jak rozdzielimy puste obszary i czy zdefiniujemy je w postaci marginesu,
czy dopenienia? Czy cae 70 pikseli przypiszemy jednemu elementowi, czy raczej
rozdzielimy t warto midzy dwa elementy?
Trudno jednoznacznie odpowiedzie na to pytanie, poniewa decyzja czsto zaley od
potrzeb konkretnego projektu, a niejednokrotnie po prostu od osobistego gustu projektanta.
Na potrzeby tego przykadu zastosujemy samo dopenienie, na wypadek gdybymy kiedy
chcieli zdefiniowa kolory ta. Ponadto szeroko luki rozdzielimy po rwno na dwa
elementy.
Przy uyciu pikseli napisalibymy nastpujcy kod:
#contain {width: 1010px;}
#main, #extra {float: left;}
#main {width: 715px; padding: 20px 35px 20px 25px;}
#extra {width: 190px; padding: 20px 10px 20px 35px;}
CZ II: NIEZBDNIK
Przypominam jednak, e wszystkie te wartoci musimy podzieli przez 1010. W zwizku
ztym otrzymujemy nastpujcy rezultat (rysunek 4.34):
#main {width: 70.792%; padding: 1.98% 3.465% 1.98% 2.475%;}
#extra {width: 18.812%; padding: 1.98% 9.9% 1.98% 3.465%;}
148
Rysunek 4.34. Rozmieszczenie dwch gwnych kolumn ukadu

Tak, na razie zostawiamy kontener w spokoju. Uyjemy go pniej do kontrolowania sytuacji,
gdy bdziemy skada cay ukad, tzn. pomoe nam umieci rzeczy tam, gdzie ich miejsce.
Teraz spjrzmy na dugoci skadnikw elementu #main (rysunek 4.35).
Przekadamy to na kod CSS:
#main h2 {width: 575px; padding-left: 140px;}
#main .info {float: left; width: 95px;}
#main .text {float: right; width: 575px;}
Mona zauway, e nie brakuje jakiejkolwiek definicji oddzielajcej elementy .info i .main.
Nie jest to potrzebne, gdy elementy te spywaj w przeciwne strony, a wic pozostan
oddzielone, gdy uciekaj w przeciwnych kierunkach. Teraz wszystkie wartoci wyraone
w pikselach dzielimy przez 715, bo tyle wynosi szeroko elementu #main. Otrzymamy
nastpujcy wynik w CSS, ktrego ekranowy odpowiednik przedstawia rysunek 4.36.
ROZDZIA 4: UKADY
Rysunek 4.35. Wizualizacja wymiarw skadnikw dwch gwnych kolumn

#main h2 {width: 80.4196%; padding-left: 19.5804%;}
#main .info {float: left; width: 13.2867%;}
#main .text {float: right; width: 80.4196%;}
Rysunek 4.36. Rozmieszczenie elementw za pomoc wartoci procentowych
149
CZ II: NIEZBDNIK
Trzeba jeszcze kolumny wyrwna w pionie, ale do tego wystarczy tylko odpowiednie
dostosowanie grnych marginesw.
Pewnie si zastanawiasz, po co wykonywa te wszystkie obliczenia, skoro mamy bardzo
dobre piksele? Poniewa dziki wartociom procentowym moemy dowolnie zmienia
szeroko kontenera, a nasza siatka si do tego dostosuje, np.:
#contain {width: 70em;}
Albo nawet:
#contain {width: 90%; margin: 0 5%;}
Cay wiat stoi przed Tob otworem. Uwaaj tylko, eby Ci si w tym wiecie nie zrobio
zaciasno, np.:
#contain {width: 90%; min-width: 960px; margin: 0 5%;}
UKAD OPARTY NA JEDNOSTKACH EM

Technika, ktr tutaj opisz, jest uderzajco podobna do techniki pynnej siatki, z t rnic,
e wymiary s tu okrelane w jednostce em zamiast w procentach.
150
Tak jak poprzednio, prac zaczniemy od rysunku projektu z zaznaczonymi najwaniejszymi

dugociami i odpowiednim kodem CSS (rysunek 4.37).
#main {width: 715px; padding: 20px 35px 20px 25px;}
#extra {width: 190px; padding: 20px 10px 20px 35px;}
Rysunek 4.37. Wizualizacja rozmiaru elementw ukadu
ROZDZIA 4: UKADY
wietnie. Pora na arytmetyk. Tym razem wszystkie wartoci bdziemy dzieli przez
podstawowy rozmiar pisma zastosowany na stronie. Najczciej wykorzystuje si do
tego celu rozmiar pisma elementu body lub html. Gdyby przypadkowo zapomnia uy
wasnoci font-size, to w wikszoci przegldarek domylny rozmiar pisma wynosi
16pikseli i prawie nikt go nie zmienia. Jeli w takim razie masz w arkuszu zdefiniowan
regu typu body {font-size: 0.8215em;}, to podstawowy rozmiar pisma na Twojej
stronie wynosi 13 pikseli.
Po znalezieniu podstawowego rozmiaru pisma naley przez niego podzieli wszystkie
wartoci pikselowe. Uzyskane wyniki bd wyraone w jednostce em. Oto przykadowe
obliczenia dla podstawowego rozmiaru pisma wynoszcego 13 pikseli:
#contain {width: 77.692em;}
#main {width: 55em; padding: 1.538em 2.692em 1.538em 1.923em;}
#extra {width: 14.615em; padding: 1.538em 0.769em 1.538em 2.692em;}
Teraz sekcja #main:

#main h2 {width: 575px; padding-left: 140px;}
#main .info {float: left; width: 95px;}
#main .text {float: right; width: 575px;}
Dzielimy wszystko przez 13 (rysunek 4.38).

#main .info {float: left; width: 7.308em;}
#main .text {float: right; width: 44.231em;}
Rysunek 4.38. Rozmieszczenie wikszoci elementw za pomoc wartoci wyraonych w jednostkach em
151
CZ II: NIEZBDNIK
Zapewne zauwaye brak deklaracji dla elementu h2 zawierajcego tytu wpisu na stronie.
Musiaem to zrobi, gdy rozmiar tego elementu jest wikszy od domylnego, a wic nie
moemy zastosowa w jego przypadku dzielenia przez 13. Zobaczmy, jaki rozmiar zosta mu
nadany w innym miejscu arkusza stylw.
h2 {font-size: 1.6em;}
W takim razie jego rozmiar wynosi 13 razy 1,6, a wic 25,6. W zwizku z tym wartoci tego
elementu musimy podzieli przez 25,6 (rysunek 4.39).
#main h2 {width: 27.644em; padding-left: 6.731em;}
152
Rysunek 4.39. Korekta pooenia nagwka

Nie ma wtpliwoci, e obliczenia mog by czasami troch skomplikowane. Ale nagrod
za te mczarnie jest to, e gdy zmieni si podstawowy rozmiar tekstu na stronie, cay ukad
si do niego automatycznie dostosuje. Zamy, e zmienilimy deklaracj rozmiaru pisma
nastpujco:
body {font-size: 90%;}
Ta regua spowoduje powikszenie caego ukadu razem z tekstem, a wic dostosuj

si wysokoci linii, ukad si nie rozpadnie i wszystko oglnie adnie bdzie do siebie
pasowa we wszystkich przegldarkach, w ktrych mog by rne ustawienia, i u kadego
uytkownika, ktry lubi zmienia rozmiar pisma, aby mc wygodniej czyta tekst.
ROZDZIA 4: UKADY
W takim przypadku moe si jednak zdarzy, e ukad stanie si szerszy od okna
przegldarki, co wida na rysunku 4.40. To jedna z potencjalnych wad ukadw
opartych na jednostce em i nie bardzo da si j obej. Oglnie rzecz biorc,
najwaniejsz cech tego rodzaju ukadw jest to, e zachowuj poprawne wysokoci
wiersza i rozmieszczenie elementw wzgldem siebie bez wzgldu na rozmiar okna
przegldarki. Jeli nie potrzebujesz tego, to nie potrzebujesz te ukadu opartego
najednostce em.
153
Rysunek 4.40. Gdy okno przegldarki jest zbyt wskie, pojawia si poziomy pasek przewijania
W metodzie tej moliwe jest nawet sprawienie, aby wraz z tekstem zmienia si rozmiar
obrazw. Zamy, e mamy obraz o szerokoci 88 pikseli. Dzielimy t warto przez
rozmiar znajdujcego si wok niego tekstu (niech bdzie dla przykadu 16) i wynik
stosujemy jako szeroko obrazu:
<img src="btn07.png" alt="XFN Friendly" style="width: 5.5em;">
Teraz obraz ten bdzie zmienia rozmiar wraz ze zmian rozmiaru tekstu. Oczywicie nie
robi si tego z kadym obrazem, ale zastosowanie tej techniki moe by bardzo pomocne
wnagwkach sekcji lub przy innych zintegrowanych obrazach.
CZ II: NIEZBDNIK
UJEMNE MARGINESY
W UKADZIE NORMALNYM
Kady wie, e marginesy su do odsuwania od siebie elementw, ale nie kady wie, e za
pomoc ujemnych marginesw mona zmniejsza odstpy, a nawet cakiem je likwidowa.
Wemy np. prost stron chcemy, aby element znajdujcy si za elementem h2 by
umieszczony bardzo blisko jego dolnej krawdzi. Taki sposb formatowania najczciej
stosuje si do pierwszego akapitu pod tytuem artykuu. Mona to zrobi przy uyciu
selektora przylegajcego elementu siostrzanego (zobacz podrozdzia Selektory elementw
siostrzanych w rozdziale 2.). Jest te inny sposb, ktry polega na zdefiniowaniu dla
elementu h2 ujemnego marginesu (rysunek 4.41).
h2 {border-bottom: 1px solid; font-size: 150%; margin-bottom: -0.67em;}
p {margin: 1em 0;}
154
Rysunek 4.41. Zblienie nagwka do znajdujcego si za nim elementu
Moe si wydawa, e akapit nie ma marginesu, ale to tylko iluzja. W rzeczywistoci
margines akapitu pokrywa si czciowo z treci nagwka, ktrego dolna krawd
marginesu z kolei znajduje si teraz w pobliu grnej krawdzi jego tekstu. Akapit i jego
margines znajduj si pod marginesem elementu h2, a nie pod jego doln krawdzi.
T technik mona uoglni w celu umieszczania fragmentw treci w jednej linii.
Napisaem to w cudzysowie dlatego, e wyrwnanie jest tylko wizualne. Spjrzmy:
<ul class="jump">
<li class="prev"><a href="ch03.html">Salaries</a></li>
<li class="next"><a href="ch05.html">Punching the Clock</a></li>
</ul>
Chcielibymy, aby te elementy listy znalazy si w jednej linii, tak jak wida na rysunku 4.42.
Jedn z moliwoci jest zastosowanie pywania, ale jest te inna metoda.
ul.jump {list-style: none; line-height: 1; width: 25em;
margin: 0 auto; padding: 0.25em 1em; border: 1px solid;}
li.next {text-align: right; margin-top: -1em;}
ROZDZIA 4: UKADY
Rysunek 4.42. Wyrwnanie dwch elementw w jednej linii

Ujemny margines o wartoci 1em przenis element li.next do gry o dokadnie tyle,
ilepotrzeba (poniewa wysoko linii w tym elemencie zdefiniowalimy jako 1).
Kolejn ciekaw sztuczk z ujemnymi marginesami jest wysuwanie elementw poza kontenery,
w ktrych si znajduj. Zamy, e chcemy, aby nagwek sekcji znajdowa si w polu
przecitym w poowie wysokoci przez lini (rysunek 4.43). Oto potrzebny do tego kod
HTML i odpowiadajcy mu kod CSS:
.entry {border-top: 1px solid gray;}
.entry h2 {width: 80%; background: #FFF; border: 1px solid gray;
margin: -0.67em auto 0; text-align: center;}
<div class="entry">
<h2>The Web Stack</h2>
</div>
155
Rysunek 4.43. Wyrodkowanie nagwka na poziomej linii

A moe wolisz szeroko pola zmniejszy do szerokoci tekstu, zamiast stosowa jak sta
szeroko. Wwczas bdziesz potrzebowa troch wicej kodu HTML, ale tylko troch:
<div class="entry">
<h2>The Web Stack</h2>
</div>
CZ II: NIEZBDNIK
Jeszcze tylko maa poprawka kodu CSS i gotowe (rysunek 4.44):
.entry h2 {margin-top: -0.67em; text-align: center;}
.entry h2 span {background: #FFF; border: 1px solid gray; padding: 0.25em 1em;}
Rysunek 4.44. Zmniejszenie pola tekstowego do szerokoci tekstu

Piknie!
156
Wszystko bdzie w porzdku, dopki tekst nie bdzie zajmowa wicej ni jeden wiersz.
Jeli tak by si stao, zwisaby poza lini rodkow nie wycentrowaby si automatycznie
a pole zostaoby podzielone midzy dwie linijki. Problemu tego przy uyciu ujemnych
marginesw nie da si dobrze rozwiza. Mona by byo ewentualnie usun obramowanie
izachowa biae to. To byoby w miar dobre rozwizanie, chocia nie idealne.
POZYCJONOWANIE W KONTEKCIE
Do tej pory praktycznie nie zosta jeszcze poruszony temat pozycjonowania elementw. Jest
to spowodowane tym, e pozycjonowanie mam tu na myli pozycjonowanie bezwzgldne
najczciej jest bardzo zym wyborem, jeli chodzi o technik do projektowania
wielkoskalowych ukadw. Nie zawsze, ale bardzo czsto.
Element pozycjonowany bezwzgldnie jest wyjmowany z normalnego ukadu elementw na
stronie, co oznacza, e gdziekolwiek zostanie umieszczony, to znajdujce si w tym miejscu
elementy bd si zachowywa tak, jakby go tam nie byo. Dlatego czstym rezultatem
pozycjonowania bezwzgldnego jest wystpowanie pokrywajcych si fragmentw treci.
Troch szkoda, e tak jest, bo szczerze mwic, gdyby bya moliwo pozycjonowania np.
kolumn bez martwienia si, czy nie zasoni stopki, byoby nam znacznie atwiej.
Nie tramy jednak zapau pozycjonowania bezwzgldnego moemy z powodzeniem
uywa w pewnych ograniczonych kontekstach, takich jak obszar stopki czy nagwka.
Przestudiujmy poniszy kod HTML:
ROZDZIA 4: UKADY
<a href="/"><img src="logo.png" alt="ConHugeCo Inc."></a>
<ul class="nav">
<li><a href="index.html">Gwna</a></li>
<li><a href="products.html">Produkty</a></li>
<li><a href="buy.html">Kup</a></li>
<li><a href="contact.html">Kontakt</a></li>
</ul>
<form method="get" action="/search">
<fieldset>
<legend>Szukaj</legend>
<input type="text" name="terms" id="terms">
<input type="submit" value="Szukaj">
</fieldset>
</form>
</div>
Mona w nim zastosowa pozycjonowanie do trzech elementw logo, czy nawigacyjnych

oraz pola wyszukiwania.
Nie powinnimy jednak pozycjonowa wszystkich tych elementw naraz. Zobaczmy,
coby si stao, gdybymy to zrobili: nagwek div nie zawieraby adnej treci w ukadzie
normalnym, a wic miaby zerow wysoko. Moliwe te, e miaby wysoko jednej
linii tekstu, w zalenoci od tego, co konkretnie bymy pozycjonowali i jak przegldarka
potraktowaaby pozostajce biae znaki. W kadym razie nagwek byby za niski.
Zamy, e bez pozycjonowania pozostawiamy logo. W takim razie cza nawigacyjne
i wyszukiwark moemy umieci, gdzie nam si podoba. W celu realizacji tego planu
najpierw musimy zdefiniowa blok zawierajcy (tak w specyfikacji nazywa si kontekst
pozycjonowania).
.header {position: relative;}
Ta regua ustala kontekst pozycjonowania dla wszystkich elementw potomnych nagwka.

Aby np. umieci cza nawigacyjne w jego grnym prawym rogu, naley zacz od napisania
nastpujcej reguy:
.nav {position: absolute; top: 0; right: 0;}
Formularz wyszukiwarki moemy dla odmiany umieci w dolnym prawym rogu

(rezultat wida na rysunku 4.45).
.header form {position: absolute; bottom: 0; right: 0;}
Rysunek 4.45. Pozycjonowanie elementw w innym elemencie
157
CZ II: NIEZBDNIK
Oczywicie nie pokazalimy caego kodu CSS, ktry ma tu zastosowanie (np. bez niego
cza nawigacyjne znajdowayby si w nieuporzdkowanej licie), ale to nie przeszkadza
w zrozumieniu oglnej idei. Za pomoc pozycjonowania elementy w nagwku moemy
umieszcza w dowolnym miejscu. Wolisz, aby wyszukiwarka bya na grze, a cza
nawigacyjne na dole? Zastp wasno top wasnoci bottom w regule czy i zrb
odwrotnie w regule formularza i gotowe (rysunek 4.46).
.nav {position: absolute; bottom: 0; right: 0;}
.header form {position: absolute; top: 0; right: 0;}
Rysunek 4.46. Zamiana miejscami pozycjonowanych elementw
158
Oczywicie trzeba uwaa, aby elementy si nam nie zaczy pokrywa. Moe si tak
zdarzy, gdy np. zwikszymy liczb czy nawigacyjnych o tyle, e bd zajmowa trzy
linijki. Wwczas mog naj na pole wyszukiwarki. To midzy innymi z tego powodu
dotworzenia ukadw wykorzystuje si elementy pywajce zamiast pozycjonowanych
elementy pywajce z natury nie mog na siebie nachodzi. Jeli jednak bdziemy korzysta
z tej techniki z rozwag, to pozycjonowanie bezwzgldne moe nam bardzo uatwi rozmieszczenie
elementw w ograniczonych kontenerach, takich jak np. nagwek czy stopka.
WYJCIE POZA KONTENER

Interesujc cech pozycjonowania bezwzgldnego jest moliwo umieszczania elementw
poza elementem, ktry odgrywa rol ich kontenera (kontekstu pozycjonowania). To moe
by o wiele przydatniejsze, ni si czasami wydaje.
Mona np. wzi odnoniki nawigacyjne, ktre w strukturze dokumentu znajduj si
wnagwku div, i przenie je wizualnie pod ten nagwek. Przeanalizuj poniszy
fragment kodu (wicej szczegw na ten temat znajdziesz w poprzednim podrozdziale):
<a href="/"><img src="logo.png" alt="ConHugeCo Inc."></a>
<ul class="nav">...</ul>
<form method="get" action="/search">...</form>
</div>
Powyszy formularz i list czy nawigacyjnych (rysunek 4.47) sformatujemy za pomoc

nastpujcych arkuszy stylw (pokazane s tylko najwaniejsze style w tym momencie,
awic pominem ustawienia pisma, koloru itp.):
.header {position: relative; margin-bottom: 1.5em;}
.nav {position: absolute; top: 100%; right: 0;}
.header form {position: absolute; top: 0; right: 0;}
ROZDZIA 4: UKADY
Rysunek 4.47. Umieszczenie czy poza nagwkiem

Zwr uwag, e teraz cza znajduj si pod doln krawdzi nagwka div. Aby
pozycjonowane cza nie pokryy si z treci wystpujc za nagwkiem, zdefiniowalimy
dla nagwka odpowiednio wysoki margines dolny. Teraz ryzyko najcia na siebie pola
wyszukiwania (nadal w obrbie nagwka) i czy nawigacyjnych jest znacznie mniejsze.
Jeli uznasz, e cza s za blisko nagwka, moesz zwikszy warto wasnoci top. Jeli
natomiast chcesz je umieci w odlegoci np. dokadnie siedmiu pikseli od dolnej krawdzi
nagwka, moesz zdefiniowa dla nagwka wysoko na sztywno, a nastpnie obliczy, jaka
warto procentowa bdzie odpowiadaa siedmiu pikselom przesunicia. Mona te po prostu
zdefiniowa siedmiopikselowy margines grny dla elementu nawigacji (rysunek 4.48).
.nav {position: absolute; top: 100%; right: 0;
margin-top: 7px;}
159
Rysunek 4.48. Przesunicie czy dalej, w d, za pomoc grnego marginesu

Dziki temu, e wasnoci top i margin-top inaczej oddziauj na ukad elementw na
stronie, mona ich wartoci oblicza jak w rwnaniu matematycznym. To znaczy grna
krawd obszaru treci czy nawigacyjnych znajduje si w odlegoci 100%+7 pikseli pod
grn krawdzi nagwka (gdzie 100% oznacza w tym przypadku cakowit wysoko
nagwka).
Kolejnym ciekawym sposobem wykorzystania moliwoci umieszczania treci poza blokiem
zawierajcym jest wyrzucenie daty i godziny pojawienia si wpisu na blogu gdzie na bok.
Spjrzmy na struktur poniszego urywka kodu HTML:
<div class="entry">
<h2>Positioning in Context</h2>
<hr>
<ul class="datetime">
<li>Tuesday, 18 May 2010</li>
<li>15:26:37 -0400</li>
</ul>
</div>
CZ II: NIEZBDNIK
Mamy tu tre wpisu oraz dat i godzin publikacji. Mogoby by tego wicej, np. jeszcze
jakie kategorie, znaczniki itp., ale pozostaniemy przy tych dwch porcjach danych, aby
byo prociej. Dziki pozycjonowaniu bezwzgldnemu moemy dat i godzin umieci
wdowolnym miejscu poza obszarem wpisu.
Zaczniemy jak zwykle od utworzenia bloku zawierajcego i tym samym otwarcia
przestrzeni dla informacji o dacie i godzinie:
.entry {position: relative; margin-left: 10em;}
Nastpnie bierzemy element ul i pozycjonujemy go poza lew krawdzi elementu div

wpisu (rysunek 4.49).
. datetime {position: absolute; width: 9em; left: -10em; top: 0;
margin: 0; padding: 0;}
. datetime li {list-style: none; font-style: italic;}
160
Rysunek 4.49. Pozycjonowanie danych o wpisie po jego jednej stronie

Wasno width ma za zadanie odsun praw krawd treci od lewej krawdzi rzeczywistej
treci. W ten sam sposb przesunlimy te dat i godzin w lewo. Oczywicie rwnie
dobrze moemy przenie te informacje na praw stron (rysunek 4.50):
.entry {position: relative; margin-right: 10em;}
. datetime {position: absolute; width: 9em; right: -10em; top: 0;
margin: 0; padding: 0;}
Dziki pozycjonowaniu moemy umieszcza elementy, gdzie tylko nam si spodoba.

Maszwielk moc, z ktrej musisz korzysta rozsdnie.
ROZDZIA 4: UKADY
Rysunek 4.50. Przeniesienie danych o wpisie z lewej na praw stron
POZYCJONOWANIE NA SZTYWNO
NAGWKW I STOPEK
Pamitasz jeszcze ramki? Przy ich uyciu mona byo umieci na grze lub na dole strony
pasek nawigacyjny albo stopk i mie pewno, e nigdy si stamtd nie rusz. Mimo i
sam pomys nie by zy, moliwo t bardzo czsto wykorzystywano do niewaciwych
celw. Teraz przy uyciu CSS mona nie tylko imitowa ramki, lecz rwnie tworzy obiekty
podobne do ramek, ktre jednak w istocie nimi nie s. Kluczem do tego jest pozycjonowanie
stae (ang. fixed positioning).
Zamy, e chcemy, aby nagwek zawsze znajdowa si na samej grze, a tre moga by
przewijana pod nim (rysunek 4.51). atwo to zrobi:
.header {position: fixed; top: 0; left: 0; width: 100%; z-index: 1;}
Ta regua przygwodzia nagwek pod grn krawdzi okna przegldarki, a wasno

z-index sprawia, e znajduje si on nad niepozycjonowan treci (bez tej wasnoci
o tym, ktry element znajduje si na wierzchu, decyduje ich kolejno w kodzie rdowym).
Z technicznego punktu widzenia blokiem zawierajcym nagwka jest okno przegldarki.
Moesz przewija stron w nieskoczono, a on i tak pozostanie na swoim miejscu.
Jeli na tym skoczysz prac, to na pewno bdziesz mie jeden problem grna cz
treci strony bdzie schowana pod nagwkiem i nie bdzie mona jej przeczyta. Trzeba j
przesun nieco w d, aby znalaza si pod nagwkiem.
161
CZ II: NIEZBDNIK
Rysunek 4.51. Nagwek o staym pooeniu
162
Jednym ze sposobw na osignicie tego celu jest dodanie dopenienia do elementu body
o wysokoci nie mniejszej ni wysoko nagwka (rysunek 4.52).
body {padding-top: 100px;}
Rysunek 4.52. Zepchnicie gwnej treci w d, aby nie bya zasaniana przez nagwek
ROZDZIA 4: UKADY
Z tym zwizany jest jeszcze inny problem. Klawisze Page Up i Page Down przewijaj
tre strony o jedn wysoko okna przegldarki. W tej wartoci nie jest uwzgldniony
pozycjonowany na stae nagwek. Jeli zatem kto uyje tych klawiszy, to przy kadym
przewiniciu straci kilka linijek tekstu.
Niestety, nie da si w atwy sposb nakaza przegldarce, aby przewijaa troch mniej. Mona
natomiast zmieni definicj okna, w ktrym jest wywietlana tre (rysunek 4.53). W tym
celu trzeba zastosowa pozycjonowanie stae do elementu div zawierajcego ca tre strony.
Wwczas naley usun dopenienie z elementu body i zastosowa nastpujc regu CSS:
.contain {position: fixed; top: 100px; bottom: 0; width: 100%;}
163
Rysunek 4.53. Pozycjonowanie stae nagwka i treci gwnej

Teraz nagwek nigdy nie najdzie na tre, a klawisze Page Up i Page Down zawsze bd
dziaa zgodnie z oczekiwaniami. Ponadto istnieje moliwo, e dla treci zostanie
wywietlony pasek przewijania, tak samo jak w przypadku uywania ramek. Technik
rozmieszczania elementw na stronie jest bardzo duo, a kada z nich ma swoje wady
izalety. Dlatego zanim zdecydujesz si na ktrkolwiek, przemyl swoj decyzj bardzo
starannie.
5
ROZDZIA
PODRCZNIK CSS
EFEKTY
FAJNIE JEST MIE moliwo zmiany kolorw

ikrojw pisma, ale kady chciaby czego wicej
troch fajerwerkw, byskotek i wiecideek.
Moe umieszczanie tego wszystkiego razem
pod jedn nazw efekty jest naduyciem, ale
nie udao mi si znale nic lepszego. Czytajc

ten rozdzia, nauczysz si zaokrglania rogw,
wychodzenia poza pola elementw, stosowania
nieregularnych ksztatw, wsuwania obrazw
do zakadek, tworzenia paralaksy i wiele wicej.
CZ II: NIEZBDNIK
COMPLEXSPIRAL
Jest to jeden ze starszych, ale i (moim zdaniem) ciekawszych efektw. Sztuczka ta nosi nazw
complexspiral demo, poniewa tak j nazwaem po jej opracowaniu w 2001 roku. Nawet
teraz, gdy mona j z powodzeniem zastpi przezroczystymi obrazami PNG i kolorami
RGBA, moja technika wci ma swoje zastosowania.
Do jej realizacji potrzeba przynajmniej dwch obrazw (rysunek 5.1).
166
Rysunek 5.1. Dwa obrazy potrzebne do realizacji efektu

Jeden z tych obrazw ustawimy w tle elementu body, a drugi w tle elementu div
zawierajcego wikszo treci strony (rysunek 5.2). Oto potrzebne do tego kod CSS
istruktura kodu HTML:
body {background: white url(shell.jpg) top left no-repeat fixed;}
div#main {background: white url(shell-rippled.jpg) top left no-repeat fixed;}
<body>
<div id="main">
(...tre...)
</div>
</body>
W tej technice najwaniejsz rol odgrywa uycie sowa kluczowego fixed. Oba obrazy
ta zostay umieszczone w lewym grnym rogu obszaru widoku (w tym przypadku okna
przegldarki) i s tam unieruchomione na stae. Nie mog si porusza, nawet gdy tre
dokumentu bdzie przewijana. W zwizku z tym le w jednym miejscu jeden na drugim.
ROZDZIA 5: EFEKTY
Rysunek 5.2. Ostateczny efekt

Aby zrozumie, co to dokadnie znaczy, zobacz prostszy przykad, w ktrym uyte zostay
dwa obrazy o rnych rozmiarach w lewym grnym rogu obszaru widoku (rysunek 5.3).
html, body {background: transparent top left no-repeat fixed;}
html {background-image: url(red-box.gif);}
body {background-image: url(green-box.gif);}
Rysunek 5.3. Ilustracja dwch obrazw przypitych do obszaru widoku

Zauwa, e obrazy nadal s w lewym grnym rogu okna, mimo e tre strony zostaa
przewinita prawie do samego dou. Jest to spowodowane tym, e przypilimy je
doobszaru widoku za pomoc sowa kluczowego fixed i nie mog si rusza.
167
CZ II: NIEZBDNIK
Na tym polega efekt complexspiral demo. Potrzebne s do tego dwa obrazy o jednakowym
rozmiarze i uzupeniajcej si treci. Jeden z tych obrazw przesania cz drugiego w miejscu,
w ktrym nachodz na siebie obrazy, w ktrych tle si znajduj. Dlatego wanie w tle elementu
div wida przymiony obraz muszli, a w tle elementu body normalny. Obraz w tle elementu
div nie jest wyrwnany z lewym grnym rogiem tego elementu, lecz z lewym grnym rogiem
elementu body. Jak wida na rysunku 5.4, widoczne s tylko te jego czci, ktre krzyuj si
z treci elementu div.
168
Rysunek 5.4. Efekt przymionego obrazu muszli po przewiniciu czci treci strony
Teraz zamy, e chcemy uzyska jeszcze trzeci rodzaj efektu dla nagwkw w treci.
Dotego potrzebny jest jeszcze tylko jeden obraz (rysunek 5.5).
Rysunek 5.5. Trzeci obraz do dodania
ROZDZIA 5: EFEKTY
Gdy dodamy go do dokumentu za pomoc poniszej reguy, wszystkie nagwki h2 bd
wyglda jak na rysunku 5.6:
div#main h2 {background: url(shell-traced.jpg) top left no-repeat;}
Rysunek 5.6. Efekt dodania trzeciego obrazu

W technice tej mona take stosowa powtarzalne wzory ta. Rwnie atwe byoby naoenie
na siebie powtarzalnych obrazw ta, jak wida na rysunku 5.7.
Rysunek 5.7. Nakadanie na siebie powtarzalnych wzorw
169
CZ II: NIEZBDNIK
Przy okazji warto wspomnie, e w swojej pierwotnej wersji technika complexspiral
demo suya do uzyskiwania efektu przezroczystoci ta. W 2001 roku bya ona wielkim
osigniciem, gdy mao ktra przegldarka obsugiwaa format PNG z kanaem alfa, a ju
adna nie obsugiwaa kolorw z tym kanaem, takich jak np. RGBA. Teraz, gdy format PNG
jest ju szeroko obsugiwany, to zastosowanie opisywanej techniki stracio sens (wicej na jej
temat mona przeczyta na stronie http://meyerweb.com/eric/css/edge/complexspiral/demo.
html). Natomiast jej wykorzystanie opisane w tym podrozdziale jest jak najbardziej aktualne.
MENU PODRCZNE W CSS

Efekt, ktry opisuj w tym rozdziale, umoliwia utworzenie przy uyciu CSS menu
rozwijanych (szczegy znajdziesz w nastpnym podrozdziale). W uproszczonej wersji
technika ta moe suy do wywietlania informacji po najechaniu kursorem na okrelony
element i chowania ich po usuniciu kursora znad tego elementu bez uycia nawet jednego
wiersza kodu JavaScript.
Zamy, e chcemy, aby najechanie kursorem na odnonik powodowao wywietlenie
krtkiej informacji o tym elemencie, ale nie chcemy do tego celu uywa standardowych
chmurek, poniewa przegldarki rnie je wywietlaj, a poza tym nie mona ich (jeszcze)
formatowa. Struktura naszego kodu HTML wyglda tak:
170
<ul class="toc">
<li><a href="1.html">Rozdzia 1 <i>W ktrym pojawia si smok</i></a></li>
<li><a href="2.html">Rozdzia 2 <i>W ktrym pojawia si rycerz</i></a></li>
<li><a href="3.html">Rozdzia 3 <i>W ktrym ksiniczka przeywa rozczarowanie</
i></a></li>
</ul>
Chwileczk, czy ja dobrze widz element i? Przecie to element prezentacyjny. Tak, bo

przecie w istocie chodzi tu o prezentacj. Rwnie dobrze zamiast niego mona by uy
elementu span, ale i ma krtsz nazw, a poza tym jeli kod CSS z jakiego powodu nie
zostanie zastosowany, to tekst znajdujcy si w tym elemencie najprawdopodobniej
zostanie napisany kursyw. Moim zdaniem jest to akceptowalne odstpstwo od reguy.
Tworzenie chmurek zaczniemy od wyczenia domylnych stylw elementu i, a nastpnie
sprawimy, e bd one wywietlane po najechaniu kursorem na ich element nadrzdny
(rysunek 5.8).
ul.toc li {position: relative;}
ul.toc li a i {display: none;}
ul.toc li a:hover i {display: block; width: 6em;
position: absolute; top: 0; left: 100%;
margin: -1em 0 0 1em; padding: 1em;
background: #CDE; border: 1px solid gray;}
ROZDZIA 5: EFEKTY
Rysunek 5.8. Chmurka obok odnonikw

Ta-da! Mae wyskakujce chmurki. Ich pooenie zostao ustalone wzgldem zawierajcych
je elementw li dziki uyciu deklaracji position: relative w pierwszym wierszu
pokazanego kodu CSS. Jeli wolisz je pozycjonowa wzgldem caego zbioru czy,
wystarczy, e przeniesiesz deklaracj pozycjonowania wzgldnego na element ul
iodpowiednio dostosujesz poszczeglne wartoci przesunicia. Na przykad chmurki
mona wywietli pod ostatnim odnonikiem na licie, jak na rysunku 5.9.
ul.toc {position: relative;}
ul.toc li a i {display: none;}
ul.toc li a:hover i {display: block; width: 6em;
position: absolute; top: 100%; right: 0;
margin: 1em 0 0; padding: 1em;
background: #CDE; border: 1px solid gray;}
Rysunek 5.9. Wyskakujce okienko pod odnonikami

Technik t mona rozszerzy o dowoln liczb poziomw zagniedonych menu, ale o tym
bdzie mowa w nastpnym podrozdziale.
171
CZ II: NIEZBDNIK
MENU CSS
Jeli chcesz, to technik opisan w poprzednim podrozdziale mona wykorzysta do
tworzenia wielopoziomowych menu rozwijanych (osobicie nie cierpi menu rozwijanych,
ale nie znosz te czekolady, kawy, zbyt wysokiego poziomu dwutlenku wgla w atmosferze
i prawie wszystkich alkoholi, a wic co ja tam wiem). Jedn z wielkich zalet tego przykadu
jest to, e doskonale pokazuje, jak bardzo myl si Ci, ktrzy myl, e efekt :hover jest
zarezerwowany wycznie dla hiperczy.
Oto podstawowa struktura HTML (z bardzo uproszczonymi adresami URL dla zachowania
przejrzystoci rysunek 5.10):
172
<ul class="menu">
<li class="sub"><a href="/s1/">Sekcja 1</a>
<ul>
<li><a href="/s1/ss1/">Podsekcja 1</a></li>
</ul>
</li>
<li class="sub"><a href="/s2/">Sekcja 2</a>
<ul>
</ul>
</li>
(itd)
</ul>
Rysunek 5.10. Struktura poziomw menu

Na razie nie wida nic niezwykego. Teraz ukrywamy wszystkie podmenu.
li.sub ul {display: none;}
ROZDZIA 5: EFEKTY
Zrobione. Oczywicie te podmenu bdziemy musieli w odpowiednim momencie wywoa
zpowrotem. Najprostszym i najmniej efektownym wizualnie sposobem na to jest
nastpujca regua:
li.sub:hover > ul {display: block;}
To spowoduje, e podmenu pojawi si w swoim normalnym miejscu i zepchnie w d

wszystko, co znajduje si za nim. Ale wystarczy zastosowa pozycjonowanie i podmenu
bd piknie wywietlane obok swoich elementw nadrzdnych (jak wida na rysunku
5.11), nie naruszajc w aden sposb ukadu pozostaych elementw.
li.sub {position: relative;}
li.sub:hover > ul {display: block; position: absolute; top: 0; left: 100%;
margin: 0; background: white;}
Rysunek 5.11. Menu rozwijane

W ten sposb mona utworzy dowoln liczb poziomw menu, nawet i siedemnacie, jeli
chcesz. Jeeli masz takie pragnienie, to wstyd si, ale i tak nic nie stoi na przeszkodzie, eby
je zrealizowa.
Jeli chodzi o pozycjonowanie menu, to ogranicza Ci tylko dwuwymiarowa natura paszczyzny
strony i Twoja wyobrania. Elementy najwyszego poziomu moesz rozmieci wzdu grnej
krawdzi okna, podmenu pierwszego poziomu wywietla pod nimi (rysunek 5.12), a dalsze
poziomy rozwija w bok. Wszystko to jest kwesti napisania odpowiedniego kodu CSS, np.:
ul.menu
ul.menu
ul.menu
ul.menu
ul.menu
> li {display: inline; position: relative;}

ul {display: none;}
li.sub:hover > ul {display: block; position: absolute; white-space: nowrap;}
> li.sub:hover > ul {top: 100%; left: 0;}
ul li.sub:hover > ul {top: 0; left: 100%;}
Rysunek 5.12. Menu rozwijane

Tylko menu najwyszego poziomu rozwijaj si w d. Pozostae bd rozwijane w bok.
173
CZ II: NIEZBDNIK
NIEREGULARNE KSZTATY
Czasami potrzebujemy na naszych stronach elementw o nieregularnych ksztatach. Mona
to atwo zrobi, stosujc technik (o angielskiej nazwie boxpunch) polegajc na wizualnym
likwidowaniu fragmentw pl elementw. Dziaa ona tylko w elementach o jednolitym
kolorze z obrazami ustawionymi w tle na stae, ale to pozostawia nam i tak due pole
dodziaania.
Najatwiej jest uzyska nieregularny ksztat poprzez umieszczenie w rogu jednego elementu
innego elementu (rysunek 5.13) i ustawienie dla niego ta takiego samego jak to treci
otaczajcej.
body {background: #C0FFEE;}
div.main {background: #BAD;}
.punch {background: #C0FFEE; font-size: 500%; float: left; margin: 0 0.1em 0.1em 0;
padding: 0.1em;}
<div class="main">
<h1 class="punch">Wow.</h1>
(tre)
</div>
174
Rysunek 5.13. Wydzielony fragment tekstu

W bardziej skomplikowanym wariancie tej techniki ustawia si dowolne to dodanego
elementu i oddziela si go od reszty pola za pomoc grubego obramowania, jak na
rysunku 5.14.
div.main {background: #BAD;}
.punch {background: #987; font-size: 500%;
float: left; margin: 0 0.1em 0.1em 0; padding: 0.1em;
border: 0.2em solid #C0FFEE; border-width: 0 0.2em 0.2em 0;}
ROZDZIA 5: EFEKTY
Rysunek 5.14. Wydzielenie elementu za pomoc obramowania

Wszystko jest w porzdku, dopki gwny element nie ma obramowania. Jeli je dodamy,
jak na rysunku 5.15, otoczy ono take wydzielony element, ktry przestanie wyglda,
jakby by wydzielony.
div.main {background: #BAD; border: 3px solid black;}
.punch {background: #C0FFEE; font-size: 500%;
float: left; margin: 0 0.1em 0.1em 0; padding: 0.1em;}
175
Rysunek 5.15. Efekt dodania obramowania do kontenera

Nic si nie stao. Mona temu zaradzi. W tym celu musimy tylko zdefiniowa dwie
krawdzie obramowania wydzielonego elementu i niewielki ujemny margines
(rysunek5.16).
.punch {background: #C0FFEE; font-size: 500%;
float: left; margin: -3px 0.1em 0.1em 3px; padding: 0.1em;
border: 3px solid black; border-width: 0 3px 3px 0;}
CZ II: NIEZBDNIK
Rysunek 5.16. Wydzielenie elementu z obramowaniem

Ujemne marginesy przesuny wydzielone pole do gry i w lewo, dziki czemu zasonio
ono obramowanie kontenera div w tym miejscu. Dziki ustawieniu prawej i dolnej
krawdzi obramowania elementu wydzielonego stworzyem iluzj nieregularnego ksztatu.
Pole znowu jest wydzielone!
Oczywicie zastosowania tej techniki nie ograniczaj si tylko do rogw elementw.
Otokod CSS tworzcy wcity cytat blokowy (rysunek 5.17):
176
blockquote {font-size: 150%; font-weight: bold; background: #C0FFEE; float: right;

width: 40%;
padding: 0.25em 5%; margin-right: -3px;
border: 3px solid black; border-right: 0;}
Rysunek 5.17. Wcity cytat blokowy
ROZDZIA 5: EFEKTY
ZAOKRGLANIE ROGW
PRZED NASTANIEM CSS 3
Stosujc kombinacj opisanej powyej techniki boxpunch i sprajtw CSS (opisanych
dalej w tym rozdziale), mona uzyska efekt zaokrglonych rogw, do ktrego realizacji
potrzebny jest tylko jeden obraz i cztery dodatkowe elementy. Zalet tej metody jest to,
ebardzo dobrze wsppracuje z przegldarkami nieliczne problemy maj z ni starsze
przegldarki, takie jak IE 6 czy Safari 2. Wad natomiast jest potrzeba uycia dodatkowych
elementw i obrazu.
Efekt jej zastosowania wida na rysunku 5.18.
Rysunek 5.18. Efekt zaokrglania rogw

Prac naley zacz od odpowiedniego oznaczenia elementu, ktrego rogi maj zosta
zaokrglone, oraz dodania do niego odpowiednich elementw pomocniczych.
<div class="rounded">
(tre)
<b class="c tl"></b>
<b class="c tr"></b>
<b class="c bl"></b>
<b class="c br"></b>
</div>
Moe to wydaje si dziwne, ale rzeczywicie do realizacji naszego celu moemy uy

elementu b. Zastosowanie elementu prezentacyjnego jest uzasadnione tym, e efekt, o ktry
nam chodzi, jest rwnie prezentacyjny. Rwnie dobrze mona by uy elementw span
i div, ale tak naprawd nie ma to adnego znaczenia. Nazwa b jest krtsza, a poza tym
stanowi strukturalne oznaczenie, e ten fragment kodu suy wycznie celom upikszania
(oczywicie w idealnych warunkach, opisanych w nastpnym podrozdziale, dodatek
jakichkolwiek elementw pomocniczych byby zbdny).
Klas rounded, dodajc pewne reguy CSS niezbdne do uzyskania efektu, naley przypisa
kademu elementowi, ktrego rogi maj zosta zaokrglone. Elementom b przypisujemy po
dwie klasy. Klas c, oznaczajc rg (od ang. corner), przypisujemy kademu z nich, a klasy
tl, tr, bl i br oznaczaj odpowiednio grny lewy, grny prawy, dolny lewy i dolny prawy.
177
CZ II: NIEZBDNIK
Przejdmy do kodu CSS. Najpierw zdefiniujemy to, aby widzie, co dokadnie si dzieje
nastronie:
b.c {background: red;} /* regua tymczasowa */
Dziki temu bdziemy dobrze widzie miejsce zaokrgle rogw. Teraz umiecimy
wodpowiednim miejscu naroniki (rysunek 5.19):
b.c {background: red;} /* regua tymczasowa */
.rounded {position: relative; border: 2px solid black; background: white;}
b.c {position: absolute; height: 20px; width: 20px;}
b.tl {top: 0; left: 0;}
b.tr {top: 0; right: 0;}
b.bl {bottom: 0; left: 0;}
b.br {bottom: 0; right: 0;}
178
Rysunek 5.19. Umieszczenie elementw b w naronikach
Jak wida, kady element b znajduje si w odpowiednim naroniku i ma format pola
o wymiarach 20 na 20 pikseli. To ukazuje nam pewien problem elementy znajduj si
wewntrz swoich naronikw, a nam potrzeba, aby ich to przesaniao obramowanie
elementu div, jak na rysunku 5.20:
b.tl
b.tr
b.bl
b.br
{top: 0;
{top: 0;
{bottom:
{bottom:
left: 0; margin: -2px 0 0 2px;}

right: 0; margin: -2px 2px 0 0;}
0; left: 0; margin: 0 0 2px 2px;}
0; right: 0; margin: 0 2px 2px 0;}
Rysunek 5.20. Nowe rozmieszczenie naronikw (powikszenie)
ROZDZIA 5: EFEKTY
Te dodatkowe deklaracje przesun elementy b na zewntrz, na odlego wystarczajc do
przesonicia obramowania elementu div. Gdyby element ten mia grubsze obramowanie,
trzeba by ustawi oczywicie wiksze wartoci przesunicia.
Teraz potrzebujemy jeszcze tylko obrazu do wstawienia w naroniki. W poprzednim zdaniu
nie ma bdu potrzebny nam bdzie tylko jeden obraz, ktry wida na rysunku 5.21.
Rysunek 5.21. Cay obraz wykorzystany do tworzenia zaokrglonych rogw

Zaoszczdz Ci kopotu z liczeniem i podpowiem, e obrazek ten ma wymiary 4040 pikseli.
Jest to obraz w formacie PNG z przezroczystym, okrgym obszarem otoczonym
piercieniem, ktrego zewntrzna strona jest wypeniona kolorem ta reszty strony.
Nazwaem go corners.png, aby nie zapomnie, do czego suy.
W zwizku z tym zmieniamy nasz kod CSS nastpujco:
b.c {position: absolute; height: 20px; width: 20px;
background: url(corners.png) no-repeat;}
To wszystko, co napiszemy w tym miejscu. Kolorowi ta zostanie przypisana warto domylna

transparent, wasnoci background-attachment warto scroll, a pozycji warto 0 0.
Jest to te dobry moment na usunicie czerwonego ta, chocia nie musimy tego robi,
gdy zostanie ono nadpisane przez domylne ustawienie transparent.
Teraz ustawiamy odpowiednie wyrwnanie obrazu zaokrglania rogw w tle elementw b
(rysunek 5.22):
b.tl {top: 0; left: 0; margin: -2px 0 0 2px;
background-position: top left;}
b.tr {top: 0; right: 0; margin: -2px 2px 0 0;
background-position: top right;}
b.bl {bottom: 0; left: 0; margin: 0 0 2px 2px;
background-position: bottom left;}
b.br {bottom: 0; right: 0; margin: 0 2px 2px 0;
background-position: bottom right;}
179
CZ II: NIEZBDNIK
Rysunek 5.22. Zaokrglenie rogw za pomoc obrazu dodanego do elementw pomocniczych

Wielk zalet tej techniki jest to, e jej zastosowanie nie ogranicza si tylko do zaokrglania
naronikw. Rwnie atwo mona przy jej uyciu tworzy wklnite czy cite rogi i wszystkie
inne tego rodzaju efekty, jakie nam przyjd do gowy (rysunek 5.23). Trzeba tylko zmieni
obraz w naronikach na inny i oczywicie w razie potrzeby dostosowa rozmiar elementw b.
180
Rysunek 5.23. Inne rodzaje naronikw

Co wicej, nie ma wcale obowizku formatowania wszystkich czterech rogw. Jeli potrzebujesz
tylko dwch z nich, to uyj tylko dwch odpowiednich elementw b. Na przykad w stopce,
nadole strony, moglibymy zaokrgli tylko nastpujce dwa naroniki:
<div class="rounded footer">
(tre)
<b class="c tl"></b>
<b class="c tr"></b>
</div>
aden problem!
ROZDZIA 5: EFEKTY
Zapewne zauwaye, e elementy b umieciem za treci elementu, ktrego rogi
s zaokrglane. S one pozycjonowane bezwzgldnie, a wic tak naprawd nie ma
znaczenia, gdzie je zapiszemy w tym elemencie. Mog by na pocztku, na kocu, a nawet
przemieszane. Moesz je umieci w miejscu, ktre bdzie dla Ciebie najwygodniejsze.
Najwiksz wad przedstawionej metody jest to, e jeli zmieni si to strony, trzeba
utworzy nowy obraz reprezentujcy naroniki. Co gorsza, jeli na rnych stronach
witryny zastosowane s rne ta, dla kadego z nich trzeba utworzy osobny obraz
inapisa osobny kod CSS. Jeszcze gorzej wyglda sytuacja wwczas, gdy w tle otaczajcym
zaokrglony naronik uyje si niejednolitego koloru, jak np. gradientu czy powtarzalnego
wzoru. Wwczas naroniki nie bd si zgadzay z tym tem. Najlepsze, co moemy w takim
przypadku zrobi, to stara si zminimalizowa liczb takich wypadkw.
I jeszcze jedna uwaga natury historycznej. Technika ta dziaa w przegldarce IE 6 tylko
wtedy, gdy dla elementu div zdefiniuje si bezporednio szeroko. Mona do tego uy
dowolnej jednostki miary, ale jeli pozostawi si domyln warto auto, naroniki nie
zostan wywietlone tam, gdzie powinny by. Jest to drobna usterka, ale warto o niej
wiedzie. Przegldarka IE 6 nie obsuguje te przezroczystoci obrazw PNG, a wic trzeba
je zastpi obrazami w formacie GIF albo cakiem ukry ten efekt przed t przegldark.
Uytkownikom nic si przecie zego nie stanie, jeli nie obejrz zaokrglonych naronikw.
ZAOKRGLANIE ROGW PRZY UYCIU CSS 3

Uzyskanie zaokrglenia rogw przy uyciu CSS 3 nie moe by ju chyba atwiejsze,
przynajmniej gdy zrozumie si sposb skalowania krzywizn. Zalet tej techniki jest to,
e do jej realizacji uywa si tylko regu CSS, bez koniecznoci stosowania dodatkowych
elementw HTML, oraz nie ma wymogu stosowania jednolitego koloru w tle wok
zaokrglanego elementu. Wad natomiast jest ograniczona obsuga gdy pisaem te sowa,
techniki tej nie obsugiwaa adna wersja przegldarki Internet Explorer, chocia obiecano
to zmieni w IE 9 i konieczno stosowania specjalnych prefiksw.
Najpierw spjrzmy na rysunek 5.22 w poprzednim podrozdziale. Do uzyskania tego efektu
przy uyciu CSS 3 potrzebowalibymy tylko poniszej reguy:
.rounded {background: #FFF; border: 2px solid #000;
border-radius: 20px;}
To wszystko! Pomijajc fakt, e ten kod nie zadziaa w prawie adnej przegldarce, poniewa
wasno border-radius nie zostaa jeszcze ukoczona, to wszystko, czego nam potrzeba.
Aby zmusi t regu do dziaania w przegldarkach, ktre j obsuguj, tzn. Safari, Chrome
i Firefox, trzeba doda prefiks identyfikujcy producenta a nawet dwa prefiksy (rysunek 5.24).
Naley te zostawi wersj bez prefiksu, ktra zacznie dziaa, gdy wasno zostanie ju
oficjalnie zaimplementowana w przegldarkach.
.rounded {background: #FFF; border: 2px solid #000;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;}
181
CZ II: NIEZBDNIK
Rysunek 5.24. Bardzo atwo zaokrglone rogi

Czy gdy przegldarka IE zacznie obsugiwa t technik zaokrglania rogw, to bdzie
trzeba pisa -ms-border-radius? Moliwe. To zaley jednak od tego, kiedy wasno
border-radius zostanie uznana za ukoczon i stabiln, oraz od tego, kiedy zostanie
zaimplementowana jej obsuga w tej przegldarce.
Zalet tej metody jest to, e nie zmusza nas do wygupiania si z dodatkowymi elementami
HTML i kodem CSS, ktre byy potrzebne w poprzednio zaprezentowanej metodzie.
Ponadto dziki temu, e zaokrglamy rzeczywiste rogi elementu, w miejscach zaokrgle
wywietlane jest znajdujce si pod nimi to i nie ma znaczenia, czy jest to jednolity kolor,
zwielokrotniony obraz, czy gradient.
Ksztat krzywizny mona zmienia przy uyciu dwch wartoci (rysunek 5.25). Na przykad:
182
.rounded { background: #FFF; border: 2px solid #000;

-moz-border-radius: 20px / 60px;
border-radius: 20px / 60px;}
Rysunek 5.25. Rogi owalne

Teraz naroniki maj ksztat nie wycinka okrgu, tylko fragmentu elipsy. Taki efekt uzyskuje
si poprzez zastosowanie dwch wartoci oddzielonych ukonikiem. Ukonik ten jest tu
bardzo wany gdybymy go opucili, ustawilibymy rne rozmiary dla naronikw, ale
wszystkie miayby ksztat uku okrgu (nie wspominam nic o -webkit-, poniewa na razie
przegldarki WebKit nie obsuguj tej techniki).
Zobaczmy, co si stanie, gdy usuniemy ukoniki:
-moz-border-radius: 20px 60px;
border-radius: 20px 60px;}
ROZDZIA 5: EFEKTY
Wynik tego dziaania wida na rysunku 5.26.
Rysunek 5.26. Naroniki o rnym promieniu krzywizny

Istniej te wasnoci pozwalajce ustawi wasnoci kadego naronika z osobna:
border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
oraz border-top-left-radius. Kada z nich przyjmuje jedn lub dwie wartoci. Uycie
jednej powoduje utworzenie zaokrglenia w ksztacie uku okrgu, a dwch powstanie
ksztatu eliptycznego. Ukonika uywa si tylko w wartoci wasnoci border-radius i suy
on do odrnienia jednego rodzaju efektu (zaokrglone rogi o rnych rozmiarach) od drugiego
(rogi o takich samych rozmiarach, ale eliptycznym ksztacie).
W istocie wasnoci do definiowania rogw pojedynczo przydaj si, gdy chcemy obsuy
przegldarki WebKit. Przegldarki te nie obsuguj wartoci typu 20px 60px, ale za to
obsuguj pojedyncze wasnoci rogw. Aby wic uzyska efekt widoczny na rysunku 5.26
zarwno w przegldarkach Gecko, jak i WebKit, trzeba by napisa nastpujcy kod:
-webkit-border-radius: 20px;
-webkit-border-top-right-radius: 60px;
-webkit-border-bottom-left-radius: 60px;
-moz-border-radius: 20px 60px;
border-radius: 20px 60px;}
Niezbyt to adne, ale dziaa.
SPRAJTY CSS
Sprajty CSS to technika z 2004 roku, ktrej autorem jest Dave Shea (znany z CSS Zen Graden).
Jest to metoda tworzenia bardzo szybkich efektw :hover. Od chwili ich wymylenia sprajty
CSS s wykorzystywane do redukcji obcienia serwerw poprzez czenie wielu obrazw
dekoracyjnych w jeden.
W najprostszej postaci sprajt CSS to obraz skadajcy si z dwch czci reprezentujcych
dwa stany ikony np. dla normalnego widoku odnonika i widoku podwietlonego,
aktywowanego po najechaniu na niego kursorem. Przykad takiego obrazu wida
narysunku 5.27.
183
CZ II: NIEZBDNIK
Rysunek 5.27. Sprajty CSS

Rysunki reprezentujce stany s od siebie oddalone nie bez powodu, o czym przekonasz si
ju niebawem. Wystarczy tylko jedna regua CSS, aby sprawi, e ikony te bd wywietlane
obok odnonikw w menu nawigacyjnym.
.navbar li a {background: url(sprites.png) 5px 50% no-repeat;
padding-left: 30px;}
Ta regua wyrwnuje je w pionie do rodka cza i po jego lewej stronie. Aby teraz
zawieci ikon, gdy uytkownik najedzie na odnonik kursorem (rysunek 5.28),
naleytylko zmieni pooenie obrazu w tle.
.navbar li a:hover {background-position: -395px 50%;}
184
Rysunek 5.28. Widok ikony podwietlonej po najechaniu na ni kursorem

Kluczowe w tym przypadku jest przesunicie obrazu o 395 pikseli w lewo. Warto ta
odpowiada 400 pikselom pustej przestrzeni w obrazie sprites.png odj 5 pikseli przesunicia
w oryginalnej regule. Poniewa zawiecona wersja ikony znajduje si w odlegoci 400 pikseli
od lewej krawdzi obrazu w tle, regua ta sprawia przesunicie jej w odpowiednie miejsce.
Technik t mona rozszerzy na dowoln liczb stanw odnonikw, a wic umoliwia
ona zdefiniowanie osobnych ikon dla stanw odwiedzonego, nieodwiedzonego, aktywnego,
zfokusem i po najechaniu kursorem (rysunek 5.29):
.navbar
.navbar
.navbar
.navbar
.navbar
li
li
li
li
li
a:link {background-position: 5px 50%;}

a:visited {background-position: -395px 50%;}
a:hover {background-position: -795px 50%;}
a:focus {background-position: -1195px 50%;}
a:active {background-position: -1595px 50%;}
ROZDZIA 5: EFEKTY
Rysunek 5.29. Ikony reprezentujce wszystkie stany czy

Mona te utworzy obraz zawierajcy rne pasy ikon dla rnych rodzajw czy. Zestaw
ikon kadego typu trzeba by umieci w jednym pasie i oddzieli je odpowiednio du
powierzchni, aby nie pokazyway si w miejscach, w ktrych nie powinny by widoczne.
Wwczas dla kadego typu naleaoby zdefiniowa przesunicie pionowe, np.:
.navbar
.navbar
.navbar
.navbar
li
li
li
li
a.internal:link {background-position: 0 0;}

a.external:link {background-position: 50px 0;}
a.internal:visited {background-position: 0 400px;}
a.external:visited{background-position: 50px -400px;}
Jeli mylisz, e taki obraz jest o wiele wikszy ni suma dwch pojedynczych obrazw, to si
mylisz. Algorytm kompresji obrazw GIF ma t waciwo, e rozmiar pliku bez wzgldu na
to, czy ikony oddzielimy przestrzeni 4, czy 4000 pikseli, pozostaje ten sam, jeli piksele w tym
obszarze s tego samego koloru (w tym przypadku jest akurat brak koloru). Jeli wemiesz
pod uwag rozmiar dodatkowych nagwkw HTTP i obcienie serwera spowodowane
koniecznoci obsuenia dwch da, po jednym dla kadego obrazu, uycie sprajtw
okae si lepszym rozwizaniem.
To wyjania, dlaczego twrcy niektrych witryn pakuj wszystkie ikony, zaokrglenia rogw
i inne elementy dekoracji graficznych w jednym duym obrazie, a pniej wywietlaj
odpowiedni ikon, sterujc ustawieniami pooenia ta.
Moe takie podejcie w Twoim przypadku byoby przesad, ale warto si nad tym zastanowi.
Moesz znale wicej zastosowa dla sprajtw, ni Ci si pocztkowo wydawao.
SLIDING DOORS
Technika Sliding Doors (przesuwane drzwi) zostaa spopularyzowana w 2003 roku przez
Douga Bowmana. Jest to metoda tworzenia bardzo fajnych zakadek z tekstowych czy
nawigacyjnych. Ale oglnie metod t mona zaadaptowa take do uzyskania innych
efektw ni tylko zakadki.
Na rysunku 5.30 wida interesujcy nas docelowy efekt.
185
CZ II: NIEZBDNIK
Rysunek 5.30. Docelowy efekt

Tak, mona by to zrobi przy uyciu zwykych obrazw, ale wwczas zmiana tekstu na
zakadkach byaby bardzo czasochonna, zwaszcza gdyby byo duo rnych stanw tych
zakadek. Znacznie atwiej nam bdzie, jeli nasz kod HTML bdzie mia nastpujc struktur:
<ul class="nav">
<li><a href="index.html">Gwna</a></li>
<li><a href="products.html">Produkty</a></li>
<li><a href="buy.html">Kup!</a></li>
<li><a href="contact.html">Kontakt</a></li>
</ul>
Jeli sowo Kup! bdzie trzeba zamieni na Do kasy albo Zapisz, wystarczy tylko zmieni
tekst w kodzie HTML.
No dobrze, to jak w takim razie utworzy te zakadki? Przede wszystkim potrzebny jest duy
obraz zakadki. Taki naprawd duy, jak na rysunku 5.31.
186
Rysunek 5.31. Duy obraz zakadki

Nastpnie odcinamy wski pasek z lewej strony, jak na rysunku 5.32.
Rysunek 5.32. Dwoje drzwi dla wszystkich zakadek

Moesz nie wierzy, ale to wszystko, czego potrzebujemy, jeli chodzi o grafik. Teraz trzeba
jeszcze tylko napisa odpowiednie arkusze stylw (na rysunku 5.33 wida ostateczny wynik):
ROZDZIA 5: EFEKTY
ul.nav, ul.nav li {float: left; margin: 0; padding: 0; list-style: none;}
ul.nav {width: 100%;}
ul.nav li {background: url(tab-right.png) no-repeat 100% 0;}
ul.nav li a {background: url(tab-left.png) no-repeat;
display: block; padding: 10px 25px 5px;
font: bold 1em sans-serif; text-decoration: none; color: #000;}
Rysunek 5.33. Ostateczny wynik

To wszystko, mamy gotowe zakadki!
Jak to dziaa, mona atwo zobaczy, jeli usunie si obraz ta odnonikw. Wwczas ukae
si nam wielki obraz wypeniajcy cay element listy. Poniewa odnoniki znajduj si w tym
elemencie, to jeli w ich tle z lewej strony ustawimy nasz lewy pasek wycity wczeniej z duego
obrazu, przesoni on to pod spodem.
Teraz zamy, e chcemy, aby nasze zakadki zawiecay si po najechaniu na nie kursorem.
Pomys ten mona zrealizowa na dwa sposoby, z ktrych oba wymagaj uycia pseudoklasy
:hover dla dowolnie wybranego elementu. Najprociej jest zamieni w odpowiedzi na
najechanie kursorem jeden obraz na inny:
ul.nav li:hover {background-image: url(tab-right-hover.png);}
ul.nav li:hover a {background-image: url(tab-left-hover.png); color: #FFF;}
Wad tej metody jest to, e przy pierwszym najechaniu kursorem na element trzeba chwil
poczeka na zmian obrazu, a zostanie on pobrany z serwera. Aby tego unikn, mona
opisywan tu metod poczy z technik sprajtw opisan wczeniej. Teraz obrazy kart
wygldaj tak jak na rysunku 5.34.
Rysunek 5.34. Dwie poowy sprajtowych zakadek
187
CZ II: NIEZBDNIK
A oto odpowiedni kod CSS:
ul.nav li:hover {background-position: 100% 400px;}
ul.nav li:hover a {background-image: 0 400px;}
Mona te zmieni orientacj zakadek i ustawi je np. wzdu bocznej krawdzi strony.
Wwczas duy obraz trzeba by poci poziomo zamiast pionowo, jak wida na rysunku 5.35.
Rysunek 5.35. Dwie poowy obrazu do utworzenia kart poziomych
188
Nastpnie bierzemy ten sam kod HTML co poprzednio i formatujemy go za pomoc

nastpujcego kodu CSS:
ul.nav, ul.nav li {margin: 0; padding: 0; list-style: none;}
ul.nav li {background: url(tab-bottom.png) no-repeat 0 100%;}
ul.nav li a {background: url(tab-top.png) no-repeat 0 0;
display: block; padding: 5px 15px;
font: bold 1em sans-serif; text-decoration: none; color: #000;
display: block;}
Efekt tych dziaa wida na rysunku 5.36.
Rysunek 5.36. Poziome zakadki
ROZDZIA 5: EFEKTY
Sposb dodania efektu najechania kursorem jest taki sam jak poprzednio wystarczy uy
techniki sprajtw.
Wybiegajc nieco w przyszo, kiedy zapewne doczekamy si powszechnej obsugi wielu
obrazw w tle, co pozwoli nam na zoenie wszystkich elementw zakadek w tle jednego
elementu.
PRZESUWANE DRZWI Z PRZYCINANIEM

Jedn z wad oryginalnej metody Sliding Doors jest to, e wymusza ona wykorzystanie
wtle zakadek ta strony. P biedy, jeli to wok zakadek jest jednolite i niezmienne.
Cojednak by byo, gdybymy chcieli uy ich w rnych miejscach z rnymi tami albo
nawzorzystym tle?
Do realizacji tego celu potrzebne bd te same rysunki zakadek co wczeniej, ale
zprzezroczystymi powierzchniami, przez ktre bdzie przewitywa otaczajce je to.
Obrazy te pokazane s na rysunku 5.37. Dla uproszczenia zajmiemy si tylko zwykymi
zakadkami, bez efektu :hover.
189
Rysunek 5.37. Dwie czci zakadki

Moesz uy zarwno formatu GIF89a, jak i PNG z kanaem alfa. Wszystko zaley od Twoich
preferencji i przewidywanych uytkownikw. Ja uywam formatu PNG, poniewa lepiej s
wnim wygadzone brzegi obszarw przezroczystoci.
Jeli tych obrazw uylibymy w poczeniu z kodem HTML i CSS z poprzedniej techniki,
uzyskalibymy wynik widoczny na rysunku 5.38.
Rysunek 5.38. Efekt zastosowania nowych obrazw z kodem z poprzedniej techniki

Jestemy ju w poowie drogi do celu. Po prawej stronie zakadki wygldaj dobrze, ale po
lewej wida obraz ta elementu li, ktry przewituje przez przezroczyst cz obrazu w tle
elementu a, wcznie z naronikiem.
CZ II: NIEZBDNIK
Rozwizanie tego problemu wymaga sprytu. Najpierw przesuniemy element a w lewo, poza
element li, co mona zrobi na kilka sposobw. Najprociej bdzie przesun te elementy
wlewo za pomoc pozycjonowania wzgldnego (rysunek 5.39), przy czym trzeba zapewni
im odpowiednio duo miejsca.
ul.nav, ul.nav li {float: left; margin: 0; padding: 0; list-style: none;}
ul.nav {width: 100%;}
ul.nav li {background: url(tab-clip-right.gif) no-repeat 100% 0;
margin-right: 25px;}
ul.nav li a {background: url(tab-clip-left.gif) no-repeat;
display: block; padding: 10px 0 5px 25px;
position: relative; left: -25px;}
Rysunek 5.39. Poprawione zakadki
190
Kady element a jest teraz przesunity o 15 pikseli w lewo. Samo to jednak nie wystarcza,
poniewa teraz odnoniki od drugiego do koca nachodziyby na element listy, ktry
znajduje si przed nimi. Dlatego dodaem do elementw listy 15-pikselowy prawy margines,
aby zrobi miejsce dla elementw a i zapobiec ich nakadaniu si i powstawaniu luk.
Mamy jednak jeszcze jeden may problem. Prawa strona kadej zakadki nie bdzie
dajcym si klika czem, poniewa cza przesunlimy w lewo (przyjrzyj si dokadnie
rysunkowi 5.39, na ktrym wida zwyk strzak nad ostatni zakadk). Dlatego
lepszym rozwizaniem jest pomajstrowanie przy marginesach. Zmienimy ostatni regu
nastpujco:
ul.nav li a {background: url(tab-clip-left.gif) no-repeat;
display: block; padding: 10px 25px 5px; margin-left: -25px;}
W tym wypadku lewa krawd kadego cza zostaje przecignita o 15 pikseli w lewo od
lewej krawdzi elementu listy. Dziki temu cze zakrywa prawy margines, rozszerzajc si
od poprzedniego elementu listy, tak jak w przypadku pozycjonowania wzgldnego. Tym
razem jednak prawa krawd cza pozostaje wyrwnana z praw krawdzi elementu listy,
zamiast si od niej odsuwa. Dziki temu zakadki dziaaj zgodnie z oczekiwaniami, na co
wskazuje ikona doni widoczna na rysunku 5.40, a przycite rogi pozwalaj przewitywa
tu strony.
Rysunek 5.40. W peni funkcjonalne przycinane zakadki
ROZDZIA 5: EFEKTY
PARALAKSA CSS
Paralaksa CSS (ang. CSS parallax) to bardzo ciekawa i przyjemna w implementacji
na stronie technika, dziki ktrej mona si dowiedzie, jak za pomoc prostego
pozycjonowania procentowego obrazw w tle mona wywoa niespodziewane efekty
(niestety, trudno jest to pokaza w druku, dlatego najlepiej wyprbowa opisywane tu
techniki na swoim komputerze).
Najpierw zobaczymy, na czym polega pozycjonowanie procentowe. Zamy, e okrelilimy
pooenie obrazu w tle za pomoc wartoci 50% 50%. To spowoduje, e rodek obrazu
pokryje si ze rodkiem obszaru ta. Gdybymy np. zmienili t warto na 100% 100%,
to prawy dolny rg obrazu w tle pokryby si z prawym dolnym rogiem obszaru ta.
Narysunku 5.41 wida dwa przykady pozycjonowania obrazw w tle.
191
Rysunek 5.41. Pozycjonowanie obrazw w tle

To oznacza, e wartoci procentowe w pozycjonowaniu obrazw w tle s uywane dwukrotnie.
Za pierwszym razem zostaj uyte do znalezienia zdefiniowanego punktu w obszarze ta,
a za drugim w samym pozycjonowanym obrazie. Nastpnie te dwa punkty s na siebie
nakadane.
Co w takim razie si dzieje, gdy zmienia si rozmiar obszaru ta? Wemy np. ponisz regu:
body {background: url(ice-1.png) 75% 0 no-repeat; width: 100%;
padding: 0; margin: 0;}
Zamy te, e mamy obraz ice-1.png o szerokoci 400 pikseli. W oknie przegldarki
o szerokoci 800 pikseli 300. piksel, liczc od lewej krawdzi tego obrazu, zostanie
wyrwnany z 600. pikselem od lewej krawdzi elementu body, jak wida na rysunku 5.42.
CZ II: NIEZBDNIK
Rysunek 5.42. Sople lodu pozycjonowane w tle

Pomylmy, co si stanie z soplami, gdy zmieni si rozmiar okna przegldarki (a wic take
elementu body). Jeli zmniejszymy szeroko, sople zostan przesunite w lewo wzgldem
ukadu strony, poniewa punkt 75% elementu body przesunie si w lewo. Gdyby okno
ielement body zostay poszerzone, wwczas sople przesunyby si w prawo.
192
Teraz pomylmy, co by si stao, gdybymy warto wyznaczajc poziome pooenie obrazu

zmienili na 50%. To spowoduje ustawienie go na rodku elementu body i bdzie si on
przesuwa wolniej ni wtedy, gdy mia pooenie ustawione na 75%. Gdybymy t warto
zmniejszyli do 0%, obraz zostaby umieszczony przy lewej krawdzi elementu body i nie
ruszaby si stamtd w ogle przy zmianach rozmiaru elementu body.
Teraz wyobramy sobie, e mamy dwa ta, jedno wyrwnane do lewej, a drugie
pozycjonowane wartoci 75%, i oba powtarzane w poziomie (rysunek 5.43), np.:
body {background: url(ice-1.png) 0 0 repeat-x; width: 100%; padding: 0; margin: 0;}
div#main {background: url(ice-2.png) 75% 0 repeat-x; width: 100%;}
Rysunek 5.43. Dwa obrazy sopli lodu
ROZDZIA 5: EFEKTY
Dwie warstwy adnie nam si naoyy na siebie. Wracajc do sedna sprawy, w miar
zwania lub poszerzania okna sople w elemencie div#main bd przesuway si obok sopli
elementu body. Samo to ju jest ciekawe, ale pjdmy o krok dalej i przesumy to elementu
body, aby nie byo wyrwnane do lewej.
body {background: url(ice-1.png) 25% 0 repeat-x; width: 100%;
Teraz przy zmianie rozmiaru okna przegldarki bd si przesuwa oba obrazy sopli, ale
kady z inn prdkoci. Sople w tle elementu body bd si przesuwa z prdkoci rwn
jednej czwartej prdkoci zmiany rozmiaru okna, natomiast sople w tle elementu div#main
z prdkoci rwn trzem czwartym prdkoci zmiany rozmiaru okna. Jeli wic bdziemy
zmienia rozmiar okna z szybkoci 12 pikseli na sekund, to to elementu body bdzie si
przesuwa z prdkoci 3 pikseli na sekund, a elementu div#main 9.
Aby to poruszao si z wiksz prdkoci ni szybko zmiany rozmiaru okna, naleaoby
warto pooenia poziomego ustawi powyej 100%. Gdybymy chcieli, aby obraz przesuwa si
dwa razy szybciej, ni zmieniamy rozmiar okna, wasno background-position powinnimy
ustawi na 200% 0 przy zaoeniu, e obraz ma znajdowa si pod grn krawdzi okna.
Gdybymy chcieli, aby obraz znajdowa si przy dolnej krawdzi okna, naleaoby zastosowa
warto 200% 100%, natomiast aby go wyrodkowa w pionie 200% 50%.
Teraz bdzie najlepsze jeli zastosuje si ujemne wartoci procentowe, obrazy bd si
przesuwa w kierunku przeciwnym do kierunku zmiany rozmiaru okna.
Innymi sowy, w miar rozszerzania okna obraz w tle bdzie przesuwa si w lewo, a w miar
jego zwania w prawo, np.:
body {background: url(ice-1.png) -75% 0 repeat-x; width: 100%;
Te reguy sprawi, e podczas zwikszania szerokoci okna sople bd odsuway si

odrodka okna, a gdy okno bdzie miao zmniejszan szeroko, sople bd poda
wkierunku rodka.
NIEREGULARNE KSZTATY PYWAJCE

Jednym z najwikszych pragnie niejednego projektanta stron WWW jest moliwo
otaczania tekstem nieregularnych ksztatw zamiast typowych prostoktw, z ktrymi ma
do czynienia na co dzie. Jest to moliwe i w miar atwe do zrobienia, aczkolwiek wymaga
dodania troch kodu HTML.
Zamy, e chcemy uoy tekst wedug zakrzywionej linii, jak na rysunku 5.44.
193
CZ II: NIEZBDNIK
Rysunek 5.44. Tekst wyrwnany do zakrzywionej linii
194
Na pierwszy rzut oka wydaje si to niemoliwe, prawda? A w rzeczywistoci byo bardzo proste.
Aby uzyska taki efekt, wystarczy tylko podzieli krzyw na stos segmentw i zamieni
skadajce si na ni obrazy w elementy pywajce w lewo. Wycite fragmenty maj
wysoko 20 pikseli i przezroczyste to w obszarze poza sam krzywizn (rysunek 5.45).
Rysunek 5.45. Krzywa z liniami cicia
ROZDZIA 5: EFEKTY
Zwr uwag, e kady fragment ma szeroko odpowiadajc widocznej czci krzywej.
Teraz trzeba tylko te kawaki wprowadzi na stron w wybranym miejscu.
<div class="curves">
<img src="curve_1.gif"
</div>
alt="">
alt="">
alt="">
alt="">
alt="">
Oczywicie im wicej kawakw, tym wicej potrzeba elementw img. Kod CSS potrzebny
do tego jest ju bardzo prosty:
.curves img {float: left; clear: left; margin-right: 1em;}
Margines utrzymuje tekst w odpowiedniej odlegoci od obrazw i mona go dostosowa

wedle swoich potrzeb. Jeli chcesz zobaczy, co dokadnie dzieje si w lewym grnym rogu
okna przegldarki, dodaj do obrazw tymczasowe obramowanie (rysunek 5.46).
.curves img {border: 1px solid red;} /* regua tymczasowa */
195
Rysunek 5.46. Obrazy skadajce si na krzyw z wczonym obramowaniem

W technice tej mona uywa take bardziej fantazyjnie pofalowanych krzywych. W istocie
nie ma w tej materii adnych ogranicze, co wida na rysunkach 5.47 (cicie obrazu) i 5.48
(gotowy wynik).
CZ II: NIEZBDNIK
196
Rysunek 5.47. Bardziej pofalowany ksztat z liniami cicia
Rysunek 5.48. Ostateczny efekt w oknie przegldarki
ROZDZIA 5: EFEKTY
Kod CSS uyty do realizacji tego zadania jest taki sam jak poprzednio. Zmieniy si tylko
fragmenty obrazu.
Jedna uwaga im wiksze bd rnice w szerokoci krzywizny midzy kolejnymi
fragmentami obrazu, tym wiksze ryzyko, e tekst najdzie na obraz. Moe si tak sta
dlatego, e przegldarki nie sprawdzaj kadego piksela wzdu pola liniowego, aby si
dowiedzie, czy nie nachodzi na element pywajcy. Mog np. sprawdza tylko lewy grny
rg pola. Jeli odlego wynosi tylko kilka pikseli nad znacznie szerszym pywajcym
obrazem, to tekst najdzie na obraz.
Oczywicie tworzenie tych wszystkich skrawkw jest dosy mudne, nie mwic ju
o dodatkowym obcieniu serwera. Na szczcie istnieje te ulepszona wersja tej techniki,
ktrej opis znajduje si w nastpnym podrozdziale.
LEPSZE NIEREGULARNE KSZTATY PYWAJCE

Nilesh Chaudhari, opierajc si na opisanej w poprzednim podrozdziale technice
nieregularnych ksztatw pywajcych, opracowa now technik, ktr nazwa
supernieregularnymi ksztatami pywajcymi (ang. Super Ragged Floats) jej opis
zamieci w artykule dla witryny Evolt, ktry mona przeczyta pod adresem http://www.
evolt.org/article/Super_Ragged_Floats/22/50410/. Nilesh stwierdzi, e zamiast ci obraz
na kawaki, lepiej jest umieci go w tle strony w caoci i na nim ustawi przezroczyste
elementy. Wad tego podejcia byo to, e pywajce kawaki i towarzyszc im tre trzeba
byo umieci we wsplnym kontenerze div. W oparciu o metod Nilesha opracowan na
podstawie wczeniejszej metody przedstawiam modyfikacj, w ktrej krzywe i nieregularne
obrysy mona tworzy przy uyciu maych samodzielnych fragmentw kodu HTML.
Zacznijmy od ponownego przeanalizowania kodu HTML z poprzedniego podrozdziau.
Wszystkie uyte tam obrazy zamieniamy na puste elementy div.
<div id="sl1"></div>
</div>
Teraz bierzemy oryginalny niepocity obraz krzywej (rysunek 5.49).

Mamy ju wszystko, czego nam potrzeba do zakrzywienia pionowego biegu tekstu. Musimy
jeszcze tylko zdefiniowa kilka wasnoci rozmiaru i pozycjonowania ta w arkuszu stylw
(zobacz te rysunek 5.50):
.curves div {float: left; clear: left; margin-right: 20px; height: 20px; width:
100px; background: url(curve.png) no-repeat;}
.curves #sl2 {width: 42px; background-position: 0 20px;}
197
CZ II: NIEZBDNIK
Rysunek 5.49. Obraz krzywej w Photoshopie
198
Rysunek 5.50. Krzywizna ustawiona za pomoc pozycjonowania ta

Ten sam efekt mona by rwnie uzyska, stosujc style rdliniowe, gdyby si komu
chciao. W ten sposb pozbylibymy si tych wszystkich regu z selektorami identyfikatora
i samych identyfikatorw z kodu (pozostaaby nam tylko regua .curves div). Niestety,
wwczas zamiecilibymy kod HTML arkuszami stylw.
ROZDZIA 5: EFEKTY
<div></div>
<div style="width: 42px; background-position: 0 20px;"></div>
</div>
Wybr naley do Ciebie i dokonaj go mdrze.

Warto na zakoczenie tego omwienia doda, e elementy div nie musz wszystkie mie
tej samej wysokoci (dotyczy to take techniki z pocitym obrazem). Jeli w krzywinie
znajduje si obszar, ktry nie jest krzywy, mona go w caoci obj jednym odpowiednio
wysokim elementem div. Dziki temu mona zredukowa liczb tych elementw. Aby dobrze
rozplanowa rozkad elementw div, mona sobie zawczasu narysowa schemat w edytorze
grafiki (rysunek 5.51).
199
Rysunek 5.51. Schemat rozmieszczenia elementw div w Photoshopie
CZ II: NIEZBDNIK
Pniej mona wyznaczone rozmiary skopiowa bezporednio do dokumentu HTML.
Narysunku 5.52 wida ostateczny wynik.
<div style="width: 8px; height: 40px;"></div>
<div style="width: 25px; height: 20px; background-position: 0 40px;"></div>
</div>
200
Rysunek 5.52. Fala opywana przez elementy div rnej wysokoci
ROZDZIA 5: EFEKTY
POLA OBRAZW
Wiele osb nie ma pojcia o pewnej wanej waciwoci obrazw maj one taki sam model
polowy jak wszystkie inne elementy. To znaczy, e mona im przypisywa to, dopenienie itp.
Co mona z tym zrobi? Jedn z moliwoci jest wypenianie kolorem ta prostoktnych
ikon z przezroczystymi powierzchniami. Wyglda to mniej wicej tak (rysunek 5.53):
img.icon {background-color: #826;}
img.icon:hover {background-color: #C40;}
Rysunek 5.53. Ikony stanu po najechaniu kursorem i przed najechaniem kursorem

W tle obrazw mona nawet stosowa inne obrazy, jak wida na rysunku 5.54. Pozwala to
osign wiele zabawnych efektw.
img.flake1 {background-image: url(flake1.png) center no-repeat;}
<img
<img
<img
<img
<img
<img
src="flake-a.png"
src="flake-a.png"
src="flake-a.png"
src="flake-b.png"
src="flake-b.png"
src="flake-b.png"
class="flake1"
class="flake2"
class="flake3"
class="flake1"
class="flake2"
class="flake3"
Rysunek 5.54. Kombinacje patkw niegu
alt="">
alt="">
alt="">
alt="">
alt="">
alt="">
201
CZ II: NIEZBDNIK
Rwnie dobrze mona stosowa dopenienie. czc dopenienie, kolor ta i obramowanie,
mona uzyska imitacj nawet dwukolorowego obramowania (rysunek 5.55).
img.twotone {background: #C40; padding: 5px; border: 5px solid #4C0;}
Rysunek 5.55. Dwukolorowe obramowanie utworzone przy uyciu wasnoci obramowania i dopenienia
A jeli dodamy jeszcze obrys, to uzyskamy obramowanie nawet w trzech kolorach
(rysunek 5.56).
img.threetone {background: #C40; padding: 5px; border: 5px solid #4C0; outline:
5px solid #40C;}
202
Rysunek 5.56. Trjkolorowe obramowanie utworzone przy uyciu wasnoci obramowania, dopenienia i obrysu
OGRANICZANIE ROZMIARU OBRAZW

Kontynuujmy wtek majstrowania przy obrazach oto technika kontrolowania ich
wielkoci w taki sposb, aby nie wyszy poza swj element nadrzdny i nie zostay
powikszone ponad swj naturalny rozmiar. Jest to bardzo uyteczna metoda, ktra
najbardziej przydaje si wtedy, gdy na stronie umieszczane s np. due fotografie lub
innego rodzaju obrazy, ktre mogyby zepsu ukad w maych oknach przegldarki.
img {max-width: 100%;}
Ta prosta regua sprawi, e szeroko obrazw nigdy nie przekroczy szerokoci elementu
je zawierajcego, a jeli element ten bdzie od nich szerszy, to bd przyjmoway swoj
naturaln szeroko. Obrazy mona dodatkowo wyrodkowa:
img {max-width: 100%; display: block; margin: 0 auto;}
Na rysunku 5.57 wida jeden obraz w trzech elementach nadrzdnych o rnych szerokociach:
dwa pierwsze s wsze od obrazu, a trzeci szerszy (krawdzie elementw nadrzdnych
soznaczone kolorem zielonym).
ROZDZIA 5: EFEKTY
Rysunek 5.57. Trzy egzemplarze jednego obrazu

Oczywicie w takim przypadku ostateczny efekt zmniejszania obrazu zaley od algorytmw
zastosowanych w przegldarce. Na szczcie wikszo tych aplikacji robi to bardzo dobrze
inie pozostawia zbyt wielu paskudnych artefaktw.
203
III
CZ
III
NAJNOWSZE
TECHNIKI
Rozdzia 6. Tabele
Rozdzia 7. Pie przyszoci
6
ROZDZIA
PODRCZNIK CSS
TABELE
WIEM, WIEM, wszyscy mwi, e tabele

to samo zo i nie naley ich uywa do
rozmieszczania elementw w ukadzie strony.
Zgadzam si z tym cakowicie tabel nie
naley uywa do tworzenia ukadu. Z drugiej
strony samo opracowywanie ukadu tabel to
czsto zaniedbywana sztuka. Przecie czasami
zdarza nam si mie jakie dane, ktre najlepiej
jest zaprezentowa w postaci tabeli. Nie ma
powodu, aby traktowa je po macoszemu!
Teraz poznasz sposoby wykorzystania

struktury tabel w arkuszach stylw oraz
nauczysz si tworzy z tabel cakiem nowe
rodzaje elementw wizualnych, takie jak mapy
i wykresy supkowe. Gdy przeczytasz ten
rozdzia, zrozumiesz, e tabele, tak jak kady
inny rodzaj struktur HTML, stanowi bogate
rdo punktw zaczepienia dla kaskadowych
arkuszy stylw.
CZ III: NAJNOWSZE TECHNIKI
NAGWEK, TRE GWNA I STOPKA TABELI

W jzyku HTML istniej trzy elementy reprezentujce najwaniejsze grupy wierszy w tabeli
thead, tbody oraz tfoot. Nietrudno si domyli, e reprezentuj one odpowiednio
nagwek, tre gwn i stopk.
Oto uproszczona struktura tabeli, w ktrej uyte zostay dwa z wymienionych elementw:
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
208
Z semantycznego punktu widzenia zalet tych elementw jest wzbogacenie struktury

tabeli. Dla nas jednak najlepsze jest w nich to, e dziki nim moemy osobno formatowa
nagwek i tre gwn (rysunek 6.1), a wic np. wyrodkowa tre nagwkw kolumn
(ktra znajduje si w elemencie thead) i wyrwna do prawej tre nagwkw wierszy
(welemencie tbody).
thead th {text-align: center;}
tbody th {text-align: right;}
Rysunek 6.1. Wyrwnanie do prawej i rodka rnych rodzajw komrek nagwkowych

Podobnie mona zmieni kady inny aspekt, np. dopenienie, to, kolory komrek
nalecych do okrelonej grupy, odwoujc si do zawierajcego je elementu.
Ciekaw cech tych elementw grupujcych jest to, e nawet jeli nie zostan bezporednio
wpisane przez twrc strony, to wikszo przegldarek doda je automatycznie do drzewa
DOM (rysunek 6.2). W tych przegldarkach nastpujca regua nigdy nie zostanie
zastosowana:
table > tr {font-weight: bold;}
ROZDZIA 6: TABELE
Rysunek 6.2. Przegldarki w razie potrzeby dodaj niektre elementy automatycznie

Powodem tego jest obecno elementu tbody zawsze midzy elementami table i tr.
Jeliprojektant tabeli nie wpisze adnego elementu grupujcego wiersze, to automatycznie
zostaje utworzony wanie element tbody. Dlatego selektor powyszej reguy naleaoby
zmodyfikowa na posta table > tbody > tr, aby znajdowa wiersze take w tabelach
bezadnych elementw grupujcych wiersze.
Wielk niespodziank jest fakt, e w jzyku HTML 4 element tfoot musi w rdle strony
znajdowa si przed elementem tbody. W HTML 5 usunito to ograniczenie, a wic
element tfoot moe znajdowa si za tbody, chocia w rzeczywistoci przegldarki nigdy
nie respektoway tego ograniczenia take i w HTML 4. Podsumowujc, jest to zaskakujca,
ale niesprawiajca problemw cecha jzyka HTML.
Teoretycznie wiersze zgrupowane w elementach thead i tfoot powinny by wywietlane
na pocztku i kocu kadego fragmentu tabeli, jeli jest ona prezentowana w kilku czciach.
Tumaczc na jzyk ludzki to zdanie ze specyfikacji, chodzi o to, e jeli tabela jest bardzo
duga i w druku zajmuje wicej ni jedn stron, to zawarto elementw thead i tfoot
musi zosta wydrukowana na pocztku i kocu kadej z tych stron lub kadej czci tabeli
drukowanej na tych stronach. Jednak nieprzypadkowo na pocztku akapitu uyem sowa
teoretycznie, poniewa w praktyce tak nigdy nie jest. Moe kiedy si to zmieni. Jakby
powiedzia kelner Grover, y to mie nadziej.
Zapamitaj jedn z najwikszych zalet uycia elementw thead i tfoot jest moliwo
formatowania znajdujcych si w ich obrbie komrek tabeli. W ramach przykadu
spjrzmy na poniszy fragment kodu HTML 5:
209

<table>
<thead>
<tr>
<th scope="col">K 1</th>
</tr>
</thead>
<tbody>
...
</tbody>
<tfoot>
<tr>
<td>83 340 z</td>
<td>87 195 z</td>
<td>91 022 z</td>
<td>90 489 z</td>
</tr>
</tfoot>
</table>
210
Zamy teraz, e pod nagwkami kolumn i nad wierszem sum w stopce chcemy
narysowa lini, jak na rysunku 6.3. Do tego nie potrzebujemy adnych klas, wystarczy
wykorzysta struktur samej tabeli.
thead th {border-bottom: 1px solid #333; text-align: center; font-weight: bold;}
tfoot th, tfoot td {border-top: 2px solid #666; color: #363;}
Rysunek 6.3. Wizualne oddzielenie od treci gwnej tabeli jej nagwka i stopki
ROZDZIA 6: TABELE
NAGWKI WIERSZY
W poprzednim podrozdziale wspomniaem o nagwkach wierszy. A co to takiego?
Dotej pory mylaem, e nagwek moe mie tylko kolumna. Nieprawda! W jzyku
HTML jest atrybut sucy do zaznaczania, czy dany element th odgrywa rol nagwka
wiersza kolumny.
Spjrz na poniszy kod HTML:
<table>
<thead>
<tr>
<th></th>
<th>Wizyt na stronie</th>
<th>Odwiedzajcych </th>
</tr>
</thead>
<tbody>
<tr>
<th>Stycze 2010</th>
<td>1 367 234</td>
<td>326 578</td>
</tr>
<tr>
<th>Luty 2010</th>
<td>1 491 262</td>
<td>349 091</td>
</tr>
</tbody>
</table>
Kady wiersz w elemencie tbody zaczyna si od elementu th. To s wanie nagwki wierszy.
Czowiek na pewno odgadnie, e odnosz si one do danych, ktre znajduj si za nimi
wwierszu. Przegldarka te moe byaby w stanie to wydedukowa, ale mimo to lepiej jest
zaznaczy to w sposb jasny i wyrany:
<table>
<thead>
<tr>
<th></th>
<th scope="col">Wizyt na stronie</th>
<th scope="col">Odwiedzajcych </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Stycze 2010</th>
<td>1 367 234</td>
211

<td>326 578</td>
</tr>
<tr>
<th scope="row">Luty 2010</th>
<td>1 491 262</td>
<td>349 091</td>
</tr>
</tbody>
</table>
Dodajc do elementu th atrybut scope o odpowiedniej wartoci, poinformowalimy

przegldarki, jaka relacja czy ten element z otaczajcymi go komrkami (rysunek 6.4).
Rysunek 6.4. Formatowanie komrek nagwka przy uyciu atrybutu scope
212
W przegldarkach wizualnych nie ma z tym problemu, chocia mona by zastosowa rne

formatowanie dla obu rodzajw przy uyciu selektorw atrybutw:
th[scope="col"] {border-bottom: 1px solid gray;}
th[scope="row"] {border-right: 1px solid gray;}
To moe by bardzo przydatny punkt zaczepienia dla stylw. W tym akurat przypadku
taki sam efekt mona by uzyska za pomoc selektorw thead th i tbody th, ale moe si
zdarzy, e nagwki wierszy bd znajdowa si w elemencie thead lub nagwki kolumn
welemencie tbody. Dlatego najlepiej jest mie obie techniki pod rk.
W przegldarkach czytajcych tre stron atrybut scope moe teoretycznie uatwia
powizanie nagwkw kolumn i wierszy z odpowiednimi komrkami, a wic umoliwi
zrozumienie treci tabeli. Gdyby taka przegldarka odczytaa zawarto powyszej tabeli,
pierwszy wiersz mgby brzmie mniej wicej tak: Wizyt na stronie stycze dwa tysice
dziesi trzysta szedziesit siedem tysicy dwiecie trzydzieci cztery odwiedzajcych
stycze dwa tysice dziesi trzysta dwadziecia sze tysicy piset siedemdziesit osiem
(w miejscu mylnika przegldarka powiedziaaby co w rodzaju komrka danych
wiadomo, o co chodzi).
Znowu nie bez powodu uyem sowa teoretycznie. Mimo i niektre mwice
przegldarki obsuguj ju atrybut scope, to funkcja ta jest w nich zwykle domylnie
wyczona.
ROZDZIA 6: TABELE
FORMATOWANIE WEDUG KOLUMN

Najczciej tabele formatuje si wedug wierszy, ale od czasu do czasu trzeba zastosowa
take formatowanie kolumn. To zadanie trudno jest wykona w prosty sposb (wzgldnie),
lecz atwo, jeli uyje si troch brzydkiego, skomplikowanego kodu (rozumiesz co z tego?).
Prosta wersja polega na uyciu elementw col, np.:
<table>
<col span="2" />
<col />
<col />
<tbody>
<tr>
<td>Wiersz 1,
<td>Wiersz 1,
<td>Wiersz 1,
<td>Wiersz 1,
<td>Wiersz 1,
</tr>
<tr>
<td>Wiersz 2,
<td>Wiersz 2,
<td>Wiersz 2,
<td>Wiersz 2,
<td>Wiersz 1,
</tr>
</tbody>
</table>
komrka
komrka
komrka
komrka
komrka
1</td>
2</td>
3</td>
4</td>
5</td>
komrka
komrka
komrka
komrka
komrka
1</td>
2</td>
3</td>
4</td>
5</td>
Utworzylimy trzy kolumny, z ktrych jedna obejmuje dwie komrki w wierszu, a dwie
pozostae po jednej. To w sumie cztery komrki na wiersz, a wida, e kady wiersz ma
pi komrek. To oznacza, e ostatnia komrka w kadym wierszu nie naley strukturalnie
do kolumny.
No dobrze, to jak sformatowa kolumny, ktre mamy (rysunek 6.5)? Wydaje si, e to proste,
bo wystarczy zastosowa style do elementw col.
col {background: red; width: 10em;}
Rysunek 6.5. Formatowanie elementw kolumn

To proste formatowanie dziaa bez zarzutu w kadej dostpnej obecnie przegldarce.
Jeliwic nie potrzebujesz niczego wicej ni ustawienie ta i szerokoci komrek,
tojesteszczciarzem.
213

Jeli jednak chcesz zrobi z kolumnami cokolwiek innego, to niestety szczcie odwrci
si od Ciebie, poniewa specyfikacja CSS dopuszcza jeszcze tylko dwie inne wasnoci
do formatowania kolumn tabel (border i visibility), z ktrych adna nie jest dobrze
obsugiwana.
Gdybymy w powyszej tabeli zdefiniowali obramowanie, to w kadej przegldarce
wygldaoby inaczej. Niektre aplikacje narysowayby je tylko wok caej kolumny, podczas
gdy inne obrysowayby kolumn i wszystkie znajdujce si w niej komrki. Jeli zastosuje si
jednolite obramowanie o gruboci jednego piksela, to rezultat jest jeszcze nie najgorszy, ale
gdy zastosujemy co grubszego albo niejednolitego, efekt robi si paskudny. Aby to w ogle
zadziaao, trzeba jeszcze doda regu table {border-collapse: collapse;}, co warto
byoby wiedzie, gdyby wyniki byy przewidywalne.
Jeli chodzi o wasno visibility, to mona jej przypisa tylko warto collapse, aby
ukry ca kolumn. wietnie, tylko e to nie dziaa w niektrych przegldarkach, a mwic
konkretnie, w Safari i Chrome oraz ich mobilnych odpowiednikach.
Niektrzy pewnie syszeli o przypadkach formatowania kolumn za pomoc arkuszy stylw.
To bardzo moliwe, poniewa przegldarka Internet Explorer pozwala na stosowanie do
elementw col wszystkich wasnoci CSS. Historia, dlaczego inne przegldarki (a take
specyfikacja CSS) na to nie pozwalaj, jest duga, bolesna i irytujca. Przegldarka IE w tym
przypadku dziaa tak, jak chcemy, i tak, jak powinna.
214
Zatem mimo i teoretycznie kolumny mona atwo formatowa przy uyciu elementu
col, w rzeczywistoci metoda ta jest niezwykle ograniczona. Jeli wic chcesz naprawd
sformatowa kolumny, musisz wykaza si pomysowoci. Najczciej w tym celu

przypisuje si klasy wszystkim komrkom w tabeli.
<table>
<tbody>
<tr>
<td class="c1">Wiersz
</tr>
<tr>
</tr>
</tbody>
</table>
1,
1,
1,
1,
1,
komrka
komrka
komrka
komrka
komrka
1</td>
2</td>
3</td>
4</td>
5</td>
2,
2,
2,
2,
1,
komrka
komrka
komrka
komrka
komrka
1</td>
2</td>
3</td>
4</td>
5</td>
ROZDZIA 6: TABELE
Aby teraz zmieni kolor ta wybranej kolumny na czerwony, wystarczy napisa regu CSS
zselektorem odnoszcym si do odpowiedniej klasy komrek. Poniszy kod da taki sam efekt,
jak wida na rysunku 6.5.
.c1, .c2, .c3, .c4 {background: red; width: 10em;}
Zarwno HTML, jak i CSS w tej metodzie s mniej eleganckie ni poprzednio. Zalet tego
rozwizania jest jednak to, e pozwala na uywanie wszystkich wasnoci CSS, ktre maj
zastosowanie do komrek tabeli (prawie wszystko oprcz marginesw). Jeli wic chcesz
wyrwna zawarto komrek do rodka i pochyli tekst, nic prostszego (rysunek 6.6).
.c1, .c2, .c3, .c4 {background: red; width: 10em;
text-align: center; font-style: italic;}
Rysunek 6.6. Formatowanie kolumn przy uyciu klas

Zapamitaj powyszego efektu nie da si osign za pomoc formatowania stylu
elementw col, poniewa nie zezwala na to specyfikacja (ograniczenie to nie dotyczy
przegldarek IE).
Jeli chcesz wybran kolumn otoczy obramowaniem, jak na rysunku 6.7, to musisz si
nieco bardziej wysili. Najpierw trzeba zdefiniowa obramowanie dla wszystkich komrek
wybranej kolumny, a nastpnie usun grne i dolne obramowanie pierwszej i ostatniej
komrki tej kolumny.
td.c2 {border: 2px solid #000; border-width: 0 2px;}
tr:first-child td.c2 {border-top-width: 2px;}
tr:last-child td.c2 {border-bottom-width: 2px;}
Rysunek 6.7. Obramowanie kolumny uzyskane dziki poczeniu technik

Jeli nie chcesz stosowa tych selektorw z obawy przed problemami w starszych
przegldarkach, to moesz zamiast nich uy wicej klas, tzn. zdefiniowa dodatkowe klasy
dla pierwszej i ostatniej komrki kolumny:
<table>
<tbody>
<tr class="first">
</tr>
<tr class="last">
215

</tr>
</tbody>
</table>
Musisz jeszcze tylko dostosowa swj kod CSS do tych nowych punktw zaczepienia.
td.c2 {border: 2px solid #000; border-width: 0 2px;}
tr.first td.c2 {border-top-width: 2px;}
tr.last td.c2 {border-bottom-width: 2px;}
Teraz poka Ci nieco nietypowy sposb formatowania kolumn, ktry nie wymaga
stosowania adnych dodatkowych klas. Najpierw usumy wszystkie klasy z naszego kodu.
216
<table>
<tbody>
<tr>
<td>Wiersz
<td>Wiersz
</tr>
<tr>
<td>Wiersz
<td>Wiersz
</tr>
</tbody>
</table>
1, komrka 1</td>
1, komrka 5</td>
2, komrka 1</td>
1, komrka 5</td>
Jak sformatowa tylko drug kolumn? Uyj kombinacji selektorw :first-child i

przylegajcego elementu siostrzanego:
td:first-child + td {border: 2px solid #000; border-width: 0 2px;}
tr:first-child td:first-child + td {border-top-width: 2px;}
tr:last-child td:first-child + td {border-bottom-width: 2px;}
W przypadku naszej tabeli do sformatowania pierwszej kolumny potrzebny jest selektor

td:first-child (poniewa wybieramy wszystkie komrki tabeli, ktre s pierwszym
dzieckiem elementu tr). Kad kolejn kolumn wybiera si poprzez dodanie n-1
selektorw + td do powyszego podstawowego selektora. Aby wic przenie obramowanie
na czwart kolumn, naley napisa (rysunek 6.8):
td:first-child + td +td + td {border: 2px solid #000; border-width: 0 2px;}
tr:first-child td:first-child + td + td + td {border-top-width: 2px;}
tr:last-child td:first-child + td + td + td {border-bottom-width: 2px;}
Rysunek 6.8. Formatowanie kolumny przy uyciu selektorw dziecka i elementu siostrzanego
Elegancko czy nie? Zaley od gustu.
ROZDZIA 6: TABELE
Jedna rzecz, o ktrej naley pamita przy zastosowaniu tej metody, to to, e uycie komrek
obejmujcych kilka kolumn obrci nasz wysiek wniwecz. Z drugiej strony, jeli tworzysz
komrki obejmujce po kilka kolumn, to raczej nie planujesz formatowania caych kolumn
(no moe Ty tak, ale wikszo ludzi tego nie robi). Jeli rozcigasz komrki na kilka
kolumn, to najlepszym dla Ciebie rozwizaniem bdzie zastosowanie metody z klasami.
TWORZENIE MAP Z DANYCH TABELARYCZNYCH

Czasami chcemy zaprezentowa na stronie informacje powizane z miejscami
geograficznymi, np. wielko sprzeday w poszczeglnych wojewdztwach, wyniki ankiety
wedug regionw itp. Tego typu dane najlepiej jest przedstawia w strukturze tabeli, ale to
nie oznacza, e musz one by te wizualnie przedstawione w takiej formie. Czemu by nie
umieci ich na mapie?
Do tego potrzebne s dwie rzeczy oprcz CSS. Po pierwsze, potrzebne s odpowiednie
klasy i identyfikatory w kodzie HTML. Oto fragment kodu HTML, ktry wykorzystaem
dosporzdzenia mapy Stanw Zjednoczonych.
<table>
<thead>
<tr>
<th scope="col">Stan</th>
<th scope="col">Liczba kongresmanw</th>
</tr>
</thead>
<tbody>
<tr id="AL">
<th scope="row">AL</th>
<td>7</td>
</tr>
<tr id="AK">
<th scope="row">AK</th>
<td>1</td>
</tr>
<tr id="WY">
<th scope="row">WY</th>
<td>1</td>
</tr>
</tbody>
</table>
Mamy nieco wicej ni 47 wierszy danych, ktre chcemy umieci na mapie. To jest wanie
druga rzecz, ktrej potrzebujemy obraz mapy (rysunek 6.9).
217
Rysunek 6.9. Mapa
218
Majc map, mona zacz wyznacza miejsce wywietlenia wszystkich porcji danych. W tym
celu musimy znale przybliony rodek kadego ze stanw. Zrobiem to w ten sposb, e
otworzyem obraz mapy w edytorze grafiki i znalazem wsprzdne X i Y kadego punktu,
po czym zapisaem je w postaci listy:
AL
692
448
AK
210
560
330
300
WY
W tych punktach umiecimy nasze informacje, ale to nie oznacza, e wartoci bdziemy
wyraa w pikselach przeliczymy je na procenty wymiarw obrazu. Ta mapa ma wymiary
1000700 pikseli. W zwizku z tym kad wsprzdn poziom dzielimy przez 1000,
pionow przez 700 i otrzymujemy:
AL
69,2%
64%
AK
21%
80%
33%
42,9%
WY
List moemy odoy na razie na bok, bo teraz zajmiemy si pisaniem kodu CSS.
Najpierw sprawiamy, aby mapa w ogle zostaa wywietlona:
ROZDZIA 6: TABELE
table, table * {margin: 0; padding: 0; font: 1em/1 sans-serif;}
table {display: block; width: 1000px; height: 700px;
background: url(us-state-map.gif) no-repeat;}
Mapa jest ju na swoim miejscu, tylko dane zamiast by odpowiednio rozmieszczone,

s stamszone przy lewej krawdzi okna (rysunek 6.10). Mao interesujce? Jest to
spowodowane tym, e komrki s uoone razem, tak jak powinny by w tabeli, ale sam
element table nie odgrywa ju takiej roli, jak powinien odgrywa normalnie. Teraz
generuje pole blokowe, takie jak elementy div. Przez to wszystkie powizania ukadowe
midzy elementem table oraz jego komrkami i wierszami zostay zerwane. Naprawd.
219
Rysunek 6.10. Mapa i dane

Teraz musimy umieci dane na swoim miejscu. Najpierw zamienimy je w elementy
blokowe, a potem ustawimy je, gdzie trzeba, za pomoc pozycjonowania (teoretycznie
elementy pozycjonowane s automatycznie zamieniane w blokowe, ale ja dla pewnoci wol
bezporednio deklarowa wasno display). Warto te doda tymczasowe obramowanie,
aby byo lepiej wida, co gdzie ley (rysunek 6.11).
tr, th, td {display: block;}
tr {position: absolute; top: 0; left: 0;
color: #527435;
border: 1px dotted red;}
220
Rysunek 6.11. Pierwszy etap pozycjonowania danych

Wszystko zbiego nam si w lewym grnym rogu, zamiast trafi w wyznaczone miejsca.
Nadszed zatem czas na wykorzystanie sporzdzonej wczeniej listy procentowych
wsprzdnych. Wartoci pooenia poziomego przypisujemy wasnoci left, a pionowego
wasnoci top (rysunek 6.12).
#AL {left: 69.2%; top: 64%;}
#AK {left: 21%; top: 80%;}
#WY {left: 33%; top: 42.5%;}
Jak wida, jednak nie wszystko jest na swoim miejscu. Powodem tego jest to, e punkt
rodkowy (albo przynajmniej punkty wypadajce w sensownym miejscu na powierzchni
stanu) kadego stanu zosta wybrany podczas sporzdzania listy. Zastosowanie tych wartoci
jako grnego i lewego przesunicia umieszcza lewy grny rg kadego pozycjonowanego
elementu w wybranych punktach. Zatem pozycjonowane elementy tr znajduj si poniej
ina prawo od tych punktw.
ROZDZIA 6: TABELE
Rysunek 6.12. Rozmieszczenie danych na mapie USA

Jest jeszcze problem z maymi pnocno-wschodnimi stanami, ktrych dane nie mieszcz
si w swoich polach, ale tym zajmiemy si pniej.
Najprostszym rozwizaniem tego problemu jest przypisanie kademu elementowi
tr szerokoci i wysokoci, a nastpnie przecignicie ich do gry i w lewo o poow
przypisanych wymiarw. Po kilku prbach udao mi si wypracowa to, co wida poniej
(rysunek 6.13):
width: 2em; height: 2em;
margin-left: -1em; margin-top: -1em;
color: #527435;
border: 1px dotted red;}
221
222
Rysunek 6.13. Korekta pooenia pl danych

Spjrz! Teraz dane znajduj si mniej wicej na swoich miejscach, cho bez wtpienia mona
by jeszcze to i owo poprawi. Np. pole Florydy jest nieco za daleko przesunite, ale powoli
mapa zaczyna nabiera ksztatu, przynajmniej w obszarach poza pnocnym wschodem.
Rwnie tekst wymaga wyrwnania, a wic robimy z nim porzdek i poprawiamy jeszcze
kilka innych drobiazgw.
width: 2em; height: 2.2em;
margin-left: -1em; margin-top: -1.1em;
color: #527435;}
tbody th, tbody td {text-align: center;}
tbody th {font-weight: bold; border-bottom: 1px solid gray; margin-bottom: 0.1em;}
Na rysunku 6.14 wida wyran popraw! Oczywicie na pnocnym wschodzie nadal

mamy straszny baagan (takie arty to lepiej zachowaj dla siebie).
ROZDZIA 6: TABELE
Rysunek 6.14. Mapa po naniesieniu poprawek

Zostawi to ju tak, jak jest, gdy przypadek ten doskonale obrazuje, dlaczego naley
ostronie podchodzi do prezentowania danych tabeli w postaci mapy. Oczywicie
problem ten da si rozwiza za pomoc CSS. Mona np. ukry dane w tych maych
stanach i wywietla je tylko po najechaniu kursorem. Jeszcze lepszym pomysem byoby
uycie odpowiednio duej mapy, na ktrej wszystko si zmieci, np. z powikszon czci
pnocno-zachodni albo ze strzakami wskazujcymi najmniejsze stany. Wwczas
informacje mona by byo umieci na kocu strzaek. Wybr metody pozostawiam
Czytelnikowi.
Pozostaa jeszcze jedna rzecz do zrobienia. Na razie dostpno tabeli nie stoi na wysokim
poziomie zapewniaj j tylko ocalae atrybuty scope. W ramach promocji dostaniemy
dodatkowe elementy do sformatowania. Ta tabela powinna mie streszczenie i podpis.
<table summary="Lista stanw USA z wyszczeglnieniem liczby kongresmanw z kadego
znich w Izbie Reprezentantw, ktra jest nisz izb Kongresu Stanw Zjednoczonych.">
<caption>U.S. Representatives, by State</caption>
<thead>
223

Mona wykorzysta jako tytu mapy element caption (rysunek 6.15) i wyczy element
thead, ktry w niektrych przegldarkach siedzia stamszony w lewym grnym rogu
ibrzydko wyglda.
thead {display: none;}
caption {position: absolute;
top: 0; left: 0; right: 0; text-align: center;
font: bold 200% sans-serif;}
224
Rysunek 6.15. Tytu mapy utworzony przy uyciu elementu caption

Znakomicie! Mamy map z rozmieszczonymi na niej informacjami. Dane maj poprawn
struktur, s atwo dostpne i wygldaj zdecydowanie lepiej ni zwyka tabela.
WYKRESY Z TABEL
Czasami dane tabelaryczne nadaj si do przedstawienia w postaci wykresu. Zbiorw
danych tego typu jest wcale niemao, mog to by np. informacje o kwartalnych zarobkach,
wykaz najwyszych i najniszych temperatur w poszczeglnych tygodniach albo rednie
wartoci opadw w cigu roku.
Wemy jednak co bliszego naszemu sercu, czyli dane na temat liczby pocze z serwerem
i odwiedzin serwisu internetowego.
ROZDZIA 6: TABELE
<table summary="Poczenia z serwerem i wywietlenia strony w serwisie meyerweb.
com w okresie od
10.01 do
19.01">
<caption>Ruch sieciowy</caption>
<thead>
<tr>
<th scope="col">Dzie</th>
<th scope="col" class="hits">Poczenia</th>
<th scope="col" class="views">Wywietlenia</th>
</tr>
</thead>
<tbody>
<tr id="day01">
<th scope="row">10.01</th>
<td class="hits">151 308</td> <td class="views">70 342</td>
</tr>
<tr id="day02">
</tr>
<tr id="day03">
</tr>
<tr id="day04">
</tr>
<tr id="day05">
</tr>
<tr id="day06">
</tr>
<tr id="day07">
</tr>
<tr id="day08">
</tr>
<tr id="day09">
225

</tr>
<tr id="day10">
</tr>
</tbody>
</table>
Dane te w surowej postaci w przegldarce wygldaj tak, jak wida na rysunku 6.16.
226
Rysunek 6.16. Surowa tabela

Tabel t mona bardzo atwo zamieni na wykres. Wystarczy tylko kady dzie umieci
wodpowiednim miejscu, a nastpnie ustawi odpowiedni wysoko komrek. Proste!
No dobrze, moe nie takie proste, ale jak si przekonasz, nie jest to te a takie trudne.
Najpierw zdefiniujemy sobie obszar roboczy do dalszej pracy.
table, table * {outline: 1px dotted red;}
table {display: block; position: relative;
height: 300px; width: 600px;
font: small sans-serif;}
Wasnociom height i width mona nada wartoci w dowolnej jednostce, ale zdecydowaem
si na piksele, poniewa na ich przykadzie najatwiej jest objani obliczenia arytmetyczne,
ktre bdzie trzeba pniej wykona. Moesz jednak spa spokojnie, nic, co tu bdziemy
robi, nie wymaga stosowania pikseli. Po zakoczeniu pracy bdzie je mona wymieni
nadowoln inn jednostk. Wasno outline zostaa zdefiniowana tylko tymczasowo,
abybyo lepiej wida efekt naszej pracy.
ROZDZIA 6: TABELE
Zaczynamy pozycjonowanie zawartoci tabeli:
tr, th, td {display: block; position: absolute;}
tbody tr {left: 0; bottom: 0; width: 10%; height: 100%;}
Dla wierszy w elemencie tbody zostaa zdefiniowana szeroko 10%, poniewa maj one by
uoone w jednej linii, a jest ich wanie dziesi (czyli 100% szerokoci tabeli podzielilimy
przez 10 elementw). Nastpnie rozmieszczamy wiersze jeden obok drugiego (rysunek 6.17):
#day02 {left: 10%;}
#day03 {left: 20%;}
#day04 {left: 30%;}
#day05 {left: 40%;}
#day06 {left: 50%;}
#day07 {left: 60%;}
#day08 {left: 70%;}
#day09 {left: 80%;}
#day10 {left: 90%;}
tbody td {bottom: 0;}
227
Rysunek 6.17. Formatowanie kontenerw supkw wykresu

Teraz bdzie najmudniejsza cz zadania, czyli okrelenie przesunicia od lewej dla
kadego wiersza. Wyobra sobie, co by byo, gdybymy musieli to robi dla caego miesica!
Dlatego do pisania tego typu rzeczy wykorzystuje si skrypty, ale o tym pniej.
W tej chwili supki stoj, tak jak powinny, i zaczyna si najgorsze, bo dla kadego z nich
musimy obliczy wysoko, a nastpnie mu j przypisa. Zaczniemy od najwyszej wartoci,
ktr w naszym przypadku jest liczba 251 969. Nastpnie wybieramy jak warto rwn
tej wartoci lub od niej wiksz, ktra bdzie reprezentowaa maksimum na wykresie, moe
to by np. 260000, 275000 albo nawet 300000. Ja wybraem warto 260000.

Po dokonaniu tego wyboru kad warto supka dzielimy przez wybran maksymaln
warto, aby uzyska reprezentacj procentow. W zwizku z tym dla pierwszego wiersza,
w ktrym znajduj si wartoci 151308 i 70342, uzyskamy odpowiednio 58,2% i 27,05%.
Wartoci te naley przypisa wasnoci height elementw td w pierwszym wierszu.
Analogicznie dla drugiego wiersza obliczymy wartoci 53,42% i 27,08% (wiem, wykonywanie
tych wszystkich oblicze na piechot to potworna udrka, dlatego nieco dalej opisuj sposb
wykonania ich za pomoc skryptu).
#day01
#day01
#day02
#day02
td.hits {height: 58.2%;}

td.views {height: 27.05%;}
td.hits {height: 53.42%;}
td.views {height: 27.08%;}
Po powtrzeniu tego procesu dla wszystkich dziesiciu wierszy otrzymamy efekt widoczny
na rysunku 6.18.
228
Rysunek 6.18. Supki o okrelonych wysokociach

Jest ju troch lepiej, ale nadal trudno dopatrzy si jakichkolwiek supkw. Pomoe dodanie
kolorw (rysunek 6.19).
.hits {background: #4444ED; color: #FFF;}
.views {background: #44ED44;}
Ten prosty dodatek sprawi, e supki stay si bardzo dobrze widoczne. Gdybymy usunli
ten przerywany obrys, to otrzymalibymy prawie gotowy wykres. Jest jeszcze tylko jeden
powany problem, ktry dotyczy elementw thead i caption ich zawarto cay czas
wisi w lewym grnym rogu. Oprcz tego mamy kilka mniejszych problemw, jak choby
to, e supki po lewej stronie maj rne szerokoci, a najwyszy supek, reprezentujcy
dzie 1/14/10, nachodzi na tre elementu th.
ROZDZIA 6: TABELE
Rysunek 6.19. Dziki dodaniu kolorw supki s lepiej widoczne

Usuwanie usterek zaczniemy od koca, czyli najpierw usuniemy czerwony obrys
izdefiniujemy delikatne obramowanie na grze i u dou caego wykresu.
table, table * {outline: none;}
table {display: block; position: relative; height: 300px; width: 600px;
border: 1px solid #999; border-width: 1px 0;
font: small sans-serif;}
Natomiast z nachodzeniem treci poradzimy sobie w ten sposb, e wszystkie daty

przeniesiemy nad tabel (rysunek 6.20), uniemoliwiajc tym samym ich zasonicie.
tbody th {top: -1.33em;}
Rysunek 6.20. Usunicie usterek z nagwka

Teraz wyrwnany szerokoci supkw i wyrodkujemy je w zawierajcych je blokach
(elementach tr).
tbody td {bottom: 0; width: 90%; left: 5%;}
229

Tekst wyglda, jakby by nie na swoim miejscu, ale wyrwnanie go do rodka powinno
pomc (rysunek 6.21). Jeli chcesz wyrodkowa wiksz ilo treci, odpowiedni regu
CSS zastosuj do elementu znajdujcego si wyej w hierarchii dokumentu.
table {display: block; position: relative;
height: 300px; width: 600px;
border: 1px solid #999; border-width: 1px 0;
font: small sans-serif; text-align: center;}
230
Rysunek 6.21. Wyrwnanie szerokoci supkw

Teraz jednak daty nie pokrywaj si prawidowo ze supkami. Stao si tak dlatego, e dla
elementw td zdefiniowalimy szeroko i przesunicie, a nie zrobilimy tego dla elementw th.
W takim razie poprawiamy niektre reguy i przypisujemy wasnoci width i left nie tylko
elementom td, lecz rwnie elementom th bdcym potomkami elementu tbody. W tym
celu przenosimy deklaracje width: 90%; left: 5%; z reguy body td do osobnej reguy.
tbody th, tbody td {width: 90%; left: 5%;}
tbody td {bottom: 0;}
tbody th {top: -1.33em;}
Co jeszcze zostao? Elementy thead i caption wci gnied si w lewym grnym rogu.
Drugi z nich umiecimy pod tabel i wyrodkujemy oraz pogrubimy jego tekst:
caption {position: absolute; bottom: -1.75em; width: 100%; text-align: center;
font-weight: bold;}
Natomiast element thead zamienimy na legend wykresu, bo przecie zawiera on niezbdne

do jego zrozumienia informacje.
W tym celu najpierw usuniemy pozycjonowanie elementw tr i th w tym elemencie,
ktre w tej chwili s pozycjonowane bezwzgldnie dziki regule z selektorem tr, th, td.
Przesonimy t wasno, przypisujc wspomnianym elementom warto static, w istocie
oznaczajc brak pozycjonowania.
thead * {position: static; padding: 0.25em;}
ROZDZIA 6: TABELE
Rwnie dobrze mona by zamieni selektor tr, th, td na bardziej szczegowy tbody
tr, tbody th, tbody td. Wwczas nie musielibymy usuwa pozycjonowania potomkw
elementu thead, ale musielibymy napisa regu thead * {display: block;}, aby zmusi
komrki do uoenia si jedna nad drug.
Wynik w obu przypadkach byby taki sam (rysunek 6.22). Po zrobieniu tego
(niewane,wjaki sposb) moemy zdefiniowa pooenie elementu thead.
thead {position: absolute;
top: 50%; margin-top: -2.5em;
left: 100%; margin-left: 2.5em;}
231
Rysunek 6.22. Wykres z legend utworzon z nagwkw kolumn

Gotowe!
Kilka razy obiecywaem, e napisz co na temat automatyzacji niektrych dziaa za pomoc
skryptw. Teraz speni t obietnic. Nie ma wtpliwoci, e w wyznaczaniu grnej granicy
wykresu (w tym przypadku 260000) i obliczaniu wysokoci supkw bardzo pomocny byby
jaki skrypt. Spraw t mona zaatwi na dwa sposoby.
Po pierwsze, wykonanie caego zadania mona zleci serwerowi. Wwczas dane do wykresu
byyby pobierane z bazy danych, a sama strona byaby generowana na podstawie jakiego
standardowego szablonu. W takim przypadku nasz rol byoby tylko wbudowanie w szablon
skryptu obliczajcego potrzebne nam wartoci, ktre wykorzystalibymy najpewniej w osobnym
arkuszu stylw.
Druga moliwo to zaprzgnicie do roboty JavaScriptu. W tym przypadku wartoci
okrelajce wysokoci supkw nie byyby zapisane w tym samym arkuszu stylw co style
reszty wykresu. Po wczytaniu strony przez przegldark uruchamiaaby si specjalna ptla
JS, ktra przemierzaaby tabel dwukrotnie. Za pierwszym razem pobieraaby wszystkie
dane i okrelaa warto maksymaln, a za drugim razem dynamicznie przypisywaaby
odpowiedni wasno wysokoci elementom td.
7
ROZDZIA
PODRCZNIK CSS
PIE
PRZYSZOCI
W TYM ROZDZIALE opisuj najblisz

przyszo technik zwizanych z arkuszami
stylw. Jutro, pojutrze, a moe za rok bdziemy
mogli korzysta z elementw jzyka HTML
5, tworzy ukady na podstawie parametrw
ekranu, stosowa skomplikowane selektory
idynamicznie przeksztaca ukady elementw.

Niektre z tych najnowszych technik s ju
czciowo obsugiwane, a wic mona je
zaliczy do najnowoczeniejszych technik
projektowania stron WWW.

Trzeba tylko uwaa, aby nie da si ponie fali! Istnieje kilka witryn internetowych, na ktre
warto zajrze, aby si dowiedzie, jak naley korzysta z tych najnowszych technologii:
http://css3please.com/
http://css3generator.com/
http://www.westciv.com/tools/gradients/
http://gradients.glrzad.com/
Przy uyciu specjalnych skryptw JavaScript mona zmusi do obsugi zaawansowanych

wasnoci take starsze przegldarki, nawet tak stare jak IE 5 dla Windows. Niektre z tych
skryptw s przeznaczone specjalnie dla wybranych aplikacji, inne natomiast rozszerzaj
obsug CSS we wszystkich znanych przegldarkach. Przydaj si, gdy nasi uytkownicy nie
nadaj za duchem czasu, a nie chcielibymy, aby tracili zabaw.
http://css3pie.com/
http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
http://www.keithclark.co.uk/labs/ie-css3/
http://code.google.com/p/ie7-js/ (w rzeczywistoci skrypt o wiele wszechstronniejszy,
ni sugeruje jego adres URL)

http://ecsstender.com/
234
Dostpnych jest te wiele rozszerze CSS w postaci wtyczek do popularnych bibliotek

JavaScript, takich jak np. JQuery. Jeli korzystasz z jednej z nich, to poszperaj, aby sprawdzi,
co jest dostpne.
Jeszcze raz przypominam: uwaaj! Wszystkie opisane w tym rozdziale techniki s bardzo
przydatne i pozwalaj znaczco wzbogaci strony, ale kad stron z ich uyciem trzeba
bardzo dokadnie przetestowa, aby upewni si, e moliwe jest jej odczytanie w starszych
przegldarkach.
FORMATOWANIE ELEMENTW HTML 5

Formatowanie elementw HTML 5 za pomoc kaskadowych arkuszy stylw niczym si nie
rni od formatowania elementw HTML 4. W nowszej wersji jzyka dodano wprawdzie
pewn liczb nowych elementw, ale sposb ich formatowania jest taki sam. Elementy te
generuj takie same pola jak stare elementy div, span, h2 czy a.
Poniewa specyfikacja HTML 5 nie jest jeszcze ukoczona, moe si jeszcze wiele zmieni,
ale mimo to warto stosowa ponisze deklaracje, aby pokaza starszym przegldarkom, jak
maj postpowa z elementami, ktrych nie znaj.
article, aside, canvas, details, embed, figcaption, figure, footer, header, hgroup,
menu, nav, section, summary {display:block;}
command, datalist, keygen, mark, meter, progress, rp, rt, ruby, time, wbr
{display: inline;}
ROZDZIA 7: PIE PRZYSZOCI

Moe zauwaye, e pominem dwa wane nowe elementy: audio i video. Zrobiem to,
gdy nie bardzo wiadomo, jak je traktowa jako bloki czy jako elementy rdliniowe.
Wszystko zaley od tego, jak zamierzamy ich uywa. Dlatego najlepiej jest je definiowa
wsposb odpowiedni do sytuacji.
Co jednak z bardzo starymi przegldarkami, jak IE 6, ktre s cay czas w uyciu (w wiecie
przegldarek internetowych wiek sabo koreluje z poziomem popularnoci)? Aby je zmusi
do rozpoznawania nowych elementw i umoliwi ich formatowanie, trzeba uy skryptw
JavaScript. Przykadowo pod adresem http://remysharp.com/downloads/html5.js znajduje
si fajny, niewielki skrypt rozszerzajcy moliwoci starych przegldarek IE o obsug
elementw HTML 5. Jeli planujesz ich uywanie, to koniecznie pobierz ten skrypt i docz
go do swoich stron.
Gdy ju przywoasz swoj przegldark do porzdku i bdzie taczy, jak jej zagrasz, moesz
zabra si do pisania stylw. Pamitaj, e formatowanie za pomoc CSS tych elementw
niczym nie rni si od poprzedniej wersji jzyka HTML (rysunek 7.1). Na przykad:
figure {float: left; border: 1px solid gray; padding: 0.25em; margin: 0 0 1.5em 1em;}
figcaption {text-align: center; font: italic 0.9em Georgia, "Times New Roman",
Times, serif;}
<figure>
<img src="splash.jpg" alt="Twarz dziecka jest zasonita przez pomarszczon
i wzburzon tafl wody uniesion przez dziecko, ktre uderza domi o powierzchni
wody w basenie.">
<figcaption>PLUSK, PLUSK, PLUSK!!!</figcaption>
</figure>
Rysunek 7.1. Sformatowany obraz HTML 5 z podpisem
235
IMITACJA ELEMENTW HTML 5

ZA POMOC NAZW KLAS
Wielu osobom podoba si nowy jzyk HTML 5, ale nie s jeszcze gotowe na zaimplementowanie
w caoci swoich serwisw przy jego uyciu. Niektrzy musz trzyma si technologii
o ugruntowanej pozycji, takich jak HTML 4 i XHTML, gdy wikszo ich uytkownikw
korzysta ze starszych przegldarek. Mimo to nie ma co si martwi dziki
wszechstronnemu atrybutowi class mona czerpa korzyci ze wszystkich stron.
Metod, ktr tu przedstawiam, opisa Jon Tan w artykule http://jontangerine.com/
log/2008/03/preparing-for-html5-with-semantic-class-names. Polega ona na uywaniu
starych elementw, takich jak div i span, i przypisywaniu im klas o nazwach identycznych
znazwami elementw HTML 5. Poniej znajduje si przykad takiego kodu, a na rysunku 7.2
wida jego efekt w przegldarce.
.figure {float: left; border: 1px solid gray; padding: 0.25em; margin: 0 0 1.5em 1em;}
.figcaption {text-align: center; font: italic 0.9em Georgia, "Times New Roman", Times,
serif;}
236
<div class="figure">
<img src="spring.jpg" alt="Dziewczynka z warkoczami, odwrcona tyem
do aparatu, huta si na hutawce w zachodzcym socu zasanianym na zdjciu
przez poprzeczk hutawki.">
<div class="figcaption">Wiosenne hutanie</div>
</div>
Rysunek 7.2. Sformatowany obrazek HTML 4 z podpisem

Porwnujc zastosowany tu arkusz stylw z arkuszem z poprzedniego przykadu, mona
spostrzec, e jedyna rnica midzy nimi polega na tym, i teraz przed nazwami figure
ifigcaption znajduj si kropki, co oznacza, e s to nazwy klas. Oczywicie kod HTML
zosta zmieniony, ale podstawowa struktura pozostaje w nim taka sama.
Metoda ta ma t zalet, e gdy zdecydujemy si kiedy przej na jzyk HTML 5, to wystarczy,
e elementy z klasami zamienimy na odpowiednie elementy tego jzyka, a nastpnie
zselektorw klas w CSS usuniemy kropki, aby zamieni je na selektory elementw. atwiutkie!
ZAPYTANIA O MEDIA
Temu tematowi mona by powici cay rozdzia, jeli nie ksik. Dlatego pamitaj, e
wszystko, co tu zostao napisane, to jedynie krtkie streszczenie dostpnych moliwoci.
Koniecznie poszukaj dodatkowych informacji na ten temat, gdy pod wieloma wzgldami
tak bdzie wygldaa przyszo formatowania za pomoc stylw.
Zapytania o media pozwalaj na tworzenie blokw warunkowych stylw do zastosowania
wrnych rodowiskach medialnych. Np. mona napisa oddzielny arkusz stylw dla ekranw
o standardowych wymiarach i oddzielny dla ekranw panoramicznych. Mona te zmienia
kolorystyk w zalenoci od obsugiwanej przez urzdzenie gbi kolorw albo parametry
pisma w zalenoci od zagszczenia pikseli na ekranie. Mona nawet zmienia ukad strony
(rysunek 7.3) na podstawie informacji o szerokoci ekranu i dostpnej na nim liczbie pikseli.
Rysunek 7.3. Prosty ukad trzykolumnowy
237

Jak to moliwe? Spjrzmy na podstawowy arkusz stylw ukadu trzykolumnowego.
body {background: #FFF; color: #000;
font: small Arial, sans-serif;}
.col {position: relative;
margin: 3em 1%; padding: 0.5em 1.5%;
border: 1px solid #AAA; border-width: 1px 1px 0 1px;
float: right; width: 20%;}
#two {width: 40%;}
#footer {clear: both;}
Mimo niewtpliwych zalet tego kodu (zwaszcza jeli chodzi o oszczdno) istnieje due
ryzyko, e na maych tzn. wskich ekranach wystpi problemy. A gdybymy w takich
sytuacjach mogli magicznie zmienia ukad na dwukolumnowy?
Okazuje si, e moemy. Najpierw musimy zdefiniowa warunek, e ukad trzykolumnowy
ma by wywietlany tylko wtedy, gdy dostpne jest przynajmniej 800 pikseli powierzchni
poziomej. Mona to zrobi, dzielc deklaracje czci ukadu na osobne reguy.
238
body {background: #FFF; color: #000;

font: small Arial, sans-serif;}
.col {position: relative;
margin: 3em 1%; padding: 0.5em 1.5%;
border: 1px solid #AAA; border-width: 1px 1px 0 1px;}
#footer {clear: both;}
.col {float: right; width: 20%;}
#two {width: 40%;}
Nastpnie dwie ostatnie reguy umieszczamy w zapytaniu o media:

@media all and (min-width: 800px) {
.col {float: right; width: 20%;}
#two {width: 40%;}
}
Pierwszy wiersz tej reguy mona przetumaczy nastpujco: deklaracje w tym bloku maj
zastosowanie we wszystkich mediach o szerokoci ekranu nie mniejszej ni 800 pikseli.
Jeli szeroko ekranu bdzie choby odrobin mniejsza, deklaracje w tej regule zostan
zignorowane. Zwr uwag na nawiasy otaczajce skadnik min-width i jego warto tego
typu deklaracje (nazywane wyraeniami) naley zawsze umieszcza w nawiasach okrgych.
Po wprowadzeniu tych modyfikacji wszystko pozostanie bez zmian, dopki nie zmniejszymy
okna przegldarki do szerokoci poniej 800 pikseli (rysunek 7.4). Po przekroczeniu tego
progu kolumny przestan pywa jedna obok drugiej.
Rysunek 7.4. Efekt zmniejszenia okna do szerokoci poniej 800 pikseli

Teraz mona napisa kolejny blok zapytania z reguami majcymi zastosowanie w warunkach
o mniejszej szerokoci okna. Zamy, e dla wymiarw od 500 do 800 pikseli szerokoci
chcemy zdefiniowa ukad dwukolumnowy (rysunek 7.5).
@media all and (min-width: 500px) and (max-width: 799px) {
.col {float: left; width: 20%;}
#two {float: right; width: 69%;}
#three {clear: left; margin-top: 0;}
}
Na koniec mona jeszcze doda style dla ukadu jednokolumnowego, gdy szeroko ekranu
bdzie mniejsza od 500 pikseli (rysunek 7.6).
@media all and (max-width: 499px) {
#one {text-align: center;}
#one li {display: inline; liststyle: none;
padding: 0 0.5em;
border-right: 1px solid gray;
line-height: 1.66;}
#one li:last-child {border-right: 0;}
#three {display: none;}
}
239
Rysunek 7.5. Zmieniony ukad dla szerokoci okna od 500 do 800 pikseli
240
Rysunek 7.6. Ukad jednokolumnowy stosowany w oknach o szerokoci poniej 500 pikseli

We wszystkich prezentowanych zapytaniach definiowalimy style ukadu w zalenoci
odwielkoci obszaru roboczego w oknie przegldarki. Mwic oglniej, dotycz one
obszaru roboczego dostpnego dla dokumentu w dowolnym medium. Oznacza to np.,
ejeli dokument wydrukujemy na kartce z obszarem roboczym o szerokoci 784 pikseli,
towydruk bdzie w ukadzie dwukolumnowym.
Aby zmiany liczby kolumn ograniczy tylko do mediw ekranowych, naley zmodyfikowa
zapytania w nastpujcy sposb:
@media screen and (min-width: 800px) {...}
@media screen and (min-width: 500px) and (max-width: 799px) {...}
@media screen and (max-width: 499px) {...}
A co zrobi, gdybymy chcieli ukad trzykolumnowy zastosowa take w niektrych innych

mediach, takich jak druk czy ekran telewizora? Wwczas naley doda te media do listy,
oddzielajc je przecinkami:
@media print, tv, screen and (min-width: 800px) {...}
W tym przypadku przecinki odgrywaj rol logicznego LUB, a wic pierwsze zapytanie
naley odczyta tak: stosuj te style w mediach drukowanych LUB TV LUB w obszarze
roboczym w mediach ekranowych, ktrych szeroko wynosi przynajmniej 800 pikseli.
A gdybymy chcieli zastosowa ukad trzykolumnowy we wszystkich mediach innych ni
typu screen? Naley doda do pierwszego zapytania instrukcj z modyfikatorem not, ktry
bdzie oznacza wszystko, co nie jest ekranem.
@media not screen, screen and (min-width: 800px) {...}
Tak jak poprzednio, przecinek odgrywa rol operatora logicznego LUB, a wic zapytanie to
mona przeczyta nastpujco: wszystko, co nie jest w medium ekranowym, LUB obszar
roboczy na ekranie medium, ktrego szeroko wynosi przynajmniej 800 pikseli.
Istnieje rwnie modyfikator only sucy do tworzenia zapyta typu only print (tylko
druk) albo only screen and color (tylko ekran i kolor). Na razie jedynie modyfikatory
not i only s w zapytaniach o media.
Przy okazji warto wspomnie, e w zapytaniach nie ma obowizku uywania tylko pikseli
jako jednostek. Mona w nich uywa jednostki em, procentw i wszystkich pozostaych.
W tabeli 7.1 znajduje si zestawienie wszystkich skadnikw do budowy zapyta o media.
Prawie wszystkie z nich mona poprzedzi przedrostkami min i max (np. device-height
wystpuje te w wersjach min-device-height i max-device-height). Do wyjtkw w tej
kwestii nale orientation, scan i grid.
241

Tabela 7.1. Podstawowe skadniki zapyta o media
242
Skadnik
Opis
width
Szeroko obszaru roboczego (np. okna przegldarki).
height
Wysoko obszaru roboczego (np. okna przegldarki).
device-width
Szeroko ekranu urzdzenia (np. monitora komputerowego albo urzdzenia

przenonego).
device-height
Wysoko ekranu urzdzenia (np. monitora komputerowego albo urzdzenia

przenonego).
orientation
Orientacja ekranu pionowa lub pozioma.
aspect-ratio
Stosunek szerokoci obszaru roboczego do jego wysokoci. Jako warto

naley poda dwie liczby cakowite oddzielone ukonikiem.
device-aspect-ratio
Stosunek szerokoci urzdzenia do jego wysokoci. Jako warto naley

poda dwie liczby cakowite oddzielone ukonikiem.
color
Bitowa gbia koloru urzdzenia. Jako wartoci naley podawa liczby

cakowite bez jednostek, okrelajce gbi w bitach. Jeli nie zostanie
podana adna warto, to uyty zostanie kady ekran.
color-index
Liczba kolorw dostpna w tabeli wyszukiwania kolorw urzdzenia.

Jakowartoci naley podawa liczby cakowite bez jednostek.
monochrome
Dotyczy urzdze monochromatycznych.
resolution
Rozdzielczo ekranu. Wartoci mona wyraa w jednostkach dpi i dpcm.
scan
Typ skanowania urzdzenia TV. Dwie dostpne wartoci to progressive

(progresywne) i interlace (przeplot).
grid
Okrela, czy urzdzenie ma wywietlacz siatkowy (np. urzdzenia TTY). Dwie

moliwe wartoci to 0 i 1.
FORMATOWANIE
WYBRANYCH ELEMENTW-DZIECI
Czasami potrzebny jest dostp do co drugiego, trzeciego, pitego, smego albo trzynastego
elementu w szeregu. Najczciej mamy z takimi sytuacjami do czynienia w przypadku elementw
dugich list albo wierszy (lub kolumn) tabeli, ale tak naprawd moliwoci jest nieskoczenie wiele.
Rozwaymy mniej oczywisty przypadek. Zamy, e mamy du liczb cytatw, ktre
chcielibymy rozmieci jako elementy pywajce w strukturze siatki. Typowym problemem
w takich sytuacjach jest to, e cytaty mog mie rn dugo i te dusze mog przerywa
siatk, co wida na rysunku 7.7.
Klasycznym rozwizaniem tego problemu jest dodanie klasy do co czwartego elementu
div (w ktrym zawarte s cytaty) i zastosowanie wasnoci clear. Ale czy nie byoby lepiej,
zamiast zamieca kod tymi wszystkimi klasami, uy selektora wybierajcego co czwarty
element div (rysunek 7.8)?
.quotebox:nth-child(4n+1) {clear: left;}
Rysunek 7.7. Problem z pywajcymi elementami o rnej wysokoci
Rysunek 7.8. Zastosowanie wasnoci clear do co czwartego elementu div
243

Krtko wyjani znaczenie zapisu 4n+1.
Czon 4n oznacza, e niniejsza formua dotyczy co czwartego elementu w szeregu
n=0, 1, 2, 3, 4, a wic elementw 0, 4, 8, 12, 16 itd. (analogicznie zapis 3n oznaczaby
elementy 0, 3, 6, 9, 12).
Poniewa w szeregu nie ma elementu zerowego, naley zacz liczenie od jedynki.
Dlatego dodalimy +1, aby wybra elementy pierwszy, pity, dziewity itd.
Tak, dobrze przeczytae, wzorzec :nth-child() zaczyna odliczanie od zera, natomiast
liczenie elementw zaczyna si od jedynki. Dlatego czon +1 znajdziemy w prawie
wszystkich selektorach tego typu.
Najlepsze jest to, e jeli zmienimy zdanie i postanowimy wybra nie co czwarty,
leczcotrzeci element (rysunek 7.9), to musimy zmieni tylko jedn liczb.
244
Rysunek 7.9. Zastosowanie wasnoci clear do co trzeciego elementu div

Ju samo to wyglda bardzo dobrze, ale moe by jeszcze lepiej. Jeli t metod poczymy
zzapytaniami o media, to uzyskamy automatycznie dostosowujc si siatk (rysunek 7.10).
@media all and (min-width: 75.51em) {
}
@media all and (min-width: 60.01em) and (max-width: 75em) {
}
@media all and (min-width: 45.51em) and (max-width: 60em) {
}
@media all and (min-width: 30.01em) and (max-width: 45.5em) {
}
@media all and (max-width: 30em) {
.quotebox {float: none;}
}
245
Rysunek 7.10. Dwa widoki automatycznie adaptujcej si siatki

Zauwa, e w tych zapytaniach szeroko obszaru roboczego przegldarki zostaa
okrelona w jednostce em. Dziki temu elementy doskonale dostosowuj si rozmiarem
dozmieniajcego si rozmiaru tekstu i okna przegldarki.
Jeli chcesz odwoa si do co drugiego elementu, np. wiersza tabeli, to zamiast zapisu 2n+1
moesz uy bardziej ludzkiego sposobu. Do wybierania parzystych i nieparzystych dzieci
su selektory :nth-child(even) i :nth-child(odd), np.:
tr:nth-child(odd) {background: #EEF;}
FORMATOWANIE WYBRANYCH KOLUMN

Wybr niektrych wierszy tabeli to nic trudnego. A jak si sprawy maj w przypadku
kolumn? To rwnie jest proste dziki selektorom :nth-child i :nth-of-type.
W prostej tabeli skadajcej si tylko z samych komrek (elementw td) co drug kolumn
mona wybra za pomoc nastpujcego selektora (rysunek 7.11):
td:nth-child(odd) {background: #FED;}
246
Rysunek 7.11. Formatowanie nieparzystych kolumn
Chcesz pokolorowa te pozostae kolumny, jak na rysunku 7.12? To te nic trudnego!
td:nth-child(odd) {background: #FED;}
td:nth-child(even) {background: #DEF;}
Rysunek 7.12. Formatowanie zarwno parzystych, jak i nieparzystych kolumn

Jeli interesuje Ci co trzecia (rysunek 7.13), czwarta, pita itp. kolumna, musisz skorzysta
ze wzorca n+1.
td:nth-child(3n+1) {background: #EDF;}
Rysunek 7.13. Formatowanie co trzeciej kolumny tabeli

Na razie byo atwo, ale pomylmy teraz, co by si stao, gdybymy na pocztku kadego
wiersza umiecili element th. W pewnym sensie nic. Wybierane kolumny nie ulegaj
zmianie, gdy nadal wybieramy pierwsze, czwarte, sidme itd. dziecko elementu tr.
Wrzeczywistoci jednak wybr kolumn zostanie przesunity, poniewa nie wybieramy
ju pierwszej, czwartej, sidmej itd. kolumny, tylko trzeci, szst itd. Pierwsza kolumna,
ktr stanowi element th, nie zostanie wybrana, poniewa selektor odwouje si tylko do
elementw td (rysunek 7.14).
Rysunek 7.14. Pokrzyowanie planw spowodowane dodaniem nagwkw wierszy
247

Aby to poprawi, mona zmieni skadniki selektora :nth-child (rysunek 7.15).
td:nth-child(3n+2) {background: #EDF;}
Rysunek 7.15. Przywrcenie porzdku poprzez zmian selektora

Innym moliwym rozwizaniem jest zachowanie pierwotnego wzorca i zamiana selektora
:nth-child na :nth-of-type (rysunek 7.16).
248
td:nth-of-type(3n+1) {background: #FDE;}
Rysunek 7.16. Przywrcenie wzoru przy uyciu selektora :nth-of-type

Ten selektor okrela n-ty element wybranego typu (w tym przypadku element td), ktry ma
wsplnego rodzica z pozostaymi. Mona go traktowa jak selektor :nth-child pomijajcy
wszystkie elementy w nim niewymienione.
KOLORY RGB Z KANAEM ALFA

Wartoci kolorw to jeden z najczciej wystpujcych parametrw w kaskadowych
arkuszach stylw. Niektrzy wyszkolili si nawet do tego stopnia, e potrafi po samej liczbie
szesnastkowej oceni, jak wyglda reprezentowany przez ni kolor (sprbuj np. powiedzie,
co to za kolor: #E07713). Mniej popularna, chocia wci uywana jest te notacja rgb().
W CSS 3 do rgb() doczono notacj rgba(). Litera a oznacza kana alfa, czyli poziom
przezroczystoci, a wic mona definiowa kolory czciowo przezroczyste (rysunek 7.17).
.box1 {background: rgb(255,255,255);}
.box2 {background: rgba(255,255,255,0.5);}
249
Rysunek 7.17. Pola o przezroczystym i nieprzezroczystym kolorze RGB w tle

Rwnie dobrze w zapisie RGBA mona stosowa wartoci procentowe.
.box1 {background: rgb(100%,100%,100%);}
.box2 {background: rgba(100%,100%,100%,0.5);}
Warto alfa naley do przedziau zamknitego od 0 do 1, przy czym 0 oznacza cakowit

przezroczysto, a 1 brak przezroczystoci. Aby obiekt by pprzezroczysty, naley
mu przypisa warto alfa 0.5. Z powodu uwarunkowa historycznych, ktre s zbyt
skomplikowane, eby si w nie tu zagbia, nie mona stosowa wielkoci procentowych.

Jeli zostanie podana warto spoza przedziau 0-1, to zgodnie ze specyfikacj zostanie ona
przycita do dozwolonego przedziau. W zwizku z tym warto taka jak 4.2 zostanie
potraktowana jako 1. Nie ma natomiast pewnoci, co robi z wartoci 0. Poniewa oznacza
ona cakowit przezroczysto, to powstaje kwestia tego, co zrobi np. z niewidzialnym
tekstem. Czy powinna by moliwo jego zaznaczania? Gdyby to by odnonik, to
czy mona go klikn? Na te interesujce pytania nikt nie udzieli jeszcze ostatecznej
odpowiedzi, a wic trzeba uwaa.
Kolory w formacie RGBA mona definiowa we wszystkich wasnociach przyjmujcych
wartoci kolorw, np. color czy background-color. Warto te zadba o starsze przegldarki
i przed kolorem RGBA zawsze zapisywa kolor w formacie bez kanau alfa, np.:
{color: #000; color: rgba(0,0,0,0.75);}
Stare przegldarki rozpoznaj pierwsz z tych dwch wartoci i odpowiednio j zastosuj.

Gdy natrafi na drug, nie bd wiedziay, co z ni zrobi, wic j zignoruj. Dziki temu
uzyskamy przynajmniej czarny tekst. Nowe przegldarki natomiast rozpoznaj obie
deklaracje, ale dziki zasadom kaskadowoci zastosuj drug z nich.
Pamitaj, e nie istnieje szesnastkowy zapis wartoci RGBA, tzn. nie mona napisa
#00000080, aby uzyska pprzezroczyst czer.
250
KOLORY HSL I HSL Z KANAEM ALFA

Z wartociami RGBA blisko spokrewniona jest notacja HSLA, a jeszcze bliej notacja HSL.
S to nowoci dodane do CSS 3, z ktrych na pewno ucieszy si niejeden projektant.
Niezorientowanym wyjaniam, e akronim HSL pochodzi od angielskich sw Hue (barwa),
Saturation (nasycenie) i Lightness (jasno). Kady, kto kiedykolwiek uywa narzdzia do
wybierania kolorw, takiego jak np. na rysunku 7.18, korzysta z tego modelu barw, moe
nawet o tym nie wiedzc.
Rysunek 7.18. Narzdzia do wyboru kolorw HSL

Na rysunku 7.19 przedstawione s trzy tabele ukazujce rne czci modelu barw HSL.
251
Rysunek 7.19. Tabele kolorw HSL

Barw reprezentuje warto bez jednostki odpowiadajca ktowi na kole kolorw. Wartoci
nasycenia i jasnoci to wielkoci procentowe, natomiast warto alfa podobnie jak w modelu
RGBA moe zawiera si w zamknitym przedziale 0-1. Kolorw HSL mona uywa
wewszystkich wasnociach akceptujcych wartoci kolorw. Ponisze dwie reguy daj taki
sam efekt, jak wida na rysunku 7.17, czego dowodem jest rysunek 7.20.
.box1 {background: hsl(0,0%,100%);}
.box2 {background: hsla(0,0%,100%,0.5);}
Dla starszych przegldarek mona zdefiniowa dodatkow warto w formacie RGB,

aczkolwiek wwczas traci sens uywanie wartoci HSL, ktrych zadaniem jest umoliwi
odejcie od RGB.
Rysunek 7.20. Pola o przezroczystym i nieprzezroczystym kolorze HSLA w tle
252
CIENIE
Ach, te cienie! Pamitasz, jak w poowie lat 90. wszystko musiao mie cie? Oczywicie
wwczas sporzdzano je za pomoc obrazkw i tabel powykrcanych jeszcze bardziej ni
zwykle. Teraz moemy wrci do minionej wietnoci dziki kilku prostym reguom CSS.
Do tworzenia cieni su dwie wasnoci: text-shadow i box-shadow. Najpierw zajmiemy si
pierwsz. Ponisza regua wywoa efekt widoczny na rysunku 7.21.
Rysunek 7.21. Nagwek z cieniem

Mona nawet zdefiniowa kilka cieni, czego przykad wida na rysunku 7.22. Oczywicie
inn kwesti jest to, czy naley to robi.
Rysunek 7.22. Nagwek z kilkoma cieniami

Kolor cienia mona poda zarwno przed wszystkimi wielkociami, jak i po nich. Ponadto
wedug specyfikacji CSS 3 na wierzchu bdzie pierwszy zdefiniowany cie. Kolejne bd
ukadane pod nim, czyli coraz dalej od patrzcego na stron. Dlatego szary cie w tym
przykadzie zosta umieszczony na niebieskim.
Przejdmy do tworzenia cieni caych pl elementw (rysunek 7.23). Wszystko robi si
praktycznie tak samo jak poprzednio, tylko naley uy innej wasnoci CSS.
h1 {box-shadow: gray 0.33em 0.25em 0.25em;}
Rysunek 7.23. Pole nagwka z cieniem

Mimo e element h1 nie ma adnego oczywistego pola, to cie i tak zosta wygenerowany.
Ponadto cie jest rysowany wycznie poza elementem, co oznacza, e nie mona go
zobaczy pod nim, nawet jeli ma przezroczyste to (albo pprzezroczyste, jeli uyjemy
wartoci RGBA). Poniewa cienie s rysowane bezporednio poza krawdzi obramowania,
dobrze jest zdefiniowa dla elementu jakie obramowanie lub to (albo jedno i drugie).
Mona rwnie zdefiniowa dowoln liczb cieni pl elementw, jak wida na rysunku 7.24.
h1 {box-shadow: gray 0.33em 0.25em 0.25em, -10px 2px 6px blue;}
Rysunek 7.24. Dwa cienie pola elementu nagwka

Musz si przyzna do maego oszustwa. Powysze ilustracje prezentuj wyidealizowan
rzeczywisto. Gdy pisaem te sowa, przedstawione reguy nie dziaay w dostpnych
przegldarkach, dlatego rysunki zostay sporzdzone przy uyciu innego kodu ni pokazany.
Aby utworzy pojedynczy cie w poowie 2010 roku, trzeba byo napisa:
h1 {-moz-box-shadow: gray 0.33em 0.25em 0.25em;
-webkit-box-shadow: gray 0.33em 0.25em 0.25em;
box-shadow: gray 0.33em 0.25em 0.25em;}
To zadziaa we wszystkich nowoczesnych przegldarkach z tego okresu. Z czasem przedrostki

-moz- i -webkit- przestan by potrzebne i bdzie mona pisa po prostu box-shadow.
Kiedy stanie si to moliwe? To zaley od projektu, uytkownikw witryny oraz Twojego
wasnego poczucia wygody.
Jeli chcesz zmusi starsze wersje przegldarki Internet Explorer do wywietlania
cieni, musisz doda do strony odpowiedni filtr, szczegowo opisany na stronie http://
robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/.
253
DEFINIOWANIE WIELU OBRAZW

W TLE ELEMENTW
Jedn z najfajniejszych nowoci w CSS 3 jest obsuga wielu obrazw w tle elementw.
Jeli kiedykolwiek miae wtpliw przyjemno zagnieda elementy div tylko po to,
byuzyska jakie efekty w tle, to ten podrozdzia jest dla Ciebie.
Wemy np. ponisze reguy CSS i kod HTML, ktrych wynik wida na rysunku 7.25:
body {background: #C0FFEE; font: 1em Georgia, serif; padding: 1em 5%;}
.quotebox {font-size: 195%; padding: 80px 80px 40px; width: 16em; margin:
2em auto; border: 2px solid #8D7961; background: #FFF;}
.quotebox span {font-style: italic; font-size: smaller; display: block; margin-top:
0.5em; text-align: right;}
<div class="quotebox">
Najpierw myl powstaje gdzie gboko w umyle, jakby w tle, a potem ni std,
ni zowd czowiek nagle wie, co ma robi.
<span>—Arthur Christopher Benson</span>
</div>
254
Rysunek 7.25. Pole cytatu

Wstawienie jednego obrazu do ta to aden problem (rysunek 7.26). Kady robi to ju milion razy.
.quotebox {background: url(bg01.png) top left no-repeat; background-color: #FFF;}
Rysunek 7.26. Pole cytatu z jednym obrazem w tle

A co zrobi, gdybymy chcieli tak ozdob umieci w kadym rogu pola, jak na rysunku
7.27? Kiedy musielibymy w elemencie div.quotebox zagniedzi kilka dodatkowych
elementw div. Natomiast w CSS 3 wystarczy odpowiednio zmieni deklaracj background:
.quotebox {background:
url(bg01.png) top left no-repeat,
url(bg02.png) top right no-repeat;
background-color: #FFF;}
Rysunek 7.27. Dwa ta w jednym elemencie

Aby zdefiniowa kilka te w jednym elemencie, naley w deklaracji background poda kilka
wartoci oddzielonych przecinkami (rysunek 7.28).
url(bg01.png)
url(bg02.png)
url(bg03.png)
url(bg04.png)
background-color:
top left no-repeat,

top right no-repeat,
bottom right no-repeat,
bottom left no-repeat;
#FFF;}
Rysunek 7.28. Cztery ta w jednym elemencie
255

Efekt jest bardzo podobny do tego, jaki bymy uzyskali, gdybymy w gwnym kontenerze
zagniedzili kilka elementw div. Dziki CSS 3 nie musimy ju jednak tego robi.
Podobiestwa jednak na tym si nie kocz, gdy dotycz te sposobu czenia te w jedno.
Zapewne zauwaye, e wydzieliem deklaracj background-color, aby za obrazami mie
biae to. A co by byo, gdybymy zechcieli j wcieli do deklaracji background? Gdzie
naleaoby j umieci? Przecie kada z tych oddzielanych przecinkami wartoci definiuje
osobne to. Jeli zdefiniujemy kolor w niewaciwym miejscu, to niektre obrazy mog
zosta przez niego zasonite.
Odpowied brzmi na kocu:
url(bg02.png) top right no-repeat,
url(bg03.png) bottom right no-repeat,
#FFF, url(bg04.png) bottom left no-repeat;}
256
Jest to uzasadnione tym, e obrazy ta s ukadane w kolejnoci definicji, tzn. najbliej

patrzcego jest pierwszy zdefiniowany obraz itd. Gdyby kolor zosta zdefiniowany
w pierwszym tle, to zasoniby wszystkie pozostae. To oznacza rwnie, e jeli pod
wszystkimi obrazami chcemy umieci jaki wzr (jak na rysunku 7.29), to powinien on
by zdefiniowany na kocu i w jego definicji naleaoby doda ewentualny kolor.
url(bg04.png) bottom left no-repeat,
#FFF url(bgparch.png) center repeat;}
Rysunek 7.29. Jeden element, pi te

Ze wzgldu na moliwe komplikacje wol domylny kolor ta wydziela do osobnej reguy,
jak pokazaem wczeniej. Dlatego poprzedni fragment kodu zapisabym raczej tak:
url(bg04.png) bottom left no-repeat,
url(bgparch.png) center repeat;
Gdy kolor jest zdefiniowany w osobnej regule, zawsze jest ustawiany pod obrazami i nie
trzeba go przenosi, gdy zmieni si kolejno obrazw albo doda si nowe obrazy do ta.
Przecinkami mona rozdziela dowolne wasnoci ta, np. background-image. Poprzedni
arkusz stylw moglibymy rwnie dobrze napisa tak:
.quotebox {
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
background-image: url(bg01.png), url(bg02.png), url(bg03.png), url(bg04.png),
url(bgparch.png);
background-position: top left, top right, bottom right, bottom left, center;
Inny format, ten sam wynik. W tym przypadku druga wersja jest bardziej rozwleka, ale nie
zawsze musi tak by. Gdybymy pozbyli si ta papirusu, czego efektem byby cytat widoczny
na rysunku 7.30, to pierwsz deklaracj moglibymy troch uproci:
.quotebox {
background-repeat: no-repeat;
background-image: url(bg01.png), url(bg02.png), url(bg03.png), url(bg04.png);
background-position: top left, top right, bottom right, bottom left;
Rysunek 7.30. Podobne to, inna skadnia
257

aden z obrazw w tle nie zosta zwielokrotniony, poniewa jeli zostanie podana tylko
jedna warto no-repeat, ma ona zastosowanie do wszystkich te elementu. Wczeniej
musiaem wymieni wszystkie wartoci wasnoci background-repeat, poniewa ostatni
obraz mia inn ni wczeniejsze cztery.
A co si stanie, jeli podamy tylko dwie wartoci wasnoci background-repeat?
.quotebox {
background-repeat: no-repeat, repeat-y;
background-image: url(bg01.png), url(bg02.png), url(bg03.png), url(bg04.png);
background-position: top left, top right, bottom right, bottom left;
W tym przypadku obrazy pierwszy i trzeci pozostayby bez zmian, a drugi i czwarty
zostayby zwielokrotnione wedug osi pionowej. Gdyby zostay podane trzy wartoci,
przegldarka zastosowaaby je do obrazw pierwszego, drugiego i trzeciego, a czwartemu
przypisaaby warto pierwsz.
PRZEKSZTACENIA DWUWYMIAROWE
258
Jeli kiedykolwiek chciae obrci lub znieksztaci jaki element, jego obramowanie,
tekst czy cokolwiek innego, to ten podrozdzia jest dla Ciebie.
Najpierw jednak ostrzeenie: dla zwikszenia przejrzystoci przykadw wasno
transform zapisuj bez przedrostkw, ale na razie przeksztacenia mona wykonywa
tylko przy uyciu wielu powtrze tej wasnoci z odpowiednimi przedrostkami, np.:
-webkit-transform: ;
-moz-transform: ;
-o-transform: ;
-ms-transform: ;
transform: ;
Przedrostki te powinny przesta by potrzebne za rok, moe troch wicej (tak mam
przynajmniej nadziej), ale na razie musimy je stosowa, wic pamitaj, e zostay tu
opuszczone tylko w celu uproszczenia przykadw.
Czas wzi si do pracy! Chyba najprostszym rodzajem przeksztacenia jest obrt
przedstawiony na rysunku 7.31 na tej i nastpnych ilustracjach czerwona przerywana
obwdka wskazuje pierwotne pooenie przeksztaconego elementu.
.box1 {-moz-transform: rotate(33.3deg);}
.box2 {-moz-transform: rotate(-90deg);}
Przeksztacanie pod wieloma wzgldami przypomina pozycjonowanie wzgldne, tzn.

najpierw element zostaje pooony normalnie, a potem jest przeksztacany. Operacji tej
mona podda kady element i jeli chodzi o obracanie, to mona stosowa dowolnie due
wartoci okrelajce kt obrotu, wyraone w stopniach lub radianach. Jeli zawsze marzye
o obrceniu swojej strony o 225 stopni, to teraz moesz to zrobi.
Rysunek 7.31. Obrcone elementy. Czerwona obwdka wskazuje ich pierwotne pooenie
Jak na pewno zauwaye, prostokty na powyszym rysunku zostay obrcone wok
swoich rodkw. Stao si tak dlatego, e domylnym punktem obrotu jest 50% 50%, czyli
rodek elementu. Mona go zmieni za pomoc wasnoci transform-origin (rysunek 7.32).
.box1 {transform: rotate(33.3deg); transform-origin: bottom left;}
.box2 {transform: rotate(-90deg); transform-origin: 75% 0;}
Rysunek 7.32. Elementy obrcone wok punktw niebdcych ich rodkami
259

Dwie uwagi. Po pierwsze, ujemne wartoci obrotu mog by rwnowane z dodatnimi,
np. 270deg jest rwnoznaczne z -90deg, to samo dotyczy 0deg i 360deg. Mona podawa
wartoci wysze ni pozornie wielko maksymalna, np. warto 540deg wywoa taki sam
skutek jak 180deg (a take -180deg, 900deg itd.). Wynik moe by chwilowo inny, jeli
dodatkowo zastosuje si inne rodzaje przeksztace (zobacz nastpny podrozdzia), ale
ostateczne pooenie elementu pozostanie takie same.
Prawie tak samo atwe jak obrt jest skalowanie, ktrego przykad wida na rysunku 7.33.
Jak si pewnie domylasz, skalowanie suy do powikszania i zmniejszania elementw.
Operacj t mona przeprowadzi jednakowo na obu osiach albo na kadej oddzielnie.
.box1 {transform: scale(0.5);}
.box2 {transform: scale(0.75, 1.5);}
260
Rysunek 7.33. Skalowane elementy

Jedna liczba w wartoci scale() oznacza takie same skalowanie elementw zarwno
w pionie, jak i poziomie. Jeli zostan podane dwie liczby, pierwsza bdzie oznaczaa
skalowanie w poziomie (na osi X), a druga w pionie (na osi Y). Aby wic zmieni
tylkorozmiar elementu w pionie, szeroko pozostawiajc bez zmian, naley napisa:
.box2 {transform: scale(1, 1.5);}
Analogicznie mona uy wartoci scaleY().

.box2 {transform: scaleY(1.5);}
Bez wzgldu na to, ktr wersj wybierzesz, rezultat bdzie taki jak na rysunku 7.34.
Rysunek 7.34. Dwa skalowane elementy, z ktrych jeden zosta przeskalowany tylko w pionie
Podobnie dziaa warto scaleX(), ktra zmienia rozmiar elementu w poziomie, pion
pozostawiajc bez zmian (rysunek 7.35).
.box1 {transform: scaleX(0.5);}
.box2 {transform: scaleX(1.5);}
Rysunek 7.35. Dwa elementy przeskalowane tylko w poziomie
261

W trakcie pisania kodu CSS najwygodniejsze wydaje si uywanie zawsze wasnoci scale()
z wartoci 0 dla skalowania poziomego, jeli chce si skalowa element w pionie i odwrotnie.
Jeli natomiast masz zamiar programowo zmienia skalowanie przy uyciu skryptw
wykorzystujcych DOM, to atwiej Ci bdzie modyfikowa wasnoci scaleX i scaleY.
Podobnie jak w przypadku obrotu, w skalowaniu mona zmieni punkt pocztkowy.
Dziki temu mona np. sprawi, aby element by skalowany w kierunku swojego lewego
grnego rogu, zamiast kurczy si w stron swojego rodka (rysunek 7.36).
262
Rysunek 7.36. Dwa elementy skalowane wedug rnych punktw pocztkowych

Tak samo proste jest przesunicie, zwane te translacj (ale nie chodzi o tumaczenie
elementu z jednego jzyka na inny), widoczne na rysunku 7.37. Jak nietrudno si domyli,
polega to na przeniesieniu elementu w inne miejsce. Przesunicie okrela si za pomoc
jednej lub dwch wielkoci.
.box1 {transform: translate(50px);}
.box2 {transform: translate(5em,10em);}
Ten rodzaj przeksztacenia rwnie jest bardzo podobny do pozycjonowania wzgldnego

elementy s ustawiane w normalnym pooeniu, a potem zostaj przesunite.
Jeli wartoci translate() zostanie przypisana tylko jedna liczba, oznacza tylko przesunicie
w poziomie, a przesunicie pionowe jest domylnie ustawiane na zero. Aby wobec tego
przesun element w gr lub do dou, mamy dwie moliwoci do wyboru. Po pierwsze,
moemy przesunicie poziome ustawi na 0:
.box1 {transform: translate(0,50px);}
Rysunek 7.37. Przesunite elementy

Po drugie, moemy uy wartoci translateY():
.box1 {transform: translateY(50px);}
Bez wzgldu na metod wynik bdzie taki, jak wida na rysunku 7.38.
Rysunek 7.38. Dwa przesunite elementy
263

Istnieje rwnie warto translate(X) jak atwo zauway, przesuwa elementy
wpoziomie.
W przypadku operacji przesunicia rwnie mona zdefiniowa punkt pocztkowy
przeksztacenia, ale robienie tego nie ma sensu, poniewa czy przesuniemy o 50 pikseli
rodek elementu, czy jego lewy grny rg, nie ma to znaczenia, wynik zawsze bdzie
ten sam. Sprawa ma si jednak inaczej, gdy oprcz przesunicia stosujemy jeszcze jaki
inny rodzaj przeksztacenia, np. obrt albo skalowanie. Wwczas punkt pocztkowy ma
znaczenie (wicej na temat kombinacji przeksztace pisz nieco dalej).
Ostatni dostpny rodzaj przeksztacenia to znieksztacenie. Sposb jego deklaracji jest tak
samo prosty jak w poprzednich wypadkach, ale samo znieksztacenie jest nieco bardziej
skomplikowane. Element mona znieksztaci wzdu jednej lub obu osi (rysunek 7.39).
.box1 {transform: skew(23deg);}
.box2 {transform: skew(13deg,-45deg);}
264
Rysunek 7.39. Dwa znieksztacone elementy

Jeli zostanie podana tylko jedna liczba, przeksztacenie zostanie wykonane tylko w poziomie.
Tak samo jak w przypadku skalowania i przesunicia, istniej wartoci skewX() i skewY(),
za ktrych pomoc mona bezporednio okreli stopie znieksztacenia w obu kierunkach
(rysunek 7.40).
.box1 {transform: skewX(-23deg);}
.box2 {transform: skewY(45deg);}
Rysunek 7.40. Dwa elementy skalowane kady wedug innej osi

Oto, jak odbywa si znieksztacenie. Wyobra sobie, e przez element przebiegaj dwie linie
odpowiadajce kadej z osi. Jeli znieksztacenie jest dokonywane wzgldem osi X, nastpuje
obrt osi Y o okrelony kt. Tak, w operacji skewX() obracana jest o Y. Dodatnie wartoci
ktw oznaczaj obrt przeciwny do kierunku ruchu wskazwek zegara, a ujemne zgodny
z tym kierunkiem. Dlatego wanie pierwszy element na powyszym rysunku jest nachylony
w prawo bo jego o Y zostaa obrcona o 33,3 stopnia w prawo.
To samo dotyczy wartoci skewY(). O okrelon liczb stopni zostaje obrcona o X.
Dodatnie wartoci ktw oznaczaj obrt przeciwny do kierunku ruchu wskazwek zegara,
a ujemne zgodny z tym kierunkiem.
Ciekawym zagadnieniem jest, jaki efekt daje w tym przypadku zmiana punktu pocztkowego.
Jeli pocztek znajduje si na rodku elementu i zdefiniujemy ujemn warto skewX(),
togrna cz elementu przesunie si na prawo od rodka, a dolna na lewo. Jeli
natomiast pocztek przeniesiemy na d elementu, to cay element zostanie nachylony
naprawo od swojej podstawy (rysunek 7.41).
.box1 {transform: skewX(-23deg);}
.box2 {transform: skewY(-23deg); transform-origin: bottom center;}
Podobnie sprawy wygldaj w przypadku znieksztace pionowych.

To wszystkie dostpne rodzaje przeksztace elementw. Nie wiemy jeszcze tylko, co zrobi,
aby dokona kilku przeksztace naraz (rysunek 7.42). To nie trudne! Trzeba je poda
wkolejnoci stosowania.
.box1 {transform: translateX(50px) rotate(23deg);}
.box2 {transform: scale(0.75) translate(25px,-2em);}
265
Rysunek 7.41. Dwa znieksztacone elementy, kady z pocztkiem w innym miejscu
266
Rysunek 7.42. Kilka przeksztace naraz

Za kadym razem przeksztacenia s stosowane pojedynczo, w kolejnoci wpisania, ktra
ma due znaczenie. Na rysunku 7.43 wida, jak rne wyniki mona otrzyma, jeli zmieni
si kolejno przeksztace.
.box1 {transform: rotate(45deg) skew(-45deg);}
.box2 {transform: skew(-45deg) rotate(45deg);}
Rysunek 7.43. Rnice spowodowane zmian kolejnoci przeksztace

Istnieje jeszcze jedna warto zwizana z przeksztaceniami, o ktrej do tej pory
niewspominaem. Jest to matrix(). Pozwala ona zdefiniowa macierz przeksztacenia
skadajc si z szeciu czci, z ktrych dwie ostatnie oznaczaj przesunicie.
Poniejznajduje si przykad jej uycia, a efekt wida na rysunku 7.44.
.box1 {transform: matrix(0.67,0.23,0,1,25px,10px);}
.box2 {transform: matrix(1,0.13,0.42,1,0,-25px);}
Rysunek 7.44. Przeksztacenia macierzowe
267

Cztery pierwsze wartoci stanowi zwizy sposb wyraenia obrotu, znieksztacenia
iskalowania, natomiast ostatnie dwie odpowiadaj za przesunicie. Jeli znasz matematyczne
podstawy przeksztace macierzowych, to pokochasz t warto. Jeli nie, to nie zawracaj
sobie ni gowy. Za pomoc wartoci opisanych wczeniej mona uzyska takie same wyniki.
Jeli chcesz dowiedzie si wicej na temat przeksztace macierzowych, poniej podaj dwa
wartociowe rda wiedzy:
http://en.wikipedia.org/wiki/
Linear_transformation#Examples_of_linear_transformation_matrices
http://www.mathamazement.com/Lessons/Pre-Calculus/
08_Matricesand-Determinants/coordinate-transformation-matrices.html
268
Skorowidz
!important, 52, 53
$, 69
*, 57, 67
:active, 48
:after, 48, 75, 76
:before, 48, 75, 76
:checked, 49
:disabled, 49
:empty, 40, 49
:enabled, 49
:first-child, 48
:first-letter, 48
:first-line, 48
:first-of-type, 49
:focus, 48
:hover, 48
:lang(), 48
:last-child, 49
:last-of-type, 49
:link, 48
:not(), 40, 49
:nth-child(), 49, 244, 246, 248
:nth-child(even), 245
:nth-child(odd), 245
:nth-last-of-type(), 49
:nth-of-type(), 49
:only-child, 49
:only-of-type, 49
:root, 49
:target, 49, 51
:visited, 48
@media, 241
^, 68
~, 64, 65
A
adres URL, 66, 67
aktywny element, 48
alt, 40
arkusze serwerowe, 111
arkusze stylw dla mediw, 237
arkusze stylw dla druku, 94, 95
arkusze stylw zerujce domylne
ustawienia, 43
ASCII, 76
aspect-ratio, 242
atrybuty
class, 58
href, 63
id, 58
media, 95
scope, 212
selektory, 62
wartoci, 66
audio, 235
automatycznie adaptujca si siatka,
245
B
background, 93, 110, 249, 254, 255, 256
background-color, 250, 256, 257
background-image, 257
background-position, 257
background-repeat, 257, 258
biblioteki JavaScript, 234
body, 108, 110
to elementu, 110
border, 86
border-bottom-left-radius, 183
border-bottom-right-radius, 183
border-collapse, 214
border-radius, 181
border-style, 86
border-top-left-radius, 183
border-top-right-radius, 183
boxpunch, 174
box-shadow, 253
C
caption, 224
chmurki, 170
cienie, 252
class, 58
selektory atrybutw, 64
clear, 125, 243
clearfix, 125
color, 242, 250
color-index, 242
Complexspiral, 166
CSS, 17
CSS 2.1, 48
CSS 3, 40, 49
kolory RGBA, 249
pseudoklasy, 49
zaokrglanie rogw, 181
CSS parallax, 191
czcionki, 83
D
dane tabelaryczne, 224
definiowanie
punktory list, 100
to elementw body i html, 110
wiele obrazw w tle elementw,
254
device-aspect-ratio, 242
device-height, 242
device-width, 242
diagnostyczny arkusz stylw, 40
display, 88, 89
block, 97
none, 88
div, 64, 107
document.getElementById(), 88
dodawanie obramowania
dokontenera, 175
dokadno selektora, 51
doczanie skryptu IE9.js do strony, 46
domylne style w przegldarkach, 42
dopenienie, 97
Dragonfly, 33
Styles, 33
Ukad, 33, 34
drukowanie, 94
dzieci, 70
formatowanie wybranych
elementw, 242
E
efekty, 165
Complexspiral, 166
menu CSS, 172
menu podrczne, 170
niedostpno obrazu, 93
nieregularne ksztaty, 174
nieregularne ksztaty pywajce, 193
paralaksa CSS, 191
pola obrazw, 201
przesuwane drzwi, 185
przesuwane drzwi z przycinaniem,
189
Sliding Doors, 185
sprajty CSS, 183
Super Ragged Floats, 197
supernieregularne ksztaty
pywajce, 197
zanikajce to, 51
elementy blokowe, 96
elementy HTML 5, 234
elementy pywajce, 121
elementy siostrzane, 73
em, 84, 85, 150
F
faszywe kolumny, 132
figcaption, 235
figure, 235
Firebug, 18
badanie elementw, 20
edycja kodu CSS, 23
kod CSS, 19
prezentacja stylw, 20
pseudoelementy, 22
pseudoklasy, 22
struktura dokumentu, 18
Styl, 19, 20
Ukad, 23
ukad elementw, 19
wartoci stylw, 22
Zbadaj element, 21
SKOROWIDZ
Firefox, 18
fixed positioning, 161
float, 123
Fluid Grids, 146
fokus, 48
font, 83
font-size, 83, 85
fonty, 83
footer, 58
formatowanie
elementy HTML 5, 234
cza, 70
wybrane elementy-dzieci, 242
wybrane kolumny, 246
G
generowanie
markery, 105, 106
tre, 75
GIF89a, 189
grid, 242
270
header, 58
height, 226, 242
Holy Grail, 142
href, 40, 63
HSL, 250
hsl(), 251
HSLA, 250
hsla(), 251
html, 108, 110
to elementu, 110
HTML 5, 234
audio, 235
imitacja elementw za pomoc
nazw klas, 236
obrazy, 235
stare przegldarki, 235
video, 235
I
id, 58
identyfikator fragmentu, 50
identyfikatory, 58
czenie z klasami, 61
selektory atrybutw, 65
stosowanie, 60
IE7.js, 45
IE8.js, 45
IE9.js, 45, 46
doczanie skryptu do strony, 46
IEDT, 29
image replacement, 92
imitacja elementw HTML 5
zapomoc nazw klas, 236
inset, 86, 88
Internet Explorer 6, 46, 62
PNG, 181
selektory dzieci, 72
Internet Explorer 7, 29
Internet Explorer 8, 32
Internet Explorer 9, 45, 46

Internet Explorer Developer Toolbar,
29
CSS Selector Matches, 30, 31
Show Default Styles, 31
widoki, 30
IR, 92
J
JavaScript, 234
jednostki, 84
em, 150
jedyny suszny ukad, 138
JQuery, 234
K
kana alfa, 249, 250
klasy, 58
czenie z identyfikatorami, 61
przypisywanie jednego elementu
do wielu klas, 61
kleiste stopki, 161
kliring elementw przylegajcych,
126
kolejno fontw, 83
kolejno zapisu klas, 62
kolorowanie krawdzi, 55
kolory
HSL, 250
HSLA, 250
obramowanie, 86, 87
RGBA, 249
kolumny tekstu, 128
komentarze warunkowe, 46
kontekst pozycjonowania, 157
kontenery, 107
kontenery elementw pywajcych, 121
L
line-height, 83
wartoci bezjednostkowe, 84
link, 94
Liquid Bleach, 135
list-style, 100
list-style-image, 100
listy, 71
generowanie markerw, 105
markery w tle, 104
punktory, 100
punktory w tle, 102, 103
wycinanie, 99
cza, 63, 70
cza blokowe, 96
cza do adresw e-mail, 70
cza do usugi AOL Instant
Messenger, 70
cza nawigacyjne, 59
cza szyfrowane, 70
nieodwiedzone cze, 48
odwiedzone cze, 48
stany, 185
strony przeznaczone do druku, 77
czenie identyfikatorw z klasami, 61
M
macierz przeksztacenia, 267
mapy, 217
margin, 98
marginesy, 97
automatyczna szeroko, 120
ujemne wartoci, 154
wysuwanie elementw poza
kontenery, 155
margin-left, 98, 99
markery, 104
generowanie, 105
matrix(), 267
max-device-height, 241
max-width, 202
media, 94, 95, 237
media="print", 95
media="screen", 95
menu CSS, 172
menu podrczne, 170
menu rozwijane, 173
min-device-height, 241
min-width, 238
model barw HSL, 251
model kolorw RGBA, 249
monochrome, 242
-moz-border-radius, 181
-moz-box-shadow, 253
-moz-transform, 258
-ms-transform, 258
N
nagwek, 58, 161
nagwek z cieniem, 252
nagwki HTTP, 113
narzdzia, 17
Narzdzia deweloperskie, 32
nazwy klas, 58
nieodwiedzone cze, 48
nieregularne ksztaty, 174
nieregularne ksztaty pywajce, 193
not, 241
O
obramowanie, 86, 116
inset, 86
kolor, 86, 87
outset, 86
obrazy, 201, 235
obrazy w tle, 108, 254
obrazy zamiast tekstu, 92
ograniczanie rozmiaru, 202
pola obrazw, 201
obrt, 258
obrysy, 116
grubo, 117
SKOROWIDZ
odnoniki rdliniowe, 97
odwiedzone cze, 48
ograniczanie rozmiaru obrazw, 202
ol, 71
One True Layout, 138
only, 241
Opera, 33
orientation, 242
-o-transform, 258
outline, 116, 226
outset, 86, 88
overflow, 122
auto, 128
P
padding, 98
padding-left, 98
padding-top, 162
paralaksa CSS, 191
paski narzdzi
Internet Explorer Developer
Toolbar, 29
Web Developer, 24
Phark, 93
pynne siatki, 146
pywajce elementy o rnej
wysokoci, 243
pywajce kontenery elementw
pywajcych, 123
PNG, 181, 189
podgld stylu druku w przegldarce,
96
pola obrazw, 201
poprawno kodu, 82
position, 90
absolute, 90, 157
fixed, 163
relative, 92, 157
static, 91
pozycjonowanie, 91
obrazy w tle, 191
pozycjonowanie bezwzgldne, 91
pozycjonowanie elementw
winnym elemencie, 157
pozycjonowanie na sztywno
nagwkw i stopek, 161
pozycjonowanie procentowe, 191
pozycjonowanie stae, 161
pozycjonowanie w kontekcie, 156
wyjcie poza kontener, 158
precyzja selektorw, 51, 57
identyfikatory, 60
progressive enhancement, 77
prosty ukad dwukolumnowy, 128
prosty ukad trzykolumnowy, 129
przeksztacenia dwuwymiarowe, 258
kilka przeksztace naraz, 266
kolejno przeksztace, 267
macierz przeksztacenia, 267
obrt, 258
przeksztacenia macierzowe, 267
skalowanie, 260
skalowanie w poziomie, 261
translacja, 262
znieksztacenie, 264
przepenienie, 121
przesuwane drzwi, 185
przesuwane drzwi z przycinaniem, 189
przezroczysto, 249
obrazy PNG, 181
przypisywanie jednego elementu
dowielu klas, 61
pseudoelementy, 48, 49
:after, 48, 75, 76
:before, 48, 75, 76
:first-letter, 48
:first-line, 48
formatowanie, 76
pseudoklasy, 48, 49
:active, 48
:checked, 49
:disabled, 49
:empty, 49
:enabled, 49
:first-child, 48
:first-of-type, 49
:focus, 48
:hover, 48
:lang, 48
:last-child, 49
:last-of-type, 49
:link, 48
:not(), 49
:nth-child(), 49
:nth-last-of-type(), 49
:nth-of-type(), 49
:only-child, 49
:only-of-type, 49
:root, 49
:target, 49
:visited, 48
CSS 3, 49
punktory, 100
punktory w tle, 102, 103
pusta przestrze wok treci strony, 98
px, 85
regua wanoci, 52
selektor uniwersalny, 51, 57
selektory elementw siostrzanych,
73, 74
selektory potomkw, 70
selektory atrybutw, 62, 65
$, 69
^, 68
~, 64, 65
atrybut class, 64
formatowanie czy, 70
identyfikatory, 65
selektory dzieci, 70
IE 6, 72
selektory podacuchw, 66
wartoci atrybutw, 66, 68
separatory kolumn, 131
skalowanie, 260
skalowanie w poziomie, 261
skew(), 264
skewX(), 264, 265
skewY(), 264, 265
skrcony zapis wasnoci, 53
wybircze przesanianie wasnoci,
55
skrypt IE9.js, 45
Sliding Doors, 135, 185
wersja z przycinaniem, 189
sprajty CSS, 183
sprawdzanie poprawnoci kodu, 82
stany czy, 185
stopka, 58, 161
stopniowe ulepszanie, 77
stosowanie obrysu, 116
strony przeznaczone do druku, 77
struktura tabeli, 208
styl obramowania, 86
style dla druku, 94
Super Ragged Floats, 197
supernieregularne ksztaty pywajce,
197
R
regua precyzji, 51, 57
regua wanoci, 52
resolution, 242
rgb(), 249
RGBA, 249
rgba(), 249
rogi owalne, 182
rotate(), 258, 259
Rundle Method, 93
S
Safari, 35
scale(), 260
scaleX(), 261
scaleY(), 262
scan, 242
scope, 212
Selectoracle, 38
selektory, 47
*, 57
regua precyzji, 51, 57
wity Graal, 142
T
tabele, 207
formatowanie kolumn przy uyciu
klas, 215
formatowanie komrek nagwka,
212
formatowanie wedug kolumn, 213
formatowanie wybranych kolumn,
246
kolor ta kolumny, 215
mapy, 217
nagwek, 208
nagwki wierszy, 211
obramowanie kolumny, 215
pozycjonowanie zawartoci, 227
stopka, 208
struktura tabeli, 208
tre gwna, 208
271
SKOROWIDZ
272
tabele
wizualne oddzielenie nagwka
istopki od treci gwnej, 210
wykresy, 224
wyrwnanie zawartoci komrek,
208
tabele kolorw HSL, 251
table, 208
tbody, 208, 209
techniki
boxpunch, 174
clearfix, 125
Fluid Grids, 146
IR, 92, 93
Liquid Bleach, 135
Sliding Doors, 185
stopniowe ulepszanie, 77
text-align, 208
text-indent, 93, 99
tfoot, 209
th, 211
scope, 212
thead, 208, 209
title, 40
ta dokumentu, 110
tr, 208
transform, 258, 265
matrix(), 267
rotate(), 258, 259
scale(), 260
scaleX(), 261
scaleY(), 260, 262
skew(), 264
skewX(), 264, 265
skewY(), 264, 265
translate(), 262
transform-origin, 259
translacja, 262
translate(), 262, 264
tre generowana, 77
tworzenie
arkusze stylw dla druku, 95
mapy z danych tabelarycznych, 217
wykresy, 224
U
ujemne marginesy, 176
ukad normalny, 154
ukady, 115
clearfix, 125
Fluid Grids, 146
Holy Grail, 142
jedyny suszny ukad, 138
kolumny, 128
Liquid Bleach, 135
obramowanie, 116
obrysy, 116
One True Layout, 138
pynne siatki, 146
pozycjonowanie na sztywno
nagwkw i stopek, 161
pozycjonowanie stae, 161
pozycjonowanie w kontekcie, 156
separatory kolumn, 131

wity Graal, 142
ujemne marginesy w ukadzie
normalnym, 154
ukad oparty na jednostkach em,
150
ukady dwukolumnowe, 128
ustawianie blokw na rodku, 118
wielokolumnowe pynne ukady, 135
zmiana liczby kolumn, 241
ukady trzykolumnowe, 129, 237, 238
wskie ekrany, 238
ukrywanie elementw, 91
umieszczanie
elementy pywajce w pywajcym
kontenerze, 123
fragmenty treci w jednej linii, 154
cza poza nagwkiem, 159
Unicode, 76
URL, 66, 67
ustawianie blokw na rodku, 118
V
video, 235
visibility, 89, 214
W
walidacja poprawnoci kodu, 82
walidator HTML W3C, 82
wartoci atrybutw, 66, 67, 68
wcicia list, 98
wcity cytat blokowy, 176
Web Developer, 24
identyfikatory, 27
Informacje, 25, 27
klasy, 27
Narzdzia, 27, 28
wyczanie doczonych arkuszy
stylw, 26
Zaznacz, 27
zaznaczanie elementw, 27, 28
WebInspector, 35
informacje o polu elementu, 36
Programowanie, 35
style nadane, 35, 36
-webkit-border-radius, 181
-webkit-box-shadow, 253
-webkit-transform, 258
widoczno elementu, 89
width, 118, 122, 226, 242
wiele obrazw w tle elementw, 254
wielokolumnowe pynne ukady, 135
wielopoziomowe menu rozwijane, 172
wasnoci pisma, 83
wskazywanie identyfikatora
fragmentu, 50
wstawianie
adresy URL do stylw dla druku, 77
tre na pocztku elementw
listy, 75
znaki za pomoc specjalnych
kodw, 76
wybircze przesanianie wasnoci
wzapisie skrconym, 55
wybr elementw dzieci, 71

wybr podacucha na kocu
wartoci atrybutu, 69
wybr podacucha na pocztku
wartoci atrybutu, 68
wycinanie list, 99
wydzielanie elementu, 175
elementy z obramowaniem, 176
wyjcie poza kontener, 158
wykresy, 224
formatowanie kontenerw
supkw, 227
legenda, 231
supki, 228
wyrwnanie szerokoci supkw, 230
wyczanie widocznoci elementu, 89
wyczanie wywietlania elementw, 88
wyrwnanie obrazu z pierwszym
wierszem tekstu elementu, 102
wyrnianie elementu docelowego, 50
wyrzucanie elementw poza ekran, 90
wyskakujce okienka, 171
wysoko linii, 83
wysuwanie elementw poza
kontenery, 155
wysyanie nagwkw HTTP, 113
wyrodkowanie elementu
wkontenerze, 118
wywietlanie elementw, 88
X
XRAY, 37
Z
zakadki, 185, 186, 187
zanikajce to, 51
CSS 3, 181
zapis skrcony wartoci, 53
zapytania o media, 237
not, 241
only, 241
przecinki, 241
skadniki, 242
zastpowanie tekstu, 92
zerowanie stylw, 42
z-index, 161
zmiana koloru markerw, 101
zmiana liczby kolumn, 241
znieksztacenie, 264
zwielokrotnienie obrazw w tle, 108

Podręcznik CSS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Podręcznik CSS

Uploaded by

Copyright:

Available Formats

Tytu oryginau: Smashing CSS: Professional Techniques for Modern Layout

Tumaczenie: ukasz Piwko

Pole ksik na Facebook.com

PODZIKOWANIA WYDAWCY ORYGINAU

Dla Kathryn, Carolyn i Rebeki,

CZ III NAJNOWSZE TECHNIKI

W PROCESIE TWORZENIA stron internetowych

S nawet takie narzdzia, ktre rozszerzaj

Rysunek 1.1. Strona internetowa rozszerzenia Firebug

Rysunek 1.2. Widok ukadu elementw rozszerzenia Firebug

w dodatku Firebug zostanie ona przedstawiona tak:

Rysunek 1.4. Opcja menu kontekstowego Zbadaj element

Rysunek 1.5. Wyczone style i okienko koloru

Rysunek 1.6. Obliczone wartoci stylw

Rysunek 1.7. Karta Ukad

Rysunek 1.8. Edycja kodu CSS na karcie Styl

Rysunek 1.9. Firebug Lite w przegldarce Internet Explorer

PASEK NARZDZI WEB DEVELOPER

Rysunek 1.10. Strona paska narzdzi Web Developer w witrynie addons.mozilla.org

Rysunek 1.11. Menu Wycz

Rysunek 1.12. Wyczanie doczonych arkuszy stylw w menu CSS

Rysunek 1.14. Zaznaczenie elementw blokowych za pomoc opcji z menu Zaznacz

Rysunek 1.15. Menu Narzdzia

Rysunek 1.16. Szukanie opcji IE Developer Toolbar w IE 7

Rysunek 1.17. Pasek narzdzi IE Developer Toolbar w akcji

Rysunek 1.19. Raport funkcji CSS Selector Matches

Rysunek 1.20. Narzdzia deweloperskie w przegldarce IE 8

DODATEK DRAGONFLY DLA OPERY

Rysunek 1.21. Strona dodatku Dragonfly

Rysunek 1.22. Narzdzie Dragonfly z rozwinit grup stylw obliczonych

Rysunek 1.23. Karta Ukad narzdzia Dragonfly

Rysunek 1.24. Wczanie menu Programowanie

Rysunek 1.25. Style nadane

Rysunek 1.26. Style i informacje o polu elementu

Rysunek 1.27. Strona XRAY

DIAGNOSTYCZNY ARKUSZ STYLW

Regua ta rysuje czerwon obwdk wok wszystkich elementw z atrybutem style,

Rysunek 1.30. Strona testowa diagnostycznego arkusza stylw

Rysunek 1.31. Dokument bez stylw, ale w istocie o piknym stylu

Rysunek 1.32. Dokument po zastosowaniu prostego arkusza zerujcego

Rysunek 1.33. Strona projektu IE7.js

to przegldarki te zignorowayby j i nasze odnoniki pozostayby niezmienione (chocia

SELEKTORY S SERCEM technologii CSS.

kilku wierszy kodu CSS spowodowa naprawd

A oto lista pseudoelementw CSS 2.1:

Co je rni? Rnica polega na sposobie, w jaki pseudoklasy i pseudoelementy wpywaj

Rysunek 2.1. Powikszenie pierwszej litery elementu h1

W obu tych przypadkach przegldarka przeniesie nas w odpowiednie miejsce w dokumencie,

Rysunek 2.2. Wyrnienie elementu docelowego

Z technicznego punktu widzenia selektor uniwersalny w tym przypadku jest opcjonalny.

Nie denerwuj si (jeszcze). Lepiej najpierw spjrz na ponisze przykady.

Cztery selektory elementw.

Jeden selektor klasy, trzy selektory elementw.

Jeden selektor pseudoklasy, jeden selektor elementu.

div.navlinks a:hover 0,0,2,2

Jeden selektor pseudoklasy, jeden selektor klasy,

Jeden selektor identyfikatora, jeden selektor elementu.

Jeden selektor identyfikatora, dwa selektory elementw.

CO SI DZIEJE, GDY ZOSTANIE POMINITA

Ta regua spowoduje, e wszystkie elementy strong bd napisane pismem pochylonym,

Rysunek 2.3. Szaowy element strong

Tak samo zachowuj si wszystkie pozostae wasnoci w zapisie skrconym. Wyjtkami s

WYBIRCZE PRZESANIANIE WASNOCI

Rysunek 2.5. Kolorowanie jednej krawdzi na czerwono