Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

CSS2 : héritage (selon nav)

10 réponses
Avatar
Olivier Masson
Bonjour,

Un problème réservé aux fins connaisseurs de CSS2.

Je n'ai lu nulle part que l'héritage d'un parent à un enfant inline est
"total".

Par exemple :
<p id="fond_rouge">Lorem ipsum dolor <strong>sit amet consectetuer
Aenean</strong> Sed odio eros libero.</p>

avec #fond_rouge { background-color: red }

Tout sera en fond rouge. En quelle honneur ?

Ce type de comportement est documenté, par exemple, pour text-decoration
: "Quand elle est appliquée à un élément de type en-ligne, ou agit sur
celui-ci, cette propriété influence toutes les boîtes générées par cet
élément". Mais je n'ai pas trouvé de généralité.

Plus complexe : selon les propriétés CSS2 (donc la traduc, saluons-le au
passage, a été corrigée entre autres par Olivier Miakinen :)),
text-decoration n'hérite pas sauf cas particulier.

Je fais ça :
<ins class="surbrillance">Lorem ipsum dolor
<ol>
<li>premier</li>
<li>deuxième</li>
</ol>
</ins>

et pour mixer avec le problème 1/, j'ajoute ça :
ins { background-color: red; }

La liste est :
- sur FF : sans style
- sur Opéra : soulignée (héritage <ins> pour le text-decoration)
- sur IE7 : fond rouge et soulignée (héritage <ins> pour background et
decoration)
- sur Safari : soulignée

Qui a raison ?

Merci.

10 réponses

Avatar
Olivier Masson
Olivier Masson a écrit :
Bonjour,

Un problème réservé aux fins connaisseurs de CSS2.

Je n'ai lu nulle part que l'héritage d'un parent à un enfant inline est
"total".

Par exemple :
<p id="fond_rouge">Lorem ipsum dolor <strong>sit amet consectetuer
Aenean</strong> Sed odio eros libero.</p>

avec #fond_rouge { background-color: red }

Tout sera en fond rouge. En quelle honneur ?




J'ai oublié de préciser (sinon c'est évident) que background n'est *pas*
censé se transmettre d'après les propriétés CSS2.
Avatar
SAM
Olivier Masson a écrit :

Je n'ai lu nulle part que l'héritage d'un parent à un enfant inline
est "total".

Par exemple :
<p id="fond_rouge">Lorem ipsum dolor <strong>sit amet consectetuer
Aenean</strong> Sed odio eros libero.</p>

avec #fond_rouge { background-color: red }

Tout sera en fond rouge. En quelle honneur ?



J'ai oublié de préciser (sinon c'est évident) que background n'est *pas*
censé se transmettre d'après les propriétés CSS2.




Ben ... la boîte contenante est rouge ce n'est donc pas jaune.
Re ben ... le strong est sans background donc transparent donc ?

il n'y a sans doute pas d'héritage mais le résultat est le même
Avatar
Olivier Miakinen
Le 05/12/2007 22:13, Olivier Masson a écrit :

Par exemple :
<p id="fond_rouge">Lorem ipsum dolor <strong>sit amet consectetuer
Aenean</strong> Sed odio eros libero.</p>

avec #fond_rouge { background-color: red }

Tout sera en fond rouge. En quelle honneur ?



J'ai oublié de préciser (sinon c'est évident) que background n'est *pas*
censé se transmettre d'après les propriétés CSS2.



En effet, il ne se transmet pas :

http://www.yoyodesign.org/doc/w3c/css2/colors.html#background-properties
<cit.>
Initiale: transparent
</cit.>

La couleur du fond de ton <strong> est transparente et pas rouge, et
elle laisse donc voir par transparence la couleur rouge du paragraphe
parent.
Avatar
Olivier Miakinen
Le 05/12/2007 23:43, SAM a écrit :

Ben ... la boîte contenante est rouge ce n'est donc pas jaune.
Re ben ... le strong est sans background donc transparent donc ?

il n'y a sans doute pas d'héritage mais le résultat est le même



Voilà. Désolé de ma réponse qui fait doublon avec la tienne.
Avatar
SAM
Olivier Masson a écrit :

Plus complexe : selon les propriétés CSS2 (donc la traduc, saluons-le au
passage, a été corrigée entre autres par Olivier Miakinen :)),
text-decoration n'hérite pas sauf cas particulier.

Je fais ça :

ins { background-color: red; }

<ins class="surbrillance">Lorem ipsum dolor
<ol>
<li>premier</li>
<li>deuxième</li>
</ol>
</ins>



à mon avis : erreur grammaticale ...
le OL n'aurait pas le droit d'être dans un INS
alors ... les brouteurs font ce qu'ils peuvent pour essayer de
comprendre ce que tu veux

La liste est :
- sur FF : sans style



Non pas avec le mien, elle a bien un style de liste numérotée
et pour le fond : normal, FF a clos le INS dès qu'il a trouvé OL
et pour le souligné : même punition

- sur Opéra : soulignée (héritage <ins> pour le text-decoration)



Ha ? Lui il aurait choisi de rajouter un INS autour des LI ?
Néanmoins, mon Opera fait exactement comme FF

- sur IE7 : fond rouge et soulignée (héritage <ins> pour background et
decoration)



M'étonne pas ... toujours aussi approximatif et arrangeant
(laxiste on dit ?)

- sur Safari : soulignée



Ha ! donc OK avec Opera ?

Qui a raison ?



iCab met tout en rouge plus souligné

Merci.



Merci de tester avec qque chose qui n'enduise pas les brouteurs de
perplexité ?

comme :

<ins class="surbrillance">Lorem ipsum dolor</ins>
<ol>
<li><ins>premier</ins></li>
<li><ins>deuxième</ins></li>
</ol>

ou :

.surbrillance { background-color: red; text-decoration: underline }

<div class="surbrillance">Lorem ipsum dolor
<ol>
<li>premier</li>
<li>deuxième</li>
</ol>
</div>

ou :

.surbrillance { background-color: red; text-decoration: underline }
.surbrillance OL { background: white }

<div class="surbrillance">Lorem ipsum dolor
<ol>
<li>premier</li>
<li>deuxième</li>
</ol>
</div>


--
sm
Avatar
SAM
SAM a écrit :
Olivier Masson a écrit :



- sur Opéra : soulignée (héritage <ins> pour le text-decoration)



Ha ? Lui il aurait choisi de rajouter un INS autour des LI ?
Néanmoins, mon Opera fait exactement comme FF



sot rit ... mon Opera fait bien ce que tu dis


--
sm
Avatar
Olivier Miakinen
Le 06/12/2007 00:16, SAM a écrit :
Olivier Masson a écrit :



Tiens ? Je n'avais pas lu la suite. Désolé.

Plus complexe : selon les propriétés CSS2 (donc la traduc, saluons-le au
passage, a été corrigée entre autres par Olivier Miakinen :)),
text-decoration n'hérite pas sauf cas particulier.





Je ne me rappelais même pas avoir signalé des coquilles pour CSS2,
mais c'est très possible en effet car je le fais pour les docs qui
m'intéressent.

[...]



à mon avis : erreur grammaticale ...
le OL n'aurait pas le droit d'être dans un INS



Je crois que si : INS et DEL peuvent contenir aussi bien des éléments
%block que %inline, or UL et OL font partie de %list qui fait partie
de %block.

Pour la question d'Olivier je n'ai pas encore d'avis. Je dois y réfléchir.
Avatar
Olivier Masson
Olivier Miakinen a écrit :

à mon avis : erreur grammaticale ...
le OL n'aurait pas le droit d'être dans un INS



Je crois que si : INS et DEL peuvent contenir aussi bien des éléments
%block que %inline, or UL et OL font partie de %list qui fait partie
de %block.

Pour la question d'Olivier je n'ai pas encore d'avis. Je dois y réfléchir.



En effet, aucune erreur grammaticale (j'en suis plus là hein ! Bon, ok
j'ai donné un autre exemple digne d'un newbie :)).
C'est bien un problème d'héritage. D'ailleurs, un background-color:
inherit sur le <ol> rend bien le fond.
Avatar
Olivier Masson
SAM a écrit :

Ben ... la boîte contenante est rouge ce n'est donc pas jaune.
Re ben ... le strong est sans background donc transparent donc ?

il n'y a sans doute pas d'héritage mais le résultat est le même



Euh... je cherche encore à comprendre ce que j'ai voulu dire hier soir :)
J'étais dans ma découverte du problème d'héritage, du coup j'en ai vu
partout.
On oublie donc cet exemple stupide.
Avatar
Olivier Masson
Olivier Masson a écrit :

En effet, aucune erreur grammaticale (j'en suis plus là hein ! Bon, ok
j'ai donné un autre exemple digne d'un newbie :)).
C'est bien un problème d'héritage. D'ailleurs, un background-color:
inherit sur le <ol> rend bien le fond.



Je pense que le problèm est du (mais c'était volontaire) au cas spécial
de ins et del qui sont de type %flow. Ce sont des éléments qui peuvent
contenir des blocs alors qu'ils sont inline. Et on voit que des que l'on
sort du banal, les UA paniquent.

Il est intéressant de voir que si l'on ajoute un border à ins, dans le
cas que je citais, seul IE7 entoure également les <li> (mais pas le
<ol>, ce qui peut sembler logique même s'il n'y a pas de réel
correspondance avec le standard je crois.)
Les autres ne le font pas et Opera à un comportement un peu curieux
puisqu'il finit la bordure en-dessous de <ol>, créant donc une ligne
supplémentaire.