Et alors, ce Reset CSS, on l’utilise ?
Eric Meyer a récemment publié une nouvelle version de son fameux Reset CSS. Il s’agit de quelques lignes de code CSS ayant pour but de remettre « à zéro » les styles par défaut appliqués par les navigateurs.
Il va cibler les éléments un par un, plutôt que d’utiliser le sélecteur universel (non, rien à voir avec quelque puissance divine) pour diverses raisons :
- Il ne faut pas styler les intouchables : Boutons radio, Cases à cocher et leurs amis peuvent se montrer très capricieux…
- Certaines propriétés sont spécifiques à un élément. Quelle doit être la réaction d’un navigateur lorsqu’une propriété CSS ne correspond pas à l’élément ciblé ?
Corinne Schillinger a publié sur le blog d’alsacreations un billet dans lequel se pose la question suivante :
Est-ce une bonne chose de remettre à 0 certains styles par défaut ?
Le principal argument en défaveur du reset est l’oubli dans notre CSS de styler certains éléments.
Ma réponse sera précise, tranchée et définitive : mmm… ça dépend.
Prenons la feuille de style par défaut recommandée par la spécification CSS2.
Cette CSS a été établie dans une « logique XML », c’est à dire de séparation stricte entre le contenu et la mise en forme. Pour prendre un exemple, elle part du principe que <head> est un élément du document, et lui applique une propriété display:none.
Comme précisé en haut de ce document, il est uniquement publié à titre informatif, et ne fait pas partie de la norme : chaque navigateur est libre d’appliquer ses propres styles par défaut : on pourrait par exemple imaginer un navigateur qui appliquerait une couleur pour chaque titre, suivant son importance.
Je pense que le problème est là : et si les navigateurs n’appliquaient les styles par défaut qu’en l’absence de CSS ?
Difficilement concevable en l’état actuel des choses :
- 99% des auteurs ajouteraient cet énorme bloc dans leurs CSS.
- La plupart des éléments ont été conçus par rapport à leur display par défaut, comme l’élément table et ses enfants, et il est rarement modifié.
- Comment réaliser l’élément <legend> d’un <fieldset> en CSS (Non ce n’est pas un défi, lâchez cet éditeur et je vous promets qu’il ne vous arrivera rien) ?
Néanmoins, je pense que le concept est intéressant : pourquoi devrait-on s’appuyer sur une CSS imprévisible pour construire la nôtre ?
Dans le monde réel, la réponse est simple : nous savons que les navigateurs, à quelques différences près, appliquent les mêmes styles par défaut.
Il faut je pense, se reposer sur le plus évident en supprimant les différences : la propriété display de chaque élément est définie dans la DTD HTML4, par exemple. Chaque navigateur l’interprète de la même façon et il est inutile de la redéfinir. Tant que nous n’avons pas vu de navigateur aux titres multicolores, nous pouvons encore compter sur l’héritage de body pour définir un color:#000 sur tous les textes.
La solution d’Eric Meyer est un très bon compromis pour le moment, en attendant de trouver une solution idéale (…ce qui risque de prendre un moment), et à condition d’adhérer au principe de séparation stricte contenu / mise en forme.
Et le risque d’oublier le style d’un élément ?
En appliquant une CSS à une page, on assume le fait de ne pas respecter le style par défaut du navigateur en proposant à l’utilisateur une nouvelle présentation. Je pense qu’il faut alors aller jusqu’au bout en prenant en charge le style de tous les éléments.
On peut oublier de styler certains éléments, mais on ne devrait pas.
On peut oublier son anniversaire de mariage, mais on ne devrait pas.
Les commentaires sont fermés sur cet article.
4 commentaires
Flux RSS des commentaires de cet article
Bon.
J’ai rien compris mais alors, j’adore la chute.
Le 03 Juil. 2007 à 16h11 par Aude
‘la propriété display de chaque élément est définie dans la DTD HTML4’
Certes, mais il s’agit là uniquement de la théorie, en réalité les navigateurs n’ont pas implémenté tous les display définis par le W3C. L’exemple le plus connu est certainement les tableaux sur *
Le 12 Jan. 2008 à 13h17 par Yves
IE inférieure et égal à 7 et inline-block sur les versions inférieures à Gecko 1.9
(PS : petit bug dans les commentaires sur le caractère ‘inférieure à’)
Le 12 Jan. 2008 à 13h19 par Yves
En effet, mais je parlais ici des types simples définis par la DTD HTML 4, pas des propriétés CSS non supportées.
Ils se limitent à deux types : Block et Inline. Je voulais dire qu’un élément h1 ne sera jamais Inline par défaut, il est donc inutile de le redéfinir.
http://www.w3.org/TR/html4/sgml/dtd.html#block
http://www.w3.org/TR/html4/sgml/dtd.html#inline
C’est ce que j’entendais par : « Il faut je pense, se reposer sur le plus évident en supprimant les différences »
Il n’est pas très utile de redéfinir les propriétés non supportées, puisqu’elles sont ;)
Le 12 Jan. 2008 à 16h32 par Pierre Bertet