Resetování, normalizace a personalizace CSS

Existuje dnes mnoho opravdu populárních prohlížečů. Mají jedno společné – dodávají se se sadou tzv. výchozích stylů, které se použíjí na každou webovou stránku, dle toho, jaký druh platformy, přístroje nebo prohlížeče stránku právě generuje (tzv. User Agent). Většina těchto stylů je konzistentní, ale existují i nekonzistentní styly, jako je výška řádku, okraje tlačítek, druh podtrhnutí odkazů atp.

Jaký vliv má nebo může mít nejednotný styl?

Záleží na verzi a druhu prohlížeče, na který se zaměřujete (čím starší, tím je to horší) a samozřejmě na vašich očekáváních vykreslování CSS napříč různými prohlížeči. Takzvané resetování CSS tento problém částečně nebo zcela řeší. Resetování CSS je možné rozdělit do tří hlavních kategorií, podle toho jak výchozí styly CSS upravují – resetování, normalizace a personalizace.

Čeho se vlastně resetem snažíme dosáhnout?

• Zrušení všech výchozích a vyhraněných stylů prohlížeče (zpravidla Safari)
• Opravit chyby stylů ve starších prohlížečích
• Vytvořit jednotný, do značné míry, základní styl CSS
• Resetování CSS vám může ušetřit spoustu času sladěním prostředí pro každý webový prohlížeč

Resetování CSS

Resetování je až agresivní přístup, který přepíše všechny výchozí styly prohlížeče a umožní vám začít od naprosté nuly. Nastaví homogenní vizuální styl tím, že vše “zploští”, veškeré HTML zbaví paddingu, okrajů a ohraničení, sjednotí velikosti a zarováníní písma.
Reset má sloužit sloužit jako výchozí bod, nikoli jako magická hůlka, které vše automaticky vymaže.

Moderní prohlížeče mají daleko méně odlišností mezi sebou, většinou tedy není nutné plné resetování. Reset totiž často odstraní i výchozí (tzv. defaults), ale ceněné styly jako jsou nadpisy nebo okraje (margin). Tyto styly musíte pak znovu deklarovat. Ladit potom již přepsané s výchozím je velká zábava. Dokonce se může stát, že styl prostě nelze sjednotit u všech prohlížečů k identickému zobrazování. Níže některé nástroje můžete volně užít k resetování:

Meyerwebův reset – byl vytvořen před více než 10 lety, je záměrně hodně obecný. Je potřeba jej dost doupravit dle vlastního, ale i po těch letech je to dobrý počáteční nástroj.

Minireset.css – nepatrná a drobná, moderní knihovna, která resetuje velikosti písma, okraje bloků, resetuje tabulky, zachovává inline padding, nastavuje velikost rámečků na border-box atd.

Normalizace

Normalizace je modernější postup, který zachovává užitečné výchozí styly (defaults) prohlížeče. Pokud má prvek v různých prohlížečích různé výchozí styly, tak až poté jej “resetuje” a přepisuje.

Stručně řečeno, normalizovat je naší preferovanou volbou a je mnohem lepší než resetovat kompletně vše, protože:

• Nemusíte znovu deklarovat styly pro všechny společné prvky
• Může také (stejně jako u resetování) opravit běžné chyby ve starších prohlížečích, jako je nastavení zobrazení prvků HTML5, oprava velikosti písma pro preformátovaný text, SVG v IE9 a mnoho chyb souvisejících s formuláři napříč prohlížeči a operačními systémy.
• Normalizace s nesnaží vytvořit přehledný kód, cílem je vytvořit správný a konzistentní výchozí bod, kterým přece jen dosáhnete menšího množství kódu.

Normalize.css – nejoblíbenější, nejmodernější knihovna pro resetování CSS připravená na HTML5 v této kategorii. Normalizuje styly pro širokou škálu prvků, opravuje chyby a běžné nekonzistence prohlížečů, zlepšuje použitelnost pomocí jemných úprav a pomocí podrobných komentářů vysvětluje, co kód dělá.

Přizpůsobení, personalizace

Personalizace je zvláštní přístup, který navazuje na předchozí tím, že nejprve resetuje nebo normalizuje výchozí styly prohlížeče a poté přidá některé, které jsou potřeba “přizpůsobit” nebo se snaží řídit a zdědit styl, který je už určen v kódu. Vhodné nástroje jsou:

Sanitize.css – knihovna pro resetování vyvinutá souběžně s normalize.css a navíc v synchronizaci, což znamená, že každá normalizace je už zahrnuta a jasně označena a zdokumentována.

Reboot.css – určeno pro framework Bootstrap, postavený na normalize.css, poskytuje mnoha prvkům HTML poněkud odlišné styly pouze pomocí selektorů a další stylování se provádí pouze pomocí tříd.

Závěr

Resetování (tvrdý reset) není efektivní a je to nejagresivnější forma, po které byste neměli sáhnout pokud to opravdu není nutné. Normalizace zajišťuje konzistentní vzhled prvků napříč prohlížeči. ale neodstraňuje tzv. defaulty. Personalizace něco mezitím a zároveň hotový vysoce a optimalizovaný základ.
Pokud jde o resetování CSS, neexistuje správná nebo špatná odpověď. My používáme normalizaci (normalize.css) a z toho potom stavíme dál.