Unités de dimensionnement

The CSS Podcast - 008: Sizing Units

Le Web est un support responsif, mais il est parfois nécessaire de 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 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 avec une unité conçue pour dimensionner le texte, ce qui permet un contrôle prévisible quelle que soit la taille du 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 décimales (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 aux endroits suivants:

• Lorsque vous définissez des valeurs pour les filtres: filter: sepia(0.5) applique un filtre sépia 50% à 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) étale l'élément à 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 précédent, la largeur de div p est 150px, en supposant que la mise en page utilise le box-sizing: content-box par défaut.

Si vous définissez margin ou padding en pourcentage, ils représenteront 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'exemple précédent, margin-top et padding-left donneront 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: 150px, car elle correspond à 50% de la largeur de son 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. Notez que les unités physiques, telles que cm et in, ne s'affichent pas de manière fiable à ces tailles sur les écrans en raison des variations de tailles de pixels. Les unités physiques sont plus adaptées aux feuilles de style d'impression, où elles seront plus fiables.

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.

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 définir des tailles en fonction d'une taille de base pertinente, telle que la taille de police par défaut ou les dimensions de la fenêtre. Cela signifie que le CSS comporte des unités telles que ch qui utilisent les métriques de taille de la police comme base, et vw qui est basé 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 relatives à la taille de police

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é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.

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.

Autres unités relatives à la fenêtre d'affichage

La valeur des unités relatives à la fenêtre d'affichage reste la même tant que la taille de la fenêtre d'affichage ne change pas. Toutefois, les navigateurs mobiles affichent ou masquent généralement des éléments d'interface utilisateur pour afficher le plus de contenu possible sur les petits écrans, sans modifier la taille calculée de la fenêtre d'affichage. Vous pouvez utiliser d'autres unités que les unités relatives au viewport pour tenir compte de ces modifications de la zone visible.

Unités relatives au conteneur

Vous pouvez utiliser les dimensions du conteneur d'un élément comme base relative. Ces unités répartissent l'espace disponible dans le conteneur. Ils sont utiles dans les requêtes de conteneur pour définir des tailles de police en fonction de l'espace disponible.

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 meilleure résolution.

Vérifier vos connaissances

Tester vos connaissances sur le dimensionnement

Ressources

• Valeurs et unités de la spécification CSS, niveau 4
• Dimensionnement et unités sur le MDN
• Tout savoir sur les EMS
• Explication des pourcentages