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 :

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)
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 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(
Schéma syntaxique de la fonction clamp() en CSSSyntaxe de la fonction clamp() et utilisation en CSS. minmin , valval , max max
)
  • <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.

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 :

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.

1
min()
max()
clamp()
Estimation de la prise en charge en pourcentage du parc actuel.
94%

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.

Fonctions.

Calcule la valeur absolue d'un nombre.
Calcule l'angle dont le cosinus vaut la valeur indiquée.
Calcule l'angle dont le sinus vaut la valeur indiquée.
Calcule l'angle dont la tangente vaut la valeur indiquée.
Calcule l'angle entre l'axe des abscisses et la droite reliant le point origine au point indiqué.
Renvoie la valeur d'un attribut.
Calcule une valeur pour une propriété.
Calcul le cosinus d'un angle.
Calcule l'exponentielle d'un nombre.
Calcule la racine carrée d'une somme de carrés de nombres.
Calcule le logarithme d'un nombre.
Détermine la valeur la plus petite parmi une série de valeurs.
Détermine la valeur la plus grande parmi une série de valeurs.
Calcule le reste de la division entière entre deux nombres.
Calcule une mise à l'exposant
Calcule le reste de la division entière de deux nombres.
Calcule l'arrondi d'un nombre.
Calcule le signe d'un nombre.
Calcule le sinus d'un angle.
Calcule la racine carrée d'un nombre.
Calcule la tangente d'un angle.
Spécifie l'adresse d'un élément tel qu'une image par exemple.