Les CSS Resets : tout ce qu’il faut savoir

---

Cet article est une traduction et adaptation d’un article en anglais lu sur sixrevisions.com.

Les CSS Resets, ce sont les règles CSS qui permettent de remettre la majorité des paramètres de tout ce qui concerne la mise en forme de votre page à 0 avant d’entamer votre travail de mise en page avec les CSS.

Cela a pour avantage de travailler de façon cohérente et uniforme sur toutes les plateformes et tous les navigateurs, pour éviter les surprises donc, plutôt essentiel de nos jours.

Tout bon webdesigner qui se respecte doit au moins avoir vu une des techniques de CSS Resets, car oui, il en existe plusieurs, plus ou moins longues, plus ou moins complexes, et plus ou moins efficaces.

Les CSS Resets, qu’est-ce que c’est ?

Utiliser une remise à zéro des CSS (ou CSS Reset – nous utiliserons plutôt cette appellation anglaise par soucis d’homogénéité), c’est écraser la feuille de style de base que chaque navigateur possède et utilise pour l’affichage d’une page.

Dans cette logique donc, si vous créez une page sans feuille de style, celle-ci aura quand même des styles, ceux qui sont inclus dans chaque navigateur (et qui sont différents d’un navigateur à l’autre), donc vos résultats de IE à Firefox, de Chrome à Opera seront probablement différents.

Les éléments qui sont les + différents sont principalement : les hyperliens <a>, les images <img>, toutes les titrailles de <h1> à <h6>, et surtout toutes les margin et padding de pas mal d’éléments différents.

Qui utilise les CSS Resets ?

Basé sur une étude qui a eu lieu en 2008 par Chris Coyier de CSS-Tricks, la grande majorité des webdesigners utilisent l’une ou l’autre version des CSS Resets.

Cette enquête révèle cette proportion d’utilisation pour les CSS Resets :

• 27% utilisent la version d’Eric Meyer
• 26% ignorent ce qu’est un CSS Reset
• 15% utilisent un « Reset dur », c’est à dire un reset avec le sélecteur universel (*)
• 14% utilisent un reset qui fait partie d’un framework CSS
• 13% utilisent leur propre CSS Reset
• 4% n’en utilisent volontairement pas

La premier résultat de cette enquête n’a pas surpris Chris Coyer, car il considère la version d’Eric Meyer comme étant « populaire, bien pensée et efficace ».

Les différentes manières d’effectuer un CSS Reset

undohtml.css

Le tout premier à avoir mis cette « technique » en place, fut Tantek Çelik, un développeur.

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */

/* link underlines tend to make hypertext less readable,
   because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }

/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
/* the default spacing on headings does not match nor align with
   normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/*  nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

/* whoever thought blue linked image borders were a good idea? */

a img,:link img,:visited img { border:none }

/* de-italicize address */
address { font-style:normal }

/* more varnish stripping as necessary... */

Avec cette feuille de Reset, il a enlevé les liens soulignés (text-decoration:none), les bords des images qui possèdent un lien (border:none), et a réglé à 1em la taille de toute la titraille, des balises <code> et paragraphes (font-size:1em).

Hard Reset (ou reset dur)

La deuxième façon de faire a été trouvée par le webdesigner et web developer Andrew Krespanis. On l’appelle la méthode « dure » car absolument toutes les règles et toutes les balises se voient ciblées par le symbole universel *

* {
    padding:0;
    margin:0;
}

Disons que cette technique ne fait pas dans la finesse et, en parallèle un dérivé de cette déclaration a été développée par Eric Meyer.

N’utilisons plus le sélecteur universel * (hard reset)

Il a été prouvé qu’utiliser le sélecteur universel a des répercussions sur les performances d’une page web à cause des ressources appliquées à ce que absolument chaque élément soit remis à 0 de ses margin et padding.

Il est dès lors fort peu conseillé d’encore utiliser cette technique mais plutôt de l’adapter pour que les margin et padding soient remis à 0 uniquement pour les éléments qui en ont peut-être vraiment besoin.

La version contemporaine d’Eric Meyer

Voici ce qu’Eric Meyer a sorti de son chapeau en regard de ce qu’il avait découvert. Un mix entre le hard reset et la version initiale de Çelik :

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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

Ceci est donc la version qui a longtemps été la plus utilisée sur la toile par les webdesigners. Elle cible précisément certaines balises (pour ne pas les cibler toutes avec le sélecteur universel) et applique des règles très claires et précises à ces éléments.

Conclusion

D’autres versions sont encore en cours de création/modification de nos jours puisqu’on ne peut pas dire qu’il s’agisse d’une version définitive. Le web reste en constante évolution et il est donc probable que ces règles de remise à zéro évoluent elles aussi avec, par exemple, l’arrivée de nouveaux standards (CSS3 et HTML5).