min, max, et clamp

Les fonctions CSS min(), max() et clamp() sont des fonctions permettant de remplacer une unité fixe - comme par exemple 320px - par une formule plus flexible.

La fonction min()

La fonction CSS min() permet de spécifier plusieurs valeurs, et la plus petite sera retenue. Cela permet donc de définir un seuil maximal. Exemple, pour limiter la largeur d’un élément à un maximum de 400 pixels:

width: min(50%, 400px);

À l’inverse, la fonction max() retiendra la plus grande des unités. Elle permet donc de définir un seuil minimal. Exemple:

width: max(50%, 400px);

La fonction clamp()

Ces fonctions sont utiles, mais on voudra souvent limiter la taille minimale et maximale en même temps. Par exemple pour la taille d’une fonte, il faut définir un minimum et un maximum, pour garantir la lisibilité sur tous les écrans.

La solution est clamp() : cette fonction CSS combine les propriétés de min() ou max(). Dans la spécification du W3C, il est indiqué que:

• Clamp accepte trois valeurs: valeur minimum, valeur centrale, valeur maximum.
• En cas de conflit, c’est la valeur minimum qui sera appliquée.

clamp() permet donc de définir à la fois:

1. une taille minimum.
2. une valeur centrale idéale.
3. une taille maximum.

Le mot clamp, en anglais, désigne cet outil:

Un exemple de taille de fonte “responsive”, définie avec clamp:

h1 {
  font-size: clamp(5px, 5vmax, 80px);
}
h2 {
  font-size: clamp(5px, 3vmax, 60px);
}

Le résultat de ce code: https://competent-galileo-9d6914.netlify.app/

Un exemple pour définir la largeur d’un élément, avec 350px comme minimum et 500px comme maximum:

width: clamp(350px, 50%, 500px);

Une démonstration en vidéo:

Ressources

• Support de cours, Unités CSS
• La spécification du W3C: Comparison Functions: min(), max(), and clamp(), dans CSS Values and Units Module Level 4
• Explication en vidéo, sur Web.Dev
• Explication en vidéo, sur CSS Tricks.
• La fonction min() dans MDN.
• La fonction max() dans MDN.

Erreurs possibles

Si ça ne fonctionne pas:

Attention : si vous mettez un espace entre clamp et la parenthèse ça ne marche pas:

Ecrire clamp(20px, 10vw, 80px) au lieu de clamp (20px, 10vw, 80px).

Différences avec vmin, vmax

Les fonctions min() et max() ne doivent pas être confondues avec les unités vmin et vmax. Ces dernières sont des unités relatives au viewport. Rappel des quatre unités viewport:

• vw : 1% de la largeur du viewport
• vh : 1% de la hauteur du viewport
• vmin : 1% de la plus petite dimension (la plus petite valeur de vh ou vw)
• vmax : 1% de la plus grande dimension (la plus grande valeur de vh ou vw)

Exemple utilisant vmin pour dessiner un cube, qui mesure 50% de la plus petite dimension: