A lire absolument dans ce contexte
Bien que les pourcentages et les Ems soient sans doute la meilleure méthode pour le dimensionnement des polices, il y a deux problèmes principaux à surmonter :
- Cohérence entre les navigateurs
- L'héritage et son effet sur les éléments imbriqués
Cohérence entre les navigateurs
Les navigateurs interprètent la taille relative des polices de différentes manières, notamment en ce qui concerne l'héritage. Par exemple, on peut définir la taille de la police dans la balise body :
body { font-size : 80% ; }
Pour la plupart des navigateurs, cela correspond à 80 % du comportement de la police par défaut de l'élément. Un élément H1 standard sera rendu à 200 % de la taille de la police par défaut. Ainsi, si la règle ci-dessus est appliquée à la page, l'élément H1 sera rendu à 160 % (200 % x 80 % = 160 %) de la taille de la police par défaut.
Mac/Opera6 n'appliquera pas cette règle de manière cohérente à l'ensemble du contenu. Le texte dans les tableaux reste à la taille par défaut. Mac/Netscape4 et Win/Netscape4 appliquent cette règle aux titres ainsi qu'au texte contenu dans les balises de paragraphe, ce qui donne à tout le contenu de la page une taille de 80 %. L'héritage et ses effets sur les éléments imbriqués
La taille relative des polices se heurte également à des problèmes d'héritage et à ses effets sur les éléments imbriqués. Par exemple, une règle comme celle qui suit peut causer des problèmes d'héritage :
p, ul { font-size : 85% ; }
Un échantillon montrant le problème des paragraphes et des listes imbriquées non ordonnées.
Tout le contenu d'un paragraphe ou d'une liste non ordonnée sera mis à l'échelle à 80 % de la taille par défaut du navigateur de l'utilisateur. Le problème se pose lorsqu'il y a une liste non ordonnée imbriquée. L'élément de la liste imbriquée hérite de la taille relative de la police et l'applique à nouveau, ce qui donne une taille de 72,25 % aux éléments de la liste imbriquée (85 % x 85 % = 72,25 %).
Ce problème est facilement résolu grâce à une autre règle qui ramène tous les éléments des listes imbriquées à une taille de police de 85 % :
ul ul { font-size : 100% ; }
Plus d'informations ici
Taille relative des polices et héritage