Fonction clamp

 

CSS - Fonction clamp()

Description de la fonction clamp().

La fonction clamp() limite une valeur entre deux valeurs extrêmes.

Par exemple, je veux qu'un élément occupe la moitié de la largeur de la page (son parent) mais sans descendre en dessous de 200 pixels ni dépasser les 800 pixels :

width: clamp(200px, 50%, 800px);

La fonction clamp() peut être utilisée avec :

• A la place de n'importe quelle valeur numérique.

Syntaxe de la fonction clamp().

• <propriété>: clamp(100px, 50%, 500px); min val max

  La fonction clamp() attend trois paramètres, tous les trois obligatoires :

  1. val est la valeur idéalement souhaitée mais qui doit cependant être comprise entre min et max.
  2. min est la valeur minimale.
  3. max est la valeur maximale.

  Si la valeur minimale est supérieure à la maximale, la fonction renvoie toujours la valeur minimale.

  La fonction clamp() est intéressante lorsque ses paramètres ont des unités différentes : en effet, il n'est pas très utile d'écrire
  clamp(100px, 150px, 200px)
  
  Par contre lorsque une valeur est dans une unité relative, elle peut varier en fonction du contexte, il est alors utile de la limiter avec des valeurs fixes.

  Les trois unités doivent cependant être du même type : ne pas mélanger des dimensions avec des angles par exemple.

Simulateur.

La fonction clamp() est appliquée à la largeur de l'élément "Résultat". Vous pouvez faire varier les valeurs en pourcentages en changeant la taille de la fenêtre du navigateur (sur un PC de bureau).

width: clamp

(min ,val ,max)