mercredi 13 juin 2007
Pourquoi ai-je un rendu différent entre Firefox Windows et Firefox Mac ?
Conception HTML et CSS - Lien permanent
Vous l'avez peut-être déjà constaté, il arrive parfois que le rendu d'une page soit différent entre Firefox sous Windows et son homologue sous Mac. Certains en concluent un peu trop vite à un bug du moteur gecko ou encore que celui-ci serait différent entre les 2 plates-formes. Heureusement il n'en est rien, il s'agit bel et bien du même moteur. Alors d'ou vient cette différence ?
Voici un exemple extrêmement simple, un paragraphe de texte de 300 pixels de large :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
p{width:300px; background:#EEE;}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, (...) anim id est laborum.</p>
</body>
</html>
Et voici ce que l'on obtient sous Firefox Mac (à gauche) et Firefox Windows (à droite) :
On le voit bien ici, la différence vient tout simplement d'une hauteur de ligne différente. On n'y pense jamais assez, mais la propriété line-height est fixée par défaut à "normal" lorsque le concepteur ne la précise pas, laissant alors libre le navigateur de calculer une valeur "raisonnable" pour celle-ci. Cette valeur varie selon les systèmes d'exploitation, en fonction notamment de la résolution logique.
Voici l'extrait de la norme CSS 2 concernant la valeur "normal" :
normal
Tells user agents to set the computed value to a "reasonable" value based on the font size of the element. The value has the same meaning as <number>. We recommend a computed value for 'normal' between 1.0 to 1.2.
Voici maintenant la même page avec une hauteur de ligne fixée à 1.2 :
Le rendu est maintenant uniforme sur l'ensemble des navigateurs, et conforme au résultat attendu.
Conclusion : pensez à fixer vos hauteurs de ligne !
Commentaires
Sur un petit texte, c'est certainement valable mais si on suit ton exemple on imagine qu'on se retrouvera avec une différence sur de gros pavés de texte.
Une explication à ce propos ? :o
C'est le cas, tu retrouvera cette différence dans les mêmes proportions, par contre ce sera moins perceptible que sur un petit bloc sur lequel une différence de quelques pixels va te sauter aux yeux.
De plus on a généralement besoin d'avoir une hauteur précise pour de petits blocs, alors qu'on pourra laisser une hauteur variable sur de grands blocs de textes (le contenu de ce billet par exemple) sans que ce soit gênant.
D'ou l'utilité d'utiliser un reset.css qui va forcer tout les parametres par defaut a null non ?
Oui, en ayant dans cette css une propriété line-height appliquée au body et qui sera héritée au reste de la page :
body{ line-height:1.2}
Pour rappel, la propriété line-height peux avoir une valeur sans unité : http://meyerweb.com/eric/thoughts/2...