Jak je to s výchozími hodnotami v CSS?

V CSS existuje velké množství nastavitelných vlastností pro každý HTML element dokumentu. Stylesheety, které připojujeme k našemu dokumentu, obvykle nastavují relativně malou část z nich. Co se tedy stane v případě, že některé vlastnosti nenastavíme? Podívejme se podrobněji na tuto zdánlivě triviální otázku.

Specifikace CSS uvádí u každé vlastnosti její výchozí hodnotu („Initial: …“). Tak například u vlastnosti border-top-style se můžeme dočíst, že její výchozí hodnota je none. V některých případech bývá výchozí hodnota definována odkazem na hodnotu jiné vlastnosti – například výchozí hodnota border-top-color se přebírá z vlastnosti color daného elementu. U některých vlastností ale specifikace výchozí hodnotu nedefinuje – dočteme se, že „depends on user agent“ (záleží na prohlížeči). To je případ třeba vlastností color nebo font-family. Kromě toho je třeba věnovat pozornost dědičnosti. U každé vlastnosti specifikace definuje, zda se dědí či nikoliv z rodičovského elementu („Inherited: …“). Tak například hodnota vlastnosti color se dědí, zatímco hodnota vlastnosti margin nikoliv. Pro většinu nejběžnějších vlastností lze selským rozumem odhadnout, jak je to s jejich výchozími hodnotami a dědičností, aniž bychom se zpaměti učili specifikaci. Je však dobré pochopit, jak tyto mechanismy fungují.

S těmito výchozími hodnotami bychom ovšem nevystačili pro smysluplné zobrazení dokumentů, které neobsahují žádný stylesheet. Proto všechny prohlížeče obsahují výchozí stylesheet, který definuje způsob zobrazení jednotlivých elementů HTML. Právě v něm je určeno, že pro nadpis H1 se použije ono známé velké písmo, že položky seznamu (UL, OL) budou mít odsazení zleva (které nám většinou připadá příliš velké) a že formulář (FORM) bude od okolí oddělen vertikální mezerou (která pije krev každému webdesignerovi). Specifikace říká, že výchozí stylesheet prohlížeče má nejnižší prioritu – to znamená, že veškerá nastavení uživatele (pokud to browser umožňuje) a samozřejmě stylesheet našeho dokumentu tento stylesheet přebijí.

Z těchto dvou zdrojů je tedy třeba vycházet při zjišťování hodnoty vlastnosti, kterou v našem stylesheetu nenastavíme. Pro úplnost si uveďme přesný algoritmus:

1. Obsahuje-li výchozí stylesheet prohlížeče pravidlo (nebo pravidla) odpovídající dané vlastnosti daného elementu, pak se použije hodnota vyplývající z tohoto pravidla (nebo pravidel).
2. Pokud výchozí stylesheet taková pravidla neobsahuje, podívejme se do specifikace CSS, zda se daná vlastnost dědí.
3. Pokud ano, vraťme se ke kroku 1 pro rodičovský element daného elementu.
4. Pokud se vlastnost nedědí, podívejme se, jak je definována její výchozí hodnota.
5. Je-li definována odkazem na hodnotu jiné vlastnosti, vraťme se ke kroku 1 pro tuto vlastnost.
6. Je-li definována konkrétní hodnotou, pak se tato hodnota použije.
7. Je-li uvedeno „depends on user agent“, pak máme smůlu – hodnota je nepředvídatelná. Pokud ji sami nenastavíme, nemůžeme se spoléhat na to, že všichni uvidí to, co vidíme při ladění stránky.

Nyní se vraťme k výchozím stylesheetům prohlížečů. Zatímco výchozí hodnoty vlastností jasně definuje specifikace, standardizaci výchozího stylesheetu se vyhýbá. V příloze specifikace CSS (viz http://www.w3.org/TR/REC-CSS2/sample.html) je uveden „ukázkový stylesheet“ pro formátování jednotlivých elementů HTML, který by úlohu takového výchozího stylesheetu měl plnit. Vznikl odpozorováním způsobu, jakým browsery odpradávna zobrazují čisté HTML. Specifikace však nenařizuje jeho použití, pouze doporučuje.

V Netscapu 6 (resp. Mozille) najdeme výchozí stylesheet v adresáři res v podobě souborů html.css a forms.css. Dále je zde soubor quirk.css, který se použije v případě, že dokument používá režim kompatibility s „výstřednostmi“ starších verzí prohlížeče, které nerespektovaly standardy – obsahuje zápis těchto výstředností prostředky CSS, což může být zajímavé ze studijního hlediska. Na první pohled je vidět, že defaultní stylesheet Mozilly je výrazně delší než uvedený ukázkový stylesheet z přílohy specifikace CSS, a podrobnějším zkoumání navíc objevíme některé odlišnosti. Například zatímco specifikace doporučuje k odsazení položek seznamů (UL, OL) zleva používat vlastnost margin-left, výchozí stylesheet Mozilly pracuje s padding-left. V obou případech s hodnotou 40px, takže vizuální výsledek je na první pohled stejný (dokud ovšem například nezačneme pracovat s pozadím). Představme si, že chceme toto odsazení vynulovat. Nastavíme margin-left: 0; a ladíme-li stránky v Exploreru, budeme s výsledkem spokojeni. V Mozille na nás však bude čekat překvapení – budeme si lámat hlavu, proč se odsazení nezrušilo, dokud nezjistíme, že pro Mozillu je třeba vynulovat i padding-left.

Výchozí stylesheet Microsoft Internet Exploreru bohužel nemá explicitní podobu souboru CSS. Takže můžeme pouze vypozorovat z chování prohlížeče, jak výchozí nastavení stylů vypadá. (Přesněji řečeno není mi známo, že by explicitní výchozí stylesheet byl k dispozici. Pokud mě některý ze čtenářů usvědčí z omylu, budu jedině rád.)

Jak vidíme, na řadu výchozích hodnot vlastností se nelze spoléhat, a to ze dvou důvodů – u některých vyplývá už z jejich definice, že hodnota záleží na prohlížeči, a dále různé prohlížeče mohou mít různé výchozí stylesheety. Záleží-li nám proto na naprosto precizním vzhledu dokumentů bez jakýchkoliv odlišností mezi prohlížeči, nevyplatí se při tvorbě našeho stylesheetu šetřit pravidly. Čím více pravidel sami uvedeme, tím menší šanci dáme nepředvídatelným výchozím hodnotám. Pro „překrytí“ odlišností výchozích stylesheetů prohlížečů může být vhodné vytvořit si vlastní výchozí stylesheet, který jako základ každého projektu vždy naimportujeme ke každému stylesheetu (příkazem @import url(default.css);).

Druhým důvodem pro vytvoření takového výchozího stylesheetu může být vynulování řady nevhodných hodnot. Vytváříme-li jednoduchý textový dokument „pro jedno použití“, formátování podle výchozího stylesheetu prohlížeče se nám může hodit. Stylesheet dokumentu (bude-li vůbec existovat) pak bude obsahovat jen několik málo pravidel pro úpravu některých vlastností. Ovšem chystáme-li graficky náročný projekt s kompletním layoutem pomocí CSS, je obvykle vhodné všechna nastavení výchozího stylesheetu nejprve vynulovat (resp. nastavit na žádoucí hodnoty). Tak jako architekt nejraději staví na zelené louce, místo aby dělal přestavby a dostavby existujících budov.

Jako zárodek vlastního výchozího stylesheetu můžete použít tento ukázkový stylesheet. Komentáře k jednotlivým pravidlům jsou uvedeny přímo ve zdrojovém kódu. Teoreticky by bylo možné systematicky nastavit veškeré vlastnosti všech elementů, ale je zbytečné vytvářet extrémně dlouhý stylesheet, pokud víme, že například některé oblasti CSS vůbec nevyužijeme. Výchozí stylesheet je vhodné v průběhu praxe rozšiřovat, tak jak je potřeba a jak vyhovuje stylu vaší práce.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.