Guida CSS interattiva: calc()

Q: Cosa fa calc() in CSS?

Calcola un valore da un'espressione con +, -, * e /, e può mescolare unità che il browser conosce solo al momento del layout. width: calc(100% - 200px) è l'intera larghezza del genitore meno 200px, qualunque sia la larghezza del genitore.

Q: Perché il mio calc() non funziona?

La causa più comune sono gli spazi mancanti: + e - devono avere uno spazio su entrambi i lati, quindi calc(100%-20px) non è valido. Altre cause sono moltiplicare due lunghezze (10px * 2px) o dividere per una lunghezza, che non dà una lunghezza. Un calc() non valido rende non valida l'intera dichiarazione, quindi il browser la ignora.

Q: Posso usare le variabili CSS in calc()?

Sì. calc(var(--gap) 2) raddoppia una variabile, e calc(var(--columns) 1px) trasforma un numero senza unità in pixel. Prima viene sostituito il valore della variabile, poi si fa il calcolo.

Q: Servono gli spazi attorno a * e / in calc()?

No. Solo + e - richiedono gli spazi, perché senza -20px verrebbe letto come un numero negativo. Gli spazi attorno a * e / sono facoltativi, ma metterli ovunque è la regola più facile da ricordare.

Q: Che differenza c'è tra calc() e clamp()?

calc() calcola un valore da un'espressione. clamp(MIN, VAL, MAX) mantiene un valore tra due limiti. Si combinano: ogni argomento di clamp() può già contenere calcoli come quelli di calc, per esempio clamp(1rem, 1rem + 2vw, 3rem).

Cosa fa calc()

calc() fa aritmetica dentro un valore CSS, e può mescolare unità che ricevono una dimensione solo al momento del layout. Il caso classico è "tutta la larghezza meno una barra laterale fissa":

<!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% si conosce solo quando la pagina è stata impaginata, e 180px è fisso, quindi nessuna unità da sola potrebbe esprimerlo. calc() fa il conto: in un'anteprima larga 800px la riga misura 784px e la colonna principale riceve 604px, e la riga sotto il layout stampa i numeri reali. Oggi flexbox o grid farebbero questo layout senza calcoli, ma la stessa sottrazione ricorre ovunque: un'altezza meno un header, una larghezza meno uno spazio.

Le regole di sintassi

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 */

Regola	Valido	Non valido
Spazi attorno a `+` e `-`	`calc(100% - 20px)`	`calc(100%-20px)`
`*`: almeno un lato è un numero semplice	`calc(2 * 1rem)`	`calc(2px * 3px)`
`/`: dividi una lunghezza per un numero semplice	`calc(100% / 3)`	`width: calc(300px / 3px)` (non è una lunghezza)
Le unità devono essere compatibili	`calc(1rem + 10px)`	`calc(1rem + 2s)`

La regola degli spazi esiste perché 100% -20px verrebbe letto come due valori separati, il secondo negativo. Quando un calc() non è valido, l'intera dichiarazione viene scartata e l'elemento mantiene il valore che aveva dalle regole precedenti.

Prova un'espressione

Scrivi un'espressione qualsiasi per la larghezza del box. Il browser ti dice se è valida e a quale larghezza corrisponde:

<!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>

Prova 100%-200px (non valido, senza spazi), 100% / 3, 50% + 4rem, 2 * 120px, 200px * 2px (non valido) e (100% - 40px) / 2.

calc() con le variabili CSS

Le variabili e calc() vanno d'accordo: salvi un valore di base una volta sola e ricavi il resto da lì. Una variabile senza unità diventa una lunghezza quando la moltiplichi per un'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>

Cambia --space in 12px o --cols in 4 e ogni valore derivato si adegua. La pagina sulle variabili CSS spiega come dichiararle e il loro ambito.

Usi comuni

Esigenza	calc()
Riempire lo spazio accanto a un elemento fisso	`width: calc(100% - 240px)`
Sezione sotto un header fisso	`min-height: calc(100vh - 64px)`
Metà della larghezza meno metà dello spazio	`width: calc(50% - 8px)`
Centrare un box di 100px in posizione assoluta	`left: calc(50% - 50px)`
Dimensione del font che cresce un po' con lo schermo	`font-size: calc(1rem + 0.5vw)`
Trasformare una variabile numerica in una lunghezza	`calc(var(--n) * 1px)`
L'opposto di una variabile	`calc(var(--space) * -1)`

Per un valore che deve restare entro dei limiti, usa clamp(), che accetta gli stessi calcoli nei suoi argomenti senza scrivere calc().

Dove funziona calc()

Ovunque sia ammessa una lunghezza, una percentuale, un numero, un angolo o un tempo: width, margin, padding, top, font-size, line-height, le dimensioni delle tracce della griglia, transition-delay e gli angoli dentro transform. Si può annidare, e un calc() annidato equivale a semplici parentesi.

Gli angoli sono un buon esempio. Ogni tacca qui sotto ha il suo --i (da 0 a 11), e una sola regola lo trasforma in un angolo con 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 tacca 3 riceve rotate(90deg), che Chrome riporta come la matrice matrix(0, 1, -1, 0, 0, 0): un quarto di giro. left: calc(50% - 2px) centra ogni tacca sottraendo metà della sua larghezza di 4px.

Errori comuni

Nessuno spazio attorno a - o +. calc(100%-20px) non è valido e viene ignorato.
Moltiplicare due lunghezze. calc(10px * 2px) non ha significato in CSS. Un lato di * deve essere un numero semplice.
Usare calc() per un'altezza in percentuale senza altezza del genitore. calc(100% - 20px) per height richiede un genitore con un'altezza impostata, proprio come height: 100%.
Usare calc() dove basterebbero flexbox o grid. width: calc(33.333% - 10px) per le colonne è fragile; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px non richiede calcoli.
Aspettarsi un messaggio di errore. Il browser non avvisa di un calc() non valido. Controlla l'elemento negli strumenti per sviluppatori: una dichiarazione non valida compare barrata.

Domande frequenti

Cosa fa calc() in CSS?

Calcola un valore da un'espressione con +, -, * e /, e può mescolare unità che il browser conosce solo al momento del layout. width: calc(100% - 200px) è l'intera larghezza del genitore meno 200px, qualunque sia la larghezza del genitore.

Perché il mio calc() non funziona?

La causa più comune sono gli spazi mancanti: + e - devono avere uno spazio su entrambi i lati, quindi calc(100%-20px) non è valido. Altre cause sono moltiplicare due lunghezze (10px * 2px) o dividere per una lunghezza, che non dà una lunghezza. Un calc() non valido rende non valida l'intera dichiarazione, quindi il browser la ignora.

Posso usare le variabili CSS in calc()?

Sì. calc(var(--gap) * 2) raddoppia una variabile, e calc(var(--columns) * 1px) trasforma un numero senza unità in pixel. Prima viene sostituito il valore della variabile, poi si fa il calcolo.

Servono gli spazi attorno a * e / in calc()?

No. Solo + e - richiedono gli spazi, perché senza -20px verrebbe letto come un numero negativo. Gli spazi attorno a * e / sono facoltativi, ma metterli ovunque è la regola più facile da ricordare.

Che differenza c'è tra calc() e clamp()?

calc() calcola un valore da un'espressione. clamp(MIN, VAL, MAX) mantiene un valore tra due limiti. Si combinano: ogni argomento di clamp() può già contenere calcoli come quelli di calc, per esempio clamp(1rem, 1rem + 2vw, 3rem).

Concetti correlati