Ce este un CSS Reset?

CSS Reset — este un set de reguli CSS concepute pentru a stabili stiluri de bază uniforme pentru toate elementele HTML în mod implicit, depășind diferențele în stilurile standard ale browserelor. Acest lucru ajută la asigurarea unei afișări mai previzibile și compatibile între browsere.

Obiectivele principale ale CSS Reset:

• Eliminarea sau resetarea marginilor (margin, padding) și a bordurilor implicite.
• Resetarea dimensiunilor standard ale fonturilor și a spațierii între linii pentru titluri, paragrafe etc.
• Uniformizarea aspectului listelor (ul, ol).
• Resetarea stilurilor pentru tabele, formulare, imagini și alte elemente.

Exemplu de CSS Reset de bază:

/*
   CSS Reset: Resetează stilurile implicite ale browserelor
   pentru a asigura un aspect de bază uniform al elementelor.
*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Include padding și border în dimensiunea totală a elementului */
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* Netezirea fonturilor */
}

img, picture, video, canvas, svg {
  display: block; /* Elimină spațiul implicit de sub imaginile inline */
  max-width: 100%; /* Asigură că imaginile nu depășesc containerul */
}

input, button, textarea, select {
  font: inherit; /* Moștenește fontul de la părinte */
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; /* Permite ruperea cuvintelor lungi */
}

Există diferite variante de CSS Reset, precum Reset CSS de Eric Meyer sau Normalize.css. Normalize.css, spre deosebire de resetul complet, păstrează stilurile utile implicite, corectând doar cele care cauzează probleme de compatibilitate. Alegerea între ele depinde de proiect și preferințele dezvoltatorului.