Clamp() - Fonction CSS

clamp()

Résumé des caractéristiques de la fonction `clamp()`

Description rapide

Calcule une valeur entre deux valeurs extrêmes.

Statut

Standard

Module W3C

Module CSS - Valeurs et unités

Références (W3C)

CSS Values and Units Module Level 4

Statut du document: WD (document de travail)

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 valeur `clamp()` peut être utilisée avec les propriétés suivantes :

A la place de n'importe quelle valeur de dimensions, mais est plutôt destinée à représenter un largeur ou une hauteur.

Syntaxes 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 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 avec clamp().

Simulateur avec la fonction `clamp()`

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).

width :

auto

clamp( 300px , 50% , 350px )

clamp( 50% , 350px , 60% )

Support de la fonction `clamp()`.

Les fonctions de calcul évolué (min(), max(), clamp()...) sont correctement prises en charge par les navigateurs actuels.

Fonctions
min() max()
et clamp()

Estimation de la prise en charge globale.

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Firefox

Safari

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction `clamp()`.

Module CSS - Valeurs et unités - Niveau 4

Le niveau 4 introduit de nombreuses fonctions de calcul mathématiques ou trigonométriques. clamp() en fait partie.

14 Août 2018
Document de travail.

Autres fonctions de calcul.

Les fonctions de calcul, les fonctions mathématiques, et les fonctions trigonométriques, sont décrites dans la spécification CSS Values and Units Module, à partir du niveau 4.