Chose.cz - Weblog o webu

V dnešní době již existuje poměrně hodně stránek pro webmastery, na kterých se dozvědí nejrůznější hacky pro opravu té které chyby v CSS pro konkrétní prohlížeč. Ovšem stránek, které by poskytovaly informace ohledně workaroundů (neznám vhodný český výraz, proto používám „obejití chyby“) si myslím, že je opravdu poskromnu, takže se pokusím vhrnout trochu světla na dobré praktiky při kódování CSS.

Každý kdo je nějakým způsobem zapleten do webdesignu, speciálně tedy do kódování CSS tak ví, že nutně musí ovládat teorii, aby byl schopen odhalit, zda je jedná o chybu člověka nebo prohlížeče. Teorie je základ, ale nestačí, protože každý den musíme čelit rozdílům mezi prohlížeči, vykreslovacími a všemožnými chybami. Tyto překážky jsou velmi obtížné, avšak můžeme je brát jako výzvu

Pokud narazím na problém (chybu) v CSS, postupuji následovně:

1. Pokud vím, že se jedná o chybu, mohu ji občas předejít
2. Pokud to není možné, mohu ji obejít
3. Pokud ani toto nezabere, tak mohu použít hack

Tím chci říct, že použití hacku by měla být vždy až ta poslední možnost.

Ale předtím, než se dostaneme ke konkrétnímu příkladu, pojďme se pokusit definovat co je hack a co je workaround (obejití chyby).

• Hack je způsob, jak oklamat prohlížeč.
• Workaround je způsob, jak oklamat vykreslovací chybu s minimálním vlivem na prohlížeč.

Jinak řečeno, hack řeší problém konkrétního prohlížeče zatímco workaround řeší problém obecně pomocí principů CSS. Základní problém s hacky je ten, že v dané chvíli nemůžeme říct, jak se budou chovat v nových prohlížečích, ovšem můžeme si být celkem jisti, že správný a logický CSS workaround nám bude fungovat tak jak chceme i v budoucnu.

Měli bychom vytvářet kód pro dnešek, ale myslet i na budoucnost. Kód by se měl vždy vytvářet pro co největší množství aktuálních prohlížečů a jedno perfektní doporučení zní takto: “code for the best, fix for the rest" (v češtině se to nerýmuje, ale znamená to: kóduj pro nejlepší, opravuj pro zbytek). Toto doporučení vám pomůže udržet vaše CSS malé, čisté, přehledné a umožní vám ho přizpůsobit pro slabší prohlížeče.

Podívejme se na asi nejznámější vykreslovací chybu v CSS: IE 5.x a jeho chybný box model. Myslím si, že toto je jeden z nejvíce otravných problemů, kterému musíme čelit den co den, při nastavování rozměrů u blokových prvků. Této chybě je možné se vyvarovat tak, že prvku zadáme pouze rozměr a rámeček nebo výplň (padding) zadáme na podřízený prvek, např:

#container { width:500px; }
#container #content { padding:10px; }

Stejný problém lze vyřešit i pomocí hacku:

#content { width:480 !important; width /**/:500px; padding:10px; }

Použití tohoto hacku je ještě relativně bezpečné, ale přesto je jedná o jasný hack konkrétního prohlížeče.

Podívejme se na jiný příklad:

/* Hides from IE5-mac \*/
* html #content { height:1%; }
/* End hide from IE5-mac */

Toto je krásný příklad hacku (dokonce dvojnásobného hacku). Ovšem tento hack lze vyřešit obejitím chyby minimálně dvěma způsoby:

#content { height:1%; }
#container > #content { height:auto; }

a řešení číslo dvě s jedním pravidlem:

#content{ height:auto !important; height:1%; }

V IE6 se při používání float můžete často setkat s chybami jako je 3px mezera textu nebo peekaboo. Nicméně můžeme se těmto chybám vyvarovat bez použití hacků? Ano, můžeme se pokusit vyřešit chybu ve floatu samotným floatem. Z toho co vím, lze řadu vykreslovacích problémů v IE vyřešit opačnými floaty.

Základní definice pravidel CSS pro dvousloupcový layout s pevnou šířkou:

#container { width:760px; }
#content { float:left; width:500px; }
#sidebar { float:right; width:160px; }
#footer { clear:both; }

Pro třísloupcový layout uvažujme následující HTML:

<div id="container">
    <div id="header">Header</div>
    <div id="main">
        <div id="content">Content</div>
        <div id="nav">Navigation</div>
    </div>
    <div id="extra">Extra column</div>
    <div id="footer">Footer</div>
</div>

Jedinou nevýhodou tohoto kódu je navíc jeden obalovací prvek pro prostřední sloupec a navigaci, nicméně pořadí sloupců v kódu je ideální pro přístupnost a vyhledávače. K tomuto HTML ještě potřebujeme CSS:

#container { width:760px; }
#main { float:left; width:540px;  }
#content { float:right; width:400px; background:#aaa; }
#nav { float:left; width:140px; background:#bbb; }
#extra { float:right; width:220px; background:#ccc; }
#footer { clear:both; }

A zde to máme. Základní sadu pravidel CSS, pomocí kterých získáme robusní cross-browser CSS layout pro moderní, a také pro ne až tak moderní prohlížeče bez jediného hacku.

Doufám, že vás tento trošku delší článek nenudil, že byl alespoň trošku užitečný a svůj názor na toto téma můžete vyjádřit v komentářích.

Poznámka: Jedná se o volný překlad článku CSS design for the future: workaround vs hacks od Alessandra s jehož názorem se ztotožňuji.

04.09.2005 | Rubrika: Internet | Trvalý odkaz

Tento příspěvěk byl vložen on 04.09.2005 v 12:22 a je zařazen v kategorii Internet. Můžete sledovat komentáře k tomuto příspěvku pomocí RSS 2.0.