Laurent Denis a écrit :
D'autre part, pour la largeur d'une mise en page, un width ou un max-width en em découplent la largeur de la résolution : il pénalisent donc les utilisateurs ayant besoin d'agrandir les caractères (scroll horizontal).
Un width oui, mais un max-width non. Si on place un max-width à 60em, et que cela dépasse les bords de la page, le bloc ne s'étendra pas au delà de ces limites. Donc pas de contre-indication tant que l'on se garde d'utiliser un width.
Laurent Denis a écrit :
Enfin, pour des blocs plus réduits, les largeurs en em manquent souvent trop de précision car leur valeur finale en pixel va être fonction de la police de caractère réelle : or, les polices ont un "emcombrement" plus variable qu'on ne le pense parfois.
Oui, l'encombrement variable des fontes est assez évident. Un petit exemple :
http://web.covertprestige.info/test/00-comparaison-de-fontes-pour-le-web.html
MAIS : je n'avais jamais constaté moi-même l'impact supposé de ces variations sur les dimmensions des éléments dimmensionnés en em. J'avoue être assez perplexe… aussi, j'ai fait un petit test. Voici le fichier :
<!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>Test de largeur en em</title>
<style type="text/css">
html {font-size: 100%;}
body {
font-size: .8em;
font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
/*font-family: Times, "Times New Roman", "Nimbus Roman No9 L", serif;*/
}
div#page {
width: 60em;
height: 15em;
background: burlywood;
}
</style>
</head>
<body>
<div id="page">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas a elit eget pede molestie dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse ligula mi, viverra hendrerit, mattis nec, laoreet non, massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent et metus sed lorem pellentesque vestibulum. Integer eget diam vel tortor vulputate varius. Etiam blandit massa at nisi tincidunt aliquam. Fusce sem ligula, lacinia non, bibendum in, egestas in, libero.</p>
</div><!-- fin de div#page -->
</body>
</html>
La dimmension du bloc #page va bien sûr dépendre des différentes indications de taille de texte dont il hérite : soit 100%*.8em = 80% de la taille du texte par défaut. Mais pour un bloc aussi haut qu'un enfant direct de body, prendre en compte l'héritage de ces propriétés est tout à fait réalisable, et le risque de s'y perdre est assez faible.
Revenons à cette histoire de police. J'ai ici deux déclarations font-family, chacune désignant une famille très différente (les polices de type Times sont très petites, le Verdana est immense). La largeur et la hauteur du bloc sont fixés en em.
Maintenant, lorsque je passe d'une famille à l'autre (on change les commentaires), que se passe-t-il ? Absolument rien. Ou plutôt : le texte change (il prend le double de l'espace, ou la moitié, suivant le sens !), mais le bloc ne bronche pas.
Testé avec Firefox 1.5, Konqueror 3.5, Opera 9 et Internet Explorer 6.
Alors soit j'ai loupé un épisode, soit le choix de la fonte n'a aucune incidence sur le dimmensionnement en EM des éléments. Ce qui a une incidence, c'est la valeur d'1em pour un bloc précis, par rapport à la valeur d'1em au niveau de la racine.
Ai-je loupé un épisode ?
Laurent Denis a écrit :
On rencontre souvent des paddings de blocs et surtout des marges en em, proportionnelles à l'agrandissement des caractères: c'est en fait une erreur, au sens de l'accessibilité pour les WCAG2.0 et, si j'en juge par mon expérience, également au sens de la robustesse de la mise en page.
Effectivement, en règle général il vaut mieux garder des valeurs en pixels pour les espaces horizontaux, sous peine de voir l'espace disponible pour un contenu réduit à peau de chagrin par des marges et padding trop étendus lorsque le texte est agrandi.
Pour les espaces verticaux, par contre, dans beaucoup de cas les em sont assez pertinents. Des retraits verticaux mettant en évidence l'importance (niveau) d'un titre, par exemple, peuvent ne plus être perceptibles dès le premier niveau d'agrandissement, s'ils sont exprimés en pixels.
Modifié par mpop (26 Jul 2006 - 00:41)
Puis-je préciser en commentaire "Avec la bénédiction d'Alsacréations. Amen" ? 