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

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

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+

Romer

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

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

guy.siaurg@free.invalid (inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/

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"

Mickaël Wolff <mickael.wolff@laposte.net> 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.
>
> 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

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+

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+

Romer

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.

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 ??!??

Olivier Miakinen <om+news@miakinen.net> wrote:

> > 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>

Tout à fait ;-)

> 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.

Il n'a pas oublié mais dans ce cas, il n'a pas bien fait la relation ni
percuté.

> > 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.

C'est un peu ela que j'appelle un mélange des déclarations où alors j'y
perds mon latin.
--
A+

Romer

Pierre Goiffon <pgoiffon@free.fr.invalid> wrote:

> > 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 ??!??

On ne se comprend pas très bien sur les termes : par écrasement,
j'entends replacement d'une règle par une autre avec disparition
complète des déclarations de la 1re au profit de la 2e.

--
A+

Romer

Le 17/04/2008 19:05, Bernd a écrit :
>
>> > 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.
>
> C'est un peu cela que j'appelle un mélange des déclarations où alors j'y
> perds mon latin.

Revenons-en aux fondamentaux. Au fait, je suppose qu'il fallait lire
« border » et non pas « background » ; je corrige en conséquence.

On a la règle 1 :
tr#odd { border : 1px dashed black ; width : 2em; }

Puis la règle 2 :
tr#odd { border : 2px solid ; }


Je rappelle que les valeurs par défaut de la propriété raccourcie border
sont les suivantes :
{
border-width : medium;
border-style : none;
border-color : (valeur de la propriété color);
}


Maintenant je récris la règle 1 avec uniquement des propriétés
élémentaires (enfin, presque, car je ne détaille pas les côtés top,
right, bottom et left, mais ça ne changerait rien au résultat) :
tr#odd {
border-width : 1px;
border-style : dashed;
border-color : black;
width : 2em;
}

Pareil pour la règle 2 :
tr#odd {
border-width : 2px;
border-style : solid;
border-color : (valeur de la propriété color);
}


Au final, les propriétés border-width, border-style et border-color sont
*définies* par la règle 2 (oui, *même* border-color), tandis que width
est définie par la règle 1. Cela donne :
tr#odd {
border-width : 2px;
border-style : solid;
border-color : (valeur de la propriété color);
width : 2em;
}

Soit, en propriétés raccourcies :
tr#odd { border : 2px solid ; width : 2em; }

Le 17/04/2008 21:47, j'écrivais :
>
> tr#odd {
> border-width : 1px;
> border-style : dashed;
> border-color : black;
> width : 2em;
> }
>
> tr#odd {
> border-width : 2px;
> border-style : solid;
> border-color : (valeur de la propriété color);
> }

À tout hasard, et pour qu'il devienne évident que c'est comme ça qu'on
doit le comprendre et pas autrement, les deux règles ci-dessus sont
strictement équivalentes aux sept règles ci-dessous :

tr#odd {
border-width : 1px;
}
tr#odd {
border-style : dashed;
}
tr#odd {
border-color : black;
}
tr#odd {
width : 2em;
}
tr#odd {
border-width : 2px;
}
tr#odd {
border-style : solid;
}
tr#odd {
border-color : (valeur de la propriété color);
}


Elles sont donc aussi équivalentes à :

tr#odd {
border-width : 1px;
}
tr#odd {
border-width : 2px;
}
tr#odd {
border-style : dashed;
}
tr#odd {
border-style : solid;
}
tr#odd {
border-color : black;
}
tr#odd {
border-color : (valeur de la propriété color);
}
tr#odd {
width : 2em;
}


Et à :

tr#odd {
border-width : 1px;
border-width : 2px;
}
tr#odd {
border-style : dashed;
border-style : solid;
}
tr#odd {
border-color : black;
border-color : (valeur de la propriété color);
}
tr#odd {
width : 2em;
}


Et à :

tr#odd {
border-width : 2px;
}
tr#odd {
border-style : solid;
}
tr#odd {
border-color : (valeur de la propriété color);
}
tr#odd {
width : 2em;
}


Et à :

tr#odd {
border-width : 2px;
border-style : solid;
border-color : (valeur de la propriété color);
width : 2em;
}


Et donc à :

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


Je pense que ça devrait être plus clair ainsi, non ?

Bernd wrote:
>>> #nav{padding:2em;
>>> width:10em;
>>> color:white;}
>
> On ne se comprend pas très bien sur les termes : par écrasement,
> j'entends replacement d'une règle par une autre avec disparition
> complète des déclarations de la 1re au profit de la 2e.

Ca n'aurait pas de sens.
Considérez ce html :

<div class="toto">
<p id="nav">...</p>
</div>

Et ces sélecteurs :

#nav
{
color: white;
padding: 1em;
}

..toto #nav
{
color: white;
}

Olivier Miakinen <om+news@miakinen.net> wrote:

> Maintenant je récris la règle 1 avec uniquement des propriétés
> élémentaires (enfin, presque, car je ne détaille pas les côtés top,
> right, bottom et left, mais ça ne changerait rien au résultat) :
> tr#odd {
> border-width : 1px;
> border-style : dashed;
> border-color : black;
> width : 2em;
> }
>
> Pareil pour la règle 2 :
> tr#odd {
> border-width : 2px;
> border-style : solid;
> border-color : (valeur de la propriété color);
> }
>
>
> Au final, les propriétés border-width, border-style et border-color sont
> *définies* par la règle 2 (oui, *même* border-color), tandis que width
> est définie par la règle 1. Cela donne :
> tr#odd {
> border-width : 2px;
> border-style : solid;
> border-color : (valeur de la propriété color);
> width : 2em;
> }

C'est clair (me semble t-il) : quand 2 propriétés sont identiques avec
valeurs différentes (comme width:2px et width:3px) c'est la 2e qui
l'emporte par écrasement. Si une propriété est unique , elle est
conservée.
Ça correspond à des essais (non exaustifs) que j'avais faits.
--
A+

Romer

Olivier Miakinen <om+news@miakinen.net> wrote:

....

> Et donc à :
>
> tr#odd {
> border : 2px solid;
> width : 2em;
> }
>
>
> Je pense que ça devrait être plus clair ainsi, non ?

C'est clair de chez clair ;-) Merci.
Et au final, c'est logique quand on sait que la valeur de la propriété
située en aval écrase celle d'amont et s'ajoute si l'une d'elle n'existe
pas.
--
A+

Romer

--{ Bernd a plopé ceci: }--

> C'est clair (me semble t-il) : quand 2 propriétés sont identiques avec
> valeurs différentes (comme width:2px et width:3px) c'est la 2e qui
> l'emporte par écrasement. Si une propriété est unique , elle est
> conservée.

C'est pas en gros la description du C de CSS ?


--
Non. Ça avait été fufé lors de l'AAD1.
Personne n'ayant été capable de présenter des arguments d'opposition sur le
fond, ce sont donc les mouches qui en ont fait les frais une nouvelle fois.

Le 18/04/2008 15:21, Thierry B. a écrit :
>
>> C'est clair (me semble t-il) : quand 2 propriétés sont identiques avec
>> valeurs différentes (comme width:2px et width:3px) c'est la 2e qui
>> l'emporte par écrasement. Si une propriété est unique , elle est
>> conservée.
>
> C'est pas en gros la description du C de CSS ?

Précisément. C'est la toute dernière des règles de cascade, celle que
l'on applique lorsque aucune des autres n'a réussi à trancher.

On Fri, 18 Apr 2008, Olivier Miakinen wrote:

> C'est la toute dernière des règles de cascade, celle que
> l'on applique lorsque aucune des autres n'a réussi à trancher.

Pour quelques exemples, voir
http://www.unics.uni-hannover.de/nht...ing-order.html

--
In memoriam Alan J. Flavell
http://niwo.mnsys.org/saved/~flavell/charset/

Olivier Miakinen a écrit :

> <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.
>
Personnellement j'utilise ce chargement avec les comentaires
conditionnes de internet explorer cela me permet d'avoir une feuille de
style pour les navigateurs non MS une pour IE ancienne version et une
pour IE toute version
Je trouve cela beaucoup plus élégants et maintenable que de faire une
seule feuille et d'utiliser les Hacks CSS IE


>
> 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.
>
punbb éclate sa feuille de style justement en partie définition caractère
partie définition bordure etc ...

a priori les afficionados de punbb apprécie moi je trouve ça assez
imbitable mais vu la structure du machin je comprends pourquoi ils en
sont arrivés là.