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.

À 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 addition (+), soustraction (-), multiplication (*) et division (/) comme valeurs de composante.

Valeurs et unités CSS, niveau 4

Prise en charge des navigateurs

min()

Navigateurs pris en charge

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

Source

max()

Navigateurs pris en charge

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

Source

clamp()

Navigateurs pris en charge

  • 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 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 min() sélectionne la valeur minimale dans une liste d'options dans cette démonstration de 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 les valeurs minimale et maximale spécifiées dans cette démonstration de Codepen.

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.

Largeur parfaite

D'après l'article de Robert Bringhurst intitulé The Elements of Typographic Style (Les éléments du style typographique) de Robert Bringhurst, "tout ce qui comporte entre 45 et 75 caractères est largement considéré comme une longueur de ligne satisfaisante pour une page à colonne unique définie dans une face avec empattement et une taille de texte".

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

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, 45ch est utilisé à la place pour la largeur. Si 50% est plus large que 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 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 é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 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.

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 : 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 soustraitez 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, elle doit se présenter comme suit:

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

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.

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

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 pour vous. 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 vue d'ensemble de la page jusqu'à atteindre les valeurs minimales et maximales limitantes, en utilisant très peu de code:

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

Autres ressources

Image de couverture de @yer_a_wizard sur Unsplash.