calc()

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

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

Синтаксис

/* властивість: calc(вираз) */
width: calc(100% - 80px);

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

+

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

-

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

*

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

/

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

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

Примітки

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

Крім цього, застосовуються наступні зауваження:

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

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

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);
}

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

Використання з цілими числами

Коли calc() використовується там, де очікується <integer>, то значення буде округлено до найближчого цілого. Наприклад:

.modal {
  z-index: calc(3 / 2);
}

Це дасть .modal фінальне значення z-index 2.

Приклади

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

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>

Вкладений calc() зі змінними 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), а далі, коли ця змінна використовується як значення властивості width елемента .foo, то усі внутрішні calc() (незалежно від глибини вкладеності) сплощуються до простих дужок, тож значення властивості width, зрештою, буде calc((100px / 2) / 2), тобто 25px. Якщо коротко: calc() всередині calc() – те саме, що прості дужки.

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

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

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
calc()
Chrome Full support 26
Edge Full support 12
Firefox Full support 16
footnote
Internet Explorer Full support 9
Opera Full support 15
Safari Full support 7
WebView Android Full support 37
Chrome Android Full support 28
Firefox for Android Full support 16
footnote
Opera Android Full support 14
Safari on iOS Full support 7
Samsung Internet Full support 1.5
Gradient color stops support
Chrome Full support 19
Edge Full support 12
Firefox Full support 19
Internet Explorer Full support 9
Opera Full support 15
Safari Full support 6
WebView Android Full support 37
Chrome Android Full support 28
Firefox for Android Full support 19
Opera Android Full support 15
Safari on iOS Full support 6
Samsung Internet Full support 1.5
Nested calc() support
Chrome Full support 51
Edge Full support 16
Firefox Full support 48
Internet Explorer No support No
Opera Full support 38
Safari Full support 11
WebView Android Full support 51
Chrome Android Full support 51
Firefox for Android Full support 48
Opera Android Full support 41
Safari on iOS Full support 11
Samsung Internet Full support 5.0
<number> value support
Chrome Full support 31
Edge Full support 12
Firefox Full support 48
Internet Explorer Full support 9
Opera Full support 18
Safari Full support 6
WebView Android Full support 4.4.3
Chrome Android Full support 31
Firefox for Android Full support 48
Opera Android Full support 18
Safari on iOS Full support 6
Samsung Internet Full support 2.0

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