Unité de taille : em / px

Bonjour

j'aimerais votre avis sur le point suivant :
est ce "conforme aux normes" que de mélanger les unités ?

je voudrais utiliser les em pour les polices et les px pour les dimensions de mes blocs.
en effet, quand je mets tout en em, si on modifie la taille des caractères, toute ma mise en page part en vrille

merci de vos lumières

Bonjour,

Il n'y a aucun critère normatif en CSS sur le "mélange" des unités, et cela n'aurait d'ailleurs pas de sens quand il s'agit des valeurs de propriétés totalement différentes comme font-size et width. Il n'y a donc pas de question de conformité à se poser.

Le validateur CSS signale sous forme d'avertissement (et non d'erreur de validité) certains mélanges de valeurs relatives et absolues dans des propriétés racourcies comme padding. Mais cela signifie simplement que l'utilisateur est alerté et doit vérifier par lui-même si ce mélange est voulu ou accidentel.

A noter: WCAG2.0 recommanderait (à l'avenir) au contraire l'emploi d'unité fixes pour les dimensions n'ayant pas vocation à se modifier avec l'agrandissement des tailles de caractères ou avec la taille de la zone d'affichage (padding, fréquemment) et l'emploi d'unité relatives pour les dimensions ayant vocation à être fluides (largeur de bloc, par exemple).
Modifié par Laurent Denis (28 Aug 2006 - 22:46)

Salut

Aucun problème à ce niveau-là. Tu as parfaitement le droit de mélanger les unités. Il me semble d'ailleurs que les em ne sont pas recommandées pour définir des tailles autres que celles des polices (utiliser les % si on a besoin de tailles relatives) - Laurent Denis (ou quelqu'un d'autre) devrait pouvoir t'en dire plus.

A éviter cependant : l'emploi des px pour les tailles de police, car cela empêche les utilisateurs d'IE de redimensionner le texte s'ils le souhaitent.

<edit>Grillé. Bon. Comme ça, ça fera 2 pour aujourd'hui
Modifié par Sopo (28 Aug 2006 - 22:45)

Sopo a écrit :
Il me semble d'ailleurs que les em ne sont pas recommandées pour définir des tailles autres que celles des polices (utiliser les % si on a besoin de tailles relatives)

Je ne dirais pas çà car si on prend les designs élastiques, ils sont justement fondés sur les em. En terme d'accessibilité, je les trouve pas mal.

koala64 a écrit :
Je ne dirais pas çà car si on prend les designs élastiques, ils sont justement fondés sur les em. En terme d'accessibilité, je les trouve pas mal.

Oui puis les marges, les interlignages aussi , les tailles de boites ?
Modifié par Hum (28 Aug 2006 - 23:00)

J'ai juste dit qu'il me semblait que ... mais je crois me souvenir que Laurent m'en avait parlé, il y a fort fort longtemps ...

Mais l'unité em est basée sur la taille de la police par défaut de l'utilisateur, juste ? Ce n'est pas un peu aléatoire pour définir par exemple des largeurs de colonnes ?

Sopo a écrit :

Mais l'unité em est basée sur la taille de la police par défaut de l'utilisateur, juste ? Ce n'est pas un peu aléatoire pour définir par exemple des largeurs de colonnes ?

Tout doit dépendre du cas. Je pense que dans un contexte avec que du texte et aucunes images on peut tout définir (me prenez pas au mot...) en em.

J'ai vu pas mal de tutos fait comme ça. Cela dit, effectivement , ce n'est pas comme ça que je fais : je me limite a la taille de la police, les interlignages et certaines marges ...
Modifié par Hum (28 Aug 2006 - 23:09)

Laurent Denis a écrit :
A noter: WCAG2.0 recommanderait (à l'avenir) au contraire l'emploi d'unité fixes pour les dimensions n'ayant pas vocation à se modifier avec l'agrandissement des tailles de caractères ou avec la taille de la zone d'affichage (padding, fréquemment) et l'emploi d'unité relatives pour les dimensions ayant vocation à être fluides (largeur de bloc, par exemple).

Bon, ça a l'air assez clair ... Si on souhaite que la largeur de bloc varie en redimmensionnant la police, utiliser les em.

J'ai rien dit

Ah ! Tiens oui d'ailleurs, Hum, en fonction de ce que vient d'indiquer Laurent et Sopo et puisque tu parles d'images, dans ce tuto, les attributs width et height ne sont pas indiqués. En revanche, les images possèdent une taille "équivalente" aux dimensions réelles en em au sein du CSS. D'un côté, on ne fournit pas d'indications au navigateur, ce qui peut s'avérer "gênant" mais d'un autre côté, on permet le redimensionnement à l'agrandissement des polices, ce qui permet de conserver un design cohérent. Aussi, le fait d'indiquer une taille de police en % sur le body et le reste en em permet de minimiser les différences entre les navigateurs...
Modifié par koala64 (28 Aug 2006 - 23:19)