Strategie použití CSS - 3. část
(Ukázka z knihy CSS Kaskádové styly pro webdesignéry)
Formátování jen pomocí CSS, včetně rozmístění prvků
Poslední a nejpokročilejší strategie využití kaskádových stylů spočívá v tom, že CSS svěříme veškeré formátování dokumentu, včetně rozvržení stránky a polohování jednotlivých prvků. Protože se rozvržení stránky v této koncepci obejde bez tabulek, vžil se pro ni název beztabulkový (tableless) design.
Základem kvalitního návrhu stránky je v tomto případě perfektně strukturovaný zdrojový kód HTML. Aby se zdůraznila absence formátovacích prvků přímo v HTML, volí se obvykle některá z přísných norem jazyka, tj. HTML 4.0 Strict, XHTML 1.0 Strict nebo dokonce XHTML 1.1. Kvalitní struktura kódu je zásadní jednak proto, že umožňuje nejefektivnější formy využití kaskádových stylů (kontextové a další pokročilé typy selektorů), a jednak proto, že starší prohlížeče a některá další menšinová zařízení zobrazují ve skutečnosti jen prosté HTML, bez explicitního formátování. Uživatel je pak odkázán jen na implicitní formátování dle možností svého prohlížeče a pouze kvalitně strukturovaný obsah si v tom případě podrží dostatečnou přehlednost a použitelnost.
Před návrhem stylových předpisů se webdesignér musí nejprve rozhodnout, které prohlížeče bude podporovat. Stylové předpisy pak vytvoří a odladí jen pro podporované prohlížeče, zatímco ostatním je různými technikami znepřístupní. V současné době stránky vytvořené podle této strategie nejčastěji podporují prohlížeče Internet Explorer od verze 5, Opera od verze 5 a prohlížeče založené na renderovacím jádru Gecko (Mozilla, Netscape 6+). Takto vytvořené stránky se nyní zobrazí v prakticky shodném designu v průměru devadesáti procentům uživatelů, zatímco ostatním je k dispozici přehledný a dostatečně použitelný obsah s implicitním HTML formátováním.
V případě potřeby lze spektrum podporovaných prohlížečů rozšířit i na verze 4 Internet Exploreru a/nebo Netscape Navigatoru, avšak návrh se pak stává pracnějším, stejně jako testování výsledných stránek, a grafické možnosti jsou omezenější. Někteří autoři naopak volí užší výběr podporovaných prohlížečů, aby mohli využít CSS v kombinaci s pokročilým skriptováním na straně klienta. Z podporovaných prohlížečů pak vypadne Opera kvůli své nedostatečné podpoře standardního DOM (Document Object Model).
Výhody
Obsah výsledných dokumentů je prakticky stoprocentně přístupný libovolným prohlížečem a zařízením od nejstarších verzí Netscape Navigatoru, přes nejnovější verzi Internet Exploreru, až po nejmodernější mobilní telefon. Přístupnost textovými prohlížeči je samozřejmostí a při pečlivějším návrhu též nedochází k problémům s tiskem či s přístupností pro zdravotně postižené uživatele.
Oproti předešlé koncepci se zjednodušuje testování stránek, které stačí připravit pouze pro moderní podporované prohlížeče (obvykle IE5+ a NN6+/Mozilla 1). Přístupnost a použitelnost dokumentu ve starších (tj. nepodporovaných) prohlížečích, které zobrazí dokument bez stylů, vyplývá automaticky z kvalitně strukturovaného zdrojového HTML kódu.
Ze všech tří koncepcí se tato vyznačuje nejpřehlednějším a nejsnáze modifikovatelným zdrojovým kódem jak HTML dokumentu, tak stylového předpisu (stylových předpisů). Díky logickému strukturování kódu se nejenom snižují náklady na jeho správu, ale stránky též dosahují nejlepších výsledků ve fulltextových vyhledavačích.
-
Není problém tvořit alternativní stylové předpisy se zcela odlišným formátováním i rozmístěním jednotlivých prvků stránky. Tyto alternativní stylové předpisy mohou být určeny např. pro tisk či zobrazení na velmi malých displejích (mobilní telefony), případně pro volitelnou personalizaci zobrazení stránek uživatelem.
Poznámka: Na rozdíl od personalizace dosažitelné některými systémy pro řízení obsahu (CMS) se v tomto případě jedná o personalizaci na straně klienta, bez nároků na výkon serveru a přenosové cesty.
Důsledné dodržování standardů umožňuje stoprocentní validaci dokumentů validátory HTML a CSS a omezuje tak riziko chyb.
Díky respektování platných standardů lze též předpokládat, že si dokumenty podrží svou validitu a praktickou využitelnost ještě po dlouhou dobu a někteří autoři tedy hovoří o tzv. dopředné kompatibilitě. V součtu s ostatními výhodami se tedy jedná o koncepci vykazující nejvýhodnější ekonomické vlastnosti (náklady na pořízení, návratnost investic, celkové náklady na pořízení a správu po dobu životnosti).
Nevýhody
Strategie klade značné nároky na webdesignéra, který musí velmi dobře znát chování pokročilých vlastností CSS v nejnovějších prohlížečích.
Grafický návrh stránek musí být podřízen možnostem současného stavu implementace CSS v prohlížečích. Ačkoli tyto možnosti rozhodně nejsou v souhrnu menší než u tradičního rozvržení stránek pomocí tabulek, jsou natolik odlišné, že s nimi grafik musí dopředu počítat.
Při realizaci složitějších grafických návrhů je třeba kompenzovat chyby v implementaci CSS, které se u prohlížečů projevují ve větší míře a jsou méně známé, než chyby ve vykreslování tradičního HTML kódu. Nové verze prohlížečů navíc mohou přinášet nové chyby a je tedy důležité věnovat zvýšenou pozornost pečlivému testování.
Toto je ukázka z knihy Marka Prokopa CSS Kaskádové styly pro webdesignéry, kterou vydalo nakladatelství Mobil Media a.s. v roce 2003. Knihu si od nás můžete objednat za 280 Kč.
- O knize CSS Kaskádové styly pro webdesignéry
-
Ukázky z knihy
- Obsah knihy
-
Strategie použití CSS - úvod
- obohacení formátovacích možností
- veškeré formátování s výjimkou rozmístění (layoutu) prvků
- formátování jen pomocí CSS, včetně rozmístění prvků
- Vlastnost
float - Vlastnost
padding
- Objednávka
