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.
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
Pierre Goiffon wrote:
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
Pierre Goiffon <pgoiffon@free.fr.invalid> wrote:
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+
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
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.
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
Pierre Goiffon wrote:
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
Pierre Goiffon <pgoiffon@free.fr.invalid> wrote:
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+
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
Mickaël Wolff wrote:
> 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.
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.
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.
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.
> ... 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
Guy Gruais <guy.siaurg@free.invalid> wrote:
> ... 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+
> ... 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 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.
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.
Oui, c'est tout à fait normal, cf. supra pour la piqûre de rappel sur ce qu'est une propriété raccourcie.
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.
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.
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.
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.
