Qu'est-ce qu'un CSS Reset ?
Le CSS reset est une technique qui consiste à réinitialiser certains éléments HTML à des valeurs nulles afin d'éviter une partie des différences d'affichage entre les navigateurs. L'objectif est de réduire les incohérences entre navigateurs concernant, par exemple, les hauteurs de ligne par défaut, les marges et la taille des polices des titres, pour créer un point de départ uniforme pour la mise en forme.
Avant d'aller plus loin, il est important de noter que l'utilisation de cette technique est controversée. Si vous choisissez de l'utiliser, il est recommandé d'adopter un CSS reset évolué, comme celui proposé par Eric Meyer, et d'éviter d'utiliser le sélecteur universel (`*`).
L'évolution du CSS Reset
Le reset CSS classique (à éviter)
Les navigateurs n'utilisent pas toujours les mêmes marges et paddings par défaut pour les différents éléments HTML. Cela peut poser problème lorsque vous souhaitez supprimer l'indentation gauche d'une liste avec `margin-left: 0;` et que certains navigateurs conservent cette indentation car ils utilisent du padding plutôt que de la marge.
L'approche classique consistait à supprimer toutes les marges et les espacements internes des éléments :
* {
margin: 0;
padding: 0;
}Pour aller plus loin et éliminer d'autres différences en remettant tout "à zéro", les développeurs utilisaient :
/* Exemple de pratique non recommandée,
A NE PAS UTILISER dans vos projets */
* {
margin: 0;
padding: 0;
border: 0;
font-family: sans-serif;
font-size: 1em;
font-weight: normal;
font-style: normal;
text-decoration: none;
}Problèmes de l'approche classique
Le problème de cette technique est qu'elle annule certains styles par défaut des navigateurs qui sont en réalité utiles. Le cas le plus évident est celui des éléments de formulaire.
Par défaut, et dans la plupart des navigateurs, ces éléments reprennent l'apparence des contrôles du système d'exploitation (champs de texte, listes déroulantes, boutons, etc.). Comme ces styles sont connus et facilement identifiables par les utilisateurs, et qu'il est très difficile voire impossible de styliser certains éléments de formulaire comme on le souhaite, il est recommandé de conserver cette apparence par défaut.
Cependant, le sélecteur universel `*` a l'avantage, mais aussi l'inconvénient, de sélectionner tous les éléments HTML sans distinction. Et si vous utilisez `border: 0;`, vous perdez la plupart des styles "système" des éléments de formulaire.
De plus, utiliser le sélecteur universel consomme des ressources du navigateur car celui-ci doit parcourir tous les éléments du document pour appliquer ce style.
Le Reset CSS d'Eric Meyer
Le Reset CSS d'Eric Meyer est l'un des plus célèbres et des plus largement adoptés. Il est volontairement très générique et sert de point de départ plutôt que de solution clé en main. Les styles fournis visent à réduire les incohérences entre navigateurs concernant les hauteurs de ligne par défaut, les marges et la taille des polices des titres.
Voici le Reset CSS complet d'Eric Meyer (v2.0 | 20110126) :
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}Approches modernes du CSS Reset
Le CSS Reset moderne de Josh W. Comeau
Josh W. Comeau a développé un CSS reset moderne qui répond aux besoins contemporains et inclut de nombreux petits raffinements pour améliorer à la fois l'expérience utilisateur et l'expérience d'écriture du CSS. Ce reset est neutre en matière de design et de cosmétique, ce qui le rend adapté à tout type de projet.
Voici les éléments clés de son reset moderne :
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
box-sizing: border-box;
}
/* 2. Remove default margin */
* {
margin: 0;
}
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
html {
interpolate-size: allow-keywords;
}
}
body {
/* 4. Add accessible line-height */
line-height: 1.5;
/* 5. Improve text rendering */
-webkit-font-smoothing: antialiased;
}
/* 6. Improve media defaults */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/* 7. Inherit fonts for form controls */
input, button, textarea, select {
font: inherit;
}
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/* 9. Improve line wrapping */
p {
text-wrap: pretty;
}
/* 10. Root stacking context */
#root, #__next {
isolation: isolate;
}Le CSS Reset moderne d'Andy Bell
L'approche d'Andy Bell vise à créer un reset plus équilibré et plus accessible qui préserve les valeurs par défaut utiles tout en corrigeant les incohérences. Son reset intègre plusieurs considérations modernes :
/* Box sizing rules */
*, *::before, *::after {
box-sizing: border-box;
}
/* Remove default margin */
* {
margin: 0;
}
/* Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* Remove list styles on ul, ol elements with a list role */
ul[role='list'], ol[role='list'] {
list-style: none;
}
/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4, button, input, label {
line-height: 1.1;
}
/* Balance text wrapping on headings */
h1, h2, h3, h4 {
text-wrap: balance;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}
/* Make images easier to work with */
img, picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
font-family: inherit;
font-size: inherit;
}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
min-height: 10em;
}
/* Anything that has been anchored to should have extra scroll margin */
::target {
scroll-margin-block: 5ex;
}Éléments clés d'un CSS Reset moderne
1. Modèle de box-sizing
Définir tous les éléments avec `box-sizing: border-box` garantit que le padding et les bordures sont inclus dans la largeur et la hauteur totales de l'élément, ce qui simplifie les calculs de mise en page.
2. Réinitialisation des marges et paddings
Supprimer les marges et paddings par défaut des éléments fournit une base propre pour vos espacements personnalisés sans incohérences entre navigateurs.
3. Lissage des polices et hauteur de ligne
Définir une hauteur de ligne cohérente et activer le lissage des polices améliore la lisibilité du texte sur tous les appareils et navigateurs.
4. Valeurs par défaut pour les médias
S'assurer que les images, vidéos et autres médias sont responsives et ne dépassent pas la largeur de leur conteneur.
5. Héritage pour les éléments de formulaire
Faire hériter aux contrôles de formulaire les polices et styles permet de les intégrer harmonieusement au reste du design.
6. Améliorations d'accessibilité
Inclure des styles qui améliorent l'accessibilité, par exemple en veillant à ce que les focus soient visibles et que le texte se replie correctement pour rester lisible.
L'ultime CSS Reset moderne
En nous appuyant sur les resets modernes évoqués plus haut, voici un CSS reset complet qui combine les bonnes pratiques d'Eric Meyer, Josh W. Comeau, Andy Bell et d'autres approches modernes :
/* ===============================================
Ultimate Modern CSS Reset
Based on best practices from Eric Meyer,
Josh W. Comeau, Andy Bell, and modern standards
=============================================== */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
box-sizing: border-box;
}
/* 2. Remove default margin and padding */
* {
margin: 0;
padding: 0;
}
/* 3. Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 4. Remove list styles on ul, ol elements with a list role */
ul[role='list'], ol[role='list'] {
list-style: none;
}
/* 5. Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4, button, input, label {
line-height: 1.1;
}
/* 6. Balance text wrapping on headings */
h1, h2, h3, h4 {
text-wrap: balance;
}
/* 7. Improve text rendering and wrapping */
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
p {
text-wrap: pretty;
}
/* 8. A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}
/* 9. Make images and media easier to work with */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/* 10. Inherit fonts for inputs and buttons */
input, button, textarea, select {
font: inherit;
}
/* 11. Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
min-height: 10em;
}
/* 12. Anything that has been anchored to should have extra scroll margin */
::target {
scroll-margin-block: 5ex;
}
/* 13. Root stacking context */
#root, #__next {
isolation: isolate;
}
/* 14. Enable keyword animations for modern browsers */
@media (prefers-reduced-motion: no-preference) {
html {
interpolate-size: allow-keywords;
}
}
/* 15. HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* 16. Remove quotes from blockquotes and q elements */
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* 17. Table border collapse */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 18. Focus management for accessibility */
::focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
/* 19. Remove focus outline for mouse users */
::focus:not(:focus-visible) {
outline: none;
}Limitations et points à considérer
Même si les CSS resets sont des outils puissants, ils s'accompagnent de certaines limites et considérations :
Problèmes potentiels
- Perte de sens sémantique : réinitialiser tous les styles peut rendre le contenu moins lisible sans styles personnalisés
- Styles des éléments de formulaire : certains resets peuvent interférer avec l'apparence native des éléments de formulaire
- Impact sur les performances : les sélecteurs universels peuvent impacter les performances sur de gros documents
- Charge de maintenance : vous devez redéfinir les styles pour chaque élément que vous utilisez
Bonnes pratiques
- Utilisez des resets modernes et maintenus plutôt que de créer le vôtre à partir de zéro
- Testez minutieusement sur différents navigateurs et appareils
- Envisagez d'utiliser Normalize.css comme alternative aux resets traditionnels
- Faites attention à l'accessibilité lorsque vous appliquez des resets
- Documentez vos choix de reset pour assurer la cohérence dans l'équipe
Axentix et le CSS normalisé
Axentix est un framework front-end moderne qui fournit d'emblée une base CSS normalisée. Au lieu de demander aux développeurs d'implémenter leur propre CSS reset, Axentix inclut un système de normalisation soigneusement conçu qui :
- Élimine les incohérences entre navigateurs : fournit une base cohérente sur tous les navigateurs modernes
- Préserve les valeurs par défaut utiles : maintient le sens sémantique tout en corrigeant les incohérences
- Optimise les performances : utilise des sélecteurs efficaces et des techniques CSS modernes
- Assure l'accessibilité : inclut des valeurs par défaut pensées pour l'accessibilité
- Prend en charge les fonctionnalités modernes : intègre des propriétés CSS contemporaines et des bonnes pratiques
En utilisant Axentix, les développeurs peuvent se concentrer sur la construction de leurs applications sans se soucier des problèmes de compatibilité entre navigateurs ou de l'implémentation de leur propre reset. Le framework gère tout le travail de normalisation, offrant une base solide qui fonctionne de manière cohérente sur différents navigateurs et appareils.
Cette approche est particulièrement utile pour les équipes qui souhaitent maintenir la cohérence entre plusieurs projets tout en réduisant la charge de gestion des CSS resets personnalisés. Le CSS normalisé d'Axentix garantit que vos composants auront le même rendu et le même comportement, quel que soit le navigateur ou l'appareil de vos utilisateurs.
Conclusion
Les techniques de CSS reset ont beaucoup évolué, passant des approches basées sur le sélecteur universel aux implémentations modernes et réfléchies qui équilibrent cohérence et utilisabilité. Si les resets classiques ont eu leur place dans l'histoire du développement web, les resets modernes comme ceux de Josh W. Comeau et Andy Bell offrent de meilleures solutions en prenant en compte l'accessibilité, les performances et l'expérience utilisateur.
Le reset moderne que nous avons présenté combine les meilleures pratiques de différentes sources et fournit une base solide pour n'importe quel projet web. Cependant, pour de nombreux développeurs, utiliser un framework comme Axentix, qui inclut déjà un CSS normalisé, peut être une solution plus pratique, éliminant le besoin de gérer les styles de reset tout en garantissant un comportement cohérent entre navigateurs.
Que vous choisissiez d'implémenter votre propre reset ou d'utiliser un framework comme Axentix, l'essentiel est de comprendre les principes de la normalisation CSS et de prendre des décisions éclairées en fonction des besoins et des contraintes spécifiques de votre projet.
