Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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:
( min  , val  , max )
Résultat

Compatibilité et prise en charge par les navigateurs.

Les fonctions de calcul évolué (min(), max(), clamp()...) ne sont pas prises en charge à l'heure actuelle (août 2019).

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Fonctions de calcul - Fonctions.

  • attr() : Renvoie la valeur d'un attribut.
  • calc() : Calcule une valeur pour une propriété.
  • max() : Détermine la valeur la plus petite parmi une série de valeurs.
  • min() : Détermine la valeur la plus grande parmi une série de valeurs.
  • minmax() : Renvoie une valeur comprise dans une fourchette.