Les poids en CSS
Par mrjay42, vendredi 2 juillet 2010 à 13:09 :: xhtml/css/javascript :: #52 :: rss
Un truc qui peut sembler évident à ceux qui mastérisent déjà le CSS
Mais pour moi, je trouve que ça déchire, et que cette notion du CSS devrait être explicitée plus clairement dans beaucoup de tutoriels : je pense notamment au tutoriel "officiel" (appellation tombée en désuétude) du Site Du Zér0 traitant du (x)html/CSS
Voici l'idée :
En CSS on peut appliquer des règles de formatage sur un élément, et on peut même empiler plusieurs de ces règles les unes par dessus les autres
Voici le problème :
Comment faire pour savoir et gérer les priorités d'interprétation lorsqu'on empile des règles CSS les unes par dessus les autres
Réponse de moche :
On met des !important;
Oui mais non...parce que !important, c'est un truc de malade, dans une CSS de plusieurs milliers de lignes, ça fait vraiment chi** à débugger et/ou à lire ! Et puis de important en important on ne s'y retrouve plus et on ne sait plus ce qui l'est vraiment !
Réponse correct :
Connaitre les poids en CSS !
Voici donc un joli tableau récapitulatif des poids en CSS :
Ainsi, une classe vaut 10 un ID vaut 1000 etc.
Ce que cela signifie ?
Bah par exemple, votre site doit fonctionner sous IE6, ce navigateur de haute performance est bizarrement incapable de gérer des classes CSS qui s'empilent les une sur les autres, et interprêtera le CSS à sa façon (allez savoir laquelle...).
Pour lui indiquer que ça :
#tabcontent a.btn.biglblue span{padding:0 20px;}
est plus important que ça :
a.btn.biglblue span{padding:0 60px;}
on a rajouté #tabcontent (un id) ce qui rajoute 1000 points en terme de poids CSS...Et ça, IE6 le comprends figurez vous :)
Vous trouverez de meilleures explications ici : http://www.vcarrer.com/2009/09/css-specificity-cheat-sheet.html
L'info m'a été fourni par Thoams et je le remercie
La source de l'info est ici