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