Bylo by krásné, kdyby všechny prohlížeče pracovaly s CSS tak, jak říká norma. Ale realita je pro mnohé tvůrce webů až příliš krutá. Dave Shea přináší 7 tipů jak řešit problémy s návrhem CSS:
- Rozsviťte okraje (např.
border: #F00
) a uvidíte přesně, co se děje. Je chyba vmargin
nebopadding
? Dobrou službu také udělá dobře nastavená barva pozadí –background-color
- Zkontrolujte selektory – kaskáda a dědění nemusí fungovat tak, jak si myslíte. Vhodně nastavte vlastnosti selektoru (udělejte z něj šeredu) a pokud se vlastnost neprojeví kde má, máte svého pachatele.
- Nastavte hodnoty – je velikost písma dobrá v mozille ale už ne v IE? Zvětšení velikost někdy udělá divy. Změna z
0.9em
na0.91em
může způsobit úplné zázraky. - Skryjte vybrané prvky – zrušte okolní prvky, odstraňte rodiče. Problém je potřeba zjednodušit. Používejte komentáře, nemažte. Ušetříte si práci.
- Zbavte se nepotřebného CSS – jednoduchým kódem nic nepokazíte.
- Nastavte okraje na 0 – prohlížeče někdy používají jiné defaultní hodnoty než by se zdálo.
- Validujte – někdy můžete hledat chyby jinde, než jsou. Takový neuzavřený
div
udělá se stránkou úplné divy.
Já dodám ještě, že je dobré, když máte hezky napsaný kód. Odsazujte zdrojový kód pomocí tabulátorů. Ze struktury kódu by mělo být patrné zanoření značek. Pořádek a jasná struktura by měla být i v CSS souboru. Podobné vlastnosti patří k sobě a dodržování pořadí vlastností taky nezaškodí. Ale toto by už bylo na samostatný spot.