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) – дійсний.
• Нинішні реалізації вимагають, щоб у операторів * і / один з операндів не мав одиниць вимірювання. У випадку / саме правий операнд не повинен їх мати. Наприклад, font-size: calc(1.25rem / 1.25) – дійсний запис, а font-size: calc(1.25rem / 125%) – недійсний.

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

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() використовується там, де очікується <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() – те саме, що прості дужки.

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

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

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

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