CSS min(), max() et clamp()

Découvrez comment contrôler la taille des éléments, maintenir un espacement approprié et implémenter une typographie fluide à l'aide de ces fonctions CSS bien prises en charge.

Una Kravets

À mesure que le responsive design devient plus nuancé, le CSS évolue constamment pour offrir aux auteurs un contrôle accru. Les fonctions min(), max() et clamp(), désormais compatibles avec tous les navigateurs récents, font partie des derniers outils permettant de rendre la création de sites Web et d'applications plus dynamique et responsive. Vous pouvez utiliser ces fonctions pour contrôler le dimensionnement et le redimensionnement des éléments, maintenir l'espacement entre les éléments et créer une typographie flexible et fluide.

Les fonctions mathématiques calc(), min(), max() et clamp() permettent d'utiliser des expressions mathématiques avec addition (+), soustraction (-), multiplication (*) et division (/) comme valeurs de composant.

Valeurs et unités CSS, niveau 4

Prise en charge des navigateurs

min()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

max()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

clamp()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 13.1.

Source

Utilisation

Vous pouvez utiliser min(), max() et clamp() à droite de n'importe quelle expression CSS, si cela est pertinent. Pour min() et max(), vous fournissez une liste d'arguments de valeurs, et le navigateur détermine laquelle est la plus petite ou la plus grande. Par exemple, dans le cas de width: min(1rem, 50%, 10vw), le navigateur calcule laquelle de ces unités relatives est la plus petite et utilise cette valeur pour la largeur de l'élément.

La fonction min() sélectionne la valeur minimale dans une liste d'options de cette démo Codepen.

La fonction max() effectue la même chose pour la valeur maximale.

La fonction max() sélectionne une valeur dans une liste d'options dans cette démo Codepen.

Pour utiliser clamp(), saisissez trois valeurs : une valeur minimale, une valeur idéale à partir de laquelle effectuer le calcul et une valeur maximale.

La fonction clamp() conserve sa valeur entre le minimum et le maximum spécifiés dans cette démo Codepen.

Vous pouvez utiliser ces fonctions partout où un <length>, <frequency>, <angle>, <time>, <percentage>, <number> ou <integer> est autorisé. Vous pouvez les utiliser seuls (comme dans font-size: max(0.5vw, 50%, 2rem)), avec calc() (comme dans font-size: max(calc(0.5vw - 1em), 2rem)) ou composés (comme dans font-size: max(min(0.5vw, 1em), 2rem)).

Voici quelques exemples d'utilisation de ces fonctions.

La largeur parfaite

Selon The Elements of Typographic Style de Robert Bringhurst, "une longueur de ligne de 45 à 75 caractères est généralement considérée comme satisfaisante pour une page à une seule colonne définie dans une police de texte avec empattement dans une taille de texte".

Pour vous assurer que vos blocs de texte restent compris entre 45 et 75 caractères, utilisez clamp() et l'unité ch (avance de caractère de largeur 0) :

p {
  width: clamp(45ch, 50%, 75ch);
}

Cela permet au navigateur de déterminer la largeur du paragraphe. La largeur est définie sur 50 % par défaut. Si 50 % est inférieur à 45ch, il utilise 45ch comme largeur, et si 50 % est supérieur à 75ch, il utilise 75ch.

Utilisez la fonction clamp() pour définir une largeur minimale et maximale. Voir la démonstration sur Codepen

Vous pouvez également diviser cette commande en utilisant simplement min() ou max(). Si vous souhaitez que l'élément ait toujours une largeur de 50% et ne dépasse pas 75ch sur les écrans plus grands, utilisez width: min(75ch, 50%); pour définir la taille maximale.

Utilisez la fonction min() pour définir une largeur maximale.

De la même manière, vous pouvez définir une taille minimale pour le texte lisible à l'aide de la fonction max(), comme dans width: max(45ch, 50%);. Ici, le navigateur sélectionne la valeur la plus élevée, ce qui signifie que l'élément doit être de 45ch ou plus.

Utilisez la fonction max() pour définir une largeur minimale.

Gérer la marge intérieure

Vous pouvez également utiliser max() pour définir une taille de marge intérieure minimale. Cet exemple provient de CSS Tricks, où le lecteur Caluã de Lacerda Pataca a partagé cette idée : laisser un élément avoir une marge intérieure supplémentaire sur les écrans de grande taille, mais conserver une marge intérieure minimale sur les écrans de petite taille. Pour ce faire, utilisez calc() ou max(), et soustrayez la marge intérieure minimale des deux côtés de l'élément : calc((100vw - var(--contentWidth)) / 2) ou max(2rem, 50vw - var(--contentWidth) / 2). Dans votre feuille de style, cela devrait ressembler à ceci :

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
Définissez une marge intérieure minimale pour un composant à l'aide de la fonction max(). Voir la démonstration sur Codepen

Typographie fluide

Pour activer la typographie fluide, Mike Riethmeuller a popularisé une technique qui utilise la fonction clamp() pour définir une taille de police minimale et maximale, et permettre le scaling entre ces tailles.

Utilisez clamp() pour créer une typographie fluide. Voir la démonstration sur Codepen

Avant clamp(),, la conception de la mise à l'échelle des polices nécessitait des chaînes de style complexes. Vous pouvez désormais laisser le navigateur faire le travail à votre place. Définissez la taille de police minimale acceptable (par exemple, 1.5rem pour un titre), la taille maximale (par exemple, 3rem) et la taille idéale (par exemple, 5vw). Vous disposez désormais d'une typographie qui s'adapte à la largeur de la fenêtre d'affichage de la page jusqu'à atteindre les valeurs minimales et maximales limites, en utilisant très peu de code :

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Autres ressources