Langues

Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Laurent Carcone

Feuilles de style pour le Web Trucs & astuces CSS

Voir également l'index de tous les trucs et astuces.

Dans cette page:

em, px, pt, cm, in

CSS offre différentes unités pour exprimer la longueur. Certaines ont une histoire en typographie, comme le point (pt) et le pica (pc), d'autres sont connues pour leur usage quotidien, comme le centimètre (cm) et le pouce (in). Et il y a également une unité "magique" inventée spécialement pour CSS: le pixel px. Est-ce que cela signifie que différentes propriétés nécessitent différentes unités ?

Non, les unités n'ont rien à voir avec les propriétés, mais avec le média de sortie: écran ou papier.

Il n'y a pas de restriction sur quelle unité peur être utilisée à tel ou tel endroit. Si une propriété accepte une valeur en px ('margin: 5px') elle accepte également une valeur en pouces ou en centimètres ('margin: 1.2in; margin: 0.5cm') et vice-versa.

Mais généralement, vous utilisez un ensemble différent d'unités selon que vous affichez sur un écran ou que imprimez sur du papier. La table ci-dessous recommande les différents usages:

Recommandé Usage occasionnel use Non recommandé
Écran em, px, % ex pt, cm, mm, in, pc
Imprimante em, cm, mm, in, pt, pc, % px, ex

La relation entre les unités absolues est la suivante: 1in = 2.54cm = 25.4mm = 72pt = 6pc

Si vous avez un double-décimètre, vous pouvez vérifier la précision de votre support de sortie: voici une boîte de 1in (2.54cm) de hauteur:
72pt

Les unités appelées absolues (cm, mm, in, pt and pc) signifient la même chose en CSS que partout ailleurs. Une longueur exprimée dans l'une de ces unités apparaîtra avec cette taille précise (selon de la précision des composants matériels et du logiciel). Elles ne sont pas recommandées pour un écran, parce que les tailles d'écran varient beaucoup. Un grand écran peut avoir une largeur de 24in et un petit écran de portable une largeur de 8cm seulement. De plus, vous ne les regardez pas à la même distance.

Les unités em et ex dépendent de la police de caractères et peuvent être différentes pour chaque élément du document. L'unité em est simplement la taille de la police de caractères. Pour un élément dont la police est de taille 2in, 1em signifie 2in. Exprimer des tailles, comme les margins et les paddings, en em signifie qu'elles sont relatives à la taille de la police, et si l'utilisateur a une large police de caractères (sur un grand écran par exemple) ou au contraire une petite police (sur un smartphone par exemple), les tailles seront en proportion. Les déclarations telles que 'text-indent: 1.5em' and 'margin: 1em' sont extrêmement courantes en CSS.

Les unités ex sont rarement utilisées. Leur but est d'exprimer des tailles relatives à l'x-height de la police. Le x-height est, schématiquement, la hauteur des plus petites lettres comme le a, c, m, or o. Les polices qui ont la même taille (donc le même em) peuvent varier considérablement concernant la taille de leurs plus petites lettres, et lorsqu'il est important que certaines images par exemple aient le même x-height, l'unité ex est disponible.

L'unité px est l'unité magique en CSS. Elle n'est pas relative à la police courante ni relative aux unités absolues. L'unité px est définie pour être 'petite mais visible', et de telle façon qu'une ligne horizontale de 1px de largeur peut être affichée de façon nette, sans 'arête' (ni anti-aliasing). Ce qui est net, petit et visible dépend du support et de la façon dont il est utilisé: est-ce que vous le tenez près des yeux, comme un téléphone mobile, à la distance d'un bras, comme un écran d'ordinateur, ou à une distance intermédiaire, comme un livre? Le px n'est donc pas défini comme une longueur constante, mais comme quelque chose qui dépend du type de matériel et de son usage courant.

Pour avoir une idée de l'apparence du px, prenez un écran cathodique des années 90: le plus petit point qu'il peut afficher mesure environ 1/100th de pouce (0.25mm) ou un peu plus. L'unité px tient son nom de ces pixels d'écrans.

De nos jours, il y a des supports qui peuvent en principe afficher des points plus petits (bien que vous pourriez avoir besoin d'une loupe pour les voir). Mais les documents du siècle dernier qui utilisaient des px dans CSS sont rendus de la même façon, quelque soit le support. Les imprimantes en particulier peuvent afficher des lignes très nettes avec des détails bien inférieurs à 1px, mais même sur les imprimantes, une ligne de 1px est rendue de la même façon qu'elle l'aurait été sur un écran d'ordinateur. Les supports changent, mais le px a toujours la même apparence visuelle.

CSS définie également que les images matricielles (comme les photos) sont affichées par défaut avec 1 pixel d'image correspondant à 1px. Ainsi, une photo avec une résolution 600 x 400 aura 600px de large et 400px de haut. Les pixels de la photo ne correspondant donc pas aux pixels du support de sortie (lequel peut être très petit), mais correspondent aux unités px. Cela rend possible le fait d'aligner exactement des images avec d'autres éléments du document, tant que vous utilisez l'unité px dans votre feuille de style, et non pt, cm, etc.

Utiliser em ou px pour les tailles des polices

CSS a héritée de la typographie les unités pt (point) et pc (pica). Les imprimantes les ont traditionnellement utilisées (ainsi que les unités similaires) de préférence à cm ou in. Dans CSS il n'y a aucune raison d'utiliser pt, utilisez l'unité que vous préférez. Mais il y a une bonne raison de n'utiliser ni pt ni aucune autre unité absolue et d'utiliser seulement em et px.

Voici quelques lignes de différentes épaisseurs. Toutes ou partie doivent être nettes (mais au minimum les lignes 1px et 2px doivent être visibles et nettes):

0.5pt, 1px, 1pt, 1.5px, 2px

Si les 4 premières lignes apparaissent identiques (ou si la ligne 0.5pt n'est pas affichée), vous avez probablement un écran qui ne peut afficher des points inférieurs à 1px. Si les lignes semblent de plus en plus épaisses, vous regardez probablement cette page sur un écran en haute résolution ou sur du papier. Et si 1pt semble plus épais que 1.5px, vous avez probablement un smartphone.

L'unité magique en CSS, le px, est souvent unité très adaptée, en particulier si le style nécessite l'alignement d'un texte sur des images, ou tout simplement parce que tout ce qui a une largeur de 1px ou d'un multiple de 1px est garanti d'avoir un rendu net.

Mais pour les tailles de police, il est plus indiqué d'utiliser em. L'idée est (1) de ne pas spécifier la taille de la police de l'élément BODY (en HTML), mais d'utiliser la taille par défaut du support, parce que c'est une taille que l'utilisateur peut lire confortablement; (2) exprimer les tailles de police des autres éléments en em: 'H1 {font-size: 2.5em}' pour rendre le H1 2½ fois plus grand que le contenu normal.

Le seul endroit ou vous pourriez utiliser pt (ou cm ou in) pour définir une taille de police est dans une feuille de style pour l'impression, si vous devez être sûr que la police imprimée a exactement une certaine taille. Mais même dans ce cas, utiliser la taille par défaut de la police est généralement plus indiqué.

Plus d'unités CSS dans le futur

Pour rendre encore plus facile le fait de définir des règles CSS qui ne dépendent que de la taille par défaut de la police, une nouvelle unité est en développement: le rem. Le rem (pour "root em") est la taille de la police de l'élément racine du document. Contrairement au em, qui peut être différent pour chaque élément, le rem est constant dans tout le document.

D'autres unités en développement rendront possible de spécifier des tailles relatives à la fenêtre du lecteur. Ce sont les unités vw et vh. Le vw est égal à 1/100ème de la largeur de la fenêtre et le vh est égal à 1/100ème de la hauteur de la fenêtre.

Bert Bos, coordinateur de l'activité style
Copyright © 1994–2014 W3C®

Created 12 Jan 2010;
Last updated sam. 20 déc. 2014 18:46:51 UTC

Langues

À propos des traductions