Réinitialisation et normalisation CSS
Supprimez les styles par défaut incohérents des navigateurs avec des réinitialisations CSS et des feuilles de style de normalisation.
Réinitialisation et normalisation CSS est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Le problème : des valeurs par défaut incohérentes selon les navigateurs
Chaque navigateur possède une feuille de style de l’agent utilisateur intégrée, avec des styles par défaut pour les titres, les marges, les espacements internes, les listes et les éléments de formulaire. Ces valeurs par défaut diffèrent selon les navigateurs, ce qui entraîne des apparences incohérentes.
Réinitialisation CSS
Une réinitialisation CSS supprime toutes les valeurs par défaut du navigateur et vous fournit une base vierge. La célèbre réinitialisation d’Eric Meyer définit les marges, les espacements internes et de nombreuses propriétés sur zéro ou none.
<h1>Title</h1>
<p>Paragraph with reset margins.</p>
<ul><li>Item</li><li>Item</li></ul>
<ol><li>Step</li><li>Step</li></ol>
Normalisation CSS
Normalize.css adopte une approche différente : au lieu de supprimer toutes les valeurs par défaut, il les rend cohérentes entre les navigateurs et corrige les bogues connus tout en conservant les valeurs par défaut utiles, comme la taille des titres.
Compromis entre réinitialisation et normalisation
Comparaison :
- Réinitialisation : base vierge, vous définissez tout, davantage de travail
- Normalisation : base cohérente avec conservation des valeurs par défaut utiles, moins de code personnalisé
Réinitialisation CSS moderne
Une réinitialisation moderne populaire (créée par Josh Comeau) cible les valeurs par défaut les plus importantes :
<h1>Reset Demo</h1><h2>Sub</h2><h3>Sub</h3><h4>Sub</h4><h5>Sub</h5><h6>Sub</h6>
<p>Body text with smooth font rendering.</p>
<picture><img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'><rect width='300' height='120' fill='%234f8fdb'/></svg>" alt="demo" /></picture>
<video controls></video>
<canvas></canvas>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="18" fill="tomato"/></svg>
Images en tant qu’éléments de bloc
Définir display: block pour les images supprime l’espace inline par défaut en bas des images à l’intérieur des conteneurs (causé par line-height) :
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='160'><rect width='400' height='160' fill='%23ff6347'/></svg>" alt="block image" />
Schéma de réinitialisation des listes
Supprimez les marqueurs et l’indentation des listes lorsque vous concevez des listes de navigation ou d’interface personnalisées :
<ul class="nav-list"><li>Home</li><li>Shop</li><li>About</li></ul>
Réinitialisation des éléments de formulaire
Dans de nombreux navigateurs, les éléments de formulaire (input, button, textarea) n’héritent pas de la police par défaut. Une solution courante consiste à :
<input type="text" placeholder="Name" />
<button>Submit</button>
<textarea placeholder="Message"></textarea>
<select><option>Choice A</option></select>
Preflight de Tailwind
Tailwind CSS inclut sa propre réinitialisation appelée Preflight, fondée sur modern-normalize. Si vous utilisez Tailwind, une réinitialisation est déjà appliquée automatiquement.
Où placer la réinitialisation
Placez toujours votre feuille de style de réinitialisation/normalisation en premier, avant les styles des composants ou des utilitaires. L’ordre de la cascade garantit que vos styles remplacent ceux de la réinitialisation sans conflit de spécificité.
Points à prendre en compte pour une réinitialisation personnalisée
Créez votre propre réinitialisation minimale, adaptée à votre projet, plutôt que d’inclure une réinitialisation complète provenant d’un tiers. N’incluez que les règles dont vous avez besoin afin de limiter la taille des ressources CSS.
<p>Base font-size and line-height set on the root element affect the whole page.</p>
Vérification rapide
Quelle est la différence essentielle entre une réinitialisation CSS et une normalisation CSS ?
Récapitulatif
Les styles par défaut des navigateurs sont incohérents. Les réinitialisations CSS suppriment toutes les valeurs par défaut ; normalize.css les rend cohérentes. Les réinitialisations modernes se concentrent sur les règles les plus importantes, comme box-sizing: border-box, la largeur maximale des images et l’héritage des polices pour les éléments de formulaire. Chargez toujours la réinitialisation en premier.
Questions Fréquemment Posées
La leçon « Réinitialisation et normalisation CSS » est-elle gratuite ?
Oui — le texte complet de « Réinitialisation et normalisation CSS » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Réinitialisation et normalisation CSS » ?
Supprimez les styles par défaut incohérents des navigateurs avec des réinitialisations CSS et des feuilles de style de normalisation. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Réinitialisation et normalisation CSS » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Block, Inline et Inline-Block
- Visibilité et Display None
- Overflow : défilement, découpage et automatique
- Réinitialisation et normalisation CSS