Strategie použití CSS - 1. část
(Ukázka z knihy CSS Kaskádové styly pro webdesignéry)
Obohacení formátovacích možností
Jedná se zřejmě zatím o nejrozšířenější strategii využívání CSS. Setkáte se s ní dnes již téměř všude, především na komerčních stránkách s vysokou návštěvností (katalogy stránek, on-line verze deníků atd.).
Základem je tradiční HTML dokument využívající značky starších norem jazyka (HTML 3.2, 4.0), včetně značek formátovacích (<font>, <b>, <i >atd.). Rozvržení (layout) stránky je tvořeno tabulkami (značky <table>, <tr> a <td>), jejichž atributy většinou určují i barvu písma a pozadí (atributy color a background prvku <td>) jednotlivých částí stránky. K dosažení designérských cílů a shodného vzhledu v různých prohlížečích se často používá nejen odmítnutých (deprecated) či zastaralých značek a atributů, ale i prvků proprietárních, zavedených výrobci jednotlivých prohlížečů, bez jakékoli opory ve standardech (např. atributy marginwidth a marginheight značky <body>, či atribut height značky <table>).
Kaskádové styly jsou použity pouze jako doplněk k dosažení těch formátovacích efektů, které standardními, ani proprietárními prostředky HTML vytvořit nelze. Nejčastěji se jedná např. o určení velikosti písma v pixelech, stylování formulářových prvků (barva, orámování a velikost tlačítek a vstupních polí) nebo dynamické efekty přechodu ukazatele myši nad odkazem (a:hover) či kombinující CSS s JavaScriptem (rozbalovací menu). Častá je též aplikace proprietárních vlastností CSS, např. stylování posuvníků zavedené v MS Internet Exploreru pro Windows od verze 5.5.
Při této strategii jsou stylové předpisy obvykle deklarovány v hlavičce dokumentu (embedded style sheet), značkou <style>, nebo dokonce přímo v jednotlivých prvcích (atributem style). Využívá se však i tříd, a to nejčastěji pro definování velikosti, typu a barvy písma. Tyto třídy bývají deklarovány v externím stylovém předpisu a v dokumentu se pak explicitně vážou ke každému příslušnému prvku (zpravidla <td>), neboť dědičnost a kontextové selektory obvykle nelze využít z důvodu nezřetelné (či dokonce chybné) struktury obsahu dokumentu.
Výhody
U webových dokumentů vytvořených tímto postupem lze dosáhnout shodného, resp. velmi podobného zobrazení ve všech zatím nejrozšířenějších prohlížečích, včetně prohlížečů zastaralých (MSIE4/Win, NN4), a to i v případě poměrně graficky náročného designu. S postupným mizením starších prohlížečů a naopak s nástupem moderních zařízení (palmtopy, mobilní telefony) se tato výhoda neustále zmenšuje.
Umožňuje postupný přechod na pokročilejší strategie využití CSS u dříve vytvořených stránek bez komplexního redesignu.
Webdesignér nemusí ovládat do detailů kompletní problematiku kaskádových stylů, vystačí s několika jednoduchými prvky (vlastnosti
font-family,font-size,color, selektora:hoveratd.) či hotovými řešeními (skripty na dynamická menu).V případě nasazení externích stylových předpisů a tříd (např. pro stylování písma) se lze již částečně těšit výhodám snadné správy stránek a hromadných změn stylu.
Nevýhody
Vytvořené webové dokumenty jsou obvykle nevalidní (odporující platným normám). To sice obecně nemusí nejrozšířenějším prohlížečům vadit, nicméně obtížně se pak kontroluje, zda zdrojový kód neobsahuje skutečně závažné chyby.
Mícháním formátovacích značek HTML a kaskádových stylů vzniká riziko defektního zobrazení, někdy vedoucího až k nepřístupnosti (nečitelnosti) obsahu. Typickým příkladem méně závažného defektu je nekonzistentní velikost písma v případě současného používání značky
<font>a CSS vlastnostifont-sizes udanou velikostí v pixelech. Hrozbu znepřístupnění obsahu představuje např. nevhodná kombinace atributubgcolorprvku<td>s CSS vlastnostícolor— prohlížeč nepodporující CSS (třeba NN4 s vypnutým JavaScriptem) pak může zobrazit zcela nečitelnou kombinaci barvy písma a pozadí.Tato strategie s sebou obvykle nese i hojné používání mnohonásobně vnořovaných tabulek nejen pro základní rozvržení stránky, ale i pro přesné umístění dílčích prvků (např. řezaná grafika) a doplňkových grafických efektů (orámování boxů atd.). Důsledkem je snížená přístupnost obsahu dokumentu v textových prohlížečích a pro hendikepované uživatele (zejména nevidomé). V kombinaci s pevně definovanými šířkami (celé stránky i jednotlivých prvků) navíc dochází ke znepřístupnění dokumentu i pro uživatele malých displejů (především palmtopů a mobilních telefonů).
Hlavní výhody CSS, tj. snadná správa dokumentu a přínosy oddělené struktury obsahu a formátování, lze využít jen ve velmi omezené míře. Dokumenty vytvořené touto metodou jsou nepřehledné a obtížně spravovatelné.
Datový objem zdrojového HTML kódu výrazně překračuje, často i několikanásobně, objem samotného obsahu a zpomaluje se tak načítání stránek, zejména při pomalejším připojení.
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
- Objednávka
