Ouvrez n'importe quelle page HTML sans une seule ligne de CSS et vous verrez pourtant des styles déjà appliqués : des marges autour des paragraphes, des puces devant les éléments de liste, un espacement particulier pour les titres. Ces styles par défaut, définis par la feuille de style interne de chaque navigateur, ne sont pas identiques d'un moteur de rendu à l'autre.
Le reset CSS et la normalisation CSS sont deux réponses à ce problème, mais elles ne poursuivent pas le même objectif. Confondre les deux mène souvent à un choix mal adapté au projet, ou à un mélange incohérent des deux approches dans la même base de code.
Définition
Un reset CSS est une feuille de style que vous chargez avant vos propres règles et qui supprime, autant que possible, l'ensemble des styles par défaut du navigateur. Les margin et les paddings sont ramenés à zéro, les tailles de police sont uniformisées, les styles de list-style sont retirés des listes. Chaque élément part ainsi d'une base neutre, sans aucune décoration héritée, et c'est à vous de reconstruire chaque style depuis ce terrain vierge.
Normalize.css, la référence historique de cette seconde approche, suit une philosophie différente : au lieu de tout effacer, il corrige les incohérences entre navigateurs tout en conservant les styles par défaut qui restent utiles. Un titre de niveau 1 garde une taille de police plus grande qu'un paragraphe, un élément en gras reste en gras, mais les écarts de rendu entre Chrome, Firefox et Safari sont gommés.
Pourquoi les navigateurs ont des styles par défaut différents
Chaque navigateur embarque sa propre feuille de style interne, invisible dans le code source mais bien réelle, appelée feuille de style de l'agent utilisateur. Chrome, Firefox, Safari et les autres appliquent chacun des valeurs légèrement différentes pour le margin d'un body, l'indentation d'une liste à puces, ou encore l'apparence native d'un bouton et d'un champ de formulaire.
Ces différences trouvent leur origine dans l'histoire du web : chaque éditeur de navigateur a fait ses propres choix de rendu avant que les standards ne se stabilisent, et personne n'a intérêt à casser la compatibilité avec les millions de pages déjà en ligne en changeant ces valeurs après coup. Résultat, un même document HTML peut afficher un espacement de seize pixels sous un titre dans un navigateur, et vingt pixels dans un autre.
Reset ou normalize : comment choisir
Le choix dépend surtout de la nature du projet. Un reset complet convient bien à une interface très personnalisée, construite avec un système de composants strict comme BEM, où chaque style est de toute façon redéfini explicitement et où les valeurs par défaut du navigateur n'apportent rien. C'est également le choix par défaut de nombreux frameworks utilitaires, dont le module Preflight de Tailwind CSS, qui applique un reset proche de celui popularisé par Josh Comeau, ou par Eric Meyer avant lui.
Normalize.css, à l'inverse, convient mieux à un site où le contenu textuel est riche et où vous ne voulez pas repartir de zéro pour chaque élément de typographie : articles de blog, documentation, pages éditoriales. Vous gardez une base cohérente et lisible même avant d'avoir écrit la moindre règle personnalisée, ce qui rend le résultat plus tolérant si un composant oublie d'être stylé.
| Critère | Reset | Normalize |
|---|---|---|
| Objectif | Tout effacer pour repartir de zéro | Harmoniser sans tout supprimer |
| Styles par défaut utiles | Supprimés, à recréer entièrement | Conservés et corrigés |
| Rendu avant vos propres styles | Page totalement nue | Page déjà lisible et cohérente |
| Exemple connu | Eric Meyer Reset, Tailwind Preflight | Normalize.css |
Un reset minimal en pratique
La plupart des projets récents n'utilisent plus l'un des deux fichiers historiques tels quels, mais s'inspirent d'un reset moderne, plus court et pensé pour les usages actuels du CSS, notamment box-sizing en border-box pour tous les éléments et le retrait des marges par défaut sur les titres et les paragraphes. Notre formation HTML et CSS fait démarrer chaque projet pratique par exactement ce type de reset court, pour prendre l'habitude de partir d'une base neutre avant d'écrire le moindre style personnalisé.
/* Reset moderne minimal */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
}
ul,
ol {
list-style: none;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}Pièges courants
Un reset trop agressif retire parfois des styles qui servaient l'accessibilité, comme le contour de focus visible au clavier sur les liens et les boutons. Si vous supprimez cet indicateur sans le remplacer par votre propre style de focus, vous cassez la navigation au clavier pour une partie de vos visiteurs, ce qui est un vrai recul et non un simple détail esthétique.
Foire aux questions
Oui, sous une forme allégée. Les navigateurs modernes sont plus cohérents qu'il y a dix ans, mais des écarts subsistent sur les marges, les listes et les éléments de formulaire. Un reset court reste la manière la plus fiable de partir d'une base identique partout.
Ce n'est pas recommandé. Les deux approches modifient les mêmes propriétés avec des valeurs différentes, et les charger ensemble crée des conflits difficiles à déboguer. Il vaut mieux choisir une seule stratégie et construire vos styles par dessus, de façon cohérente.
La plupart des frameworks modernes, dont les frameworks utilitaires, intègrent déjà leur propre reset au démarrage. Vérifiez sa documentation avant d'en ajouter un second, sous peine de dupliquer inutilement ce travail et d'alourdir votre feuille de style sans bénéfice réel.