Formation Apprendre le CSS : Le reset CSS

Dans ce chapitre, on va faire une petite parenthèse sur une technique très utilisée en CSS : le reset CSS. L'idée consiste à neutraliser les styles par défaut du navigateur pour repartir sur une base plus propre et plus prévisible.

Quand on commence à intégrer une maquette, les styles natifs du navigateur deviennent vite gênants :

• les marges automatiques sur les titres et paragraphes
• les puces et retraits des listes
• les styles par défaut des liens
• les bordures et fonds des boutons
• les différences de taille de police sur les champs de formulaire

Le but du reset est donc d'écraser ces styles de base pour simplifier le travail dans la suite du projet.

Pourquoi faire son propre reset ?

Il existe de nombreux resets CSS sur internet. Certains sont très connus, comme celui de Meyer, mais chaque développeur finit souvent par adapter cette base à sa façon.

Plutôt que de copier un fichier que l'on ne comprend pas forcément, l'intérêt est de construire progressivement son propre reset, avec uniquement les règles dont on a besoin. On peut ensuite l'améliorer au fur et à mesure des projets.

Réinitialiser les marges

Le premier problème vient souvent des marges par défaut. Le body, les titres, les paragraphes et les listes ont tous des espacements automatiques.

On peut commencer par les supprimer :

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin: 0;
}

Cela permet de repartir d'une page sans espaces imposés par le navigateur.

Réinitialiser les listes

Les listes ont également un retrait interne et un style visuel par défaut.

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

Avec list-style: none, on supprime les puces et la numérotation. Avec padding: 0, on retire le décalage intérieur que le navigateur applique souvent.

Faire hériter le style des titres

Par défaut, les titres ont une taille et un graissage spécifiques. Si on veut qu'ils se comportent comme le texte autour d'eux, on peut forcer l'héritage avec inherit.

h1,
h2,
h3,
h4,
h5,
h6 {
  font: inherit;
}

Ici, font: inherit permet aux titres de reprendre la police, la taille et le poids du parent.

Ce mot-clé inherit est très utile dans les resets. Il force une propriété à récupérer la valeur de son parent, même si cette propriété n'est pas héritée naturellement.

À côté de inherit, il existe aussi d'autres mots-clés utiles :

• initial remet la valeur définie dans la spécification CSS
• revert remet la valeur par défaut du navigateur
• unset se comporte comme un mélange de inherit et initial

Dans un reset, c'est surtout inherit qui est pratique.

Réinitialiser les liens

Les liens sont bleus et soulignés par défaut. Si on veut qu'ils gardent l'apparence du texte environnant, on peut faire :

a {
  color: inherit;
  text-decoration: none;
}

Ainsi, le lien prend la couleur du parent et perd son soulignement.

Réinitialiser les champs de formulaire

Les boutons, les champs texte, les listes déroulantes et les textarea ont souvent une police ou une couleur différente du reste du document.

On peut harmoniser tout ça avec :

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

De cette manière, les éléments de formulaire s'alignent visuellement avec le reste de l'interface.

Réinitialiser les boutons

Les boutons ont aussi des bordures, un fond et du padding par défaut. Si on veut les styliser entièrement nous-mêmes, on peut supprimer ces styles :

button {
  border: none;
  background: transparent;
  padding: 0;
}

transparent signifie simplement que l'on ne veut pas de fond visible.

Donner une vraie hauteur au body

Par défaut, le body ne prend que la hauteur de son contenu. Si on veut qu'il occupe au minimum toute la hauteur de l'écran, on peut ajouter :

body {
  min-height: 100vh;
}

100vh représente 100 % de la hauteur de la fenêtre.

On peut aussi en profiter pour définir une hauteur de ligne par défaut :

body {
  min-height: 100vh;
  line-height: 1.2;
}

Une valeur comme 1.2 fonctionne souvent bien comme base générale, notamment pour les titres. Pour les paragraphes, on utilisera ensuite souvent des valeurs un peu plus grandes comme 1.5 ou 1.6. Cette valeur dépendra souvent de la valeur de base utilisée par le designer.

Réinitialiser les images, vidéos et picture

Les images et médias peuvent facilement déborder de leur conteneur. Pour éviter cela, on peut définir un comportement plus sûr :

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

Cette règle apporte plusieurs choses :

• max-width: 100% empêche le média de dépasser la largeur de son parent
• height: auto conserve les proportions
• display: block évite les petits espaces liés au comportement inline des images

Exemple de reset complet

Voici un reset simple basé sur les besoins vus dans ce chapitre :

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: none;
  background: transparent;
  padding: 0;
}

body {
  min-height: 100vh;
  line-height: 1.2;
}

img,
picture,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

Ce reset reste volontairement simple, mais il couvre déjà beaucoup de cas gênants du quotidien.

Reset ou Normalize ?

Il existe une autre approche appelée Normalize.css.

Le principe n'est pas de supprimer les styles par défaut, mais plutôt de les uniformiser entre les navigateurs. Là où un reset remet tout à zéro, un normalize cherche surtout à rendre les styles cohérents.

Dans notre cas, comme on veut construire entièrement notre propre apparence, le reset est plus adapté.