docINHERITANCE et HTML & BODY
download 
Plainte Transcription
INHERITANCE et HTML & BODY
INHERITANCE et HTML & BODY :
<html>
<style>
body::after {
content:"After BODY"
}
body {
background: yellow;
margin-top:2em;
border:10pt dashed maroon
}
html {
background: green;
padding:5em;
border:30pt dotted red
}
html:after::{
content:"After HTML"
}
fieldset {
height:10em;
border:2em solid green;
background:lightblue
}
p {
height:10em;
border:2em solid olive;
background:cyan
}
</style>
<body>
<fieldset>
<legend>Fielset border:green</legend>
<p>Paragraphe border:olive</p>
</fieldset>
Dans BODY
</body>
Dans HTML
</html>
Avec YANDEX :
Avec Sleipnir 6.1.10.4000 :
Avec Google Chrome Version 61.0.3163.100 (Build officiel)
(32 bits)
Avec BAIDU 43.23.1008.601 (2015)
Avec FireFox 10.0
Avec Opera 42.0.2393.137
Avec Sleipnir 2.9.15 b2915400 (2012) et Visionneur interne
d’EditPlus v3.50 (164) 2012
Constatez ci-dessus les différences de rendus avec différents
UAs.
Avec les deux derniers, très vieux User Agents (UA) se
conformant à un niveau inférieur de CSS, d’abord le HTML est
affiché, puis le BODY, dans notre cas-ci, BODY se superpose
exactement sur HTML en l’écrasant.
Si on supprime ou désactive la redéfinition (règle) de la
propriété height dans le sélecteur P à la ligne 25 du code
HTML ci-dessus, l’élément P héritera de cette propriété de
son parent (= l’élément [parent] qui le contient [l’élément en
question]) avec les anciens UAs (« inherited »), alors qu’avec
les récents UAs l’élément P n’hérite pas de cette propriété
« height » (idem pour « width ») qui aura donc la valeur
« initial » ou « par défaut » (donc « auto » [matique]) pour
le UA.
p{
// height:10em;
border:2em solid olive;
background:cyan
}
Avec Sleipnir 2x (normes CSS2)
Avec Sleipnir 6 (normes CSS3) :
