cours 7
unité de mesure en CSS, typographie
Sources : 1 et 2
Nous verrons plus en détail les unités préfixées d'une 🔎.
Nous ne nous attarderons pas sur les unités préfixées d'un ⭕.
Longueurs liées à la police
- ⭕ cap (taille nominale d'une lettre capitale pour la police de l'élément)
- ⭕ ch (largeur du caractère « 0 » dans la police actuelle.)
- ⭕ ex (hauteur d'x de la police de caractère de l'élément)
- ⭕ ic (largeur entre le début du caractère 水 et le début du caractère suivant)
- ⭕ lh (valeur calculée de la propriété line-height de l'élément)
- ⭕ rlh (valeur calculée de la propriété line-height de l'élément racine html)
- 🔎 em (Cette unité représente la font-size calculée de l'élément. Si utilisée avec la propriété font-size, elle représente la taille de police héritée de l'élément.)
- 🔎 rem (Cette unité représente la font-size de l'élément racine (par exemple la taille de la police de l'élément ). Quand utilisée avec font-size sur l'élément racine, elle représente sa valeur initiale.)
EM & REM : L'utilisation des éléments EM n'est pas forcément intuitive : pour toutes les propriété sauf font-size, 1em est égale à la valeur calculé de la propriété font-size. Pour la propriété font-size, 1em est égale à la valeur calculé de la propriété font-size de l'élément parent. un exemple ici.
Longueurs liées au viewport
- ⭕ vb (1 % de la taille du bloc englobant initial selon la direction de bloc (la direction orthogonale au sens d'écriture) de l'élément racine.) (b pour block)
- ⭕ vi (1 % de la taille du bloc englobant initial selon la direction en ligne (la direction du sens d'écriture) de l'élément racine.) (i pour inline)
- 🔎 vh (1vh = 1% de la hauteur – height – du viewport)
- 🔎 vw (1vw = 1% de la largeur – width – du viewport)
- 🔎 vmin (1vmin = 1% de la dimension la plus faible, hauteur ou largeur, du viewport)
- 🔎 vmax (1vmax = 1% de la dimension la plus grande, hauteur ou largeur, du viewport)
vmin, vmax, vh, vw : exemple
à ne pas faire
Unités de longueur absolues
- 🔎 px
- ⭕ mm
- ⭕ Q (expérimental : quart de millimètre)
- ⭕ cm
- ⭕ in (inch)
- ⭕ pt (point pica)
- ⭕ pc (pica)
Hormis le pixel, ces unités ne sont pas recommandées pour l'affichage à l'écran, mais plutôt pour l'imprimé (source).
1mm ne fait pas 1mm
il est important de noter que, dans la plupart des cas, 1 mm dans le CSS ne donnera pas 1 mm à l'écran.
CSS pixels
On utilise en CSS des pixels CSS, et non des pixels physiques. Cela permet de ne pas avoir à gérer le « pixel ratio », la résolution de l'écran. Voir cet exemple sur un écran haute densité.
autres unités
- %
- deg
- absence d'unité (valeur codées de 0 à 1, 0 à 255, etc.)
exercices flexbox
documentation
CSS-tricks : a complete guide to flexbox
Flexbox : exercices
rendus