héritage de "font-size"

**Jeanluc** · 1 Septembre 2005

Bonjour,

J'ai presque honte de poser une question qui me semble si basique. :blush:

J'essaie de définir une taille de police (font-size) pour une page entière en l'associant à la balise "body", mais ça ne marche pas. Le "font-family" que je place à côté marche sans problème. Où est l'astuce ?

Exemple :

<html>
<head>
</head>
<body style="font-size: 36px;font-family: Arial;">
	<table><tr><td>
  Pourquoi si petit ?
	</td></tr></table>
</body>
</html>

Le texte apparaît bien en "Arial", mais pas dans la taille demandée. Dois-je conclure que "font-size" n'est pas héritable ? Y a-t-il une astuce ?

Jean-Luc

Commmint · 1 Septembre 2005

Salut,

Tu devrais séparer ton HTML des styles, la lisibilité sera plus facile et l'application garantie à ta balise body :

<html>
<head>
<style type="text/css">
body{
font-size: 36px;
font-family: Arial;
}
</style>
</head>
<body>
<table><tr><td>Pourquoi si petit ?</td></tr></table>
</body>
</html>

MACHINE ARRIERE TOUTE

tu as raison le contenu de TD n'hérite pas de BODY

par contre :

<style type="text/css">
<!--
table {
	font-size: 40px;
}
-->
</style>

fonctionne

Modifié 1 Septembre 2005 par Commmint

**Jeanluc** · 1 Septembre 2005

Comme tu le dis, le contenu de TD n'hérite pas de BODY et c'est pareil avec mes 3 browsers.

J'ai constaté aussi que, si j'associe "font-size" à TABLE, les TD juste en-dessous en héritent, mais ceux qui sont à l'intérieur d'une TABLE imbriquée n'en héritent pas.

Quelqu'un pourrait-il expliquer les particularités de "font-size" et, si possible, un moyen de contourner le problème, sans répéter des "font-size" un peu partout ?

Jean-Luc

Xavier · 1 Septembre 2005

Comme tu le dis, le contenu de TD n'hérite pas de BODY

<{POST_SNAPBACK}>

sauf si...

Ça vous dit un peu d'histoire ? Eh oui, pour comprendre ça, il faut se projetter en arrière dans le temps, à l'époque de Netscape 4 et des tout début des CSS.

Netscape 4 gérait très mal (voire même pas du tout) l'héritage des propriétés CSS. Ainsi, les auteurs ont fait ce que tu as fait, mettre en grand le body, et pas de soucis, ce n'était pas hérité, le contenu tableau restait petit.

Sauf que le jour où un autre navigateur arrive et supporte correctement l'héritage... il affiche plein de tableaux en grand, donc personne n'en veut. Donc aucun navigateur ne l'a fait !

Aucun ? Attendez, l'histoire n'est pas finie, d'ailleurs elle commence seulement à être intéressante

Les browsers modernes supportent très bien l'héritage. Même pour les tableaux. Mais alors... pourquoi c'est petit ici ? La réponse est tout simplement : parce qu'il n'y a pas de doctype.

Si votre page n'a pas de doctype, les browsers font du doctype switching. Ils considèrent que si la page n'a pas de doctype, c'est une grosse ****** datant de l'époque de Netscape 4, époque à laquelle les auteurs faisaient n'importe quoi n'importe comment, du moment que ça marchait. Ils adoptent alors une kyrielle (le mot est faible !) de comportements censés émuler les navigateurs de cette époque et leur mauvais respect des standards. Ces comportements "étranges" appelés "Quirks" :

Modèle de boites microsoft
Mauvaise gestion de l'héritage
Support de javascripts bourrés d'erreurs
Globalement beaucoup plus d'erreurs sont permises au niveau des CSS, des imbrications, etc.
Et des milliers et des milliers pour ne pas dire des millions d'autres comportements totalement imprévisibles et non ou mal documentés, présents uniquement pour des raisons de rétrocompatibilité avec les anciennes pages (voir par exemple une liste non exhaustive pour Mozilla, je pense que d'autres navigateurs ont des listes de ce genre, qui doivent d'ailleurs être assez proches.)

Conclusion : ne développez qu'en mode de respect des standards, vous vous épargnerez des comportements totalement incompréhensibles de ce style. D'ailleurs il suffit de mettre un doctype a la page pour que l'héritage soit parfaitement géré (sauf bien sur par les navigateurs datant de cette époque, Netscape 4 et IE-pré-6 (= 5.5 et mois) :fou: )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Dorénavant, vous ne développerez plus que des pages avec doctype. C'est beaucoup plus sûr !

PS : attention, évidemment il y a une complication supplémentaire : tous les doctypes ne font pas passer les navigateurs en mode standards :whistling: Voir http://hsivonen.iki.fi/doctype/ pour plus de détails :rolleyes:

**Jeanluc** · 1 Septembre 2005

Mille mercis pour ta réponse, Xavier.

Sur ma page originale, j'avais

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

mais ce n'était pas suffisant pour Firefox (ça marchait avec Opera et Internet Explorer).

Avec la solution que tu as donnée, c'est impec partout. Heureusement que tu étais là.

Jean-Luc

Xavier · 1 Septembre 2005

Le doctype à utiliser pour faire du HTML 4.01 transitionnal est

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Avec l'URL donc, sinon il est considéré comme faisant partie de cette époque révolue. D'ailleurs c'est étonnant que ça fonctionnait avec IE et Opera... c'est contradictoire avec la ligne HTML 4.01 Transitional doctype without a URL de la page http://hsivonen.iki.fi/doctype/ ... :unsure:

kozaki · 5 Décembre 2008

Pffff !! Quelle explication remarquable !

J'en avais jamais lu d'aussi claire et limpide sur le "doctype switching" que celle de Xavier...

ps : vous pouvez maintenant me lyncher si vous pensez qu'on ne doit jamais répondre à un post vieux de 3 ans

Connexion

héritage de "font-size"

Sujets conseillés

Jeanluc

Commmint

Jeanluc

Xavier

Jeanluc

Xavier

kozaki

Veuillez vous connecter pour commenter

Parcourir

Activité