Je me plaignais sur identica que je n’aime pas le reset CSS, la question n’a pas traîné : pourquoi ? [1] La réponse étant trop longue pour 140 caractères (je ne suis pas le seul à trouver ça terriblement court), nous voilà tous réunis pour ce énième épisode de notre fameuse série « Le commun des mortels s’en tamponne, il a une vraie vie, mais nous les gens du web, hé bien non ».
Le problème... et la solution
Quand on fait du développement web client, on est toujours à la merci de rendus très hétérogènes entre les navigateurs : à chacun ses propres réglages, sa propre feuille de style interne.
Pour résoudre ce problème, il a émergé il y a quelques années le concept de reset CSS, autrement dit de « remise à zéro » : le développeur n’a plus alors qu’à ajouter ses styles à lui après avoir invoqué la reset.css et le tour est joué.
Prenons un exemple : chaque navigateur décide de ses propres tailles de polices et potentiellement de ses propres marges pour tous les éléments HTML. Le reset liste donc tous les éléments connus et déclare d’autorité que tout doit avoir le même rendu : une taille fixe, pas de marges.
Des exemples dans le vrai monde
Mon reset est très simple, il s’appuie sur une vieille recette (que j’avais peut-être à l’époque empruntée à Eric Meyer, je ne me souviens plus) : * { margin:0; padding:0; }. Après quoi je n’ai plus qu’à préciser tous les éléments que je veux styler, mais au moins je suis sûr de n’avoir pas en cours de route sur-stylé un élément que je finirais par oublier.
Une discussion de fond qui dure depuis des années a fini par conclure que ce genre de remise à zéro n’est pas suffisant, le mouvement s’est donc radicalisé.
Eric Meyer maintient un reset.css depuis un bon moment, qui a d’ailleurs causé quelques problèmes d’accessibilité bien malgré lui avec le outline:0;.
Il a eu beau commenter juste au-dessus de :focus (Pensez bien à définir des styles de focus !
), les gens s’empressent de laisser l’outline à zéro, ce qui pose des problèmes quand on navigue au clavier : on ne sait pas quel élément de la page a le focus et c’est parfois bien gênant. Mais ce n’est pas sa faute, me direz-vous, et vous aurez raison. Je reviendrai un de ces jours sur ce problème, j’ai des victimes toutes désignées en tête [2].
Vous pouvez aussi aller voir du côté de Yahoo qui fournit un reset tout aussi complet, intéressant dans son approche un peu différente, plus « ciblée ».
Le cas qui m’occupe
Je travaille en ce moment sur un prototype collectif ; je m’intègre donc dans un code déjà fait, à plusieurs mains, sans repartir de zéro.
Voilà par quoi commence la reset.css de ce projet :
html, body,
h1, h2, h3, h4, h5, h6,
.reset_apercu h1,
.reset_apercu h2,
.reset_apercu h3,
.reset_apercu h4,
.reset_apercu h5,
.reset_apercu h6,
div, span,
p, blockquote, cite, q, pre,
dl, dt, dd,
ol, ul, li,
abbr, acronym,
font, big, small, strike, s, strong, ins, del, em,
samp, kbd, dfn, code, tt, var, address,
a,
img,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
applet, object, iframe {
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:12px;
font-family:inherit;
vertical-align:baseline;
}Pourquoi pas, me direz-vous. Vous constaterez tout de même qu’Eric Meyer lui-même fixe une taille de police, mais pas à 12 pixels par défaut, à 100%. C’est là qu’est l’os, hélas, nous l’allons voir tout à l’heure [3].
Or donc, j’ai un souci
Ce code part du principe que nous allons tout redéfinir par la suite, et voilà où commence le moment laborieux. Les collègues qui ont codé le projet ont ajouté des classes sur la plupart des éléments, partant du principe que ce prototype pourra être raccordé à des sites déjà existants, et que la seule façon de se défaire des styles du site pour imposer les nôtres (si je puis dire) est d’utiliser des classes CSS ; ainsi nous sommes à peu près sûrs du résultat attendu.
Le problème de cette démarche, c’est qu’on peut dans la bataille oublier quelques éléments. J’ai eu besoin le même jour de déclarer des abréviations (abbr) et des portions de texte dans une autre langue (un span faisant très bien l’affaire, c’est d’ailleurs pour ça qu’il a été inventé).
Que croyez-vous qu’il arrivât [4] ? Je me suis trouvé tout surpris devant ma page, quand un span était plus gros que tout le contenu de la cellule qui l’encadrait, puis qu’un abbr s’est retrouvé tout riquiqui au milieu d’un titre !
C’est que le navigateur avait bien fait son travail : sans nouvelles précisions sur la démarche à adopter, il remontait le long de la cascade CSS comme un saumon impatient de frayer [5], et finissait par décider que tout ce joli monde devait mesurer 12 pixels, pas un de plus, pas un de moins.
Nous avons donc dû nous coordonner pour deux éléments de base de HTML, rien qu’à cause de cette méthode de travail. Le temps de chercher ce qui coince (ah tiens pas la même taille), d’isoler la règle CSS incriminée (ah tiens 12 pixels dans reset.css), de faire remonter aux collègues qui ont mis en place le projet ? Une chance qu’on ne soit que quatre personnes pour l’instant, tous dans la même équipe, et travaillant en bonne intelligence sans devoir émettre des tickets de bugs à tout va !
Au final, quel problème résout-on avec le reset.css ?
Tel que tu me vois, gentil lecteur, cette expérience n’a rien fait pour me motiver à creuser plus que je ne l’avais déjà fait le reset.css exhaustif qui se fait dans de plus en plus de projets, même si j’ai bien fait mes devoirs en compulsant la littérature sur le sujet. Peut-être que je ne travaille pas dans des projets assez industriels ? (encore que j’en doute...)
Qu’est-ce qui vous fait l’utiliser ? L’obligation de devoir tout redéclarer, qui vous permet d’être sûrs de tout styler conformément à une charte graphique ?
Y a-t-il pour vous un gain de temps réel, de maintenabilité, que sais-je encore ?
Je ne veux pas mourir idiot, tout seul avec ma petite ligne de CSS passe-partout !
