Tutoriel CSS3 - sommaire

Unités de mesure en CSS

En CSS, il existe de nombreuses unités de mesure qui permettent de définir les dimensions des boites, les tailles de police, les espacements, etc.

Certaines unités de mesure ont été introduites par la norme CSS3 : rem, vh, vw. Ces dernières sont très intéressantes comme vous allez le découvrir dans ce chapitre ...

Les différentes unités de mesure

Ces unités se divisent principalement en deux catégories : unités absolues et unités relatives.

Les unités absolues

Les unités absolues sont fixes et ne dépendent pas d'autres valeurs (élément parent, dimensions de la fenêtre, etc).
Ce sont :

• cm ; centimètre
• mm : millimètre
• in : pouce/inch (1 in = 2.54 cm)
• pt : point (1 pt = 1/72 in)
• pc : pica (1 pc = 1/6 in)
• px : pixel (1 px = 1/96 in)

Les unités absolues telles cm, pc ne doivent être utilisées que dans le cadre d'une feuille de style pour impression.
Je vous invite à revoir le chapitre en lien ci-dessous : Les feuilles de style pour l'impression des pages

Les unités relatives

Les unités relatives dépendent d'autres valeurs, ce qui les rend plus flexibles et adaptées à des mises en page responsives.

Les quelques unités relatives couramment utilisées :

• em : taille de la police en cours ou taille de la police de l'élément parent.
• rem : similaire à em, mais se réfère à la taille de la police de l'élément racine (HTML ou BODY)
• un vw (viewport width) équivaut à 1/100ième de la largeur de la fenêtre
• un vh (viewport height) équivaut à 1/100ième de sa hauteur de la fenêtre
• le pourcentage est souvent utilisé pour définir des tailles relatives à un élément parent.

Étude plus approfondie de certaines unités relatives

L'unité em

L'unité em est une unité qui correspond à la taille de la police de l'élément en cours. Si la taille de la police n'est pas redéfinie, elle est alors relative à la taille de la police de l'élément parent.
Il est d'usage d'exprimer les marges externes (margin) et internes (padding) avec l'unité em.

Exemple :

body {font-size : 20px;}
main {font-size : 1.5em}
p {font-size : 1em}
h1 {font-size : 2em }
...

Les éléments P et H1 sont enfants de MAIN ; MAIN est enfant de BODY.
La taille de police pour les titres H1 sera de : 2 * 1.5 * 20px = 60px ; ce qui est énorme ...
La taille de police pour les paragraphes sera de : 1*1.5 *20px = 30px ; ce qui est beaucoup ...

L'unité rem (root em)

L'unité rem ne se réfère pas à l'élément parent mais à l'élément racine (BODY ou HTML). Donc il n'y a pas l'effet multiplicateur comme avec em.
Exemple d'emploi de rem :

body {font-size : 20px;}
main {font-size : 1.5rem}
p {font-size : 1rem ; }
h1 {font-size : 2rem;}
...

Donc les titres H1 seront affichés en 40px (2 * 20px) et les paragraphes en 20px (1 * 20px).

L'unité vw (viewport width)

Rappel : le viewport est la fenêtre d'affichage créée par le navigateur. Exprimer la largeur d'un élément en vw revient donc à une largeur constante par rapport au viewport.
Exemple d'emploi de vw :

body {width :100vw;}
nav {width : 28% ; }
section {width : 68%;}
div {width : 30vw;}

La page a pour largeur celle de la fenêtre.
Les éléments DIV auront toujours une largeur égale à 30% de celle de la fenêtre quelque soit leur parent (BODY ou SECTION).

L'unité de mesure vh (viewport height)

Exemple d'emploi de vh :

h1,h2{margin : 1vh 0}

Les marges haut et bas des éléments H1 & H2 font 1% de la hauteur du viewport ; les marges gauche et droite font zéro.

L'unité %

Cette unité de mesure est utilisée pour définir les largeurs de boites, des images.
Le pourcentage fait référence à la largeur de l'élément parent. Il peut donc y avoir un effet cascade.

Exemple : extrait de la feuille de style et du code HTML d'une page : ... main {width : 80%;} div {width : 40%;} img {width : 50%;} ... <main> <h1 ...> <img ... > <div ... > <img ... > </div> </main>

Donc un élément IMG est enfant de MAIN et une autre image est enfant de DIV qui lui même est enfant de MAIN.

Conséquences :
• L'image enfant de MAIN aura une largeur de 40% de celle de la fenêtre (80% * 50%).
• L'élément IMG enfant de DIV aura une largeur de 16% de celle de la fenêtre (80%*40% *50%).

Exemple complet d'utilisations des nouvelles unité de mesure

Dans la feuille de style de cette page web j'utilise entre autres les unités de mesure nouvelles : rem,vh,vw.

Le code HTML de la partie BODY

MAIN est enfant de BODY.
Les éléments titres et les éléments DIV sont enfants de MAIN.

La feuille de style

Notez que pour les éléments BODY & MAIN les largeurs sont exprimées avec l'unité de mesure vw (viewport width).
Les marges externes verticales (haut et bas) des titres sont exprimés en vh ainsi que la hauteur des boites affectées de la classe "boite" (30vh).
Les marges internes des titres et les marges des paragraphes sont exprimées avec l'unité de mesure em.
Les tailles de polices des titres et des paragraphes sont exprimés en rem donc par rapport à 20px (taille de police de l'élément racine).
Remarque : L'élément racine a par défaut une taille standard qui est définie dans les navigateurs (16px en général).

Le rendu de la page

Exercice

Dans la feuille de style et pour les propriétés font-size de toutes les règles remplacez "rem" par "em". Puis lancez un navigateur ...

Le rendu : la taille des titres et des corps de texte est énorme : effet multiplicateur.