IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

Kuloodporne strony internetowe.

Jak poprawi elastyczno
z wykorzystaniem XHTML-a i CSS
Autor: Dan Cederholm
Tumaczenie: Agata Bulandra
ISBN: 83-246-0316-6
Tytu oryginau: Bulletproof Web Design: Improving flexibility
and protecting against worst-case scenarios with XHTML and CSS
Format: B5, stron: 280

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

Poznaj tajniki projektowania doskonaych stron internetowych

Wykorzystaj moliwoci jzyka XHTML
Zastosuj standardy CSS
Zapewnij poprawne dziaanie strony w rnych przegldarkach
W coraz dynamiczniej rozwijajcym si internecie mona znale setki tysicy witryn
WWW. Wiele z nich to prawdziwe pereki zarwno pod wzgldem projektowym,
jak i merytorycznym. Ile razy jednak, otwierajc ulubion witryn WWW w innej
przegldarce ni dotychczas, widzimy co zupenie odmiennego? Jak czsto
projektujc witryn WWW, borykamy si z rnymi interpretacjami standardw
w rnych przegldarkach? Ile czasu trwa wzbogacanie strony o nowe elementy
czy te modernizacja ukadu graficznego? Ilu projektantw stron WWW zastanawia si,
jak poprawi elastyczno i uniwersalno swoich dzie?
Dziki wiadomociom zawartym w ksice Kuloodporne strony internetowe.
Jak poprawi elastyczno z wykorzystaniem XHTML-a i CSS dowiesz si, jak
tworzy niemal doskonae witryny WWW. Doskonae poniewa wygldaj rwnie
dobrze w kadej przegldarce i przy kadej rozdzielczoci ekranu. Poza tym s atwe
w nawigacji i proste w rozbudowie. Nauczysz si korzysta z najnowszych standardw
XHTML i CSS, odpowiednio dobiera czcionki i ich rozmiary, pozycjonowa elementy
strony i budowa uniwersalne mechanizmy nawigacyjne. Poznasz sposoby tworzenia
kuloodpornych stron WWW.
Dobr rozmiaru czcionek
Skalowalne menu
Rozmieszczanie skadnikw strony
Definiowanie stylw dla ramek
Tworzenie uniwersalnych tabel
Budowanie skalujcego si ukadu strony
Jeli wykorzystasz wiadomoci z tej ksiki, tworzone przez Ciebie strony WWW bd
naprawd uniwersalne.

Spis treci

Wprowadzenie ............................................................................. 7
Rozdzia 1. Elastyczny tekst .........................................................................13
Czste rozwizanie .................................................................................... 15
Wszystkie moliwoci ................................................................................ 17
Rozwizanie kuloodporne ......................................................................... 19
Dlaczego rozwizanie to jest kuloodporne ................................................ 25
Elastyczna baza i co dalej? .................................................................... 25
Stosowanie sw kluczowych i wartoci procentowych ............................. 30
Podsumowanie .......................................................................................... 35

Rozdzia 2. Skalowalna nawigacja ...............................................................37

Czste rozwizanie .................................................................................... 38
Dlaczego rozwizanie to nie jest kuloodporne .......................................... 40
Rozwizanie kuloodporne ......................................................................... 42
Dlaczego rozwizanie to jest kuloodporne ................................................ 52
Dodatkowe przykady ................................................................................ 53
Podsumowanie .......................................................................................... 56

Rozdzia 3. Elastyczne wiersze .....................................................................59

Czste rozwizanie .................................................................................... 60
Dlaczego rozwizanie to nie jest kuloodporne .......................................... 62
Rozwizanie kuloodporne ......................................................................... 64
Dlaczego rozwizanie to jest kuloodporne ................................................ 77
Inny przykad rozcigania .......................................................................... 78
Podsumowanie .......................................................................................... 83

Rozdzia 4. Pomysowe rozmieszczanie elementw .......................................85

Czste rozwizanie .................................................................................... 87
Dlaczego rozwizanie to nie jest kuloodporne .......................................... 88
Rozwizanie kuloodporne ......................................................................... 89
Dlaczego rozwizanie to jest kuloodporne .............................................. 119
Podsumowanie ........................................................................................ 119

Spis treci

Rozdzia 5. Niezniszczalne ramki ............................................................... 121

Czste rozwizanie .................................................................................. 122
Dlaczego rozwizanie to nie jest kuloodporne ........................................ 124
Rozwizanie kuloodporne ....................................................................... 125
Dlaczego rozwizanie to jest kuloodporne .............................................. 131
Inne techniki tworzenia zaokrglonych krawdzi ...................................... 132
Podsumowanie ....................................................................................... 140

Rozdzia 6. Brak rysunkw? Brak CSS? Brak problemw .......................... 143

Czste rozwizanie .................................................................................. 144
Dlaczego rozwizanie to nie jest kuloodporne ........................................ 147
Rozwizanie kuloodporne ....................................................................... 148
Dlaczego rozwizanie to jest kuloodporne .............................................. 150
Ze stylami lub bez ................................................................................... 152
Kuloodporne narzdzia ........................................................................... 157
Podsumowanie ....................................................................................... 164

Rozdzia 7. Konwersja tabel ...................................................................... 167

Czste rozwizanie .................................................................................. 168
Dlaczego rozwizanie to nie jest kuloodporne ........................................ 170
Rozwizanie kuloodporne ....................................................................... 171
Dlaczego rozwizanie to jest kuloodporne .............................................. 191
Podsumowanie ....................................................................................... 192

Rozdzia 8. Pynny ukad stron .................................................................. 195

Czste rozwizanie .................................................................................. 196
Dlaczego rozwizanie to nie jest kuloodporne ........................................ 199
Rozwizanie kuloodporne ....................................................................... 201
Dlaczego rozwizanie to jest kuloodporne .............................................. 233
Podsumowanie ....................................................................................... 234

Rozdzia 9. czenie w cao .................................................................... 235

Cel ........................................................................................................... 236
Dlaczego rozwizanie to jest kuloodporne .............................................. 237
Konstrukcja ............................................................................................. 242
Modyfikacja stylw ze wzgldu na przegldark IE ................................. 268
Podsumowanie ....................................................................................... 272

Skorowidz ................................................................................ 273

ELASTYCZNY
TEKST

14

Rozdzia 1.

Rozmiar tekstu ustal

przy uyciu sw kluczowych
oraz wartoci procentowych,
dziki czemu uytkownicy
bd mieli nad nim kontrol.
Niewiele zagadnie dotyczcych projektowania stron internetowych
jest tak kontrowersyjnych, jak zmiana rozmiaru tekstu. Temat ten
zawsze by kopotliwy dla pocztkujcych, wywoywa dyskusje oraz
dzieli narody. Moe troch wyolbrzymiam problem, ale faktycznie
wiele osb moe si do niego niechtnie odnosi.
Nie jestemy w stanie uwolni wiata od problemu zmiany wielkoci
wywietlanego na stronie tekstu. W tym rozdziale poka jednak
strategi definiowania rozmiaru tekstu, ktra jest elastyczna i atwa
do zaimplementowania, a jednoczenie pozwala projektantom zachowa pen kontrol nad wygldem stron.
Wszystkie przykady w tej ksice czy jedna wsplna cecha elastyczne dopasowanie si projektu do tekstu kadej wielkoci. Umoliwiajc uytkownikowi kontrol nad rozmiarem tekstu, zwikszamy
czytelno strony dla wszystkich internautw. Prawdziwe wyzwanie
stanowi zbudowanie strony internetowej, w ktrej ta elastyczno
poczona jest z pomysowym projektem graficznym. Poprzez zapoznanie si z wszystkimi zamieszczonymi w tej ksice przykadami,
zyskamy solidne podstawy, by sprosta temu wyzwaniu.
Przygldajc si czsto stosowanemu rozwizaniu projektowemu,
dowiemy si, dlaczego tak wana jest moliwo zmiany wielkoci
tekstu oraz dlaczego zaprezentowane przykadowe rozwizanie nie
jest elastyczne.
Rozdzia 1. Elastyczny tekst

Elastyczny tekst

Czste rozwizanie
Czsto stosowany sposb definiowania wielkoci tekstu przeledzimy
na przykadzie witryny eyeglasses.com z pewnoci odwiedzajce t
stron osoby z wadami wzroku ucieszyyby si z moliwoci sterowania wielkoci tekstu oraz z oglnej czytelnoci strony (rysunek 1.1).

Rysunek 1.1. Czsto stosowany sposb definiowania rozmiaru tekstu

na przykadzie witryny eyeglasses.com
Witryna eyeglasses.com jest przykadem bardzo dobrego wykorzystania kaskadowych arkuszy stylw. Tak jak w wielu innych adnie
zaprojektowanych stronach internetowych, podstawowa wielko
tekstu okrelona jest w jednostkach pikselowych poprzez zdefiniowanie wartoci dla waciwoci font-size w deklaracji stylu dla
elementu <body>:

15

16

Rozdzia 1.
body {
font-size: 11px;
}

Chcielimy zaznaczy,
e nie uwaamy strony
eyeglasses.com za zy projekt. Jest to adnie zaprojektowana witryna internetowa, utworzona przy
uyciu strukturalnego kodu
oraz stylw CSS. Wanie
dlatego wybralimy j jako
nasz przykad. Tak naprawd potrzebny by nam
pretekst do omwienia rnych sposobw definiowania wielkoci tekstu oraz
wad i zalet najczciej
stosowanej metody.

Poprzez ustawienie wielkoci czcionki dla elementu <body> (w naszym przykadzie 11px) projektanci strony definiuj, e wywietlony
na stronie tekst bdzie mia wysoko 11 pikseli (chyba e dla jakiego fragmentu zostanie okrelona inna warto). Zalet okrelania
rozmiaru tekstu w pikselach jest to, e wielko czcionki pozostaje
bez zmian niezalenie od tego, w jakiej przegldarce lub urzdzeniu
wywietlany jest tekst. Stosowanie wartoci pikselowych stao si
popularne wanie ze wzgldu na ich konsekwentn, przewidywaln
wielko. Projektant, chcc precyzyjnie zdefiniowa wielko tekstu
wywietlanego na stronie, zawsze chtniej uyje wartoci pikselowych ni innych jednostek. Jednak istnieje pewien may problem.

DLACZEGO TO ROZWIZANIE
NIE JEST KULOODPORNE
Definiowanie rozmiaru tekstu w wartociach pikselowych daje projektantowi kontrol nad wielkoci czcionki. Niestety, wartoci
pikselowe stwarzaj kopoty uytkownikom najbardziej popularnej
przegldarki internetowej (Internet Explorer w systemie Windows
IE/Win).
Przegldarki internetowe zwykle umoliwiaj uytkownikowi kontrolowanie rozmiaru tekstu poprzez zmian rozmiaru okrelonego
przez projektanta. Funkcja ta jest bardzo przydatna dla osb z wadami wzroku. Gdy uytkownik chce poprawi czytelno strony, wystarczy e z menu przegldarki wybierze wikszy rozmiar tekstu (rysunek 1.2).

Rysunek 1.2. Dziki menu

Widok/Rozmiar tekstu
w IE6/Win uytkownik
moe dostosowa rozmiar
tekstu wywietlanego
na stronie

Czy nie jest to wspaniae? Istnieje jednak pewien haczyk. Jeli stosowane s wartoci pikselowe, uytkownicy przegldarki Internet
Explorer nie maj moliwoci zmiany rozmiaru tekstu na inny ni
okrelony przez projektanta. Tak wic korzystanie z wartoci pikselowych daje projektantowi najwiksz precyzj przy ustalaniu wielkoci
czcionki, ale jednoczenie uniemoliwia uytkownikom przegldarki
IE/Win dostosowywanie rozmiaru tekstu do wasnych potrzeb. Uytkownicy innych przegldarek mog zmienia rozmiar czcionki bez
wzgldu na to, w jaki sposb jest on zdefiniowany.
Moliwo dostosowania rozmiaru tekstu jest niezbdna dla osb
z wadami wzroku. Bdzie ona take mile widziana przez wszystkich chccych zwikszy czytelno stron internetowych, na ktrych

Elastyczny tekst
domylnie zastosowano mae czcionki. W naturze wszystkich projektantw ley ch penej kontroli nad wygldem caej witryny. Rezygnujc tylko z odrobiny tej kontroli w zakresie definiowania rozmiaru
tekstu, poprawiamy odbir witryny przez internautw oraz zwikszamy jej dostpno.
Wrmy do braku moliwoci zmiany wielkoci tekstu, ktrego rozmiar czcionki zosta zdefiniowany przy uyciu wartoci pikselowych.
By moe twrcy przegldarki chcieli pozosta wierni idei, e piksel
to piksel jednostka, ktra nigdy si nie zmienia, nawet wtedy, gdy
uytkownik by tego chcia (a przecie ma do tego prawo). Mimo to
wszystkie inne przegldarki dziaaj w sposb poprawny i umoliwiaj uytkownikowi zmian wielkoci tekstu, ktrego rozmiar zosta okrelony w jednostkach pikselowych.
Wszystko byoby prostsze, gdyby projektanci mogli definiowa rozmiar czcionki w wartociach pikselowych, a uytkownicy mogli dostosowa go zgodnie ze swoimi wymaganiami. Jednak nie ma moliwoci skalowania tekstu w IE/Win, dlatego rozwizanie to nie jest
optymalne. Poznajmy wic inne sposoby definiowania rozmiaru tekstu. Na koniec ustalimy rozwizanie, w ktrym zrezygnujemy z precyzji zapewnianej przez wartoci pikselowe, ale ktre bdzie posiadao wan zalet skalowalno we wszystkich przegldarkach.

Wszystkie moliwoci
Oprcz stosowania wartoci pikselowych istnieje kilkanacie innych
metod definiowania rozmiaru tekstu przy uyciu stylw CSS warto
zna wszystkie.
Jednostki, ktre stosujemy, podajc warto dla waciwoci fontsize w arkuszu CSS, mona podzieli na cztery grupy.

JEDNOSTKI DUGOCI
Jednostki dugoci mog by wzgldne lub bezwzgldne. Do wzgldnych jednostek zaliczamy:
Q

em okrelenie wielkoci wzgldem rozmiaru czcionki elementu

nadrzdnego (rodzica),

ex okrelenie wielkoci wzgldem wysokoci litery x danej

czcionki,

px okrelenie wielkoci wzgldem rozdzielczoci urzdzenia

(najczciej stosowana jednostka).

Z technicznego punktu widzenia piksel to wzgldna

jednostka miary, ktra zaley od rozdzielczoci urzdzenia, na ktrym jest wywietlana bd drukowana.
Na przykad rzeczywista
wielko piksela wywietlanego na monitorze rni
si od wielkoci piksela
wydrukowanego.
Wicej informacji na ten
temat mona znale na
stronie www.w3.org/

TR/REC-CSS2/syndata.
html#pixel-units.

17

18

Rozdzia 1.
Bezwzgldne jednostki dugoci uywane s przede wszystkim
w druku, jednak stosuje si je take wtedy, gdy znane s fizyczne
wymiary i waciwoci przegldarki lub urzdzenia:
Q

in cale (ang. inches),

cm centymetry,

mm milimetry,

pt punkty,

pc pica.

SOWA KLUCZOWE WZGLDNE

Jeli chcemy okreli wzgldny rozmiar tekstu przy uyciu sw kluczowych, do wyboru mamy tylko dwa sowa:
Q

larger,

smaller.

W ten sposb okrelimy wielko czcionki wzgldem aktualnej wielkoci czcionki elementu rodzica. Konsorcjum W3C (ang. World Wide
Web Consortium) organizacja zajmujca si standaryzacj internetu wyjania, e jeli wielko czcionki elementu rodzica okrelono za pomoc sowa kluczowego medium, uycie sowa kluczowego larger zwikszy rozmiar czcionki biecego elementu do
wielkoci large. Wicej informacji na ten temat mona znale pod
adresem www.w3.org/TR/CSS21/fonts.html#font-size-props.
O tych wartociach naley myle jak o odpowiednikach elementw
<small> i <big> z jzyka HTML. Okrelaj one zmian wielkoci tekstu wzgldem wielkoci zdefiniowanej gdzie wyej w drzewie dokumentu.

PROCENTY
Wartoci procentowe okrelaj rozmiar tekstu wzgldem rozmiaru
tekstu elementu zawierajcego biecy element (elementu rodzica).
Uycie wartoci 120% zwikszy uprzednio zdefiniowan wielko
o 20%, bez wzgldu na to, jaka jednostka bya stosowana (jeeli jakakolwiek bya stosowana). W naszym kuloodpornym rozwizaniu
do okrelenia wielkoci tekstu wykorzystamy procenty w poczeniu
ze sowami kluczowymi.

Elastyczny tekst

SOWA KLUCZOWE BEZWZGLDNE

Sowa kluczowe definiujce rozmiar w sposb bezwzgldny korzystaj z tabeli rozmiarw czcionek przegldarki lub urzdzenia. Oto
siedem moliwych wielkoci:
Q

xx-small,

x-small,

small,

medium,

large,

x-large,

xx-large.

Konsorcjum W3C sugeruje twrcom przegldarek, by wspczynnik

skalowania pomidzy poszczeglnymi sowami kluczowymi wynosi
1,5 oraz zaleca, by skala pozostaa bez zmian, bez wzgldu na fizyczn wielko tekstu po wywietleniu. Czyli mwic prostym jzykiem wielko large jest ptora raza wiksza od wartoci medium,
a wielko small jest ptora raza mniejsza od wielkoci medium.
Prosta skadnia to tylko jedna z wielu zalet stosowania bezwzgldnych sw kluczowych, ktre bardziej szczegowo omwimy w nastpnym podrozdziale.
Znamy ju wszystkie jednostki, ktre mona stosowa we waciwoci font-size, dlatego moemy przej do omwienia strategii,
ktra zapewni elastyczn podstaw i da uytkownikom moliwo
sterowania wielkoci tekstu.

Rozwizanie kuloodporne
Podziel si teraz rozwizaniem, ktre skutecznie stosuj we wasnych projektach, czc bezwzgldne sowa kluczowe z wartociami
procentowymi. Uycie sw kluczowych przy definiowaniu wielkoci
tekstu we waciwoci font-size rozwizuje problem pokazany
wczeniej na przykadzie witryny eyeglasses.com (dotyczcy milionw stron). Gdy nie s stosowane wartoci pikselowe, wszystkie
przegldarki i urzdzenia potrafi zmieni rozmiar wywietlanego
na stronie tekstu. Przyjrzyjmy si, w jaki sposb naley stosowa
sowa kluczowe.

19

20

Rozdzia 1.

SOWA KLUCZOWE WYJANIENIE

Jak ju wczeniej wspomniaem, rozmiar czcionki moemy okreli
przy uyciu siedmiu sw kluczowych: xx-small, x-small, small,
medium, large, x-large, xx-large. Oto przykad, w jaki sposb
moemy uy jednej z tych wartoci, aby ustawi wielko czcionki
dla elementu <body>:
body {
font-size: small;
}

Sowo kluczowe definiuje rozmiar tekstu w zalenoci od ustawie

przegldarki. Innymi sowy, jeeli uytkownik ustawi w opcjach
przegldarki wywietlanie tekstu wikszego lub mniejszego od wartoci domylnej, to sowo kluczowe definiuje wielko tekstu wedug
ustawionego w taki sposb rozmiaru podstawowego. Wspczynnik
skalowania pomidzy poszczeglnymi sowami kluczowymi pozostaje stay, bez wzgldu na to, jak wielko podstawow ustalono.
Na rysunku 1.3 kade sowo kluczowe napisane jest tekstem innej
wielkoci. Skala wielkoci zaley od ustawionego w przegldarce
domylnego rozmiaru czcionki. Do wykonania zrzutw uyem przegldarki Internet Explorer.

Rysunek 1.3. Porwnanie wielkoci tekstu uzyskiwanej dziki rnym sowom kluczowym.
Na rysunku po prawej widoczna jest ta sama strona po zwikszeniu w przegldarce
rozmiaru tekstu

Elastyczny tekst
Jak wida, sowo small ma rn wielko w zalenoci od ustawionej
w przegldarce wielkoci podstawowej. Jednak rnica pomidzy
wielkoci small a kolejn wartoci w gr lub w d jest staa.

REZYGNACJA Z PIKSELOWEJ PRECYZJI

Najwiksz trudnoci do przezwycienia dla kadego projektanta
korzystajcego ze sw kluczowych (lub innych jednostek niebdcych wartociami pikselowymi) jest to, e tekst moe mie odrobin
rn wielko w zalenoci od przegldarki, systemu operacyjnego
oraz indywidualnych ustawie.
Przykadowa wielko small moe by rna, gdy tekst jest wywietlany w rnych przegldarkach na rnych systemach operacyjnych,
nawet jeli we wszystkich przegldarkach domylnie jest ustawiony
redni rozmiar czcionki.
Zasad piksel to piksel mona uzna za prawo oglnie obowizujce
w internecie. Jednak sowa kluczowe to tylko wskazwki dla przegldarki w kwestii tego, jak duy lub may ma by wywietlany tekst.
Projekty (i ich uytkownicy) mog wiele zyska, jeli ich autor jest
w stanie zaakceptowa takie mae wariacje wielkoci, wynikajce ze
stosowania sw kluczowych, ktre zwikszaj elastyczno projektu.

DWIE PRZESZKODY DO POKONANIA

W dalszej czci tego rozdziau przedstawi kilka rozwiza, mwicych w jaki sposb mona unikn tych drobnych rnic wielkoci
tekstu w rnych przegldarkach, gdy rozmiar czcionki zosta zdefiniowany przy uyciu sw kluczowych. Jednak najpierw musz omwi dwie wane rozbienoci wystpujce w przegldarkach Netscape
4.x oraz IE5.

NETSCAPE 4.X
Nawet przy domylnych ustawieniach (redni rozmiar tekstu), przegldarka Netscape 4 ma tendencj do wywietlania tekstu tak maego, e nie jest on czytelny na ekranie. Ze wzgldu na niebezpieczestwo, i nasz tekst bdzie cakowicie nieczytelny, gdy korzystamy ze
stylw CSS do ustawienia wielkoci tekstu na stronach wywietlanych w przegldarce Netscape 4.x, lepiej nie stosowa sw kluczowych. Informacje wyjaniajce dlaczego nie jest to wskazane
rozwizanie mona znale na stronie www.alistapart.com/articles/
sizematters. Jednak nie bdziemy si zbytnio przejmowa kopotami

21

22

Rozdzia 1.
zwizanymi z przegldark Netscape 4.x, poniewa w naszych przykadach i tak zawsze bdziemy ukrywa style przed t star aplikacj. Mamy wic jedn przeszkod mniej.

IE5 DLA WINDOWS

Druga przeszkoda jest troch bardziej skomplikowana, poniewa
nie ma moliwoci cakowitego ukrycia stylw przed przegldark
IE5/Win (a przegldarka ta mimo wszystko nadal cieszy si ogromnym powodzeniem przynajmniej w czasie pisania tej ksiki). Przeszkoda ta wyglda na oczywist pomyk programistw, ktrzy stworzyli IE5/Win.
Z powodw znanych tylko firmie Microsoft, w IE5 rozmiar tekstu,
ktrego wielko zostaa zdefiniowana przy uyciu sw kluczowych
jest o jeden stopie wikszy ni obowizujce standardy przegldarek. Na przykad, jeli zadeklarujemy
body {
font-size: small;
}

i wywietlimy stron przy domylnych ustawieniach przegldarki,

tekst w IE5/Win bdzie mia tak sam wielko, jak tekst o rozmiarze
medium wywietlony w innych przegldarkach. W przegldarce IE5/
Win zaprojektowane przez nas strony nie wygldaj tak, jak chcielimy. Na rysunku 1.4 widoczna jest rnica wielkoci tekstu (o rozmiarze small) w przegldarkach IE5 i IE6.

Rysunek 1.4. Porwnanie to ilustruje, e tekst o rozmiarze small w przegldarce IE5 jest
o jeden stopie wikszy ni w przegldarce IE6/Win oraz w innych powszechnie stosowanych
przegldarkach

Elastyczny tekst
Aby omin ten problem i sprawi, by zostaa zachowana jedna
wielko tekstu przy wywietlaniu tej samej strony w rnych przegldarkach, zastosujemy pewn sztuczk, dziki ktrej dla przegldarki IE5/Win mona zastosowa inn regu CSS ni dla pozostaych
przegldarek. Dla stron wywietlanych w IE5/Win zadeklarujemy (przy
uyciu sw kluczowych) rozmiar tekstu o jeden stopie mniejszy ni
dla pozostaych przegldarek.

SZTUCZKA DLA IE5/WIN

Dla przegldarki IE5/Win podamy rozmiar tekstu o jeden stopie
mniejszych przy uyciu sztuczki wymylonej przez Tanteka elika (Box
Model Hack www.tantek.com/CSS/Examples/boxmodelhack.html),
ktra polega na tym, e oszukujemy IE5/Win, mwic, e deklaracja
stylu CSS ju si zakoczya. Dziki tej sztuczce moemy waciwoci
font-size najpierw przypisa mniejsz warto, ktra zostanie
uyta w IE5/Win, a nastpnie nadpisa j wartoci przeznaczon
dla innych przegldarek.
Reguy CSS potrzebne do zadeklarowania rozmiaru small dla tekstu
elementu <body> wygldaj nastpujco:
body {
font-size: x-small; /* dla IE5/Win */
voice-family: "\"}\"";
voice-family: inherit;
font-size: small; /* dla innych przegldarek */
}
html>body { /* bdmy mili dla Opery */
font-size: small;
}

Jak wida w powyszym kodzie, podstawowy rozmiar czcionki ustawiony zosta przy uyciu sowa kluczowego small. Jednak wczeniej, ze wzgldu na przegldark IE5/Win, deklarujemy warto
o jeden stopie nisz ni zamierzona, a nastpnie oszukujemy t
przegldark, e deklaracja stylu zostaa zakoczona. Osigamy to
za pomoc nastpujcej deklaracji:
voice-family: "\"}\"";

Tylko przegldarka IE5/Win rozpoznaje ten nawias zamykajcy, ktry

sugeruje, e deklaracja zostaa zakoczona. Dla wszystkich pozostaych przegldarek warto x-small nadpisujemy poprzez zadeklarowanie wartoci small. Dziki tak zdefiniowanym stylom CSS
uzyskujemy w miar jednolit wielko tekstu podstawowego we
wszystkich przegldarkach.

23

24

Rozdzia 1.
Moemy take omwi drug deklaracj, w ktrej zostaa powtrzona regua font-size: small. Regua ta okrelana jako bdmy
mili dla Opery powoduje, e Opera (oraz inne przegldarki) na
pewno nie zignoruje reguy, ktra znajduje si za sztucznym zakoczeniem deklaracji dla IE5. Jeli korzystamy ze sztuczki Box Model
Hack, zawsze powinnimy umieci t deklaracj. Dziki niej wszystkie
zgodne przegldarki poprawnie nadadz zadeklarowane style i bd
mogy przej do odczytywania nastpnej deklaracji w arkuszu stylw.

UPROSZCZONA WERSJA SZTUCZKI

BOX MODEL HACK
Opracowana przez Edwardsona Tana uproszczona sztuczka Box
Model Hack (SMBH ang. Simplified Box Model Hack) umoliwia
osignicie tego samego efektu (podanie innych wartoci dla przegldarki IE5/Win), przy mniejszej iloci kodu. atwiejsza do zrozumienia jest te chyba uyta w tej wersji skadnia.
Po zastosowaniu SMBH nasz poprzedni przykad wyglda nastpujco:
body {
font-size: small;
}
* html body {
font-size: x-small; /* dla IE5/Win */
f\ont-size: small; /* dla innych wersji IE */
}

Arkusz rozpoczynamy od normalnej deklaracji stylw dla elementu

<body> i umieszczamy w nim regu deklarujc dla tekstu wielko
small. Nastpnie, uywajc selektora * html, wykorzystujemy dziur
w przegldarce IE, ktra umoliwia zdefiniowanie deklaracji tylko
dla przegldarek IE. Przegldarka IE5/Win ignoruje lewy ukonik we
wasnoci font-size, co umoliwia nam zadeklarowanie wartoci
x-small dla IE5/Win i nadpisanie jej wartoci small dla pozostaych wersji przegldarki IE.
W ten sposb uzyskujemy rezultat taki sam, jak w poprzednim przykadzie. Jednak skadnia uyta w tym rozwizaniu jest duo bardziej
zrozumiaa. Bardziej szczegowe informacje na temat sztuczki SBMH
mona znale na stronie http://www.info.com.ph/~etan/w3pantheon/
style/modifiedsbmh.html.
Oczywicie pojawiaj si gosy, e stosowanie sztuczek typu Box
Model Hack czy SBMH jest zbyt uciliwe i nie warto ich stosowa
tylko po to, by poprawi rozmiar tekstu. Jeli jednak zaley nam na

Elastyczny tekst
spjnym wygldzie strony we wszystkich przegldarkach, warto zapaci tak cen.
Istniej metody strategicznego zbierania wszystkich trikw CSS
i umieszczania ich oddzielnie od schludnych i zgodnych arkuszy stylw. Kilka takich metod poznamy w rozdziale 9.

Dlaczego rozwizanie
to jest kuloodporne
Po pokonaniu wszystkich przeszkd mamy w kuloodporny sposb
zdefiniowan wielko tekstu podstawowego. Zamiast deklarowa
rozmiar czcionki w pikselach (tak jak ma to miejsce w przypadku
strony eyeglasses.com oraz wielu innych witryn), w deklaracji dla
elementu <body> uywamy sowa kluczowego small, aby ustawi
domyln wielko tekstu na stronie. Dziki stosowaniu sw kluczowych, w kadej przegldarce i urzdzeniu (wcznie z IE/Win) bdzie istniaa moliwo zmiany rozmiaru tekstu przez uytkownika.
Takie rozwizanie jest niezbdne dla ludzi z wad wzroku i to nie
tylko dla osb szukajcych nowych okularw, ale take dla osb
szukajcych przepisw, robicych zakupy czy czytajcych artykuy
w internecie. Mimo e ta maa zmiana okae si prawie niezauwaalna
dla przecitnego uytkownika strony, bdzie ogromnym uatwieniem
dla tych, ktrzy dopiero po jej wprowadzeniu bd mogli z tej strony
skorzysta.

Elastyczna baza i co dalej?

Na razie dowiedzielimy si, w jaki sposb naley definiowa rozmiar czcionki dla caej strony. Oczywicie chcemy, by niektre elementy projektu wyrniay si inn wielkoci czcionki na przykad nagwki, listy, podpisy, nawigacja czy tabele. Tekst kadego
z tych elementw potencjalnie moe by innej wielkoci ni podstawowy tekst na stronie. Jaki jest jednak najlepszy sposb deklarowania rozmiaru tekstu innych elementw (mniejszego lub wikszego
od wielkoci bazowej)?
Polecam metod, ktra okazaa si dla mnie najlepszym rozwizaniem jest zrozumiaa i dziki niej mona atwo modyfikowa
rozmiar istniejcego tekstu oraz dodawa nowe deklaracje, nawet
ju po opublikowaniu witryny.

Wicej informacji na temat

stosowania sw kluczowych i wspomnianych tutaj
sztuczek mona znale
w szczegowym artykule
Todda Fahrnera
w magazynie A List
Apart (www.alistapart.
com/articles/sizematters).
Jeli nie przeszkadza nam,
e w przegldarce IE5/Win
wywietlany tekst jest o jeden stopie wikszy, moemy z powodzeniem pomin opisane w tym
podrozdziale przeszkody.
Nie musimy ich pokonywa, moemy je omin.

25

26

Rozdzia 1.

USTAW I ZAPOMNIJ

Aby zachowa spjno

wygldu w przegldarce
IE5/Win, tutaj take mona
skorzysta z opisywanej
wczeniej sztuczki Box
Model Hack.

Podczas definiowania rozmiaru tekstu, tylko w jednym miejscu w naszym arkuszu stylw uyjemy wartoci bezwzgldnej. Sowo kluczowe
wielkoci bezwzgldnej zastosujemy tylko w deklaracji dla elementu
<body>, tak jak omawialimy to wczeniej w tym rozdziale:
body {
font-size: small;
}

Jak wida na rysunku 1.5, wielko 12 pikseli mona porwna z wielkoci small. Oczywicie rnice te bd odrobin inne w rnych
przegldarkach, poniewa kady program moe mie zdefiniowan
inn wielko dla poszczeglnych sw kluczowych. Jednak w wikszoci przypadkw uycie sowa kluczowego small przy definiowaniu podstawowego rozmiaru tekstu jest rwnoznaczne z ustawieniem
wartoci 12px (przy zaoeniu, e uytkownik nie zmieni domylnych ustawie przegldarki). Takie porwnanie jest bardzo przydatne
dla projektantw dopiero zaczynajcych stosowa sowa kluczowe.

Rysunek 1.5. Porwnanie tekstu o wielkoci 12px z tekstem,

ktrego rozmiar ustawiono za pomoc sowa kluczowego small.
Przy domylnych ustawieniach przegldarki (redni rozmiar tekstu)
otrzymany wynik jest bardzo podobny

PROCENTOWA ZMIANA WARTOCI BAZOWEJ

Rysunek 1.6. Przy uyciu
procentw rozmiar
tekstu moemy zarwno
zwikszy, jak i zmniejszy
w stosunku do podstawowej wielkoci

Podstawow wielko tekstu ustawion za pomoc sowa kluczowego small bdziemy modyfikowa, korzystajc z wartoci procentowych. Stosowanie wartoci procentowych jest prost drog do
wizualizacji podanego rozmiaru elementu. Na rysunku 1.6 moemy zauway, jak wartoci procentowe zwikszaj lub zmniejszaj
rozmiar czcionki w stosunku do podstawowej wielkoci tekstu.

Elastyczny tekst
Jeli na przykad chcemy, by element <h1> by odrobin wikszy ni
tekst o wielkoci small, wystarczy zadeklarowa:
body {
font-size: small;
}
h1 {
font-size: 150%;
}

Elementy <h1> zawsze znajduj si wewntrz elementu <body>,

dlatego ich tekst na pewno bdzie ptora raza wikszy ni tekst
wielkoci small (rysunek 1.7).

Rysunek 1.7. Wielko tekstu elementu <h1> zostaa ustawiona

na 150% wielkoci small
Podobnie, moe by wskazane, by tekst niektrych akapitw by
mniejszy ni podstawowy tekst strony, czyli w naszym przypadku
mia wielko mniejsz ni small. W tym celu tworzymy klas note
i dodajemy j do krtkiego akapitu (rysunek 1.8).
<p class="note">Akapit klasy note. Tekst tego akapitu
jest mniejszy ni podstawowy tekst strony.</p>

27

28

Rozdzia 1.

Rysunek 1.8. Wielko tekstu klasy note to 85% wartoci wielkoci

ustawionej przez sowo kluczowe small (akapit klasy note zosta
dodatkowo wyrniony szarym kolorem)
Tekst tego akapitu ma by nieznacznie mniejszy ni domylna wielko tekstu, dlatego dodajemy dla tej klasy deklaracj, w ktrej uyta
jest warto procentowa mniejsza ni 100%.
.note {
font-size: 85%;
}

Wartoci procentowe moemy przypisa dowolnemu elementowi

strony, by zwikszy lub zmniejszy wielko jego tekstu w stosunku
do wielkoci tekstu elementu <body>.
Uproszczony arkusz stylw, w ktrym rozmiar tekstu poszczeglnych elementw okrelony jest przy uyciu wartoci procentowych
wyglda nastpujco:
body {
font-size: small;
}
h1 {
font-size: 150%;
}

Elastyczny tekst
h2 {
font-size: 130%;
}
h3 {
font-size: 120%;
}
ul li {
font-size: 90%;
}
.note {
font-size: 85%;
}

Zadeklarowalimy stopniowo malejce wielkoci dla trzech typw

nagwkw, pomniejszylimy tekst listy wypunktowanej oraz utworzylimy klas note moemy j zastosowa do kadego elementu,
ktrego tekst ma by mniejszy od wielkoci domylnej. Jest to podstawowy przykad, jednak doskonale ilustruje on nasze dwuetapowe
rozwizanie najpierw naley ustawi podstawow wielko tekstu przy uyciu sowa kluczowego, a nastpnie za pomoc wartoci procentowych zwikszy lub zmniejszy wielko tekstu
pozostaych elementw. Wystarczy zmieni warto podstawow,
a reszta rozmiarw dostosuje si samoistnie.
Zalet stosowania wartoci podstawowych w poczeniu z wartociami procentowymi jest to, e w celu zmiany podstawowej wielkoci tekstu wystarczy zmieni jedn regu w deklaracji stylw dla
elementu <body>. Wielkoci pozostaych elementw, ktre zostay
zdefiniowane przy uyciu wartoci procentowych dostosowuj si
do zmiany wielkoci podstawowej. Zmiana rozmiaru czcionki z wartoci small na large spowoduje zmian wielkoci tekstu wszystkich elementw. Rozwizanie to jest bardzo porczne, nawet jeli
w pewnym momencie zdecydujemy si na zdefiniowanie wielkoci
podstawowej w innych jednostkach.
Z tych samych powodw rozwizanie to doskonale si sprawdza
w przypadku uytkownikw, ktrzy lubi korzysta z wasnych arkuszy
stylw, nadpisujcych wartoci zdefiniowane w arkuszach strony
internetowej. Wystarczy, e uytkownik zdefiniuje jedn regu modyfikujc podstawowy rozmiar tekstu, a rozmiar tekstu wszystkich
elementw proporcjonalnie si zmieni.

29

30

Rozdzia 1.

Stosowanie sw kluczowych
i wartoci procentowych
Aby peniej wykorzysta zalety pracy ze sowami kluczowymi i wartociami procentowymi, naley pamita o kilku kwestiach. Informacje zawarte w tym podrozdziale powinny pomc we waciwym
dostosowaniu wartoci procentowych. Wspomn take o kilku najwaniejszych aspektach, o ktrych naley pamita przy zagniedaniu wartoci procentowych.

USTAWIENIE POREDNIEJ WARTOCI BAZOWEJ

Bardzo przydatna sztuczka polega na dostosowaniu wielkoci tekstu
przy uyciu sowa kluczowego i elementu <div>, w ktrym umieszcza
si ca zawarto strony. Czsto przy tworzeniu projektw opartych
na stylach CSS z rnych powodw stosuje si gwny element
<div> zawierajcy wszystkie pozostae elementy (wicej informacji
na ten temat mona znale w rozdziale 8.). Element ten moemy
take wykorzysta, by przy uyciu wartoci procentowych dostosowa do naszych wymaga wielko tekstu zdefiniowan sowami
kluczowymi.
Wyobramy sobie, e pracujemy z nastpujc struktur:
<body>
<div id="container">
<h1>To jest tytu</h1>
<p>Tekst o domylnej podstawowej wielkoci.</p>
</div>
</body>

Tak jak robilimy to we wczeniejszych przykadach, podstawow

wielko tekstu moemy ustawi przy uyciu sw kluczowych, a wielko nagwka <h1> moemy ustawi za pomoc wielkoci procentowych:
body {
font-size: small;
}
h1 {
font-size: 150%;
}

Elastyczny tekst
Jeli jednak stwierdzimy, e warto small jest zbyt dua dla naszego
projektu (gdy wywietlamy stron przy domylnych ustawieniach
przegldarki), moemy j zmieni na nieco mniejsz. Wystarczy przy
uyciu procentw zadeklarowa mniejsz wielko dla obiektu o identyfikatorze #container, w ktrym umiecimy wszystkie elementy
tekstowe strony.
body {
font-size: small;
}
h1 {
font-size: 150%;
}
#container {
font-size: 95%;
}

Na rysunku 1.9 wida, e zmniejszylimy troch domylny rozmiar

czcionki. Wprowadzone zmiany dotycz take tytuu.

Rysunek 1.9. Porwnanie tekstu wielkoci small (grna cz)

z tekstem zmniejszonym poprzez ustawienie dla zawierajcego go
pojemnika wielkoci 95% (dolna cz)
Dla tekstu w dolnej czci rysunku, ktry w kodzie znajduje si
w elemencie <div> o identyfikatorze #container, dodalimy regu
font-size: 95%. Tekst w grnej czci rysunku ma wielko ustawion za pomoc sowa kluczowego small. Rnica w wywietlanej wielkoci jest niewielka.
Zalet tego rozwizania jest precyzyjne dostosowanie rozmiaru tekstu wtedy, gdy chcemy uzyska wielko poredni midzy wielkociami nadawanymi przez dwa kolejne sowa kluczowe. Korzystajc

31

32

Rozdzia 1.
z istniejcego elementu <div>, w ktrym znajduj si wszystkie
elementy strony, moemy dowolnie zmienia rozmiar tekstu i w ten
sposb zdefiniowa wasny rozmiar podstawowy.
Jednak najlepiej jest nie zagbia si zbytnio w szczegy przy definiowaniu wielkoci tekstu, poniewa w rnych przegldarkach i rnych systemach operacyjnych zawsze bd widoczne pewne rnice.
Najwaniejsze jest, e uytkownicy bd mieli moliwo zmiany
wielkoci tekstu przy uyciu narzdzi wbudowanych w przegldarki.

ZAGNIEDAJC PROCENTY,
MUSIMY ZACHOWA OSTRONO
Przy zagniedaniu wartoci procentowych naley zachowa ostrono. W poprzednim przykadzie podstawowa wielko tekstu bya
zdefiniowana przy uyciu wartoci small, a nastpnie zostaa zmniejszona do 95% oryginalnej wielkoci poprzez dopisanie odpowiedniej
deklaracji do pojemnika <div id="container">. Wszystko moe
si troch skomplikowa, gdy zaczniemy stosowa wartoci procentowe do innych elementw znajdujcych si wewntrz elementu
#container.
Na przykad wczeniej zadeklarowalimy, e wielko elementu <h1>
bdzie wynosi 150% wielkoci podstawowej. Elementy <h1> znajduj si niej w drzewie dokumentu poniej obiektu #container. Dlatego ich wielko to nie 150% wielkoci podstawowej, lecz
150% z wartoci 95% z wielkoci small. Na rysunku 1.10 przedstawiono zaleno pomidzy zagniedaniem elementw w dokumencie a przypisanymi do nich wartociami procentowymi.

Rysunek 1.10.
Sposb wyliczania wartoci
procentowych w przypadku
wielokrotnego zagniedania
elementw
Faktycznie, moemy by troch zdezorientowani. By moe pomocna
bdzie zamiana sowa kluczowego small na warto numeryczn.

Elastyczny tekst

33

Naley zachowa szczegln ostrono przy zagniedaniu wartoci procentowych mniejszych ni 100%
zmniejszenie przez uytkownika domylnej wielkoci tekstu w przegldarce moe spowodowa,
e tekst bdzie zbyt may i stanie si nieczytelny.
Innymi sowy, jeeli projektant przy tworzeniu strony sugerowa si ustawieniami domylnymi i uy
maych wartoci procentowych (takich, e przy ustawieniu redniego rozmiaru czcionki w przegldarce
tekst nadal by czytelny), moliwe jest, e strona bdzie nieczytelna, gdy uytkownik wybierze w przegldarce mniejszy rozmiar czcionki.
Czytelno tekstu na stronie naley przetestowa przy rnych ustawieniach rozmiaru tekstu w rnych
przegldarkach, niezalenie od uywanego poczenia sw kluczowych i procentw. Rada ta jest dobra
bez wzgldu na to, z jakiej metody ustawienia wielkoci tekstu korzystamy.
Bardzo ciekawy jest test Owena Briggsa, porwnujcy wielkoci tekstu w rnych przegldarkach,
na rnych systemach i przy zastosowaniu rnych systemw definiowania rozmiarw tekstu
(www.thenoodleincident.com/tutorials/box_lesson/font/method.html). Na stronie testu Briggs umieci
264 zrzuty ekranowe, dziki czemu w jednym miejscu mona porwna wszystkie uzyskane wyniki
(rysunek 1.11).

Rysunek 1.11. Test Owena Briggsa dotyczcy wywietlanej wielkoci tekstu to cenne rdo
informacji, zawierajce 264 zrzuty ekranowe, ktre przedstawiaj prawie kad moliw
kombinacj ustawie

34

Rozdzia 1.
Jeeli wielko tekstu dla elementu <body> wynosi 10 (zamiast
small), to wszystko wewntrz elementu #container bdzie miao
wielko 9,5 (czyli 95% z 10). Nagwek <h1> znajduje si wewntrz
elementu #container, a rozmiar czcionki ustawiony dla tych nagwkw wynosi 150%. Warto 150% z pierwszej wielkoci podstawowej wynosiaby 15, jednak poniewa element <h1> znajduje si
w elemencie #container, warto ta bdzie wynosi 14,25 (150%
z 9,5). Obliczenia staj si coraz bardziej skomplikowane wraz z kolejnymi poziomami zagniede. Mora z tego jest taki, e podczas
deklarowania nowych wartoci procentowych naley pamita o ustawionych ju wartociach. Osobicie przy projektowaniu stron rzadko
stosuj zagniedanie na wicej ni dwu poziomach. Dziki zrozumieniu tego, w jaki sposb zagniedanie wpywa na wielko wartoci procentowych, moemy unikn rozczarowania, gdy uzyskane
wielkoci tekstu rni si od zamierzonych.

SPJNO DZIKI WARTOCIOM

PROCENTOWYM
Eksperymentowanie z wartociami procentowymi moe prowadzi
do bardziej spjnego wygldu strony wywietlanego w rnych przegldarkach na rnych platformach. Przy stosowaniu wartoci procentowych dobrze jest poeksperymentowa z rnymi wartociami,
zwaszcza jeli stosujemy mae wielkoci czcionki. Testy moemy wykonywa przy zaoeniu, e wikszo internautw przeglda strony,
majc w przegldarce wczony domylny rozmiar tekstu (chocia
zaoenie to jest bdne uytkownik moe zmieni domylne
ustawienia).
Przykadowy test przeprowadzimy na uywanej ju wczeniej klasie
note. Moemy porwna wielko tekstu dla wartoci 85% i 90% we
waciwoci font-size. Niektre przegldarki rozrniaj wartoci

procentowe bdce wielokrotnoci liczby 10 (70, 80, 90 itp.), a inne

rozrniaj bardziej specyficzne wartoci, ktre kocz si cyfr 5
(75, 85, 95 itp.).
Porwnajmy strony widoczne na rysunkach 1.12 oraz 1.13. Po lewej
widoczne s strony wywietlone w przegldarce Safari, a po prawej
strony wywietlone w przegldarce IE6/Win. W przegldarce IE6/Win
rnica pomidzy wielkoci 85% (na grze) i 90% (na dole) jest
prawie niezauwaalna. Natomiast w przegldarce Safari wida
znaczn rnic. W tym szczeglnym przypadku sugerowabym uycie wielkoci 90%, poniewa wielko tekstu dwch popularnych
przegldarek prawie si nie rni.

Elastyczny tekst

Rysunek 1.12. Porwnanie wielkoci tekstu klasy note

w przegldarce Safari z tym samym tekstem w przegldarce
IE6/Win. Wielko tekstu zostaa zmniejszona do 85%

Rysunek 1.13. Porwnanie wielkoci tekstu klasy note

w przegldarce Safari z tym samym tekstem w przegldarce
IE6/Win. Wielko tekstu zostaa zmniejszona do 90%
Moe dzielimy tutaj wos na czworo, ale zachcamy do eksperymentowania podczas dobierania rnych wartoci procentowych dla waciwoci font-size. Zmiana wartoci o 5% moe prowadzi do
pojawienia si zauwaalnej rnicy wielkoci, ktra moe wpyn
na spjno wygldu projektu w rnych przegldarkach.

Podsumowanie
Najwaniejsz informacj, jak naley zapamita po przeczytaniu
tego rozdziau jest to, e uytkownikowi naley umoliwi zmian
rozmiaru tekstu. Podzieliem si swoimi rozwizaniami, wykorzystujcymi sowa kluczowe oraz wartoci procentowe. Jednak kada
strona internetowa jest inna i ma swoje wasne wymagania. Najlepiej by byo, gdybymy we wszystkich tworzonych projektach mogli
uwzgldni opisan w tym rozdziale elastyczno.
Poniej zamieciem kilka uwag wartych zapamitania.
Q

Uytkownicy IE/Win nie mog zmienia wielkoci tekstu, gdy jego

rozmiar zdefiniowany jest w jednostkach pikselowych.

Stosowanie sw kluczowych to atwa, zrozumiaa metoda definiowania wielkoci czcionki, ktra umoliwia zmian rozmiaru
tekstu przez uytkownika.

35

36

Rozdzia 1.
Q

Stosowanie wartoci procentowych uatwia szybk zmian wielkoci caego tekstu strony poprzez zmian jednej deklaracji lub
uycie zdefiniowanego przez uytkownika arkusza stylw.

Stosowanie wartoci procentowych w poczeniu ze sowami

kluczowymi daje moliwo bardziej precyzyjnego okrelenia
wielkoci.

Dobra wiadomo jest taka, e rozdzia ten jest chyba najmniej interesujcy z caej ksiki. Jednak jest on solidn a raczej elastyczn
podstaw dla wszystkich kolejnych przykadw. W dalszych rozdziaach przyjmuj zaoenie, e uytkownik moe skalowa tekst na
stronie w dowolnym kierunku. Z tak wiedz moemy zacz w kreatywny sposb stosowa style CSS i przebudowa wiele tradycyjnych komponentw stron tak, by stay si elastyczne.