La fonction CSS clamp() permet de ramener (d'écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction clamp() peut être utilisée à tout endroit où une valeur de type <length>, <frequency>, <angle>, <time>, <percentage><number> ou <integer> peut être utilisée.

Note : l'expression  clamp(MIN, VAL, MAX) sera résolue comme max(MIN, min(VAL, MAX))).

width: clamp(10px, 4em, 80px);

Dans l'exemple précédent, la largeur fera au plus 80 pixels et au moins 10 pixels mais mesurera 4em de large si un em mesure entre 2.5 et 20px.

Prenons comme hypothèse qu'un em mesure 16px de large :

width: clamp(10px, 4em, 80px);
/* avec 1em = 16px, on a 4em = 16px * 4 = 64px */
width: clamp(10px, 64px, 80px);
/* clamp(MIN, VAL, MAX) est résolue comme max(MIN, min(VAL, MAX))) */
width: max(10px, min(64px, 80px)) 
width: max(10px, 64px);
width: 64px;

Syntaxe

La fonction clamp() utilise trois expressions séparées par des virgules comme paramètres. Ces paramètres sont, dans l'ordre, la valeur minimale, la valeur préférée et la valeur maximale.

La valeur minimale est la borne inférieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est inférieure.

La valeur préférée correspond à la valeur qui sera utilisée si elle est supérieure à la borne inférieure et inférieure à la borne supérieure.

La valeur maximale est la borne supérieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est supérieure.

Les expressions passées en paramètres peuvent utiliser des fonctions mathématiques (voir  calc pour plus d'informationsn), des valeurs littérales ou d'autres expressions ( attr() par exemple) tant que le résultat de cette expression est évalué avec un type valide. Il est aussi possible d'utiliser des expressions mathématiques sans calc() et il est également possible d'ajouter des parenthèses pour prioriser correctement les opérations imbriquées.

Il est possible d'utiliser différentes unités pour chacune des valeurs des expressions.

Notes

  • Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme auto si le tableau suit une disposition automatique ou fixée.
  • Il est possible d'imbriquer des fonctions max() et min() dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à calc().
  • Attention à bien utiliser un espace de chaque côté des opérateurs + et -.

Syntaxe formelle

clamp( <calc-sum>#{3} )


<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*


<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*


<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

Exemples

Indiquer une taille de police minimale et maximale

Un autre cas d'utilisation est de permettre à une taille de police de caractères de varier sans être minuscule et illisible et sans non plus être énorme.

CSS

h1 { 
  font-size: 2rem; 
}
h1.responsive {
  font-size: clamp(32px, 2em, 2rem);
}

Ici on utilise l'unité rem pour fixer un maximum correspondant à deux fois la taille em de la racine.

HTML

<h1>Ce texte est toujours lisible mais sa taille ne change pas.</h1>
<h1 class="responsive">Ce texte est toujours lisible et s'adapte dans une certaine mesure.</h1>

Résultat

Spécifications

Spécification État Commentaires
CSS Values and Units Module Level 4
La définition de 'clamp()' dans cette spécification.
Brouillon de l'éditeur  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
<clamp()>
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot
Dernière mise à jour par : SphinxKnight,