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

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

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

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

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

Специфікація
Unknown specification
              <br />
              <small>
                  # calc-func
                </small>
            </a>
          </td>
        </tr>
      </tbody>
    </table>

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

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

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