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 largement compatibles.

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 modernes, font partie des derniers outils permettant de rendre la création de sites Web et d'applications plus dynamique et réactive. Vous pouvez utiliser ces fonctions pour contrôler la taille 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 l'addition (+), la soustraction (-), la multiplication (*) et la division (/) comme valeurs de composant.

Valeurs et unités CSS, niveau 4

Prise en charge des navigateurs

min()

max()

clamp()

Utilisation

Vous pouvez utiliser min(), max() et clamp() à droite de n'importe quelle expression CSS où cela semble logique. 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 la plus petite de ces unités relatives et utilise cette valeur pour la largeur de l'élément.

La fonction max() fait de même pour la valeur maximale.

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

Vous pouvez utiliser ces fonctions partout où <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 idéale

Selon The Elements of Typographic Style (Les éléments de style typographique) de Robert Bringhurst, "une longueur de ligne comprise entre 45 et 75 caractères est généralement considérée comme satisfaisante pour une page en une seule colonne dans une police de texte avec serifs et une taille de texte donnée".

Pour vous assurer que vos blocs de texte mesurent entre 45 et 75 caractères de large, utilisez clamp() et l'unité ch (avancement de caractère de 0 pixel) :

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, la largeur est définie sur 45ch. Si 50 % est supérieur à 75ch, la largeur est définie sur 75ch.

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

De même, 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 45ch ou plus large.

Gérer le rembourrage

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 : autorisez un élément à avoir une marge intérieure supplémentaire pour les écrans de grande taille, mais conservez une marge intérieure minimale pour 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). Votre feuille de style devrait se présenter comme suit:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

Typographie fluide

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

Avant clamp(),, la conception de la mise à l'échelle de la police nécessitait des chaînes de style complexes. Vous pouvez maintenant 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 minimale et maximale, avec très peu de code:

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

Autres ressources

• Valeurs et unités CSS sur MDN
• Spécifications de niveau 4 sur les valeurs et les unités CSS
• Article : Astuces CSS sur la largeur de l'élément interne
• Présentation de min(), max() et clamp() par Ahmad Shaded

Image de couverture de @yer_a_wizard sur Unsplash.