La fonction min()

La fonction CSS min() permet de spécifier plusieurs valeurs, et la plus petite sera retenue. Cela permet donc de défnir 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 serre-joints

Il existe même en emoji: 🗜️

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

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: