Qu'est-ce qu'un CSS Reset?

CSS Reset — est un ensemble de règles CSS conçu pour établir des styles de base uniformes pour tous les éléments HTML par défaut, en dépassant les différences dans les styles standard des navigateurs. Cela aide à assurer une présentation plus prévisible et compatible entre navigateurs.

Objectifs principaux du CSS Reset :

• Supprimer ou réinitialiser les marges (margin, padding) et les bordures par défaut.
• Réinitialiser les tailles de police et les interlignes standard pour les titres, paragraphes, etc.
• Uniformiser le style des listes (ul, ol).
• Réinitialiser les styles pour les tableaux, formulaires, images et autres éléments.

Exemple de CSS Reset de base :

/*
   CSS Reset : Réinitialise les styles par défaut des navigateurs
   pour garantir une apparence de base uniforme des éléments.
*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Inclut padding et border dans la taille totale de l'élément */
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* Lissage des polices */
}

img, picture, video, canvas, svg {
  display: block; /* Supprime l'espace par défaut sous les images en ligne */
  max-width: 100%; /* Garantit que les images ne dépassent pas le conteneur */
}

input, button, textarea, select {
  font: inherit; /* Hérite la police du parent */
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; /* Permet de couper les mots longs */
}

Il existe différentes variantes de CSS Reset, comme Reset CSS de Eric Meyer ou Normalize.css. Normalize.css, contrairement à une réinitialisation complète, conserve les styles utiles par défaut, en ne corrigeant que ceux qui posent des problèmes de compatibilité. Le choix entre eux dépend du projet et des préférences du développeur.