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.
> 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é.
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
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é.
> 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é.
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
romer
Pierre Goiffon 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
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.
> 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.
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; }
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;
}
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; }
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 : 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 : 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 : 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 ?
Pierre Goiffon
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; }
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.
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; }
romer
Olivier Miakinen <om+ 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
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+
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
romer
Olivier Miakinen <om+ 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:
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+
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
Thierry B.
--{ 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.
--{ 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.
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.
Olivier Miakinen
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.
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.
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.
Andreas Prilop
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/nhtcapri/cascading-order.html
-- In memoriam Alan J. Flavell http://niwo.mnsys.org/saved/~flavell/charset/
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/nhtcapri/cascading-order.html
--
In memoriam Alan J. Flavell
http://niwo.mnsys.org/saved/~flavell/charset/
