Docs CSS exécutables : calc() CSS

Q: Que fait calc() en CSS ?

Il calcule une valeur à partir d'une expression avec +, -, * et /, et il peut mélanger des unités que le navigateur ne connaît qu'au moment de la mise en page. width: calc(100% - 200px) vaut toute la largeur du parent moins 200px, quelle que soit la largeur du parent.

Q: Pourquoi mon calc() ne fonctionne-t-il pas ?

La cause la plus fréquente est l'absence d'espaces : + et - doivent être entourés d'espaces, donc calc(100%-20px) est invalide. Autres causes : multiplier deux longueurs (10px * 2px) ou diviser par une longueur, ce qui ne donne pas une longueur. Un calc() invalide rend toute la déclaration invalide, et le navigateur l'ignore.

Q: Peut-on utiliser des variables CSS dans calc() ?

Oui. calc(var(--gap) 2) double une variable, et calc(var(--columns) 1px) transforme un nombre sans unité en pixels. La valeur de la variable est d'abord substituée, puis le calcul est effectué.

Q: Faut-il des espaces autour de * et / dans calc() ?

Non. Seuls + et - exigent des espaces, car sans eux -20px serait lu comme un nombre négatif. Les espaces autour de * et / sont facultatifs, mais en mettre partout est la règle la plus simple à retenir.

Q: Quelle est la différence entre calc() et clamp() ?

calc() calcule une valeur à partir d'une expression. clamp(MIN, VAL, MAX) maintient une valeur entre deux limites. Ils se combinent : chaque argument de clamp() peut déjà contenir des calculs à la manière de calc, comme clamp(1rem, 1rem + 2vw, 3rem).

Ce que fait calc()

calc() fait de l'arithmétique dans une valeur CSS, et il peut mélanger des unités qui ne prennent une taille qu'au moment de la mise en page. Le cas classique est « toute la largeur moins une barre latérale fixe » :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .layout { background: #e5e7eb; height: 110px; }
    .side { float: left; width: 180px; height: 100%; background: #111827; color: white; }
    .main {
      float: left;
      width: calc(100% - 180px); /* whatever is left next to the sidebar */
      height: 100%;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="layout"><div class="side">180px</div><div class="main" id="m">calc(100% - 180px)</div></div>
  <p id="out"></p>
  <script>
    const m = document.getElementById('m');
    document.getElementById('out').textContent = 'main is ' + m.offsetWidth + 'px of a ' + m.parentElement.offsetWidth + 'px row';
  </script>
</body>
</html>

100% n'est connu qu'une fois la page mise en page, et 180px est fixe : aucune unité seule ne pourrait l'exprimer. calc() fait le calcul : dans un aperçu de 800px de large, la rangée fait 784px et la colonne principale reçoit 604px, et la ligne sous la mise en page affiche les vrais nombres. Aujourd'hui, flexbox ou grid feraient cette mise en page sans calcul, mais la même soustraction revient partout : une hauteur moins un en-tête, une largeur moins un espace.

Les règles de syntaxe

width: calc(100% - 2rem);          /* + and - need spaces on both sides */
width: calc(100% / 3);             /* divide by a plain number */
margin: calc(var(--space) * 2);    /* multiply by a plain number */
height: calc(100vh - (64px + 1rem)); /* parentheses group */

Règle	Valide	Invalide
Des espaces autour de `+` et `-`	`calc(100% - 20px)`	`calc(100%-20px)`
`*` : au moins un côté est un nombre simple	`calc(2 * 1rem)`	`calc(2px * 3px)`
`/` : diviser une longueur par un nombre simple	`calc(100% / 3)`	`width: calc(300px / 3px)` (pas une longueur)
Les unités doivent être compatibles	`calc(1rem + 10px)`	`calc(1rem + 2s)`

La règle des espaces existe parce que 100% -20px se lirait comme deux valeurs séparées, la seconde étant un nombre négatif. Quand un calc() est invalide, toute la déclaration est jetée et l'élément garde la valeur qu'il avait grâce aux règles précédentes.

Essayez une expression

Tapez n'importe quelle expression pour la largeur de la boîte. Le navigateur indique si elle est valide et la largeur obtenue :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc tester</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .track { background: #e5e7eb; margin: 10px 0; }
    #box { width: 50%; height: 40px; background: #16a34a; }
  </style>
</head>
<body>
  <label>width: calc(<input id="expr" value="100% - 200px" size="24">)</label>
  <div class="track"><div id="box"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('expr');
    const box = document.getElementById('box');
    const update = () => {
      const value = 'calc(' + input.value + ')';
      const ok = CSS.supports('width', value);
      box.style.width = ok ? value : '';
      document.getElementById('out').textContent = ok
        ? 'valid: ' + box.offsetWidth + 'px of ' + box.parentElement.offsetWidth + 'px'
        : 'invalid: the browser would ignore this declaration';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Essayez 100%-200px (invalide, pas d'espaces), 100% / 3, 50% + 4rem, 2 * 120px, 200px * 2px (invalide) et (100% - 40px) / 2.

calc() avec des variables CSS

Les variables et calc() vont ensemble : stockez une valeur de base une fois et dérivez-en le reste. Une variable sans unité devient une longueur quand vous la multipliez par une unité :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc and variables</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    :root { --space: 8px; --cols: 3; }
    .grid {
      display: grid;
      grid-template-columns: repeat(var(--cols), 1fr);
      gap: calc(var(--space) * 2);        /* 16px */
      padding: calc(var(--space) * 3);    /* 24px */
      background: #e5e7eb;
    }
    .grid div {
      height: calc(var(--cols) * 20px);   /* unitless 3 becomes 60px */
      background: #2563eb;
    }
  </style>
</head>
<body>
  <div class="grid"><div></div><div></div><div></div></div>
  <p id="out"></p>
  <script>
    const g = getComputedStyle(document.querySelector('.grid'));
    const cell = getComputedStyle(document.querySelector('.grid div'));
    document.getElementById('out').textContent = 'gap ' + g.columnGap + ', padding ' + g.paddingTop + ', cell height ' + cell.height;
  </script>
</body>
</html>

Passez --space à 12px ou --cols à 4 et toutes les valeurs dérivées suivent. La page des variables CSS explique comment les déclarer et définir leur portée.

Usages courants

Besoin	calc()
Remplir l'espace à côté d'un élément fixe	`width: calc(100% - 240px)`
Section sous un en-tête fixe	`min-height: calc(100vh - 64px)`
La moitié de la largeur moins la moitié d'un espace	`width: calc(50% - 8px)`
Centrer une boîte de 100px positionnée en absolu	`left: calc(50% - 50px)`
Une taille de police qui grandit un peu avec l'écran	`font-size: calc(1rem + 0.5vw)`
Transformer une variable numérique en longueur	`calc(var(--n) * 1px)`
L'opposé d'une variable	`calc(var(--space) * -1)`

Pour une valeur qui doit rester entre des limites, utilisez clamp(), qui accepte les mêmes calculs dans ses arguments sans écrire calc().

Où calc() fonctionne

Partout où une longueur, un pourcentage, un nombre, un angle ou une durée est autorisé : width, margin, padding, top, font-size, line-height, tailles des pistes de grille, transition-delay, et angles dans transform. Il peut être imbriqué, et un calc() imbriqué équivaut à de simples parenthèses.

Les angles en sont un bon exemple. Chaque graduation ci-dessous a sa propre --i (de 0 à 11), et une seule règle la transforme en angle avec calc(var(--i) * 30deg) :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc angles</title>
  <style>
    .dial { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .tick {
      position: absolute;
      top: 10px;
      left: calc(50% - 2px);          /* center a 4px wide tick */
      width: 4px;
      height: 16px;
      background: #111827;
      transform-origin: 2px 70px;     /* the center of the dial */
      transform: rotate(calc(var(--i) * 30deg));
    }
  </style>
</head>
<body>
  <div class="dial" id="dial"></div>
  <p id="out"></p>
  <script>
    const dial = document.getElementById('dial');
    for (let i = 0; i < 12; i++) dial.insertAdjacentHTML('beforeend', '<div class="tick" style="--i: ' + i + '"></div>');
    document.getElementById('out').textContent = 'tick 3 transform: ' + getComputedStyle(dial.children[3]).transform;
  </script>
</body>
</html>

La graduation 3 reçoit rotate(90deg), que Chrome indique sous forme de matrice matrix(0, 1, -1, 0, 0, 0) : un quart de tour. left: calc(50% - 2px) centre chaque graduation en soustrayant la moitié de sa propre largeur de 4px.

Erreurs courantes

Pas d'espaces autour de - ou +. calc(100%-20px) est invalide et ignoré.
Multiplier deux longueurs. calc(10px * 2px) n'a pas de sens en CSS. Un côté de * doit être un nombre simple.
Utiliser calc() pour une hauteur en pourcentage sans hauteur sur le parent. calc(100% - 20px) pour height demande un parent avec une hauteur définie, comme height: 100%.
Utiliser calc() là où flexbox ou grid suffiraient. width: calc(33.333% - 10px) pour des colonnes est fragile ; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px n'a besoin d'aucun calcul.
Attendre un message d'erreur. Le navigateur ne signale pas un calc() invalide. Inspectez l'élément dans les outils de développement : une déclaration invalide y apparaît barrée.

Questions fréquentes

Que fait calc() en CSS ?

Il calcule une valeur à partir d'une expression avec +, -, * et /, et il peut mélanger des unités que le navigateur ne connaît qu'au moment de la mise en page. width: calc(100% - 200px) vaut toute la largeur du parent moins 200px, quelle que soit la largeur du parent.

Pourquoi mon calc() ne fonctionne-t-il pas ?

La cause la plus fréquente est l'absence d'espaces : + et - doivent être entourés d'espaces, donc calc(100%-20px) est invalide. Autres causes : multiplier deux longueurs (10px * 2px) ou diviser par une longueur, ce qui ne donne pas une longueur. Un calc() invalide rend toute la déclaration invalide, et le navigateur l'ignore.

Peut-on utiliser des variables CSS dans calc() ?

Oui. calc(var(--gap) * 2) double une variable, et calc(var(--columns) * 1px) transforme un nombre sans unité en pixels. La valeur de la variable est d'abord substituée, puis le calcul est effectué.

Faut-il des espaces autour de * et / dans calc() ?

Non. Seuls + et - exigent des espaces, car sans eux -20px serait lu comme un nombre négatif. Les espaces autour de * et / sont facultatifs, mais en mettre partout est la règle la plus simple à retenir.

Quelle est la différence entre calc() et clamp() ?

calc() calcule une valeur à partir d'une expression. clamp(MIN, VAL, MAX) maintient une valeur entre deux limites. Ils se combinent : chaque argument de clamp() peut déjà contenir des calculs à la manière de calc, comme clamp(1rem, 1rem + 2vw, 3rem).

Concepts liés