Règle CSS en double

Le
romer
Hi,

Je viens de découvrir dans une longue feuille de style css que 2
sélecteurs identiques étaient présents :

En simplifiant : on a ligne 10
#nav{padding:0;
width:5em;
color:white;}

et ligne 500 :
#nav{padding:2em;
width:10em;}

Que se passe t-il dans ce cas ?
- est-ce que les déclarations contenus dans les règles se mélangent et
que les déclarations l'emportent sur d'autres ?
- celle située le plus bas l'emporte ?
On aura padding:0 ou padding 2em ?

En faisant des essais, je n'arrive pas à trouver ce qui se passe
vraiment. De plus je n'ai pas IE 6 et 7 - donc je n'ose pas faire de
transformations sans pouvoir vérifier sur ces 2 navigateurs terroristes.

Qu'en pensez-vous, outre le fait qu'évidemment il faille proscrire ce
genre de chose.

Merci
--
A+

Romer
Questions / Réponses high-tech
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 3
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Pierre Goiffon
Le #22077781
Bernd wrote:
Je viens de découvrir dans une longue feuille de style css que 2
sélecteurs identiques étaient présents :

En simplifiant : on a ligne 10
#nav{padding:0;
width:5em;
color:white;}

et ligne 500 :
#nav{padding:2em;
width:10em;}

Que se passe t-il dans ce cas ?



Voir la recommandation :
http://www.w3.org/TR/CSS21/cascade.html#cascading-order

A ma connaissance les règles sont bien suivies quelques soit le navigateur
romer
Le #22077771
Pierre Goiffon
Voir la recommandation :
http://www.w3.org/TR/CSS21/cascade.html#cascading-order

A ma connaissance les règles sont bien suivies quelques soit le navigateur



Je retiens cela:
"if two declarations have the same weight, origin and specificity, the
latter specified wins".

Merci du lien ; cependant cela ne répond pas tout à fait à mon cas
particulier de sélecteurs identiques contenant des déclarations
différentes. Cela n'est pas étonnant en fait car le cas où 2 sélecteurs
identiques se trouvent dans la même feuille est aberrant en soi et ce
cas n'est sans doute pas envisagé.
--
A+

Romer
Mickaël Wolff
Le #22077761
Bernd a écrit :
Merci du lien ; cependant cela ne répond pas tout à fait à mon cas
particulier de sélecteurs identiques contenant des déclarations
différentes.



Ben si, c'est que que tu as cité.

Cela n'est pas étonnant en fait car le cas où 2 sélecteurs
identiques se trouvent dans la même feuille est aberrant en soi



Ben non. Pourquoi ?

et ce cas n'est sans doute pas envisagé.



Ben si, et c'est la dernière déclaration qui écrase la précédente.

tr#odd { background: 1px dashed black ; }
tr#odd { background: 2px solid ; }

Au final ça donnera :

tr#odd { background: 2px solid black ; }

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
Guy Gruais
Le #22077751
Bonjour,

Vous allez être infiniment heureux d'apprendre que Bernd vient d'écrire :


... De plus je n'ai pas IE 6 et 7 - donc je n'ose pas faire de
transformations sans pouvoir vérifier sur ces 2 navigateurs
terroristes.



Faut pas travailler pour des terroristes

--
Cordialement

(inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/
Pierre Goiffon
Le #22077741
Bernd wrote:
Voir la recommandation :
http://www.w3.org/TR/CSS21/cascade.html#cascading-order



Je retiens cela:
"if two declarations have the same weight, origin and specificity, the
latter specified wins".

Merci du lien ; cependant cela ne répond pas tout à fait à mon cas
particulier de sélecteurs identiques contenant des déclarations
différentes.



Je ne comprend pas votre dernière réponse.

Reprenons l'exemple que vous donniez :

on a ligne 10
#nav{padding:0;
width:5em;
color:white;}

et ligne 500 :
#nav{padding:2em;
width:10em;}

Donc sur un même sélecteur les 2 propriétés padding et width définis à
des valeurs différentes.
Comme vous l'avez lu, le dernière déclaré "gagne"
romer
Le #22077711
Pierre Goiffon
Je ne comprend pas votre dernière réponse.

Reprenons l'exemple que vous donniez :

on a ligne 10
#nav{padding:0;
width:5em;
color:white;}

et ligne 500 :
#nav{padding:2em;
width:10em;}

Donc sur un même sélecteur les 2 propriétés padding et width définis à
des valeurs différentes.
Comme vous l'avez lu, le dernière déclaré "gagne"



Oui si les déclarations sont strictement identiques dans les 2 règles
mais sinon, j'ai l'impression que Safari et Fiefox mélange les
déclarations en ne gardant que les éléments en commun dans les deux.

Dans l'exemple précédent, on obtient apparemment :

#nav{padding:2em;
width:10em;
color:white;}

Donc, la couleur présente en lg 10 se retrouve au final - ce qui
contredirait la thèse de l'écrasement pur et simple.
L'ennui est que je ne sais pas ce que IE va faire et c'est ce qui me
fait hésiter à modifier les 2 règles pour en faire une seule.
--
A+

Romer
romer
Le #22077721
Mickaël Wolff
> Cela n'est pas étonnant en fait car le cas où 2 sélecteurs
> identiques se trouvent dans la même feuille est aberrant en soi

Ben non. Pourquoi ?



Quel intérêt sinon par oubli de mettre deux sélecteurs identiques plutôt
qu'un si le 2e écrase le 1er ?

Ben si, et c'est la dernière déclaration qui écrase la précédente.

tr#odd { background: 1px dashed black ; }
tr#odd { background: 2px solid ; }

Au final ça donnera :

tr#odd { background: 2px solid black ; }



Dans mon cas, légèrement différent, je viens de faire des essais, ce
n'est pas aussi simple - je crois, sans pouvoir en être sûr qu'on
obtient un mélange des deux.

tr#odd { background: 1px dashed black ;
width:2em;}
tr#odd { background: 2px solid ; }

se comporte comme :

tr#odd { background: 2px solid ;
width:2em;}




--
A+

Romer
romer
Le #22077701
Guy Gruais
> ... De plus je n'ai pas IE 6 et 7 - donc je n'ose pas faire de
> transformations sans pouvoir vérifier sur ces 2 navigateurs
> terroristes.

Faut pas travailler pour des terroristes.



Si oui je perds mon boulot car plus personne ou presque n'ira lire un
site défiguré.
J'ai un copain enseignant (qui produit du "pointu" en interne fac et qui
se fiche pas mal d'être lu par l'extérieur, a écrit dans l'accueil : "si
vous avez IE, passez votre chemin" - cela dit, si tout le monde avait
fait cela depuis le début...
--
A+

Romer
Olivier Miakinen
Le #22077671
Le 16/04/2008 19:28, Bernd répondait à Mickaël Wolff :

> Cela n'est pas étonnant en fait car le cas où 2 sélecteurs
> identiques se trouvent dans la même feuille est aberrant en soi

Ben non. Pourquoi ?



Quel intérêt sinon par oubli de mettre deux sélecteurs identiques plutôt
qu'un si le 2e écrase le 1er ?



<tétracapilloectomie>

Cela pourrait être dans deux feuilles de style différentes, auquel cas
cela peut justement présenter l'intérêt d'avoir des définitions dans
une première feuille, écrasées ou non selon que l'on inclue ou pas la
deuxième.

Cela pourrait être aussi une seule feuille générée par CGI (PHP par
exemple), où c'est le code PHP qui inclut ou non des définitions qui
s'écrasent les unes les autres.

</tétracapilloectomie>

Mais dans le cas général, pour une feuille de style qui est terminée et
pas en cours de tests, en effet cela ne présente que peu d'intérêt. Cela
dit, il est bon de savoir que c'est possible.

Ben si, et c'est la dernière déclaration qui écrase la précédente.





Oui, mais :

tr#odd { background: 1px dashed black ; }
tr#odd { background: 2px solid ; }

Au final ça donnera :

tr#odd { background: 2px solid black ; }





Non ! Parce que la propriété background est une propriété raccourcie qui
fixe une valeur à toutes les sous-propriétés qu'elle résume. D'ailleurs
Bernd devrait le savoir, au moins depuis ma réponse à sa question du 5
avril.

Au final, ça donnera :

tr#odd { background: 2px solid ; }

Dans mon cas, légèrement différent, je viens de faire des essais, ce
n'est pas aussi simple - je crois, sans pouvoir en être sûr qu'on
obtient un mélange des deux.



Non, pas du tout.

tr#odd { background: 1px dashed black ;
width:2em;}
tr#odd { background: 2px solid ; }

se comporte comme :

tr#odd { background: 2px solid ;
width:2em;}



Oui, c'est tout à fait normal, cf. supra pour la piqûre de rappel sur ce
qu'est une propriété raccourcie.
Pierre Goiffon
Le #22077631
Bernd wrote:
on a ligne 10
#nav{padding:0;
width:5em;
color:white;}

et ligne 500 :
#nav{padding:2em;
width:10em;}



Dans l'exemple précédent, on obtient apparemment :

#nav{padding:2em;
width:10em;
color:white;}

Donc, la couleur présente en lg 10 se retrouve au final - ce qui
contredirait la thèse de l'écrasement pur et simple.



?!!???
Bien sûr que c'est ce que vous obtenez. Pourquoi donc color
disparaitrait alors qu'elle n'est pas redéfinie ??!??
Publicité
Poster une réponse
Anonyme