Už je hezky, odložte své tabulky!

Je stále běžnou praxí formátovat WWW stránky pomocí tabulek. Je to zajisté mohutný nástroj, ale má i své - mnohdy velmi závažné - nevýhody. Ačkoli již nějakou dobu máme díky kaskádovým stylům (CSS) k dispozice nástroje jiné a v mnohém ještě mohutnější a dokonalejší, mnozí webdesignéři stále s přechodem na CSS váhají...

Není divu: je to nový a v lecčems zcela jiný způsob tvorby stránek. I když přináší mnohé výhody, začátečník může narazit na problémy a neřešitelné situace, které by s tabulkami vyřešil hravě. V tomto článku si ukážeme, jaké jsou výhody a nevýhody používání tabulek, řekneme si pár základních rad pro přechod na tvorbu CSS stránek a ukážeme si, jak pomocí kaskádových stylů vytvořit některé běžné konstrukce, které bylo doposud možné řešit pouze pomocí tabulek.

Stručný obsah článku:

1. Doba pionýrská, čest její památce
2. Tabulky: anděl s ďáblem v atributu
3. Kaskádové styly se hlásí o slovo
4. Kdy používat CSS a kdy ještě ne?
5. Základní tipy pro začátky s CSS
6. Co všechno CSS dokáže?

Doba pionýrská, čest její památce

Když vymýšleli jazyk HTML, autory patrně ani nenapadlo, že by mu cosi podstatného chybělo. Ve své době a ke svému účelu byl dokonalý - umožnil přenášet dokumenty, které si může přečíst každý, bez ohledu na to, jaké zařízení, jaký systém a jaký program k tomu použije. K tomu přidal možnost provázat různé dokumenty mezi sebou pomocí hypertextových odkazů. Co by kdo chtěl víc? Dokumenty byly strukturované, nikoli formátované - na autorovi bylo pouze určit, která část textu je nadpisem, která odkazem či která se má zvýraznit. To, jak se to má udělat, už bylo jen na možnostech (a téměř libovůli) cílového programu - prohlížeče.

Všimněte si, že píšu v minulém čase. Ano, bylo to tak - a už dávno je tento stav prehistorií Internetu. V okamžiku, kdy HTML do svých pařátů neurvale uchmatla komerční sféra, šly akademické ideály k čertu. Přenositelnost, kompatibilita a strukturovanost se rázem staly podružnými, až zbytečnými funkcemi HTML. Byznys lačně volal: "Písma! Barvy! Formátovat!" Výrobci prohlížečů by byli špatnými obchodníky, kdyby se nezačali snažit těmto prosbám a nářkům vyhovět. Do prohlížečů přibývaly prvky, které rozšiřovaly možnosti toho nemožného, nebarevného a statického jazyka. Bohužel to byla rozšíření, která fungovala pouze v tom jednom prohlížeči. A hned, jakmile se objevilo něco, cokoli, co umožnilo dokument trochu zformátovat podle představy autora (čti: podle představy šéfa kreativního oddělení), bylo to okamžitě a nemilosrdně využito. To něco byly především tabulky.

Tabulky: anděl s ďáblem v atributu

Tabulky, přesněji řečeno značka <TABLE> a značky (tagy) s ní spřízněné, byly určeny k zobrazování klasických tabulek, jaké znáte třeba z vyúčtování za telefon. Co ale brání udělat takovou tabulku přes celou stránku a místo sloupce čísel do ní umístit text a obrázky? Nic. A s přihlédnutím k tomu, že stejně tak nic nebrání do takové tabulky vnořit tabulku další a do ní další a další, stala se z tabulek v rukou webdesignérů hotová DTP bomba. Umístit menu do sloupce k pravému okraji stránky? Hračka. Dát určité oblasti na stránce barevné či dokonce obrázkové pozadí? Pche! Udělat sloupcovou sazbu jako v novinách? Pro děti! Vše je možné, vše je úžasné, jásavé, barevné. Stránky se smějí.

Nesmějí se ale uživatelé: stránka se v prohlížeči ukáže, teprve až se načte celá tabulka; to v případě opravdu komplexních stránek někdy zatraceně dlouho trvá. To už snad dnes ví každý. Už vůbec se nesmějí ti zaostalci, kteří nemají pevnou linku a stahují si stránky přes modem. Někdy až 90 % kódu stránky tvoří "formátovací příkazy" - samotný obsah, o který většinou jde, je jen malým zlomkem z toho kvanta dat, na která musí netrpělivý čtenář dlouhé a drahé vteřiny čekat. To už ví úplně každý. Že se nesmějí ani programátoři a uživatelé textových prohlížečů, no budiž - ale že mnohdy už tuhne smích i samotným byznysmanům, to vědí už snad pouze jejich psychoanalytici. A i mnoha dalším dochází trpělivost.

Ten nejpodstatnější, a přitom nejskrytější problém je totiž v tom, že stránka zfromátovaná pomocí tabulek již není vnitřně strukturovaná. V kódu stránky jde postupně za sebou všechno tak, jak to vidíte na obrazovce - shora dolů a zleva doprava. Tedy nikoli od hlavního a důležitého k méně podstatnému, podle logické struktury dokumentu, ale tak, jak se to má na stránce nakreslit. Stačí oprášit stařičký textový prohlížeč Lynx a podívat se na libovolný portál či zpravodajský server. Nejprve po několik obrazovek uvidíte odkazy na jakési nedefinovatelné obrázky, reklamy, kdo má svátek, odkazy na spřátelené servery, strukturu nabídek a podnabídek a vůbec obsah celého záhlaví a dlouhého levého sloupce. Až kdesi na páté obrazovce narazíte na titulek prvního článku; jeho text však možná bude schován mezi jinými na stránce sedmé.

Ale dobrá, struktura dokumentu je nenávratně v prachu, nedá se na něj koukat hloupým, negrafickým prohlížečem - ale kdo to dělá? Ten důležitý, pan Čtenář, má nejnovější prohlížeč a tyto problémy nezná, ne? Ano. Málo lidí používá textové klienty a pokud pro nás nejsou důležití, nejsou důležití. Ale jsou jiní, kteří nepoužívají grafické klienty. Tak například automaty. Jestli si myslíte, že synopsi vaší stránky do vyhledávače přepíše nějaký zaměstnanec pana Alty Visty, jste v těžkém omylu. Jestli si myslíte, že to nádherné denní zpravodajství vašeho portálu pro agentury a mediální monitoring opíše z pravého sloupce nějaký moudrý novinář, jste tam také. Je éra robotizace. Roboty, jednoduché automatické prohlížeče, samy procházejí daný prostor WWW a z nalezených stránek se snaží dostat maximum informací, které by pak mohly zatřídit do nějaké databáze - vyhledávače, monitoru "tisku" atd. Z výše uvedené ne-struktury stránky musí mít pěkně zamotané registry. Hádejte, co se pak objeví jako popis vaší stránky v takovém vyhledávači...

A v neposlední řadě počítejme s tím, že doba, kdy WWW klient rovná se grafický prohlížeč vzor Microsoft Internet Explorer (MSIE) či Netscape Navigator, také míří směrem k minulosti. Jsou tu specilizované prohlížeče v handheldech. Po WAPu nastoupí éra webových prohlížečů v mobilních telefonech. Prohlížeče pro zrakové postižené nelze pominout - ať již s braillovským či zvukovým výstupem; ostatně zvukový výstup se v budoucnu patrně neomezí pouze na postižené - proč si při vaření v kuchyni neposlechnout svou oblíbenou webovou stránku? A budou další, dosud nevymyslitelné typy "prohlížečů". Pro všechny tyto klienty jsou nestrukturované stránky zcela nepoužitelné.

Tabulky přinášejí relativní volnost ve formátování stránky, možnost dát jí vizuální strukturu, barvy, uspořádání podle přání autora, různá zarovnávání různých částí stránky. Cenou za to je velký objem dat, pomalé vykreslování stránky a zničení struktury dokumentu. Ale což, nebyla jiná možnost.

Už je.

Kaskádové styly se hlásí o slovo

Akademičtí správci ducha Internetu, kteří se kupodivu přes komerční tlaky stále udrželi u vesla, jednoho dne nakonec dostali rozum. Konsorcium W3, které stanovuje standardy internetu, dalo designérům místo tabulkové a FONTové náhražky konečně do ruky nástroj ke skutečnému formátování stránek: nové HTML a kaskádové styly (CSS). I viděli výrobci prohlížečů, že je to dobré, a tyto nástroje do prohlížečů ihned namontovali (což se o méně praktických "vylepšeních" dříve říci nedalo). Specifikaci HTML4 a CSS2 tak - alespoň v jisté míře - podporují všechny nové prohlížeče a s dalšími verzemi bude podpora těchto standardů jen lepší a propracovanější.

Tak, konec juchání. Kdyby vše bylo tak růžové a skvělé, tabulky by s uvedením prvního prohlížeče s podporou CSS vymřely a nebylo by o čem psát. Není to růžové, není to skvělé. CSS samo o sobě umí mnoho věcí, byť ani ono není ještě dokonalé a mnoho funkcí by potřebovalo do příští verze doplnit či opravit. Problém je, jak jinak, v prohlížečích. V tom, který z nich a s jakými výhradami ono CSS "umí". Či spíše co neumí a co dělá špatně. Řeknu to otevřeně: přinejmenším do doby, než bude dokončený a všeobecně rozšířený MSIE 6, než vyjde finální verze Mozilly a Netscape vydá něco použitelného namísto bety šířené pod jménem verze 6, bude nutné si dobře rozmyslet, co z CSS použít a co ne - jinak budete muset stránky postavené na CSS-formátování ladit pro mnoho různých prohlížečů důkladněji než cokoli jiného kdykoli předtím. Ale věřte mi, i tak by to stálo to za to.

Kdy používat CSS a kdy ještě ne?

Sám jsem byl po mnoha trápeních s nekompabilitou některých verzí prohlížečů, místy hraničící s blbostí (především MSIE 4, především v MacOS verzi) ještě před několika měsíci přesvědčen, že jsou situace, které prostě stoprocentně jen s pomocí CSS nevyřeším a tabulkám se nevyhnu. Od té doby jsem ale zase mnoho věcí zjistil a zmíněné situace nakonec vyřešil, a tak si dnes již s troufnu s jistotou prohlásit: CSS ano a kdykoli. Takřka vše, co lze udělat pomocí tabulek, uděláte pouze pomocí CSS. A těch několik málo ekvilibristik, které prostě nejdou, můžete tabulkami doplnit, či udělat prostě jinak - protože to, jak jsem říkal, rozhodně stojí za to.

Co získáte, když místo tabulek zformátujete stránku jen pomocí CSS? Opravdu hodně:

• Můžete opět vyrábět strukturované dokumenty. Použitím CSS oddělíte obsah stránky (HTML) od jejího vzhledu (CSS); stránky budou dobře čitelné ve starých a neobvyklých prohlížečích, budou dobře strojově (a nejen strojově) zpracovatelné.
• Získáte přehledný a jednoduchý kód stránky.
• Díky oddělení formy od obsahu bude velmi snadné kompletně změnit vzhled celého webu pouhou změnou v CSS.
• Výrazně zmenšíte datovou velikost stránky; použitím CSS (zvláště pak v externím souboru) může klesnout objem přenášených dat i výrazně pod 50 % - to je zajímavé hlavně dnes, kdy se už i u nás poskytovatelům platí za každý přenesený gigabyte.
• Stránky se budou načítat rychleji - prohlížeče nemusí čekat, až se načte celá uzavírací tabulka, ale vykresluje objekty tak, jak se načítají; pořadí a způsob zobrazování můžete navíc významně ovlivnit sami.
• Pokud si najdete postupy, které dostatečně fungují i v rádoby-CSS-prohlížečích, prakticky nemusíte stránky ladit v mnoha různých klientech na různých platformách; sám již dnes píšu CSS z hlavy a vím, že to bude vypadat všude víceméně stejně. Pokud ale nějaký prvek či postup ladíte, uděláte to pouze jednou, protože všechny vaše stránky mohou používat jeden společný prvek na mnoha místech současně.

Zda jsou výše uvedené výhody pro vás dostatečným přínosem či ne, musíte posoudit sami. Zmínil jsem mnoho pozitiv - nevýhod CSS mnoho nemá, napadají mne pouze tyto tři: kompatibilita, kompatibilita a kompatibilita. S většinou potíží způsobených nedostatečnou nebo špatnou implementací standardu CSS v různých prohlížečích se setkáme v dalším textu. Ale právě proto, abyste se vyhnuli některým nepříjemnostem, které mohou hned na začátku odradit, zkusím zde poskytnout několik praktických rad pro snazší "přechod na CSS", vysvětlit konstrukce, které v některých prohlížečích mohou působit problémy a je lepší se jim vyhnout - a především chci ukázat, jak pomocí CSS vyřešit nejběžnější postupy, které se dnes řeší pomocí kostrbatých konstrukcí "starého" HTML. Nechci vysvětlovat, co to CSS jsou a jak se s nimi pracuje - na to v tomto článku není ani dostatek prostoru, ani to není jeho záměrem. Podrobné informace o práci s kaskádovými styly najdete na tomto serveru či přímo ve specifikaci CSS.

Pár základních tipů

Následující tipy byste si měli zapamatovat ještě předtím, než začnete s CSS experimentovat a vrhnete se po hlavě do drastických zásahů do své stránky. Vždy - a neplatí to jen pro tvorbu stránek - je lepší si všechno předem dobře rozmyslet. A zazálohovat.

1. Když něco nejde, zkuste to úplně jinak. Každý vzhled se většinou dá udělat mnoha rozličnými způsoby. To první, co vás napadne, nemusí hned být to pravé. Experimentujte.

2. Používejte externí CSS soubory. Pokud připravujete opravdu miniaturní stránku, kde chcete pomocí CSS zformátovat jeden, dva řádky, klidně napište definici stylu přímo do stránky nebo rovnou do příslušné značky HTML. Pokud ale jde o větší stránku nebo dokonce o více stránek, rozhodně zvolte externí CSS. Můžete tak vytvořit společné styly pro celý web, můžete jednoduše změnit design webu výměnou CSS souboru za jiný a zmenšíte objem stránky (samostatný soubor s definicí CSS zůstává v cache prohlížeče, při příští návštěvě už se nemusí znovu stahovat).

3. "Odstřihněte" od CSS staré prohlížeče. Nedovolte prohlížečům, které umí CSS málo a špatně, aby se k vašim stylům vůbec dostaly. (Proč to dělat, o tom je tip č. 6.) Možností, jak to udělat, je několik. Pokud použijete definici CSS přímo ve stránce, nezabráníte v jejich použití nikomu - je proto nanejvýš vhodné umístit CSS do samostatného souboru a do stránky pouze vložit odkaz na něj. Běžný způsob vložení externího CSS do stránky je:

To ale "spolknou" i prohlížeče, které jsou s CSS poněkud na štíru (např. Netscape 4.x). Lepší způsob, který sám používám nejraději, je pustit k našim stylům jen ty prohlížeče, které umí až CSS2. Nejsnáze se toho dosáhne použitím direktivy @import. Tu definuje CSS2 (CSS1 ji nezná) a starší browsery ji budou ignorovat. Výše uvedený způsob načtení CSS proto nahradíme:

Takto definovaný CSS soubor načtou jen prohlížeče podporující CSS2 - což jsou MSIE 4 a vyšší, Netscape 6 & Mozilla a Opera 5 ("exotiku" zmiňovat nebudu). Ostatní prohlížeče, byť by uměly i CSS1, nebudou ani tušit, že stránka nějaké styly obsahuje. Protože ale např. již zmíněný MSIE 4 je na tom s CSS2 opravdu velmi bídně (ačkoli se tváří, že je umí), můžeme někdy chtít nepřipustit k němu ani tento prohlížeč (u nás jej používá cca 15 % uživatelů a toto číslo navíc pomalu klesá). Další krokem proto může být zúžení výběru prohlížečů jen na ty, které opravdu chceme. Zde je možno použít nějaký skriptovací jazyk (Javascript nebo nově ECMA skript), který stránce předá CSS definici, jen pokud je zobrazena v námi určeném prohlížeči. Je také možné vytvořit více různých CSS definic pro různé typy prohlížečů a tímto způsobem jim je rozdistribuovat. Ten, kdo umí dobře programovat v Javascriptu, určitě už ví, jak na to. Já zde ale přesný postup popisovat nechci. Tím, že vycházíte vstříc chybám v prohlížečích, totiž podporujete výrobce špatných programů v jejich nechutné, záškodnické činnosti.

4. Rozdělte si CSS na více částí a děďte. Zvlášť v případě větších webů je vhodné využít dědičnosti a způsobu načítání CSS a vytvořit si styly v několika úrovních - od obecných ke konkrétnějším. Příkladem může být web, obsahující prezentaci firmy a nabídku produktů, přičemž tyto dvě části budeme chtít udělat mírně odlišné. Například v obou budou titulky <H1> bezpatkovým písmem, tučné, o velikosti 24/28 pixelů. Firemní prezentace je ale bude mít červené, zatímco prezentace produktů modré. Můžeme si proto vytvořit nejprve jeden obecný CSS soubor, který bude definovat společné vlastnosti stylů a pro každý oddíl webu pak další samostatný CSS soubor, který tyto definice doplní o vlastnosti specifické pro tuto část. Využíváme zde toho, že později načtené CSS má vyšší prioritu a u stejných prvků (HTML značka či třída) "přebije" shodné atributy novou hodnotou. Atributy, které předefinovány nejsou, se dědí z předchozí definice, naopak nové atributy, které v předchozí definici nejsou uvedeny, jsou do výsledného stylu přidány:

5. Změňte své myšlení. Přestaňte tvořit stránku od výsledného vzhledu, jemuž podřizujete vše ostatní - tak jako doposud. Soustřeďte se nejprve na obsah, dobře si rozmyslete strukturu stránky a odlaďte ji bez jakýchkoli stylů a formátování - tedy tak, jak bude zobrazena ve starých, textových a jiných specifických klientech. Teprve pak začněte formátovat. S CSS máte volné ruce a prostor k rozletu - pouhou změnou připojeného CSS souboru můžete experimentovat s různými vzhledy a diametrálně odlišnými způsoby prezentace svých stránek. Nejprve vytvořte dobrý, dobře strukturovaný obsah, pak jej teprve formátujte. Už nemusíte myslet na obojí současně. Je těžké si na to zvyknout, ale když se vám to podaří, je to velmi příjemné.

6. Nerozmazlujte špatné prohlížeče. Toto je tak trochu ošemetná rada a zmínka v tomto duchu už tu jednou padla. Když se nad tím ale hlouběji zamyslíte, není to rada tak zcela od věci. V prvé řadě si usnadníte práci - odladit graficky hodnotný web tak, aby vypadal pokud možno stejně ve všech prohlížečích, je zhola nemožné; a chcete-li se tomu alespoň přiblížit, můžete strávit nad laděním mnoho bezesných nocí. Pokud dodržíte následující pravidla, dosáhnete však toho, že v "dobrých" prohlížečích stránka bude vypadat tak, jak vy chcete a ve všech ostatních bude alespoň dobře strukturovaná, dobře čitelná a přehledná. Což je podle mne výrazně lepší výsledek než mnoho stávajících webů, které jsou v 10 % prohlížečů zcela nečitelné a nepoužitelné.

• Vytvořte dobře strukturovanou stránku s co nejjednodušším HTML kódem. Značky používejte pouze k logickému roztřídění stránky (toto je nadpis, toto zvýraznit, toto je citace, tohle je podpis), nikoli k formátování. Zásadně nepoužívejte značku <FONT>. Značku <TABLE> použijte jen pro skutečné statistické, účetní, odborné tabulky. V <BODY> nemusíte specifikovat žádné barvy, pozadí ani okraje atd. Zvolte si vhodnou strategii budoucího formátování (absolutní, relativní, či "plovoucí" pozicování prvků) a pokud to bude potřeba (a tam, kde to je vhodné) uzavřete k sobě logicky patřící úseky do kontejnerů, nejlépe pomocí <DIV>, <P> a <SPAN>. Počítejte pouze s tím, že <DIV> se bez CSS formátuje na samostatném řádku, <P> zase jako samostatný odstavec - proto tam, kde má být budoucí blok uvnitř řádku, je vhodné použít spíše <SPAN>. Není to ale nutné: chování všech konteknerů můžete změnit vhodnou změnou atributu display v CSS (block/inline). Všechny kontejnery si pojmenujte - např. <DIV ID="hlavniclanek">, případně přidejte i název třídy.
• Zvolte si vhodnou podmožinu specifikace CSS a podle ní nastylujte použité značky a kontejnery. Pamatujte na to, že zatím žádný prohlížeč nedodržuje normu CSS úplně a dokonale; lze ale najít takovou část této normy, kterou většina prohlížečů dodržuje víceméně stejně. Podle této (vaší soukromé) normy vytvořte své styly a pro ni stránku vylaďte - ne pro nějaký konkrétní prohlížeč.
• Předejte definici stylů jen těm prohlížečům, které vyhovují "vaší" podmnožině CSS.

Netrapte se se starými browsery. "Dobrých" prohlížečů je už nyní mezi uživateli v průměru kolem 80 % (MSIE 5 a vyšší, Netscape/Mozilla a Opera) a jejich poměr vůči "špatným" se stále zlepšuje. Když strávíte několik dní tvorbou CSS tak, aby fungovaly i v Netscapu 4.x, zjistíte nakonec, že jste svou stránku buďto ochudili o mnoho možností, nebo v tom Netscapu stejně něco funguje špatně. A nakonec třeba zjistíte, že jste se tak trápili kvůli 5 % budoucích uživatelů. Menšiny přitom o obsah svých stránek nijak neošidíte, přidanou hodnotu ve formě kvalitního designu ale dostanou jen ti, kdo mají stejně kvalitní prohlížeč. Až se později dostaneme k některým fatálním chybám starších prohlížečů, zjistíte, že určité věci je prostě nemožné udělat tak, aby v těchto paskvilech fungovaly správně. Netrapte se s nimi proto a poskytnete jim alespoň přehledně upravený obsah.

7. Přece jen i ty špatné prohlížeče trochu rozmazlete. Do stránky můžete přidat drobné formátovací prvky (např. oddělovací linky) pro staré prohlížeče, které zůstanou skryty v případě použití CSS. Tento postup je ale možný pouze tehdy, pokud děláte styly pro prohlížeče podporující CSS2 (např. načtení direktivou @import). Teprve CSS2 totiž přináší atribut display:none a vy si tak můžete vytvořit "skrývací" styl, který zajistí, že prvky se zobrazí pouze ve starých prohlížečích.

8. Dobře volte jednotky. Kromě toho, že důkladně zvážíte, zda použijete absolutní, relativní, či normální ("plovoucí") pozicování, dobře si také rozmyslete, jaké jednotky kdy použijete. Mohly by vám pomoci následující pomůcky:

• Pokud chcete udělat "natahovací" stránku, tj. takovou, která se bude přizpůsobovat velikosti okna prohlížeče, používejte procenta. A to nejen pro šířku boxů, ale i pro okraje (margin, padding). Stojí to mnohdy více počítání, ale výsledek bude zaručen.
• Chcete-li mít plnou kontrolu nad velikostí písma, použijte pixely [px] namísto bodů [pt]. Velikost (typografického) bodu totiž závisí na rozlišení obrazovky, velikosti monitoru, operačním systému, prohlížeči i jiných faktorech. Při rozlišení 72 dpi bude 12pt písmo výrazně menší než při rozlišení 96 dpi. Pokud však použijete velikost písma 12px, bude všude (přibližně) stejně velké.
• Chcete-li proporčně zachovávat rozměry, i pokud si uživatel v prohlížeči změní velikost písma - např. odstup textu od rámečku (padding) nebo rozestup mezi odstavci (top-margin) - používejte jednotky em a ex (1  ex  = 1/2  em), které odpovídají stupni velikosti písma. Pokud totiž použijete fixní jednotky (pt, px atd.), bude při zvětšení velikosti písma text opticky "nalepený" na rámeček, při zmenšení naopak bude příliš daleko.
• Při vytváření stylů pro ne-obrazovkový výstup, např. pro tisk, se nebojte používat běžné "tesařské" centimetry a milimetry. Formátování na papír A4 bude mnohem snazší a přesnější.

Co všechno CSS dokáže?

Ještě předtím, než se pustíme do samotných praktických ukázek, prohlédněte si tuto ukázku. Na jediném (nepříliš složitém) HTML dokumentu si můžete prohlédnout některé možnosti, které poskytují kaskádové styly. Aby byl dobře vidět okamžitý účinek stylů a aby bylo opravdu dobře znát, že se jedná stále o tentýž dokument, jsou do stránky načteny hned tři různé CSS soubory, které ale zůstavají neaktivní a aktivují (nebo vypínají) se kliknutím na odkazy v nabídce. Mimochodem, z toho důvodu celá ta legrace funguje pouze v prohlížeči, který podporuje Javascript - jelikož jsem ale stejně ukázku připravil v CSS2, pochybuji, že je mnoho prohlížečů, který "umí" CSS2 a přitom "neumí" Javascript. Úmyslně jsem ale ponechal načítání CSS souborů přístupné všem prohlížečům (viz tip č. 3), abyste se případně mohli podívat, co s tím provede třeba Netscape 4.x nebo MSIE4/Mac...

Pokud ještě nejste v práci s CSS zběhlí, možná vás překvapí, co všechno je s nimi možné provádět - ujišťuji vás ovšem, že zde ještě nebyly ukázány ani zdaleka všechny možnosti, které kaskádové styly poskytují. Na druhé straně ale připouštím, že konstrukce, které jsou v ukázce použity, nejsou tak docela "hi-fi" - je to z důvodu, že onen HTML dokument musel být připraven na tři různá formátování současně. Pokud budete vyrábět vlastní stránku, která normálně počítá pouze s jediným stylem, HTML si pochopitelně připravíte méně "kostrbatě".

V další části začneme s praktickými příklady použití CSS ve srovnání s použitím tabulek.

Staníček Petr