nota-bene.org > Sur le web > Je n’aime pas le reset CSS

Je n’aime pas le reset CSS

À propos de cet article

Un article de Stéphane

Publié le 1er septembre 2010

URL courte : http://nota-bene.org/399

17 commentaires

C’est un titre provocant, certes, mais qui mérite réflexion. Au travail, lecteur !

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 !


Notes

[1Oui je sais ses mises à jour sont protégées, croyez-moi sur parole.

[2Insérer ici un rire sardonique.

[3Oui monsieur, je mêle Gérard Oury et La Fontaine si je veux.

[4On a toujours besoin d’un petit subjonctif de derrière les fagots.

[5Oui, n’ayons pas peur des images : Daniel a son canard, j’ai mon saumon frayeur !


Commentaires

    • 1er septembre 2010

    reset : non. Mais reset + base : oui !

    C’est ce que propose YUI ou BluePrint :
    * http://developer.yahoo.com/yui/3/examples/cssbase/cssbase-basic_source.html
    * http://www.blueprintcss.org/tests/parts/elements.html

    Répondre à Vincent

    • 2 septembre 2010

    Mauvais reset, changer reset ! sourire

    Celui de YUI, par exemple, ne définit pas la taille de la police sur chaque élément. Il réinitialise seulement les tailles des h1, h2, etc. à 100%. Le font-size est ensuite généralement défini sur l’élément body, et l’héritage joue son rôle.

    D’après ce que je comprends, tu utilises un reset « * » lorsque tu pars de zéro ? Pas de problème pour styler tes éléments de formulaire ?

    Pour l’outline:0, je suis tout à fait d’accord, on en voit pas mal… Il faut cependant reconnaître que sur Firefox, l’outline au clic souris ne fait pas toujours très propre (mais je le préfère de loin à un lien sans état enfoncé), et c’est ce qui a dû séduire beaucoup de webdesigners après l’installation de leur « Reset CSS by Eric Meyer » tout neuf. Il est pourtant tout à fait possible de désactiver l’outline à la souris tout en le laissant au clavier, à l’aide des pseudo sélecteurs :active et :focus.

    Répondre à Pierre Bertet

  • D’après ce que je comprends, tu utilises un reset « * » lorsque tu pars de zéro ? Pas de problème pour styler tes éléments de formulaire ?

    Jusque-là, non, pas que je sache. Quels problèmes peuvent surgir ?

    (cela dit tous les deux vous montrez d’autres resets, mais qu’est-ce qui vous plaît vraiment dans les resets ?)

    Répondre à Stéphane

    • 2 septembre 2010

    Hello Stéphane, bel article avec plein de mots et d’expressions que je découvre. Merci pour cet enrichissement culturel ! sourire

    Ah oui, il y a du contenu aussi ? Pas mal du tout en effet.
    De mon côté je ne suis pas fan du tout non plus des resets et j’applique mes propres styles de base.

    D’ailleurs, Florent Verschelde a proposé une feuille de style de base sur Alsacreations. Si tu as 2 min, tu as peut-être un avis dessus ?

    http://www.alsacreations.com/astuce/lire/654-feuille-de-styles-de-base.html

    Alsacréations

    Répondre à Raphael

    • 2 septembre 2010

    Je n’aime pas non plus les reset CSS car :
    * On oublie souvent de styler plein de trucs annulés par le reset, et on se retrouve avec des contenus qui n’ont même pas les styles par défaut avec les évolutions du site (genre un titre H3 dans un article qui colle au cul du texte qui le précède, parce qu’on a stylé les H1 et H2 uniquement pour les articles).
    * Ça pollue les résultats de Firebug (styles hérités). Web Inspector a l’air de s’en sortir mieux en ne répétant pas plusieurs fois un même bloc de déclarations même lorsqu’il est hérité depuis plusieurs éléments. Peut-être une feature request à faire chez Firebug.
    * En dehors de cas très particuliers comme certains éléments de formulaire ou l’élément HR (cas que les reset CSS, complexes ou non, ne résolvent pas), les différences entre les styles par défaut des navigateurs sont rares. Autant les apprendre plutôt que faire confiance à un reset dont on ne comprend pas l’utilité. Je vois énormément de personnes utiliser des resets en pensant qu’ils sont indispensables et garantissent un rendu identique entre les navigateurs (deux contrevérités).
    À cause de ce dernier problème, je déconseille donc formellement l’utilisation des resets CSS pour les débutants. Pour les intégrateurs confirmés, il peut être utile de partir d’une feuille de styles de base, avec une dose plus ou moins forte de reset dedans selon ses préférences personnelles ou les librairies utilisées.

    Sur le sujet, j’ai écrit ça :
    * La technique du Reset CSS (ah tiens, attribué à Corinne… mais je suis pas jaloux)
    * Une feuille de styles de base pour bien démarrer vos projets
    * No Reset : A Base Stylesheet For Your Projects (même chose en anglais)

    Répondre à Florent V.

    • 2 septembre 2010
    • en réponse à Raphael

    D’ailleurs, Florent Verschelde a proposé une feuille de style de base sur Alsacreations. Si tu as 2 min, tu as peut-être un avis dessus ?

    J’aime bien.

    Répondre à Stéphane

    • 2 septembre 2010

    Je plussoie à 100% ton article Stéphane, et je vais même jusqu’à trouver le *{margin:0; padding:0} encore trop radical.
    C’est dire ! clin d'œil

    En général, je m’en sors avec un simple html, body{margin:0; padding:0}.
    Mais là, c’est un triste minimum, faut l’avouer.

    Répondre à Pascale

    • 2 septembre 2010

    Je travaille avec des développeurs PHP ou Java qui ne sont pas forcément aguerris au web, particulièrement au CSS. Par ailleurs, ils développent sous Linux pour des clients sous IE6. Les tests sous IE6 se font au mieux de temps en temps, au pire une seule fois avant livraison.

    Par ailleurs, nous réalisons des applications web très simples en terme de rendu graphique.

    Les reset CSS, dans ce contexte, représentent pour nous un gain important parce qu’ils nous permettent de limiter les risques de tomber sur un os lors des tests IE6, et parfois aussi d’apporter de bonnes pratiques CSS à des développeurs qui ne connaissent pas bien ce langage.

    Répondre à clark

    • 2 septembre 2010

    J’utilise depuis un bon moment déjà la feuille de style de base de Florent et j’en suis très content, très peu voir aucun soucis avec.

    Dans les faits ça correspond à peu près aux reset + base sur Blueprint ou autres.

    Et on est d’accord le *outline:0 ; saymal !

    Répondre à Florian LB

  • Le reset sert à unifier les styles par défaut entre les navigateurs. La base sert (une fois cette mise à égalité faite) à rétablir quelque chose d’harmonieux et logique.

    Après ça peut en effet se faire en une passe comme le propose Florent, mais le résultat sera sensiblement le même.

    Répondre à Vincent

    • 2 septembre 2010
    • en réponse à Vincent

    Donc en fait dans le cas qui nous occupe c’est la base qui manquerait de finition ? Je le note et je vais en parler à qui de droit sourire

    Répondre à Stéphane

    • 8 septembre 2010

    Le reset qui fait une mise à zéro via sélecteur universel est ultra violent et pas très cool pour les successeurs. À la rigueur, sur un petit site perso... Je préfère le reset d’Eric Meyer, légèrement amélioré, parce qu’il est plus souple.

    Comme dit Vincent, un reset ne s’utilise pas seul, brrr ! Il précède une (re)définition de chaque élément, ce qui permet d’aborder le stylage spécifique du site en s’assurant une certaine harmonie.

    En fait, il fait répondre à ta question à rebrousse-poil, car les avantages découlent de la factorisation : avec le temps, j’ai fini par regrouper dans quelques feuilles de styles le code qui revenait à l’identique de projet en projet. Ça constitue un plan de travail où construire le projet, un framework avec son reset.css, sa base.css, sa typo.css... J’espère que j’aurais assez de ma miniconf pour exposer ça clin d'œil

    Répondre à tetue

    • 20 septembre 2010

    “Je travaille avec des développeurs PHP ou Java qui ne sont pas forcément aguerris au web,”

    ... Ben ils feraient mieux de changer de taf sourire

    Répondre à Julien

    • 20 septembre 2010
    • en réponse à Julien

    Allez, esprit moqueur clin d'œil

    Je voulais dire qu’ils ne sont pas forcément aguerris aux subtilités du web front, j’ai dû mal m’exprimer.

    Note que développeur back, c’est un autre métier, avec des contraintes très lourdes aussi.

    Répondre à Stéphane

    • 7 octobre 2010

    Bonjour Stéphane,
    Je plussoie également ton article. J’ai beaucoup employé le reset au départ et m’emploie à les virer tous. Ce qui devait théoriquement me faire gagner du temps, au fil des changements finit par m’en faire perdre. La seule utilité pour moi revient à concocter mon propre reset selon mes habitudes. Autrement dit, automatiser des classes que je sais ne pas devoir changer ou que je suis certaine de paramétrer ensuite.

    Lashon

    Répondre à Lashon

    • 7 novembre 2010

    Après les avoir beaucoup utilisé
    J’ai fini par m’en lasser

    Je les aime de moins en moins
    Ça c’est certain !

    Pourquoi, je ne sais pas
    Besoin d’alléger tout ce barda

    Trop lourd ? C’est bien possib’
    Même en Velib

    (désolé)

    Polésie du soir

    Répondre à br1o les bons tuyaux

    • 8 novembre 2010

    Reset CSS, Framework CSS, même combat ? Nous ne sommes pas fait pour le prémâché !

    Répondre à PooLP

Qui êtes-vous ?
Votre message
  • Pour créer des paragraphes, laissez simplement des lignes vides. Tous les liens sortants comporteront un attribut rel="nofollow". Merci de ne pas spammer.

Ceci est la version Bureau Afficher la version Mobile