Co je 'normalize' v CSS?

normalize.css nebo řešení podobné funkčnosti (například Reset CSS) se používají k resetování nebo normalizaci výchozích stylů, které se liší mezi prohlížeči. To zajišťuje předvídatelnější a jednotnější vykreslení prvků na různých platformách.

Hlavní rozdíly mezi normalize.css a Reset CSS:

• Reset CSS: Resetuje styly všech prvků na minimum (například odstraní okraje, rámečky a typografii). Je užitečný pro tvorbu zcela vlastního designu, ale vyžaduje ruční přidání mnoha stylů pro standardní prvky (seznamy, formuláře atd.).
• normalize.css: Opravuje odchylky ve výchozích stylech a zároveň zachovává užitečné standardní styly (například typografii nadpisů, okraje u seznamů). To minimalizuje potřebu jejich pozdějšího přepisování.

Příklady normalizace:

• Jednotný vzhled <h1>-<h6> na různých prohlížečích.
• Reset margin a padding u prvků jako body.
• Oprava rozdílů ve vykreslení formulářů a tlačítek.

/* Příklad z normalize.css pro body */
body {
  margin: 0; /* Odstraní výchozí okraj */
}

/* Příklad z normalize.css pro h1 */
h1 {
  font-size: 2em; /* Nastaví výchozí velikost */
  margin: 0.67em 0; /* Nastaví výchozí okraje */
}

Stručně řečeno, použití normalize.css pomáhá předejít problémům s kompatibilitou mezi prohlížeči v raných fázích vývoje a vytváří stabilnější základ pro další stylování.