Auteur: Jérôme Forget. Publié le 9 mai 2007.
Dans cet article, nous verrons des éléments de base essentiels en CSS : les unités de mesure qui précisent la taille, les distances et les dimensions pour un grand nombre de propriétés. Les unités de mesure permettent de déterminer précisément la taille du texte, les dimensions d'un élément ou la longueur des marges. En connaissant les concepts présentés ici, vous serez en mesure d'apprendre et de progresser plus rapidement dans votre usage des feuilles de style CSS.
Il y a deux types de nombres en CSS : les entiers anturels et les nombres réels. Un entier consiste en un ou plusieurs chiffres de 0 à 9. Les nombres réels sont les nombres, positifs ou négatifs, ayant une représentation décimale. Les valeurs suivantes sont toutes des valeurs permises en CSS :
15.5, -270.0004, 5
Les entiers et les nombres peuvent être positifs ou négatifs, mais les propriétés CSS limitent parfois les valeurs à une plage donnée, souvent à une valeur positive.
Une valeur en pourcentage comprend un nombre suivi d'un symbole de pourcentage (%). Les pourcentages sont pratiquement toujours relatifs à une autre valeur, soit la valeur d'une autre propriété du même élément, une valeur héritée du parent ou la valeur d'un ancêtre.
Dans l'exemple suivant, la largeur de la division est calculée à partir de la largeur de l'ancêtre body :
body { width: 780px; }
div { width: 80%; }
La largeur réelle de la division sera de 624 pixels, soit 80% de 780 pixels.
Beaucoup de propriétés CSS, comme les marges, dépendent de la mesure de la longueur pour afficher correctement les éléments dans la page. Il n'est donc pas étonnant d'avoir plusieurs moyens de mesurer la longueur en CSS.
Toutes les unités de longueur peuvent être exprimées par des entiers positifs ou négatifs. Il est aussi possible d'utiliser des nombres (des fractions). Toutes les unités de longueur sont suivies d'une abbréviation de deux lettres qui représente l'unité de la valeur spécifiée, comme px (pixels) ou cm (centimètres). La seule exception est le 0 (zéro) qui ne nécessite pas d'unités de valeur - 0 px, 0 cm ou 0%, c'est toujours zéro.
Les unités de longueur se divisent en deux types : les unités de valeur absolues et les unités de valeur relatives.
Les unités de valeur relatives portent ce nom car elles se mesurent en relation avec autres choses. Les valeurs relatives peuvent varier en fonction de la résolution de l'écran, de la largeur de la fenêtre, des préférences de l'utilisateur et d'un paquet d'autres facteurs. Malgré cela - mais surtout à cause de cela -, il est toujours préférable d'utiliser des unités de valeur relatives plutôt que des unités absolues.
En CSS, un em est défini par la valeur de la propriété font-size d'une police. Si le font-size d'un élément est 14 pixels, la valeur de 1em pour cet élément sera égale à 14 pixels. Évidemment, la valeur d'un em peut varier d'un élément à l'autre.
Un ex, en revanche, correspond à la hauteur du x minuscule dans la police utilisée. Cette valeur variera en fonction de la police de caractères car, pour chaque police, le x a une hauteur différente.
Tout cela est bien beau en théorie, mais dans la réalité, les navigateurs vont souvent donner à un ex la valeur du em divisée par 2. Comme les plupart des caractères minuscules ont une hauteur à peu près équivalente à la moitié de la hauteur des caractères majuscules, il est plus simple d'affirmer qu'un ex égale 0.5em.
Le pixel est l'unité de base d'une image numérique. C'est aussi l'unité utilisée pour spécifier les définitions d'affichage d'un moniteur. Le pixel est considéré comme une unité de valeur relative, car sa taille peut varier selon le dispositif de rendu. Par exemple, une imprimante devra interpréter en points les mesures en pixels. À cause de ce potentiel de redimensionnement, le pixel est défini comme étant une valeur relative même si, en design Web, le pixel se comporte davantage comme une unité absolue.
Les unités de valeur absolues sont très faciles à comprendre, mais elles ne sont pratiquement d'aucune utilité en design Web. Voici les cinq types d'unités absolues :
Comme vous vous en doutez, cette unité correspond à l'unité de mesure de longueur encore en usage dans les pays anglo-saxons. Un pouce vaut exactement 25,4 mm.
Unité de valeur très connue dans les pays utilisant le système métrique, un centimètre vaut 0,01 mètre.
Il y a dix millimètres dans un centimètre. Le millimètre correspond donc à 0,001 mètre.
Le point est une ancienne unité de mesure utilisée en imprimerie et en typographie. Traditionnellement, il y a 72 points dans un pouce.
Le pica est une autre unité de mesure typographique issue du monde anglo-saxon. Un pica est équivalent à 12 points.
Les URL (ou URI) sont un concept familier sur le Web. En CSS, le format pour inscrire une adresse URL est le suivant :
url(protocol://serveur/chemin)
L'exemple précédant définit ce qu'on nomme une adresse URL absolue. Une adresse absolue est une adresse complète qui va fonctionner peu importe à quel endroit elle se trouve. En voici un autre exemple :
http://multimedia.cgmatane.qc.ca/images/photo.jpg
L'autre type d'URL est l'URL relatif, qui donne une adresse en relation avec le document qui l'appelle. Cela permet d'indiquer le chemin vers une ressource qui se trouve sur le même serveur que le document qui appelle cette ressource.
url(chemin)
En CSS, un URL relatif est relatif à la feuille de style elle-même, pas au document HTML qui utilise la feuille de style.