Podcast CSS – 008: Unités de dimensionnement
Le Web est un support responsif, mais vous souhaitez parfois 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éder sur un support flexible tel que le Web ?
Dans ce cas, vous pouvez utiliser une unité ch, qui est égale à 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 à une unité conçue pour dimensionner le texte, ce qui offre un contrôle prévisible, quelle que soit la taille du texte.
L'unité ch fait partie d'une série d'unités utiles dans des contextes spécifiques comme cet exemple.
Numéros
Des nombres sont utilisés pour définir les champs opacity et line-height, et même les valeurs de canal 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 nombres ont une signification selon 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é secondaire:
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 font-size de 24px, la hauteur de la ligne sera calculée comme 36px.
Les numéros peuvent également être utilisés aux emplacements suivants:
- Lorsque vous définissez des valeurs de filtres:
filter: sepia(0.5)applique un filtre sépia50%à l'élément. - Lorsque vous définissez l'opacité,
opacity: 0.5applique une opacité de50%. - 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. Consultez la leçon sur les couleurs. - Pour transformer un élément,
transform: scale(1.2)redimensionne l'élément de 120% par rapport à 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 pourcentage, elles prendront 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 de code ci-dessus, margin-top et padding-left sont 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 la valeur translateX de 10% et la valeur width de 50%.
Tout d'abord, calculez la largeur: 150px, car elle correspond à 50% de la largeur de son parent.
Prenez ensuite 10% sur 150px, soit 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 "jeton de dimension" dans les spécifications.
Les longueurs sont des dimensions faisant référence à la distance. Elles peuvent être absolues ou relatives.
Longueurs absolues
Toutes les longueurs absolues sont résolues 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'imprimer, le résultat 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 sera imprimé sous la forme d'un rectangle noir de 10 x 5 cm.
N'oubliez pas que le CSS est utilisé non seulement pour le contenu numérique, mais aussi pour le style du contenu imprimé.
Les longueurs absolues peuvent s'avérer très utiles lors de la conception pour 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-millimètres | 1Q = 1/40e de 1 cm |
| in | Pouces | 1 po = 2,54 cm = 96 px |
| pc | Pics | 1 pc = 1/6e de 1 po |
| pt | Points | 1 pt = 1/72e de 1 po |
| px | Pixels | 1px = 1/96e de 1po |
Longueurs relatives
Une longueur relative est calculée par rapport à une valeur de base, comme un pourcentage.
La différence entre ces valeurs et les pourcentages est que vous pouvez dimensionner les éléments en fonction du contexte.
Cela signifie que CSS comporte des unités telles que ch qui utilisent la taille du texte comme base, et vw qui est basée 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 sa réactivité.
Unités de taille de police relative
Le code CSS fournit des unités utiles qui dépendent de la taille des éléments de la typographie affichée, comme la taille du texte lui-même (em unités) ou la largeur des caractères de police (ch unités).
| unité | par rapport à: |
|---|---|
| Par rapport à la taille de police, par exemple, 1,5 em sera 50% plus grand que la taille de police calculée de base de son parent. (Historiquement, la hauteur de la lettre majuscule "M"). | |
| Ex. | Heuristique pour déterminer si la hauteur x, une lettre "x" ou ".5em" doit être utilisée dans la taille de police actuelle calculée de l'élément. |
| plat | Hauteur des lettres majuscules dans la taille de police actuellement calculée de l'élément. |
| ch | Avancement des caractères moyen d'un glyphe étroit dans la police de l'élément (représenté par le glyphe "0"). |
| ic | Avancement des caractères moyen d'un glyphe pleine largeur dans la police de l'élément, comme représenté par le glyphe "水" (idéogramme de l'eau CJK, U+6C34). |
| rem | Taille de police de l'élément racine (16 pixels par défaut). |
| lh | Hauteur de ligne de l'élément. |
| rlh | Hauteur de 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 correspondent à l'espace disponible de la fenêtre d'affichage.
| unité | par rapport à |
|---|---|
| vw | 1% de la largeur de la fenêtre d'affichage Les utilisateurs se servent de ce module pour effectuer des astuces sur les polices (par exemple, pour redimensionner la police d'en-tête en fonction de la largeur de la page, de sorte que la police se redimensionne à mesure que l'utilisateur redimensionne l'écran). |
| 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 disposez d'une barre d'outils en pied de page, par exemple. |
| vi | 1% de la taille de la fenêtre d'affichage dans l'axe intégré de l'élément racine L'axe fait référence aux modes d'écriture. Dans les modes d'écriture horizontal tels que l'anglais, l'axe intégré est horizontal. Dans les modes d'écriture verticaux tels que certaines polices de caractères japonais, l'axe intégré s'exécute 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 du bloc, il s'agit du sens de la langue. Les langues de gauche à droite, comme l'anglais, ont un axe de bloc vertical, car les lecteurs anglophones analysent la page de haut en bas. Un mode d'écriture vertical présente 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 correspondra à 10% de la largeur de la fenêtre d'affichage, car 1vw correspond à 1% de la largeur de la fenêtre d'affichage.
Le max-width de l'élément p est 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 traiter des types de valeurs spécifiques.
Unités d'angle
Dans le module de couleur, nous avons examiné les unités d'angle, qui sont utiles pour définir des valeurs en degrés, telles que 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);
}
En utilisant l'unité d'angle deg, vous pouvez faire pivoter une 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 aux points par pouce (points par pouce).
Pour cela, il est utile de détecter les écrans à très haute résolution, tels que les écrans Retina, dans une requête média, et de diffuser une image de résolution supérieure.
Testez vos connaissances
Tester vos connaissances sur le dimensionnement
Parmi les propositions suivantes, lesquelles sont des dimensions valides ?
En quoi les unités absolues et relatives sont-elles différentes ?
Les unités de la fenêtre d'affichage sont absolues.