clamp() - Fonction CSS
Résumé des caractéristiques de la fonction clamp()
Description de la fonction clamp()
.
La fonction clamp()
calcule une valeur tout en la limitant 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()
est équivalente à la combinaison des fonctions min()
et max()
suivant la formule :
clamp(MIN, VAL, MAX)
équivaut à max(MIN, min(VAL, MAX)))
.
Les trois valeurs fournies à clamp()
peuvent avoir des unités différentes, mais doivent représenter des grandeurs
physiques de même nature. On peut par exemple mixer des pixels avec des centimètres car ce sont deux unités de dimension,
mais on ne pourra pas mixer des pixels avec des degrés (angle).
Des calculs algébriques peuvent être inclus dans les paramètres de clamp()
sans qu'il soit nécessaire d'utiliser
la fonction calc()
. Exemple :
width: clamp(200px, 50%, 100% - 200px);
La fonction clamp() peut être utilisée avec :
- A la place de n'importe quelle valeur numérique.
Syntaxe de la fonction clamp()
.
min
est la valeur minimale acceptée.
val
est une valeur préconisée.
max
est la valeur maximale acceptée.
clamp(
)
- <propriété>: clamp(100px, 50%, 500px); min val max
La fonction
clamp()
attend trois paramètres, tous les trois obligatoires :val
est la valeur idéalement souhaitée mais qui doit cependant être comprise entremin
etmax
.min
est la valeur minimale.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'écrireclamp(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 nombres sans unité par exemple. IL faut noter que même la valeur
0
doit être suivie d'une unité si elle est utilisée avecclamp()
.
Simulateur.
La fonction clamp()
est appliquée à la largeur de l'élément bleu ci-dessous
Vous pouvez faire varier les valeurs en pourcentages en changeant la taille de la fenêtre du navigateur (tout au moins sur un PC de bureau).
Compatibilité et prise en charge par les navigateurs.
Les fonctions de calcul évolué (min()
, max()
, clamp()
...) sont correctement prises en charge
par les navigateurs actuels.
min()
max()
clamp()
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que clamp()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. clamp()
fait partie du Module CSS - Valeurs et unités (CSS Values and Units Module). Les définitions suivantes sont également décrites dans ce même module.