Docs CSS exécutables : clamp() CSS

Q: Que fait clamp() en CSS ?

clamp(MIN, PREFERRED, MAX) utilise la valeur préférée tant qu'elle reste entre les deux limites, et la limite la plus proche sinon. font-size: clamp(1rem, 4vw, 2rem) suit 4 % de la largeur du viewport, sans jamais descendre sous 1rem ni dépasser 2rem.

Q: Que se passe-t-il si le minimum est plus grand que le maximum dans clamp() ?

Le minimum gagne. clamp(3rem, 5vw, 2rem) vaut toujours 3rem, car clamp() applique le minimum après le maximum.

Q: Quelle est la différence entre min() et max() en CSS ?

min() renvoie la plus petite de ses valeurs, il agit donc comme une limite haute : width: min(100%, 600px) ne dépasse jamais 600px. max() renvoie la plus grande, il agit donc comme une limite basse : font-size: max(1rem, 2vw) ne descend jamais sous 1rem.

Q: clamp() est-il pris en charge par tous les navigateurs ?

Oui, clamp(), min() et max() fonctionnent dans toutes les versions actuelles de Chrome, Edge, Firefox et Safari, et s'utilisent dans toute propriété qui accepte une longueur, un nombre, un pourcentage ou un angle.

Ce que fait clamp()

clamp(MIN, PREFERRED, MAX) prend trois valeurs et renvoie celle du milieu, tant qu'elle reste entre les deux autres. L'usage classique est un titre qui grandit avec l'écran mais s'arrête à des limites raisonnables, sans media query :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    h1 {
      font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
      margin: 0 0 8px;
      color: #111827;
    }
  </style>
</head>
<body>
  <h1>Fluid heading</h1>
  <p id="out"></p>
  <script>
    const show = () => {
      document.getElementById('out').textContent =
        'Preview width ' + innerWidth + 'px, heading font-size ' + getComputedStyle(document.querySelector('h1')).fontSize;
    };
    addEventListener('resize', show);
    show();
  </script>
</body>
</html>

La valeur préférée est 1rem + 3vw : 16px plus 3 % de la largeur. Dans un aperçu de 800px de large, cela donne 16 + 24 = 40px, ce qui se situe entre 24px (1.5rem) et 48px (3rem) : le titre fait donc 40px. Sur un téléphone de 320px, la valeur préférée est de 25,6px. Au-delà de 1067px, elle dépasserait 48px, et elle s'arrête donc à 48px. Redimensionnez la fenêtre pour voir le nombre changer ; ici, vw est un pourcentage de la largeur du cadre de l'aperçu.

Le voir sans redimensionner la fenêtre

vw suit le viewport, que vous ne pouvez pas facilement modifier pendant la lecture. Les unités de container queries suivent plutôt un conteneur : cqi vaut 1 % de la largeur du conteneur. Faites glisser le curseur pour changer la boîte, et le même genre de clamp() réagit :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp with a slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .box { container-type: inline-size; background: #e5e7eb; padding: 12px; margin-top: 10px; box-sizing: border-box; }
    .title { font-size: clamp(1.25rem, 0.5rem + 6cqi, 2.5rem); font-weight: 700; margin: 0; }
  </style>
</head>
<body>
  <label>box width <input id="w" type="range" min="200" max="760" value="480"></label>
  <div class="box" id="box"><p class="title">Resizable title</p></div>
  <p id="out"></p>
  <script>
    const box = document.getElementById('box');
    const title = document.querySelector('.title');
    const update = () => {
      box.style.width = document.getElementById('w').value + 'px';
      const size = parseFloat(getComputedStyle(title).fontSize);
      const note = size <= 20 ? ' (at MIN)' : size >= 40 ? ' (at MAX)' : ' (preferred value)';
      document.getElementById('out').textContent = 'box ' + box.offsetWidth + 'px: font-size ' + size.toFixed(1) + 'px' + note;
    };
    document.getElementById('w').addEventListener('input', update);
    update();
  </script>
</body>
</html>

Glissez au début et le titre s'arrête à 20px (le MIN). Glissez à la fin et il s'arrête à 40px (le MAX). Entre les deux, il suit 0.5rem + 6cqi. C'est le même mécanisme que la version en vw, avec une règle plus petite.

Les trois arguments

font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
/*               MIN   PREFERRED     MAX    */

Argument	Rôle	Unité typique
MIN	la plus petite valeur possible	`rem`
PREFERRED	la valeur qui change avec l'écran	`rem + vw` (ou `cqi`)
MAX	la plus grande valeur possible	`rem`

Les calculs fonctionnent dans chaque argument sans écrire calc() : 1rem + 2vw convient tel quel. Les signes + et - demandent un espace des deux côtés, sinon toute la déclaration est invalide.

Si MIN est plus grand que MAX, MIN gagne : clamp(3rem, 5vw, 2rem) vaut toujours 3rem.

Calculer la valeur du milieu

Pour faire passer une police de 16px sur un écran de 320px à 24px sur un écran de 1280px :

Pente : (24 − 16) ÷ (1280 − 320) = 8 ÷ 960 = 0,00833, soit 0.833vw (vw se compte pour 100px).
Point de départ : 16px − 0,00833 × 320px = 13,33px, soit 0.833rem.
Placez les limites autour :

font-size: clamp(1rem, 0.833rem + 0.833vw, 1.5rem);

À 320px de large, cela donne 13,33 + 2,67 = 16px, à 1280px 13,33 + 10,67 = 24px, et en dehors de cette plage la valeur reste aux limites. Les « calculateurs de clamp » en ligne font exactement ce calcul.

min() et max()

clamp() combine deux fonctions plus simples :

min(a, b) renvoie la plus petite valeur, elle fixe donc une limite haute.
max(a, b) renvoie la plus grande valeur, elle fixe donc une limite basse.
clamp(MIN, VAL, MAX) équivaut à max(MIN, min(VAL, MAX)).

Les noms semblent inversés au début : pour dire « au plus 600px », on utilise min().

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card {
      width: min(100%, 420px);          /* full width, but at most 420px */
      padding: max(12px, 3%);           /* at least 12px */
      margin-bottom: 10px;
      background: #2563eb;
      color: white;
      box-sizing: border-box;
    }
    .narrow { width: 260px; }
  </style>
</head>
<body>
  <div class="card" id="a">In the full preview</div>
  <div class="narrow"><div class="card" id="b">In a 260px parent</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = ['a', 'b'].map((id) => {
      const el = document.getElementById(id);
      return id + ': width ' + el.offsetWidth + 'px, padding ' + getComputedStyle(el).paddingTop;
    }).join('  |  ');
  </script>
</body>
</html>

Dans l'aperçu large, la première carte s'arrête à 420px. Dans le parent de 260px, 100% est la plus petite valeur, et la deuxième carte fait donc 260px. max(12px, 3%) donne à la première carte 3 % de la largeur de son parent (le body : environ 23,5px dans un aperçu de 800px), et 12px à la deuxième, car 3 % de 260px (7,8px) passent sous le plancher.

width: min(100%, 420px) remplace en une seule déclaration l'ancienne paire width: 100%; max-width: 420px;.

Au-delà des tailles de police : espacements et largeurs

clamp() fonctionne dans toute propriété qui accepte une longueur. Des pourcentages dans la valeur du milieu rendent un composant fluide par rapport à son parent plutôt qu'au viewport :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp spacing</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .parent { background: #e5e7eb; margin-bottom: 10px; }
    .card {
      width: clamp(200px, 80%, 520px);  /* 80% of the parent, within limits */
      padding: clamp(10px, 5%, 32px);   /* % padding is relative to the parent's width */
      box-sizing: border-box;
      background: #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="parent" style="width: 300px"><div class="card">In a 300px parent</div></div>
  <div class="parent" style="width: 760px"><div class="card">In a 760px parent</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.card')]
      .map((c) => c.offsetWidth + 'px wide, padding ' + getComputedStyle(c).paddingTop).join('  |  ');
  </script>
</body>
</html>

Dans le parent de 300px, la carte fait 240px de large (80 %) avec 15px de padding (5 % de 300px). Dans le parent de 760px, 80 % donneraient 608px, la carte s'arrête donc à son maximum de 520px, et 5 % de 760px font 38px, donc le padding s'arrête à 32px.

Accessibilité : gardez du rem dans la valeur du milieu

Une taille de police faite uniquement de vw, comme font-size: 5vw, ne grandit pas quand le lecteur augmente la taille de police par défaut dans les réglages du navigateur, et elle ne grandit pas non plus avec le zoom, car zoomer rend le viewport plus étroit en pixels CSS. Ajouter une partie en rem (1rem + 2vw) et des limites en rem garde le texte lié au réglage du lecteur. La page des unités explique rem et vw en détail.

Erreurs courantes

Utiliser min() pour un minimum. min() choisit la plus petite valeur, c'est-à-dire une limite haute. Pour « au moins 12px », utilisez max(12px, ...).
Pas d'espaces autour de + ou -. clamp(1rem, 1rem+2vw, 3rem) est invalide, et la propriété revient à sa valeur précédente.
Seulement du vw au milieu. Le texte ignore alors le réglage de taille de police du lecteur. Ajoutez un terme en rem.
MIN plus grand que MAX. Le résultat est toujours MIN, ce qui est rarement voulu.
Des limites en px pour les tailles de police. Elles plafonnent le texte même pour les lecteurs qui en ont besoin en plus grand. Utilisez rem.

Questions fréquentes

Que fait clamp() en CSS ?

clamp(MIN, PREFERRED, MAX) utilise la valeur préférée tant qu'elle reste entre les deux limites, et la limite la plus proche sinon. font-size: clamp(1rem, 4vw, 2rem) suit 4 % de la largeur du viewport, sans jamais descendre sous 1rem ni dépasser 2rem.

Comment faire une taille de police responsive avec clamp ?

Placez une valeur basée sur le viewport au milieu et des limites fixes de chaque côté, et ajoutez du rem au milieu pour que le texte suive toujours le réglage de taille de police du lecteur : font-size: clamp(1.5rem, 1rem + 2vw, 3rem);.

Que se passe-t-il si le minimum est plus grand que le maximum dans clamp() ?

Le minimum gagne. clamp(3rem, 5vw, 2rem) vaut toujours 3rem, car clamp() applique le minimum après le maximum.

Quelle est la différence entre min() et max() en CSS ?

min() renvoie la plus petite de ses valeurs, il agit donc comme une limite haute : width: min(100%, 600px) ne dépasse jamais 600px. max() renvoie la plus grande, il agit donc comme une limite basse : font-size: max(1rem, 2vw) ne descend jamais sous 1rem.

clamp() est-il pris en charge par tous les navigateurs ?

Oui, clamp(), min() et max() fonctionnent dans toutes les versions actuelles de Chrome, Edge, Firefox et Safari, et s'utilisent dans toute propriété qui accepte une longueur, un nombre, un pourcentage ou un angle.

Concepts liés