PRATIQUE CLIENTS WEB 
CSS : les unités de longueur
 
Picas, point, em, px… : toutes les unités accessibles pour mettre en page un site Web, et le pourquoi du comment de chacune. (25/01/2005)
  Forum

Réagissez dans les forums de JDN Développeurs

Les feuilles de style sont ouvertes à un grand nombre de mesures (et de cultures), et les unités de longueur ne font pas exception : CSS permet de choisir parmi un large éventail.

Démarcation de taille : les unités de longueur sont divisées en deux groupes, les unités absolues et les unités relatives (mesurées par rapport à une valeur supérieure - elles peuvent donc être négatives) - voir les tableaux ci-dessous.

Il est conseillé de son cantonner aux unités % et em pour un affichage fluide ou pour du texte, et à px quand on a besoin de placer les éléments au pixel près... Les autres valeurs doivent être le plus souvent évitées.


CSS : unités de mesure absolues
Unité
Description
cm
Valeur en centimètres. Risque d'affichage différent sur plusieurs écrans. En effet, les réglages et résolutions sont tellement variés que ce qui semble correspondre à 1 cm sur un écran donné pourra être beaucoup plus grand ou plus petit sur un autre.
mm
Valeur en millimètres. Même remarque que pour les centimètres.
in
Valeur en pouces (inches). Même remarque que pour les centimètres.
pt
Valeur en point. Le point est une mesure typographique utilisée par les imprimeurs (d'où les "points par pouce" de certaines résolutions) et les traitements de texte. Ici encore, les remarques des centimètres s'appliquent.
pc
Valeur en picas. Un autre terme de typographie, et donc, du fait de son origine "papier", les remarques précédentes tiennent.

CSS : unités de mesure relatives
Unité
Description
px
Valeur en pixels. La définition d'un pixel étant "96 pixels/pouce", le pixel n'est pas forcément recommandé dans tous les cas (cf. les remarques précédentes).
em
Valeur par rapport à la hauteur em d'une police. 1 em correspond à 100% de la taille en cours de la police, 1.2 em à 120 %, 0.8 em à 80%… Son usage est donc limité aux polices.
ex
Valeur par rapport à la hauteur x d'une police. Assez pauvrement implémentée, donc à éviter.
%
Valeur en pourcentage. L'élément définit prendra un pourcentage donné de la taille de son élément parent.


Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius

 
Xavier Borderie, JDN Développeurs
 
 
Accueil | Haut de page