Le reset CSS est une technique qui consiste à réinitialiser à 0 la valeur de certains éléments HTML afin d'éviter une partie des différences d'affichage sur les divers navigateurs.
Avant d'aller plus loin, rappelons que l'usage de cette technique est controversé. Si vous souhaitez l'utiliser, il est recommandé d'utiliser un Reset CSS évolué, comme celui proposé par Eric Meyer, et d'éviter l'utilisation du sélecteur universel (*).
Le Reset CSS classique (déconseillé)
Les navigateurs n'utilisent pas toujours les mêmes marges et padding par défaut pour les différents éléments HTML. Cela peut représenter un problème, par exemple lorsqu'on veut supprimer le retrait à gauche d'une liste avec un margin-left: 0; et que certains navigateurs conservent ce retrait car ils utilisent un padding plutôt qu'une marge. Ajoutez quelques différences de ce type entre les styles par défaut des navigateurs, et la solution qui semble s'imposer est la suivante: supprimer toutes les marges et retraits internes des éléments.
* {
margin: 0;
padding: 0;
}
Si on souhaite aller plus loin et gommer d'autres différences en remettant tout «à zéro», on peut aboutir au code suivant:
/* Ceci est un exemple de pratique non recommandée,
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 avec cette technique
Le problème de cette technique, c'est qu'elle annule certains styles par défaut des navigateurs qui sont réellement utiles. Le cas le plus flagrant est celui des éléments de formulaire.
Par défaut, et avec la plupart des navigateurs, ceux-ci prennent l'apparence des éléments de contrôle (champs de texte, listes déroulantes, boutons…) du système d'exploitation. Vu que ces styles sont connus et facilement identifiés des utilisateurs, et que par ailleurs il est très difficile voire impossible de styler certains éléments de formulaire à sa convenance, on conseille donc de garder cette apparence par défaut.
Seulement voilà: le sélecteur universel * a pour avantage tout comme inconvénient de sélectionner sans distinction tous les éléments HTML. Et si on utilise un border: 0;, on va perdre la plupart des styles «système» des éléments de formulaire.
De plus, utiliser le sélecteur consomme des ressources au niveau du navigateur qui doit parcourir tous les éléments du document pour leur appliquer ce style.
Un Reset CSS plus précis
On conseille donc d'utiliser un Reset CSS plus précis, qui vise plus précisément les différents éléments HTML et leur applique les styles nécessaires. On peut citer les références suivantes:
Limites des Reset CSS
Ces deux techniques de Reset CSS ont le mérite d'être suffisamment détaillées pour s'affranchir des points les plus problématiques. Cependant, c'est le principe même du Reset CSS qu'il convient de juger: est-ce une bonne chose d'annuler une grande partie des styles par défaut?
Les styles par défaut des navigateurs permettent d'obtenir un document HTML lisible même en l'absence de styles CSS spécifiques créés par l'auteur du site. Ils permettent d'identifier les différents éléments: paragraphes, titres, blocs de citation, etc. Supprimer ces styles fait donc courir un risque: celui de se retrouver avec des contenus peu ou pas stylés, parce que l'on aura oublié de redéfinir certains styles. Et cela arrive plus souvent qu'on ne le pense. ;)
De plus, il ne faut pas oublier que la personne qui code le CSS a rarement accès à tout le contenu HTML qui sera utilisé sur le site. Soit parce que les contenus ne sont pas définitifs et peuvent être modifiés, soit parce que les contenus sont variables: système de publication d'articles, commentaires des utilisateurs, mise en place d'un CMS qui sera utilisé par des personnes pas formées au HTML, etc.
Une autre solution?
Pour éviter ce type de problème, la solution peut être d'utiliser non pas un Reset CSS, mais une feuille de styles de base. Cette dernière devra non pas annuler les styles par défaut des différents navigateurs, mais les harmoniser.
Parmi celles-ci, KNACSS est une feuille de style CSS minimaliste, responsive et extensible pour débuter une intégration HTML / CSS, et présenté sous forme de concentré de bonnes pratiques et d'expériences sur le terrain.