Dokumentacja CSS z przykładami: calc()

Q: Co robi calc() w CSS?

Oblicza wartość z wyrażenia z +, -, * i / i może łączyć jednostki, które przeglądarka zna dopiero w czasie układania strony. width: calc(100% - 200px) to pełna szerokość rodzica minus 200px, bez względu na to, jaka jest szerokość rodzica.

Q: Dlaczego moje calc() nie działa?

Najczęstsza przyczyna to brak spacji: + i - muszą mieć odstęp z obu stron, więc calc(100%-20px) jest niepoprawne. Inne przyczyny to mnożenie dwóch długości (10px * 2px) albo dzielenie przez długość, które nie daje długości. Niepoprawne calc() unieważnia całą deklarację, więc przeglądarka ją ignoruje.

Q: Czy mogę używać zmiennych CSS w calc()?

Tak. calc(var(--gap) 2) podwaja zmienną, a calc(var(--columns) 1px) zamienia liczbę bez jednostki na piksele. Najpierw podstawiana jest wartość zmiennej, a potem wykonywane są obliczenia.

Q: Czy wokół * i / w calc() potrzebne są spacje?

Nie. Spacji wymagają tylko + i -, bo bez nich -20px zostałoby odczytane jako liczba ujemna. Spacje wokół * i / są opcjonalne, ale pisanie ich wszędzie to najłatwiejsza zasada do zapamiętania.

Q: Czym różni się calc() od clamp()?

calc() oblicza jedną wartość z wyrażenia. clamp(MIN, VAL, MAX) utrzymuje wartość między dwiema granicami. Można je łączyć: każdy argument clamp() może już zawierać obliczenia w stylu calc, na przykład clamp(1rem, 1rem + 2vw, 3rem).

Co robi calc()

calc() wykonuje działania wewnątrz wartości CSS i może łączyć jednostki, które dostają rozmiar dopiero w czasie układania strony. Klasyczny przypadek to "pełna szerokość minus stały panel boczny":

<!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% jest znane dopiero po ułożeniu strony, a 180px jest stałe, więc żadna pojedyncza jednostka nie wyrazi tego wyniku. calc() go oblicza: w podglądzie o szerokości 800px wiersz ma 784px, a główna kolumna dostaje 604px, a linia pod układem pokazuje prawdziwe liczby. Dziś flexbox albo grid zrobiłyby ten układ bez obliczeń, ale to samo odejmowanie wciąż pojawia się wszędzie: wysokość minus nagłówek, szerokość minus odstęp.

Zasady składni

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

Zasada	Poprawnie	Niepoprawnie
Spacje wokół `+` i `-`	`calc(100% - 20px)`	`calc(100%-20px)`
`*`: co najmniej jedna strona to zwykła liczba	`calc(2 * 1rem)`	`calc(2px * 3px)`
`/`: dziel długość przez zwykłą liczbę	`calc(100% / 3)`	`width: calc(300px / 3px)` (to nie długość)
Jednostki muszą być zgodne	`calc(1rem + 10px)`	`calc(1rem + 2s)`

Zasada spacji istnieje, bo 100% -20px zostałoby odczytane jako dwie osobne wartości, z czego druga to liczba ujemna. Gdy calc() jest niepoprawne, cała deklaracja zostaje odrzucona, a element zachowuje wartość z wcześniejszych reguł.

Wypróbuj wyrażenie

Wpisz dowolne wyrażenie dla szerokości pudełka. Przeglądarka pokaże, czy jest poprawne, i jaką szerokość z niego obliczyła:

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

Wypróbuj 100%-200px (niepoprawne, bez spacji), 100% / 3, 50% + 4rem, 2 * 120px, 200px * 2px (niepoprawne) i (100% - 40px) / 2.

calc() ze zmiennymi CSS

Zmienne i calc() świetnie ze sobą współpracują: zapisz wartość bazową raz i wyprowadź z niej resztę. Zmienna bez jednostki staje się długością, gdy pomnożysz ją przez jedną jednostkę:

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

Zmień --space na 12px albo --cols na 4, a wszystkie wyprowadzone wartości się dostosują. Deklarowanie zmiennych i ich zasięg omawia strona o zmiennych CSS.

Typowe zastosowania

Potrzeba	calc()
Wypełnienie miejsca obok elementu o stałej szerokości	`width: calc(100% - 240px)`
Sekcja pod stałym nagłówkiem	`min-height: calc(100vh - 64px)`
Połowa szerokości minus połowa odstępu	`width: calc(50% - 8px)`
Wyśrodkowanie pozycjonowanego absolutnie pudełka 100px	`left: calc(50% - 50px)`
Rozmiar czcionki, który trochę rośnie z ekranem	`font-size: calc(1rem + 0.5vw)`
Zamiana zmiennej liczbowej na długość	`calc(var(--n) * 1px)`
Wartość przeciwna zmiennej	`calc(var(--space) * -1)`

Dla wartości, która musi zostać między granicami, użyj clamp(), które przyjmuje te same obliczenia w argumentach bez pisania calc().

Gdzie działa calc()

Wszędzie tam, gdzie dozwolona jest długość, procent, liczba, kąt albo czas: width, margin, padding, top, font-size, line-height, rozmiary ścieżek siatki, transition-delay oraz kąty w transform. Można je zagnieżdżać, a zagnieżdżone calc() działa tak samo jak zwykłe nawiasy.

Kąty to dobry przykład. Każda kreska poniżej ma własne --i (od 0 do 11), a jedna reguła zamienia je na kąt przez 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>

Kreska 3 dostaje rotate(90deg), co Chrome pokazuje jako macierz matrix(0, 1, -1, 0, 0, 0): ćwierć obrotu. left: calc(50% - 2px) wyśrodkowuje każdą kreskę, odejmując połowę jej własnej szerokości 4px.

Częste błędy

Brak spacji wokół - albo +. calc(100%-20px) jest niepoprawne i ignorowane.
Mnożenie dwóch długości. calc(10px * 2px) nie ma w CSS sensu. Jedna strona * musi być zwykłą liczbą.
calc() dla wysokości w procentach bez wysokości rodzica. calc(100% - 20px) dla height wymaga rodzica z ustawioną wysokością, tak samo jak height: 100%.
calc() tam, gdzie wystarczy flexbox albo grid. width: calc(33.333% - 10px) dla kolumn jest kruche; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px nie wymaga żadnych obliczeń.
Oczekiwanie komunikatu o błędzie. Przeglądarka nie ostrzega o niepoprawnym calc(). Sprawdź element w narzędziach deweloperskich: niepoprawna deklaracja jest tam przekreślona.

Najczęściej zadawane pytania

Co robi calc() w CSS?

Oblicza wartość z wyrażenia z +, -, * i / i może łączyć jednostki, które przeglądarka zna dopiero w czasie układania strony. width: calc(100% - 200px) to pełna szerokość rodzica minus 200px, bez względu na to, jaka jest szerokość rodzica.

Dlaczego moje calc() nie działa?

Najczęstsza przyczyna to brak spacji: + i - muszą mieć odstęp z obu stron, więc calc(100%-20px) jest niepoprawne. Inne przyczyny to mnożenie dwóch długości (10px * 2px) albo dzielenie przez długość, które nie daje długości. Niepoprawne calc() unieważnia całą deklarację, więc przeglądarka ją ignoruje.

Czy mogę używać zmiennych CSS w calc()?

Tak. calc(var(--gap) * 2) podwaja zmienną, a calc(var(--columns) * 1px) zamienia liczbę bez jednostki na piksele. Najpierw podstawiana jest wartość zmiennej, a potem wykonywane są obliczenia.

Czy wokół * i / w calc() potrzebne są spacje?

Nie. Spacji wymagają tylko + i -, bo bez nich -20px zostałoby odczytane jako liczba ujemna. Spacje wokół * i / są opcjonalne, ale pisanie ich wszędzie to najłatwiejsza zasada do zapamiętania.

Czym różni się calc() od clamp()?

calc() oblicza jedną wartość z wyrażenia. clamp(MIN, VAL, MAX) utrzymuje wartość między dwiema granicami. Można je łączyć: każdy argument clamp() może już zawierać obliczenia w stylu calc, na przykład clamp(1rem, 1rem + 2vw, 3rem).

Powiązane zagadnienia