5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
Cet article est composé de plusieurs chapitres. Cliquez sur chap. pour accéder à la suite.
chap. 1 chap. 2 chap. 3 chap. 4 chap. 5 chap. 6
Vous n’utilisez pas de styles CSS pour votre page web ? Ce n’est pas grave : les navigateurs le font pour vous. Ils utilisent chacun leur feuille de style par défaut pour obtenir un rendu visuel minimal. C’est pourquoi les tableaux possèdent des bordures, et les paragraphes des espaces avant et après. Le problème ? Si des balises comme strong ou em sont traitées de la même manière par les agents utilisateurs, l’immense majorité présente des différences plus ou moins importantes. Ce fameux manque de “consistance” décrié par les webdesigners anglo-saxons concerne principalement les propriétés margin et padding. Avec une pensée particulière pour le retrait des listes ol et ul : si IE applique bien le margin-left: 40px préconisé, Firefox utilise quant à lui un équivalent du padding-left: 40px pour le même rendu. Dans ces conditions, il est tentant de vouloir mettre tous ces agents utilisateurs au garde-à-vous…
Dans leur grande sagesse les concepteurs du HTML ont fourni un exemple de feuille de style pour uniformiser le rendu visuel des pages web ; dans leur précipitation à sortir leur produit avant la concurrence, les concepteurs des navigateurs ont fait ce qu’ils ont voulu. Enfin, il est aussi possible que les spécifications - parfois sybillines - du monde joyeux des recommandations puissent être interprétées de diverses manières…
Prudence est mère de sûreté…
Il ne faut pas confondre ces différences de rendu entre les navigateurs avec les nombreux bugs qui affectent particulièrement IE comme le calcul de la largeur d’une boite. Gardez également à l’esprit que l’on peut très bien travailler avec ces valeurs par défaut au lieu de les éliminer, et que faire reset, ce n’est pas toujours rigolo : il s’agit d’une technique à manier avec précaution.
D’autant plus que la majorité des problèmes rencontrés est souvent liée à la transmission de l’héritage entre parents et enfants. Faire table rase, d’accord, encore faut-il savoir de quoi ^_^ Une autre notion indispensable est d’avoir une idée des possibilités d’imbrication des balises. Voici un récapitulatif de qui contient quoi, ainsi qu’une référence complète sur les attributs et relations de parenté des éléments XHTML 1.1.
La Cascade (le C de CSS) est une autre source de confusion. Openweb a consacré un article intéressant qui explique comment sont “priorisés” les différents styles qui peuvent s’appliquer à un élément.
Pour faire simple : si vous débutez l’apprentissage des CSS, je vous déconseille fortement de mettre un reset dans votre moteur, même s’il semble ronronner affectueusement au début. Nul doute que dès que vous aurez le dos tournée… Enfin, maintenant, si vous insistez, je vous ai préparé un mini dossier sur le sujet :
- margin et padding à zéro avec le sélecteur universel
- Reset CSS Reloaded, Eric Meyer
- INITIAL, Christian Montoya
- YUI Reset CSS, Yahoo! UI Library
- undohtml.css, Tantek Celik
Remise à zéro du margin et du padding avec le sélecteur universel * »
chap. 1 chap. 2 chap. 3 chap. 4 chap. 5 chap. 6
Cet article est composé de plusieurs chapitres. Cliquez sur chap. pour accéder à la suite.
« Articles précédents et suivants dans la même rubrique »
Ca peut vous intéresser »
- Frameworks CSS + Reset CSS : design from scratch (16)
- Trucs et astuces CSS (5)
- Styles CSS par défaut : après Reset Reloaded, Eric Meyer fait encore risette avec Resetting Again (3)
- Quelques notes sur Sandbox, un thème WordPress pour intégrateurs html CHIC qui aiment les microformats (4)
- Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards (21)
16 participations à l'article
5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
Hello,
merci pour cette article vraiment très bien, cela fait un petit moment que je fait des reset css, mais sans vraiment le savoir … Mais certainement aps aussi pousser qu’ici.
comme d’habitude excellent article qui permet d’aller plus loin!
Excellente approche des reset css ! Merci beaucoup pour cet article sur lequel je vais me pencher bien sérieusement après cette première lecture ;)
J’aime bien le reset de Meyer mais le line-height:1 global m’a causé quelques soucis..
Merci beaucoup, bon article. Par contre je suis mitigé sur l’utilisation de reset, je me contente du margin et padding sur le sélecteur universel.
#wouaren {
Quel genre de soucis exactement ? Au début, je mettais quelque chose comme 1.5em à la suite du reset et je me retrouvais avec des valeurs calculées bizarrement. Je crois qu’il vaut mieux n’utiliser que des valeurs brutes une fois qu’on a commencé.
}
#Neovov {
la RAZ des padding et margin, c’est le reset de base ! C’est même le plus brutal ;)
}
#Grummfy,
#burningHat {
N’en jetez plus, je ne rentre plus dans mes chaussettes… :)
N’hésitez pas à partager vos méthodes de reset. A l’occasion je proposerai un reset tenant compte des bonnes pratiques en la matière ;)
}
Moi brutal ?
(J’avoue, ce commentaire est uniquement là pour foirer ton sélecteur :P)
Encore un superbe article… Merci !
Voici un article qui fera réfléchir à deux fois quelqu’un voulant ce lancer dans le métier de l’intégration :)
Merci pour ce billet remarquable.
#Bialog,
#Aurélien {
Merci pour votre soutien :)
}
T’es vraiment un bon malade Bruno. :)
#Aymeric {
Faut c’qui faut ! En fait, je crois qu’on a tous un grain :)
}
C’est avec un peu de retard que je découvre cet article. Merci pour l’info, j’ignorai qu’il existait autant de méthodes différentes. Personnellement, j’ai utilisé le reset conseillé par le W3C.
Bravo :)
Bonjour,
effectivement je faisais, moi aussi, du reset sans le savoir.
Peut être n’est-ce qu’une impression mais il me semble que le css est moins galère avec que sans :)
En tout cas merci d’avoir éclairé ma lanterne sur le sujet et les différences qui existent.
Je crois que ce que j’utilisais se rapproche le plus de la méthode de Eric Meyer et que la méthode yahoo parait plus simple a l’avenir.
Je test ;)
Merci pour cet article, vraiment c’est intéressant
3 Trackbacks
[...] thème conçu sur la base de SandBox et du Reset CSS d’Éric [...]
[...] peu de recherche sur google vous conduira vers une tonne de ressource consacrées au reset css dont css4design (le retour de ce cher br1o) qui a décrypté plusieurs façons de faire. N’aimant pas [...]
[...] 2.2 : la sidebar à la loupe, comprendre les widgets et déclarer une "WAR" — Lu 2 081 fois5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs — Lu 2 055 foisFramework JQuery pour écrire du Javascript non-intrusif — Lu 2 030 foisQuelques [...]