Czym jest CSS Reset?

CSS Reset — to zbiór reguł CSS zaprojektowanych w celu ustanowienia jednolitych podstawowych stylów dla wszystkich elementów HTML domyślnie, pokonując różnice w standardowych stylach przeglądarek. Pomaga to zapewnić bardziej przewidywalne i zgodne z różnymi przeglądarkami wyświetlanie stron internetowych.

Główne cele CSS Reset:

• Usunięcie lub zresetowanie domyślnych marginesów (margin, padding) i obramowań.
• Zresetowanie standardowych rozmiarów czcionek i interlinii dla nagłówków, akapitów itp.
• Ujednolicenie stylu list (ul, ol).
• Zresetowanie stylów dla tabel, formularzy, obrazów i innych elementów.

Przykład podstawowego CSS Reset:

/*
   CSS Reset: Resetuje domyślne style przeglądarek
   aby zapewnić jednolity podstawowy wygląd elementów.
*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Uwzględnia padding i border w szerokości/wysokości elementu */
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* Wygładzanie czcionek */
}

img, picture, video, canvas, svg {
  display: block; /* Usuwa domyślny odstęp pod obrazami inline */
  max-width: 100%; /* Zapewnia, że obrazy nie wyjdą poza kontener */
}

input, button, textarea, select {
  font: inherit; /* Dziedziczy czcionkę od rodzica */
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; /* Umożliwia łamanie długich słów */
}

Istnieją różne warianty CSS Reset, np. Reset CSS Erica Meyera czy Normalize.css. Normalize.css, w przeciwieństwie do pełnego resetu, zachowuje przydatne domyślne style, poprawiając tylko te, które powodują problemy z kompatybilnością. Wybór między nimi zależy od projektu i preferencji programisty.