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 un intervalle limité pour la taille d'une image

clamp() peut permettre de définir un minimum et un maximum pour la largeur d'une image. Dans cet exemple, le code CSS permet d'avoir un logo qui occupe 40% de la largeur de la fenêtre tant que sa largeur ne dépasse pas 300 pixels ou n'est pas inférieure à 100 pixels. On évite d'utiliser les requêtes média grâce à clamp().

CSS

.logo {
  width: clamp(100px, 40vw, 300px);
}

HTML

<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">

Résultat

Dans cet exemple, le logo mesurera 100 pixels de large si la zone d'affichage est plus étroite que 400 pixels, 300 pixels de large si la zone d'affichage est plus large que 1200 pixels et 40% de la largeur de la zone d'affichage sinon.

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 AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Compatibilité inconnue  
Compatibilité inconnue
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
Dernière mise à jour par : SphinxKnight,