Cos'è un CSS Reset?

CSS Reset — è un insieme di regole CSS progettate per impostare stili di base uniformi per tutti gli elementi HTML di default, superando le differenze negli stili standard dei browser. Questo aiuta a garantire una visualizzazione più prevedibile e compatibile tra i browser.

Obiettivi principali del CSS Reset:

• Rimuovere o azzerare i margini (margin, padding) e i bordi predefiniti.
• Azzerare le dimensioni standard dei font e gli interlinea per intestazioni, paragrafi, ecc.
• Uniformare lo stile delle liste (ul, ol).
• Azzerare gli stili per tabelle, moduli, immagini e altri elementi.

Esempio di CSS Reset di base:

/*
   CSS Reset: Azzeramento degli stili predefiniti dei browser
   per garantire un aspetto di base uniforme degli elementi.
*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Includi padding e border nelle dimensioni totali dell'elemento */
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* Smussatura dei font */
}

img, picture, video, canvas, svg {
  display: block; /* Rimuove lo spazio predefinito sotto le immagini inline */
  max-width: 100%; /* Garantisce che le immagini non escano dal contenitore */
}

input, button, textarea, select {
  font: inherit; /* Eredita il font dal genitore */
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; /* Permette la divisione di parole lunghe */
}

Esistono diverse varianti di CSS Reset, come Reset CSS di Eric Meyer o Normalize.css. Normalize.css, a differenza di un reset completo, mantiene gli stili utili di default, correggendo solo quelli che causano problemi di compatibilità. La scelta tra di essi dipende dal progetto e dalle preferenze dello sviluppatore.