CSS reset moderne (générateur)
Cochez les règles. Chacune a un court commentaire expliquant ce qu’elle corrige, ce qui permet de comprendre et d’ajuster plutôt que de copier à l’aveugle.
Mode d’emploiLe CSS qui se place au début de tout site
Disponible en: 
CSS reset moderne (générateur): à quoi ça sert
Tout projet commence par corriger les mêmes choses : marges par défaut, box-sizing, images qui débordent du layout, champs de formulaire avec une autre police et mots longs qui cassent l’écran sur mobile.
Cochez les règles voulues et copiez un reset court et commenté, avec box-sizing border-box, hauteur minimale en dvh, médias adaptatifs, font: inherit dans les formulaires, overflow-wrap, text-wrap balance et pretty sur les titres et paragraphes, défilement fluide uniquement pour ceux qui n’ont pas demandé moins de mouvement et désactivation des animations pour ceux qui l’ont demandé.
Mode d’emploi
- Cochez les règles que vous voulez utiliser.
- Lisez le commentaire de chacune.
- Copiez ou téléchargez le reset.css et placez-le au début de votre CSS.
Quand l’utiliser
- Démarrer un site de zéro.
- Uniformiser les projets d’une équipe.
- Comprendre ce que fait chaque règle de reset.
Questions fréquentes
Qu’est-ce qu’un CSS reset ?
Un petit ensemble de règles placé au début du CSS pour supprimer les différences et les comportements par défaut gênants des navigateurs, comme les marges sur le body, les images qui débordent du layout et les champs de formulaire avec une autre police. Cela facilite l’écriture du reste du CSS.
Reset ou normalize ?
Normalize.css conserve les styles par défaut et corrige seulement les différences entre navigateurs ; un reset moderne va un peu plus loin et supprime ce qu’on réécrit presque toujours. Les navigateurs actuels sont beaucoup plus proches les uns des autres, donc les resets courts comme celui-ci sont devenus les plus utilisés.
Pourquoi le défilement fluide est-il dans une media query ?
Le défilement animé peut provoquer des nausées chez les personnes sensibles au mouvement. Dans prefers-reduced-motion: no-preference, il n’est activé que pour celles qui n’ont pas demandé moins de mouvement dans le système.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.