Podcast CSS – 008: Sizing Units
Le Web est un support réactif, mais parfois vous souhaitez contrôler ses dimensions pour améliorer la qualité globale de l'interface. Un bon exemple de ceci est la limitation de la longueur des lignes pour améliorer la lisibilité. Comment procéderiez-vous sur un support flexible tel que le Web ?
Dans ce cas,
vous pouvez utiliser une unité ch
, qui est égale à la largeur d'un "0"
dans la police affichée à la taille calculée.
Cette unité vous permet de limiter la largeur du texte à l'aide d'une unité conçue pour dimensionner le texte,
ce qui, à son tour,
permet un contrôle prévisible, quelle que soit la taille du texte.
L'unité ch
fait partie des quelques unités utiles pour des contextes spécifiques, comme dans cet exemple.
Numbers
Des nombres sont utilisés pour définir opacity
, line-height
et même pour 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 un sens en fonction de leur contexte.
Par exemple, lorsque vous définissez line-height
,
Un nombre est représentatif d'un ratio si vous le définissez sans unité de support:
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 le font-size
de p
est 24px
,
la hauteur de la ligne est calculée comme suit : 36px
.
Les nombres peuvent également être utilisés aux emplacements 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 la leçon 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 dans CSS, vous devez savoir comment il est calculé.
Par exemple,width
est calculé en tant que 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 seront une partie de la largeur de l'élément parent,
quelle que soit la direction.
div {
width: 300px;
height: 100px;
}
div p {
margin-top: 50%; /* calculated: 150px */
padding-left: 50%; /* calculated: 150px */
}
Dans l'extrait ci-dessus, margin-top
et padding-left
seront tous deux calculés sur 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 l'ensemble de transformation.
Dans cet exemple, p
a une valeur translateX
de 10%
et une valeur 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, elle devient une dimension.
Par exemple, 1rem
est une dimension.
Dans ce contexte, l'unité associée à un nombre est appelée dans les spécifications un jeton de dimension.
Les longueurs sont des dimensions qui se rapportent à la distance. Elles peuvent être absolues ou relatives.
Longueurs absolues
Toutes les longueurs absolues sont résolues par rapport à la même base,
ce qui les rend prévisibles partout où ils sont utilisés dans votre CSS.
Par exemple, si vous utilisez cm
pour dimensionner votre élément, puis imprimer,
elle devrait être précise si vous la
compariez à une règle.
div {
width: 10cm;
height: 5cm;
background: black;
}
Si vous imprimez cette page, la div
s'imprime 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 définir le style du contenu imprimé.
Les longueurs absolues peuvent s'avérer très utiles lors de la conception d'un support imprimé.
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ètres | 1Q = 1/40ème de 1 cm |
in | Pouces | 1 po = 2,54 cm = 96 px |
pc | Picas | 1 pc = 1/6e de 1 po |
PT | Points | 1 pt = 1/72e 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 base, un peu comme un pourcentage.
La différence entre ces valeurs et les pourcentages réside dans le fait que vous pouvez dimensionner les éléments en fonction du contexte.
Cela signifie que le CSS comporte des unités telles que ch
qui utilisent la taille du texte comme base.
et vw
, qui est basé sur la largeur de la fenêtre d'affichage (la fenêtre de votre navigateur).
Les longueurs relatives sont particulièrement utiles sur le Web en raison de leur réactivité.
Unités de taille de police relatives
CSS fournit des unités utiles liées à 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 de caractères (unités ch
).
unité | par rapport à: |
---|---|
Em | Par rapport à la taille de la police, Autrement dit, 1,5 em sera 50% plus grand que la taille de police de base calculée pour son parent. (auparavant, il s'agit de la hauteur de la lettre majuscule "M"). |
Ex. : | Pour déterminer s'il faut utiliser la hauteur x, une lettre "x" ou ".5em" dans la taille de police actuellement calculée pour l'élément. |
capuchon | Hauteur des majuscules dans la taille de police actuellement calculée pour l'élément. |
ch | Caractère d'avance rapide moyen d'un glyphe étroit dans la police de l'élément (représenté par le glyphe "0"). |
ic | Moyenne avance de personnage d'un glyphe pleine largeur dans la police de l'élément, comme représenté par le "水" (Idéogramme "Eau CJK", U+6C34) représentant un glyphe. |
rem | Taille de police de l'élément racine (16 pixels par défaut). |
L | 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 (la fenêtre du navigateur) comme base relative. Ces unités occupent l'espace disponible dans la fenêtre d'affichage.
unité | par rapport à |
---|---|
VW | 1% de la largeur de la fenêtre d'affichage. Les utilisateurs utilisent cette unité pour faire des astuces sur les polices, comme le redimensionnement d’une police d’en-tête en fonction de la largeur de la page afin que l’utilisateur la redimensionne, la police est également redimensionnée. |
vh | 1% de la hauteur de la fenêtre d'affichage. Vous pouvez l'utiliser pour organiser les éléments dans une interface utilisateur, si vous avez une barre d'outils en pied de page, par exemple. |
vi | 1% de la taille de la fenêtre d'affichage sur l'axe intégré de l'élément racine. L'axe fait référence aux modes d'écriture. Dans les modes d'écriture horizontale comme l'anglais, l'axe aligné est horizontal. Dans les modes d'écriture verticales, comme certaines polices de caractères japonaises, l'axe aligné est de haut en bas. |
VB | 1% de la taille de la fenêtre d'affichage dans l'axe des blocs de l'élément racine. Pour l'axe de bloc, il s'agit de l'orientation de la langue. Les langues de gauche à droite comme l'anglais auraient un axe de blocs vertical, puisque les lecteurs anglophones analysent la page de haut en bas. Un mode d'écriture vertical a un axe de bloc horizontal. |
vmin | 1% de la plus petite dimension 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
représente 10% de la largeur de la fenêtre d'affichage, car 1vw
représente 1% de la largeur de la fenêtre d'affichage.
Le max-width
de l'élément p
est 60ch
Elle ne peut donc pas dépasser la largeur de 60 "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 de couleur,
nous avons examiné les unités d'angle,
utiles pour définir les valeurs des diplômes,
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
signifie 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 média
et qui diffusent une image de plus haute résolution.
Testez vos connaissances
Tester vos connaissances sur le dimensionnement
Parmi les dimensions suivantes, lesquelles sont valides ?
En quoi les unités absolues et relatives sont-elles différentes ?
Les unités de fenêtre d'affichage sont absolues.