calc()

Функція CSS calc() (обчислити) дає змогу виконувати обчислення при заданні значень властивостей CSS. Вона може використовуватися зі значеннями <length>, <frequency>, <angle>, <time>, <percentage>, <number>, <integer> і <color-function>.

Спробуйте його в дії

Синтаксис

/* calc(вираз) */
calc(100% - 80px)

/* Вираз із функцією CSS */
calc(100px * sin(pi / 2))

/* Вираз, що вміщає змінну */
calc(var(--hue) + 180)

/* Вираз із колірними каналами у відносних кольорах */
lch(from aquamarine l c calc(h + 180))

Функція calc() приймає за параметр один вираз, і результат цього виразу використовується як значення властивості CSS. У цьому виразі операнди можна комбінувати за допомогою операторів, перелічених нижче. Коли вираз містить кілька операндів, calc() використовує стандартні правила пріоритету операторів:

+

Додає вказані операнди.

-

Віднімає другий операнд від першого.

*

Множить вказані операнди.

/

Ділить операнд зліва (ділене) на операнд справа (дільник).

Усі операнди, крім операндів типу <number>, повинні мати суфікс із відповідними одиницями вимірювання, такими як px, em або %. У різних операндах одного виразу можна використовувати різні одиниці вимірювання. Також для задання порядку обчислення можна використовувати дужки, якщо це потрібно.

Опис

Дещо варто взяти до уваги під час роботи з calc():

• Серіалізація аргументів усередині calc() виконує стандарт обчислень над числами з рухомою комою IEEE-754, а отже є кілька випадків, які треба мати на увазі, щодо сталих infinity та NaN. Більше про те, як серіалізуються сталі, дивіться на сторінці calc-keyword.

• Математичні вирази, що мають відсоткові значення для обчислення ширин і висот для табличних колонок, груп табличних колонок, табличних рядів, груп табличних рядів і табличних комірок, як в таблицях з автоматичним компонуванням, так і в таблицях з фіксованим, можуть розглядатися так, ніби було задано auto.

• Функція calc() не може безпосередньо замінити числове значення у відсотковому типі; наприклад, calc(100 / 4)% – невалідний запис, а calc(100% / 4) – валідний.

• Коли calc() використовується там, де очікується <integer>, то значення округлюється до найближчого цілого. Тому calc(1.4) дасть значення 1. Якщо дробова частина значення рівна 0.5, то значення округлюється до більшого. Наприклад, calc(1.5) дасть значення 2, а calc(-1.5) округлиться до -1.

• calc() не може виконувати обчислення над значеннями природних розмірів, як то auto і fit-content. Для них користуйтеся натомість функцією calc-size().

Правила та найкращі підходи під час роботи з calc()

• Оператори + і - повинні бути оточені пробілами. Наприклад, calc(50% -8px) буде тлумачитись як "відсоткове значення, після якого стоїть від'ємна довжина" – що є недійсним виразом, а calc(50% - 8px) – "відсоткове значення, після котрого – оператор віднімання та довжина". Аналогічно, calc(8px + -50%) тлумачиться як "довжина, після якої стоїть оператор додавання і від'ємне відсоткове значення".
• Оператори * і / не вимагають пробілів, але додавання таких пробілів для сталості – рекомендується.
• Дозволена вкладеність викликів функції calc(), у випадку чого внутрішні виклики обробляються як прості дужки.
• У випадку довжин не можна використовувати 0 на позначення 0px (або іншої одиниці довжини); натомість слід використовувати версію з одиницями вимірювання: margin-top: calc(0px + 20px); – дійсний запис, а margin-top: calc(0 + 20px); – ні.
• Нинішні реалізації вимагають, щоб в операторів * і / один з операндів не мав одиниць вимірювання. У випадку / саме правий операнд не повинен їх мати. Наприклад, font-size: calc(1.25rem / 1.25) – дійсний запис, а font-size: calc(1.25rem / 125%) – недійсний.

Підтримка обчислення колірних каналів у відносних кольорах

Функція calc() може використовуватися для роботи з колірними каналами безпосередньо в контексті відносних кольорів. Це дає змогу динамічно підлаштовувати колірні канали в колірних моделях штибу rgb(), hsl() і lch().

Синтаксис відносного кольору визначає низку ключових слів для колірних каналів, кожне з яких представляє значення колірного каналу як <number> (дивіться більше в Значеннях каналів, що розв'язуються до значень <number>). Функція calc() може використовувати ці ключові слова колірних каналів, щоб виконувати динамічне підлаштування колірних каналів, наприклад, calc(r + 10).

Формальний синтаксис

calc( <calc-sum> )
де 
<calc-sum> = <calc-product> [ [ \'+\' | \'-\' ] <calc-product> ]*
де 
<calc-product> = <calc-value> [ \'*\' <calc-value> | \'/\' <number> ]*
де 
<calc-value> = <number> | <dimension> | <percentage> | <calc-constant> | ( <calc-sum> )
де 
<calc-constant> = e | pi | infinity | -infinity | NaN

Доступність

Коли calc() використовується для контролю розміру тексту, слід слідкувати, аби одне зі значень мало відносну одиницю довжини, наприклад:

h1 {
  font-size: calc(1.5rem + 3vw);
}

Це дасть змогу пересвідчитися, що розмір тексту масштабується при збільшенні сторінки.

• MDN Розуміння WCAG, пояснення Настанов 1.4
• Розуміння критерію успіху 1.4.4 | W3C Розуміння WCAG 2.0

Приклади

Розташування об'єкта з зовнішнім відступом на екрані

calc() дає змогу легко розташувати об'єкт, що має зовнішній відступ. У цьому прикладі CSS утворює банер, що розтягується на все вікно, з 40-піксельною прогалиною з обох боків банера до країв вікна:

.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}

<div class="banner">Це банер!</div>

Автоматичний розмір полів форми для вписування їх у контейнер

Іще одне застосування calc() – допомогти пересвідчитись, що поля форми вписуються у доступний простір, не вилазять за край контейнера, дотримуючись при цьому відповідного відступу.

Погляньмо на певний CSS:

input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#form-box {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

Тут сама форма займає 1/6 доступної ширини вікна. Далі, щоб поля введення зберігали відповідний розмір, знову використовується calc() для задання того, що вони повинні мати ширину свого контейнера мінус 1em. Далі – цей CSS використовує такий HTML:

<form>
  <div id="form-box">
    <label for="misc">Надрукуйте щось:</label>
    <input type="text" id="misc" name="misc" />
  </div>
</form>

Вкладеність вкупі зі змінними CSS

Можна використовувати calc() вкупі зі змінними CSS. Погляньте на наступний код:

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

Коли всі змінні розгорнуті, значення widthC стає calc(calc(100px / 2) / 2). Коли його присвоєно властивості ширини за селектором .foo, то всі внутрішні функції calc() (незалежно від глибини своєї вкладеності) сплощуються до простих дужок. Отже, значенням властивості width зрештою буде calc((100px / 2) / 2), що дорівнює 25px. Стисло висловлюючись, calc() всередині calc() рівносильно використанню дужок.

Підлаштування колірних каналів у відносних кольорах

Функція calc() може використовуватися для підлаштування окремих колірних каналів у відносних кольорах без потреби зберігати значення колірних каналів як змінні.

У прикладі нижче перший абзац використовує <named-color>. У наступних абзацах вживається calc() вкупі з функціями rgb() і hsl(), щоб підлаштувати значення кожного з колірних каналів на основі вихідного іменованого кольору.

<p class="original">Вихідний колір тексту – rebeccapurple</p>
<p class="increase-hue">Барва збільшена на 80</p>
<p class="increase-lightness">Світність збільшена на 20</p>
<p class="decrease-lightness">Світність зменшена на 10</p>

p {
  font-family: monospace;
  font-size: 16px;
}

.original {
  color: rebeccapurple;
}

.increase-hue {
  color: lch(from rebeccapurple l c calc(h + 80));
}

.increase-lightness {
  color: lch(from rebeccapurple calc(l + 20) c h);
}

.decrease-lightness {
  color: lch(from rebeccapurple calc(l - 10) c h);
}

Ще один приклад застосування функції calc() для виведення відносних кольорів дивіться у розділі Використання математичних функцій на сторінці Використання відносних кольорів.

Специфікації

Сумісність із браузерами

Дивіться також

• <calc-keyword>
• Функції CSS
• Повний посібник із calc() у CSS (CSS-Tricks)