Co je to CSS Reset?

CSS Reset — je soubor pravidel CSS navržených tak, aby nastavily jednotné základní styly pro všechny HTML prvky ve výchozím nastavení, překonávající rozdíly ve standardních stylech prohlížečů. To pomáhá zajistit předvídatelnější a křížově kompatibilní zobrazení webových stránek.

Hlavní cíle CSS Reset:

• Odstranit nebo resetovat výchozí okraje (margin, padding) a rámečky.
• Resetovat výchozí velikosti písma a řádkové vzdálenosti pro nadpisy, odstavce atd.
• Ujednotit vzhled seznamů (ul, ol).
• Resetovat styly tabulek, formulářů, obrázků a dalších prvků.

Příklad základního CSS Reset:

/*
   CSS Reset: Resetuje výchozí styly prohlížečů
   pro zajištění jednotného základního vzhledu prvků.
*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Zahrnuje padding a border do celkové šířky/výšky prvku */
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* Vyhlazení písma */
}

img, picture, video, canvas, svg {
  display: block; /* Odstraní výchozí prostor pod inline obrázky */
  max-width: 100%; /* Zajistí, že obrázky nepřesáhnou kontejner */
}

input, button, textarea, select {
  font: inherit; /* Dědí písmo od rodiče */
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; /* Umožňuje zalamování dlouhých slov */
}

Existují různé varianty CSS Reset, například Reset CSS od Erica Meyera nebo Normalize.css. Normalize.css, na rozdíl od úplného resetu, zachovává užitečné výchozí styly a opravuje pouze ty, které způsobují problémy s kompatibilitou. Výběr závisí na projektu a preferencích vývojáře.