calc()

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

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

Синтаксис

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

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

+

Додавання.

-

Віднімання.

*

Множення. Принаймні один з аргументів повинен належати до типу <number>.

/

Ділення. Дільник повинен належати до типу <number>.

Операнди виразу можуть бути будь-якими значеннями синтаксису <length>. Для кожного значення у виразі можна використовувати різні одиниці вимірювання, якщо завгодно. Крім цього, можна використовувати дужки для задання порядку обчислення.

Примітки

• Оператори + і - повинні бути оточені пробілами. Наприклад, calc(50% -8px) буде тлумачитись як "відсоткове значення, після якого стоїть від'ємна довжина" – що є недійсним виразом, а calc(50% - 8px) – "відсоткове значення, після котрого – оператор віднімання та довжина". Аналогічно, calc(8px + -50%) тлумачиться як "довжина, після якої стоїть оператор додавання і від'ємне відсоткове значення".
• Оператори * і / не вимагають пробілів, але додавання таких пробілів для сталості – рекомендується.
• Ділення на нуль призводить до помилки, породженої розбирачем HTML.
• Математичні вирази, що містять відсотки для ширин та висот колонок, груп колонок, рядів, груп рядів та комірок таблиць, як при автоматичному, так при фіксованому компонуванні таблиць, можуть оброблятися так, ніби задано 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);
}

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

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

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

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

<form>
  <div id="formbox">
    <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() – те саме, що прості дужки.

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

              <br />
              <small>
                  # calc-func
                </small>
            </a>
          </td>
        </tr>
      </tbody>
    </table>