Czym jest 'normalize' w CSS?

normalize.css lub rozwiązania podobne pod względem funkcjonalności (np. Reset CSS) są używane do resetowania lub normalizacji domyślnych stylów, które różnią się między przeglądarkami. Zapewnia to bardziej przewidywalne i jednolite renderowanie elementów na różnych platformach.

Główne różnice między normalize.css a Reset CSS:

• Reset CSS: Resetuje style wszystkich elementów do minimum (np. usuwa marginesy, obramowania i typografię). Jest przydatny do tworzenia całkowicie niestandardowego projektu, ale wymaga ręcznego dodawania wielu stylów dla elementów standardowych (listy, formularze itp.).
• normalize.css: Naprawia rozbieżności w stylach domyślnych, zachowując przy tym przydatne standardowe style (np. typografię dla nagłówków, marginesy dla list). To minimalizuje konieczność późniejszego nadpisywania stylów.

Przykłady normalizacji:

• Jednolite wyświetlanie <h1>-<h6> na różnych przeglądarkach.
• Reset margin i padding dla elementów takich jak body.
• Naprawa różnic w wyświetlaniu formularzy i przycisków.

/* Przykład z normalize.css dla body */
body {
  margin: 0; /* Usuwa domyślny margines */
}

/* Przykład z normalize.css dla h1 */
h1 {
  font-size: 2em; /* Ustawia standardowy rozmiar */
  margin: 0.67em 0; /* Ustawia standardowe marginesy */
}

Podsumowując, korzystanie z normalize.css pomaga uniknąć problemów z kompatybilnością między przeglądarkami na wczesnych etapach rozwoju i tworzy bardziej stabilną podstawę dla dalszego stylowania.