 |
|
|
| |
| PRATIQUE CLIENTS WEB |
|
|
|
| Gérer simplement les conflits de règles CSS |
| |
| Prépondérance et spécificité permettent aux développeurs de se tirer de la plupart des situations déconcertantes.
(02/06/2005) |
 |
 |
Forum |
|
|
Réagissez
dans les forums de JDN Développeurs
|
Parvenus à une certaine taille, les fichiers CSS peuvent mélanger diverses règles
s'appliquant à de mêmes cibles, et se contredisant entre elles. Résultat : il
se peut que l'affichage ne soit pas celui attendu, et que la règle fautive ne
soit pas trouvable ou compréhensible.
Lorsque deux
règles sont en conflit pour un même élément, CSS fait en sorte d'employer celle
qui logiquement s'applique le plus spécifiquement à celui-ci.
Si deux règles sont définies au même niveau, c'est la dernière dans le fichier
qui prend le pas :
body { background : red; }
...
body {background : blue; }
Le fond ici sera bleu. La donne est différente quand un élément généraliste se
trouve face à un élément plus ciblé :
i { color: blue; }
...
span i { color: red; }
|
Forum |
|
|
Réagissez
dans les forums de JDN Développeurs
|
La règle de la spécificité entre en jeu ici : au sein du span,
le contenu de p sera rouge, au grand dam de la
première règle définie. Et ce, quel que soit l'ordre d'apparition de ces règles
dans le fichier CSS.
Plus globalement, on pourrait classer les sélecteurs par importance (les id sont
plus importants que les classes, elles-mêmes plus importantes que les éléments
de base), et voir le poids de chaque règle par le nombre de sélecteurs importants
qu'elle comporte.
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius |
|
|
|
|
|
|
