lundi 10 janvier 2011

Le Reset CSS et pourquoi l’adopter

Posté par sshendi à 06:16

L’intégrateur a toujours passé beaucoup de temps à réinitialiser les éléments HTML dans ses feuilles de style CSS afin d’obtenir des valeurs similaires face aux différents navigateurs disponibles sur le Web. Ce processus est très redondant et c’est pourquoi le reset a fait son apparition dans les dernières années.

Le reset a été implémenté par différentes méthodes dont deux très populaires.

**Le reset dans le style**

Le premier reset utilisé dans le monde de l’intégration est très controversé et pour de très bonnes raisons à mon avis.

Le code suivant est ajouté à la première ligne de la feuille de style CSS :

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

Au lieu de spécifier les quelques éléments qui devraient être remis à zéro, ce reset décide plutôt de tout réinitialiser.

C’est un processus qui prend beaucoup de ressources et enlève la raison d’être de bien des éléments HTML de base ! À quoi sert un <strong> sans gras, un <em> sans italique ou un <p> sans espace ?

Cette technique force donc l’intégrateur à spécifier le style de chaque élément afin d’accéder à l’ancienne présentation de base et on se retrouve alors avec une feuille de style CSS contenant du code qui aurait facilement pu être évité.

La feuille de style Meyerweb Reset

Eric Meyer a créé une feuille de style reset.css en 2007 et celle-ci a été reçue avec beaucoup de reconnaissance par la communauté Web. Avec beaucoup d’interactions sur son article présentant la première version, il a réussi à créer un modèle solide à copier et peaufiner selon les besoins d’un site Web.

Il a tout récemment mis à jour la feuille de style CSS Meyerweb Reset afin de prendre en compte les nouveaux éléments HTML adoptés par le HTML5 :

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0b1 | 201101
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

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, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 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;
}

/* remember to define visible focus styles!
:focus {
	outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

Le code réinitialise seulement les éléments HTML nécessaires et tente de ne pas affecter les attributs les plus importants. Il est facile d’éditer le code afin de bien accompagner son propre framework CSS. Blueprint est justement un des frameworks populaires ayant adopté ce reset.

Le concept de garder le reset à part est une meilleure idée d’après moi afin de bien séparer la mission des différentes feuilles de style CSS. Donc pour accompagner la feuille de base style.css et la feuille d’impression print.css, on inclut maintenant la feuille reset.css qui est déclarée en premier.

Pourquoi adopter le reset

Le reset est une méthode qui peut plaire ou non à l’intégrateur.

Certains intégrateurs préfèrent au contraire tout contrôler dans leur unique feuille de style CSS en ajustant les valeurs de bases des éléments HTML selon les navigateurs pris en charge au lieu de commencer à partir de rien.

De mon côté, c’est maintenant un outil indispensable qui me permet de me concentrer sur le vrai code CSS au lieu de toujours réinitiliser les attributs nécessaires avant de spécifier ceux qui représentent le vrai style de mon élément.

De plus en plus de solutions Open Source adoptent le reset dont Magento et YUI de Yahoo!. Il reste maintenant à voir si le reset sera toujours nécessaire une fois que HTML5 sera complètement adopté et que les navigateurs auront améliorés leurs standards dont bien évidemment Internet Explorer.