The CSS Podcast - 008: Sizing Units
Le Web est un support responsif, mais vous souhaitez parfois contrôler ses dimensions pour améliorer la qualité globale de l'interface. Par exemple, vous pouvez limiter la longueur des lignes pour améliorer la lisibilité. Comment procéder dans un support flexible comme le Web ?
Dans ce cas, vous pouvez utiliser une unité ch
, qui correspond à la largeur d'un caractère "0" dans la police affichée à sa taille calculée.
Cette unité vous permet de limiter la largeur du texte avec une unité conçue pour dimensionner le texte, ce qui permet un contrôle prévisible quelle que soit la taille de ce texte.
L'unité ch
fait partie d'un petit nombre d'unités utiles dans des contextes spécifiques, comme dans cet exemple.
Numbers
Les nombres sont utilisés pour définir opacity
, line-height
et même les valeurs des canaux de couleur dans rgb
.
Les nombres sont des entiers sans unité (1, 2, 3, 100) et des nombres décimaux (0,1, 0,2, 0,3).
Les chiffres ont une signification en fonction de leur contexte.
Par exemple, lorsque vous définissez line-height
, un nombre représente un ratio si vous le définissez sans unité de référence :
p {
font-size: 24px;
line-height: 1.5;
}
Dans cet exemple, 1.5
est égal à 150 % de la taille de police calculée en pixels de l'élément p
.
Cela signifie que si p
a une valeur font-size
de 24px
, la hauteur de ligne sera calculée comme 36px
.
Vous pouvez également utiliser des chiffres dans les cas suivants :
- Lorsque vous définissez des valeurs pour les filtres :
filter: sepia(0.5)
applique un filtre sépia50%
à l'élément. - Lorsque vous définissez l'opacité :
opacity: 0.5
applique une opacité50%
. - Dans les canaux de couleur :
rgb(50, 50, 50)
, où les valeurs comprises entre 0 et 255 sont acceptables pour définir une valeur de couleur. Voir le cours sur les couleurs - Pour transformer un élément,
transform: scale(1.2)
redimensionne cet élément à hauteur de 120% de sa taille initiale.
Pourcentages
Lorsque vous utilisez un pourcentage en CSS, vous devez savoir comment il est calculé.
Par exemple, width
est calculé en pourcentage de la largeur disponible dans l'élément parent.
div {
width: 300px;
height: 100px;
}
div p {
width: 50%;
}
Dans l'exemple ci-dessus, la largeur de div p
est 150px
, en supposant que la mise en page utilise la box-sizing: content-box
par défaut.
Si vous définissez margin
ou padding
en tant que pourcentage, ils feront partie de la largeur de l'élément parent, quelle que soit leur direction.
div {
width: 300px;
height: 100px;
}
div p {
margin-top: 50%; /* calculated: 150px */
padding-left: 50%; /* calculated: 150px */
}
Dans l'extrait de code ci-dessus, margin-top
et padding-left
seront tous deux calculés en 150px
.
div {
width: 300px;
height: 100px;
}
div p {
width: 50%; /* calculated: 150px */
transform: translateX(10%); /* calculated: 15px */
}
Si vous définissez une valeur transform
en pourcentage, elle est basée sur l'élément avec le jeu de transformation.
Dans cet exemple, p
a une valeur translateX
de 10%
et un width
de 50%
.
Commencez par calculer la largeur suivante: 150px
, car elle correspond à 50% de la largeur du parent.
Ensuite, prenez 10%
de 150px
, qui est 15px
.
Dimensions et longueurs
Si vous associez une unité à un nombre, il devient une dimension.
Par exemple, 1rem
est une dimension.
Dans ce contexte, l'unité associée à un nombre est appelée "jeton de dimension" dans les spécifications.
Les longueurs sont des dimensions qui font référence à la distance. Elles peuvent être absolues ou relatives.
Longueurs absolues
Toutes les longueurs absolues se résolvent sur la même base, ce qui les rend prévisibles partout où elles sont utilisées dans votre CSS.
Par exemple, si vous utilisez cm
pour dimensionner votre élément, puis l'imprimez, il devrait être précis si vous le comparez à une règle.
div {
width: 10cm;
height: 5cm;
background: black;
}
Si vous imprimiez cette page, le div
s'afficherait sous la forme d'un rectangle noir de 10 x 5 cm.
N'oubliez pas que le CSS est utilisé non seulement pour les contenus numériques, mais aussi pour styliser les contenus imprimés.
Les longueurs absolues peuvent être très utiles lors de la conception pour l'impression.
Unité | Nom | Équivalent à |
---|---|---|
cm | Centimètres | 1 cm = 96 px/2,54 |
mm | Millimètres | 1 mm = 1/10e de 1 cm |
Q | Quarts de millimètre | 1 q = 1/40e de 1 cm |
in | Pouces | 1 pouce = 2,54 cm = 96 px |
pc | Picas | 1 pc = 1/6 pouce |
pt | Points | 1 pt = 1/72 de 1 po |
px | Pixels | 1 px = 1/96e de 1 po |
Longueurs relatives
Une longueur relative est calculée par rapport à une valeur de référence, comme un pourcentage.
La différence entre ces valeurs et les pourcentages est que vous pouvez dimensionner les éléments de manière contextuelle.
Cela signifie que le CSS dispose d'unités telles que ch
qui utilisent la taille de texte comme base, et vw
qui est basée sur la largeur de la fenêtre d'affichage (votre fenêtre de navigateur).
Les longueurs relatives sont particulièrement utiles sur le Web en raison de sa nature responsive.
Unités de taille de police relatives
Le CSS fournit des unités utiles qui sont relatives à la taille des éléments de la typographie affichée, comme la taille du texte lui-même (unités em
) ou la largeur des caractères des polices (unités ch
).
unité | par rapport à: |
---|---|
em | Par rapport à la taille de police, c'est-à-dire 1,5 em, elle sera 50 % plus grande que la taille de police calculée de base de son parent. (historiquement, la hauteur de la lettre majuscule "M"). |
ex | Heuristique permettant de déterminer si la hauteur d'une lettre "x" ou ".5em" doit être utilisée dans la taille de police calculée actuelle de l'élément. |
capuchon | Hauteur des majuscules dans la taille de police actuellement calculée pour l'élément. |
ch | Avancement du caractère moyen d'un glyphe étroit dans la police de l'élément (représenté par le glyphe "0"). |
ic | Avancement du caractère moyen d'un glyphe de largeur complète dans la police de l'élément, tel que représenté par le glyphe "水" (idéogramme de l'eau CJK, U+6C34). |
rem | Taille de la police de l'élément racine (16 pixels par défaut). |
lh | Hauteur de l'élément. |
rlh | Hauteur de la ligne de l'élément racine. |
Unités relatives à la fenêtre d'affichage
Vous pouvez utiliser les dimensions de la fenêtre d'affichage (fenêtre du navigateur) comme base relative. Ces unités répartissent l'espace de la fenêtre d'affichage disponible.
unité | par rapport à |
---|---|
vw | 1 % de la largeur de la fenêtre d'affichage. Les utilisateurs utilisent cette unité pour réaliser des astuces de police intéressantes, comme redimensionner la police d'un en-tête en fonction de la largeur de la page afin que la police se redimensionne également lorsque l'utilisateur le fait. |
vh | 1 % de la hauteur de la fenêtre d'affichage. Vous pouvez l'utiliser pour organiser les éléments dans une UI, par exemple si vous avez une barre d'outils de pied de page. |
vi | 1 % de la taille de la fenêtre d'affichage dans l'axe en ligne de l'élément racine. L'axe fait référence aux modes d'écriture. Dans les modes d'écriture horizontales comme l'anglais, l'axe intégré est horizontal. Dans les modes d'écriture verticale, comme certains typographies japonaises, l'axe en ligne s'étend de haut en bas. |
VB | 1 % de la taille de la fenêtre d'affichage dans l'axe de bloc de l'élément racine. Pour l'axe de bloc, cela correspond au sens de la langue. Les langues LTR comme l'anglais ont une axe de bloc vertical, car les lecteurs anglophones analysent la page de haut en bas. Un mode d'écriture verticale comporte un axe de bloc horizontal. |
vmin | 1 % de la dimension la plus petite de la fenêtre d'affichage. |
vmax | 1 % de la plus grande dimension de la fenêtre d'affichage. |
div {
width: 10vw;
}
p {
max-width: 60ch;
}
Dans cet exemple, div
correspond à 10 % de la largeur de la fenêtre d'affichage, car 1vw
correspond à 1 % de la largeur de la fenêtre d'affichage.
L'élément p
a un max-width
de 60ch
, ce qui signifie qu'il ne peut pas dépasser la largeur de 60 caractères "0" dans la police et la taille calculées.
Unités diverses
D'autres unités ont été spécifiées pour gérer des types de valeurs particuliers.
Unités d'angle
Dans le module sur la couleur, nous avons examiné les unités d'angle, qui sont utiles pour définir des valeurs de degré, comme la teinte dans hsl
.
Elles sont également utiles pour faire pivoter des éléments dans des fonctions de transformation.
div {
width: 150px;
height: 150px;
transform: rotate(60deg);
}
À l'aide de l'unité d'angle deg
, vous pouvez faire pivoter un div
de 90 ° sur son axe central.
div {
background-image: url('a-low-resolution-image.jpg');
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
div {
background-image: url('a-high-resolution-image.jpg');
}
}
Unités de résolution
Dans l'exemple précédent, la valeur de min-resolution
est 192dpi
.
L'unité dpi
correspond à points par pouce.
Un contexte utile pour cela est la détection d'écrans très haute résolution, tels que les écrans Retina dans une requête multimédia et la diffusion d'une image de résolution supérieure.
Testez vos connaissances
Tester vos connaissances sur le dimensionnement
Parmi les éléments suivants, lesquels sont des dimensions valides ?
En quoi les unités absolues et relatives sont-elles différentes ?
Les unités de fenêtre d'affichage sont absolues.