Reset CSS moderne, commenté, avec un générateur de règles | We.Inc
Un reset CSS moderne et court, avec chaque règle expliquée. Activez ou désactivez les règles, placez le résultat dans une cascade layer et copiez-le. Avec la comparaison entre reset et normalize.css.
Un reset CSS moderne, c'est une douzaine de règles courtes placées avant vos propres styles : dimensionnement border-box sur chaque élément, marges par défaut à zéro, une hauteur de ligne lisible, des images en bloc limitées à la largeur de leur conteneur, et des contrôles de formulaire qui héritent de votre police. Choisissez les règles voulues ci-dessous, puis copiez le résultat.
Ce que corrigent les règles de base
Règle
Valeur par défaut du navigateur remplacée
Pourquoi la changer
box-sizing: border-box
La largeur inclut alors le padding et la bordure
margin: 0
Marges sur body, les titres, p, les listes
L'espacement vient uniquement de votre propre CSS
line-height: 1.5 sur body
normal (environ 1.2)
Lecture plus facile des paragraphes
img { display: block; max-width: 100% }
En ligne, largeur naturelle
Pas d'espace sous les images, pas de débordement
font: inherit sur les champs et les boutons
Police système en petite taille
Les formulaires s'accordent avec le reste de la page
Copier un reset que vous ne comprenez pas, c'est déboguer des règles que vous n'avez jamais choisies. Cette page explique chaque ligne simplement et vous permet de construire votre propre version avec des interrupteurs, pour que le fichier que vous collez soit court et que chaque ligne ait sa raison d'être.
Lisez la note à côté de chaque règle, puis activez-la ou désactivez-la.
Choisissez d'envelopper ou non le résultat dans @layer reset pour que n'importe laquelle de vos règles l'emporte sans effort.
Copiez le CSS généré et chargez-le avant vos autres feuilles de style.
Placez le reset dans une cascade layer. Les styles hors de toute layer l'emportent sur les styles en layer, quelle que soit la spécificité.
Ne réinitialisez pas list-style sur chaque ul. La documentation de Tailwind prévient que VoiceOver risque de ne pas annoncer comme listes les listes sans style, alors ajoutez role="list" à toute liste dont vous retirez le style.
Ne touchez pas au contour de focus dans un reset. Restylez-le composant par composant au lieu de le supprimer globalement.
Si vous utilisez Tailwind, vous avez déjà un reset appelé Preflight, donc un second ajoute généralement du bruit.
Questions fréquentes
Quelle est la différence entre un reset CSS et normalize.css ?
Un reset supprime les valeurs par défaut des navigateurs pour partir d'une page presque vierge. normalize.css garde les valeurs par défaut utiles et corrige seulement les endroits où les navigateurs divergent. Beaucoup de resets actuels se situent entre les deux : ils gardent les titres en gras et les listes intactes, mais suppriment les marges et corrigent le dimensionnement.
Ai-je encore besoin d'un reset CSS en 2026 ?
Les navigateurs s'accordent bien plus qu'avant, donc les anciens resets géants sont inutiles. Un reset court vaut encore la peine, car des valeurs par défaut comme le dimensionnement content-box, la marge du body et les images en ligne correspondent rarement à ce qu'une mise en page demande.
Pourquoi utiliser :where() dans un reset ?
:where() a une spécificité nulle, donc n'importe quel sélecteur placé après, même un simple sélecteur d'élément, remplace le reset. Cela empêche les règles du reset de l'emporter discrètement sur les styles des composants.
Où placer le reset ?
Chargez-le en premier, avant toute autre feuille de style, ou importez-le dans @layer reset en haut de votre fichier CSS principal et déclarez l'ordre des layers une fois avec @layer reset, base, components.
Pourquoi box-sizing passe en premier
Avec content-box par défaut, une carte de 300px de large avec 20px de padding finit à 340px de large. border-box intègre le padding et la bordure dans la largeur que vous avez écrite, ce qui correspond à ce que la plupart des gens attendent du dimensionnement.
L'appliquer aussi aux pseudo-éléments ::before et ::after garde les formes décoratives cohérentes avec les boîtes qu'elles décorent.
Des règles de texte qui vieillissent bien
text-wrap: balance équilibre la longueur des lignes des titres courts, et text-wrap: pretty évite un mot orphelin sur la dernière ligne d'un paragraphe. Les navigateurs qui ne connaissent pas ces valeurs les ignorent simplement, vous pouvez donc les inclure sans risque.
overflow-wrap: break-word permet à une longue URL ou à un fragment de code de se couper au lieu d'élargir la page sur un téléphone.
Ce qu'un reset ne doit pas faire
Un reset n'est pas un design system. Les couleurs, les familles de polices et les échelles d'espacement ont leur place dans votre propre layer de base, où vous pouvez les changer sans toucher au reset.
Évitez les règles qui nuisent à l'accessibilité, comme outline: none sur tout ou la suppression de toute animation pour chaque visiteur. Les réglages de mouvement ont leur place dans une requête prefers-reduced-motion.
Reset, normalize ou rien
Trois façons de gérer les valeurs par défaut des navigateurs
Approche
Ce qu'elle fait
Idéale pour
Reset radical classique
Supprime presque toutes les valeurs par défaut, y compris la taille des titres
Rarement nécessaire aujourd'hui
Garde les valeurs par défaut, corrige les différences entre navigateurs
Sites de contenu qui apprécient la typographie par défaut
Reset moderne court
Corrige uniquement le dimensionnement, les marges, les médias et les formulaires
La plupart des nouveaux sites et applications
Reset de framework (Tailwind Preflight)
Fourni avec le framework
Projets qui utilisent déjà ce framework
Avant et après
Une carte avec et sans border-box
Les deux boîtes indiquent width: 200px. Seule la seconde garde cette largeur une fois le padding et la bordure ajoutés.
Dimensionnement border-box
La largeur et la hauteur incluent le padding et la bordure.
Supprimer les marges par défaut
L'espacement vient uniquement de vos propres règles.
Texte du body lisible
Une hauteur de ligne plus grande et un body sur toute la hauteur.
Médias en bloc et responsive
Pas d'espace de ligne de base sous les images, pas de débordement.
Les formulaires héritent de la police
Les champs et les boutons s'accordent avec le texte environnant.
Couper les mots longs
Les longues URL passent à la ligne au lieu de déborder.
Titres équilibrés
Des longueurs de ligne régulières pour les titres courts.
Pas de mots orphelins
Évite un mot seul sur la dernière ligne d'un paragraphe.
Isoler la racine de l'application
Un nouveau contexte d'empilement pour que le z-index de l'application ne se batte pas avec les portals.
Défilement fluide vers les ancres
Uniquement pour les visiteurs qui n'ont pas demandé moins de mouvement.
Générateur de reset
Sélection par défaut, placée dans une cascade layer :