CSS-функция `calc()`

calc() — это CSS-функция, позволяющая выполнять вычисления при указании значений свойств CSS. Её можно использовать со значениями <length>, <frequency>, <angle>, <time>, <percentage>, <number>, <integer> и <color-function>.

Попробуйте

width: calc(10px + 100px);

width: calc(100% - 30px);

width: calc(2em * 5);

width: calc(var(--variable-width) + 20px);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Change my width.</div>
</section>

:root {
  --variable-width: 100px;
}

#example-element {
  border: 10px solid black;
  padding: 10px;
}

Синтаксис

/* calc(expression) */
calc(100% - 80px)

/* Expression with a CSS function */
calc(100px * sin(pi / 2))

/* Expression containing a variable */
calc(var(--hue) + 180)

/* Expression with color channels in relative colors */
lch(from aquamarine l c calc(h + 180))

Функция calc() принимает одно выражение в качестве параметра, а результат этого выражения используется как значение свойства CSS. В этом выражении операнды можно объединять с помощью перечисленных ниже операторов. Если выражение содержит несколько операндов, calc() использует стандартные правила приоритета операторов:

+

Складывает указанные операнды.

-

Вычитает второй операнд из первого.

*

Перемножает указанные операнды.

/

Делит левый операнд (делимое) на правый операнд (делитель).

Все операнды, кроме операндов типа <number>, должны сопровождаться подходящей единицей измерения, например px, em или %. Для каждого операнда в выражении можно использовать разные единицы измерения. При необходимости также можно использовать скобки, чтобы задать порядок вычислений.

Описание

Ниже описаны некоторые особенности calc().

Результирующие значения

Функция calc() должна использоваться вместо полного значения CSS одного из следующих типов:

• <length>
• <frequency>
• <angle>
• <time>
• <flex>
• <resolution>
• <percentage>
• <number>
• <integer>
• Один из смешанных типов, например <length-percentage>

calc() не может заменять только числовую часть процентов, значений длины и т. д., не заменяя следующую за ней единицу измерения. Например, calc(100 / 4)% — недопустимое значение, а calc(100% / 4) — допустимое.

Результирующее значение calc() должно быть совместимо с контекстом, в котором оно используется. Например, margin: calc(1px + 2px) — допустимое значение, а margin: calc(1 + 2) — нет: оно эквивалентно указанию margin: 3, в результате чего свойство игнорируется.

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

calc() выполняет вычисления с плавающей точкой в соответствии со стандартом IEEE-754, что требует учитывать значения infinity и NaN. Подробнее о сериализации констант см. на странице <calc-keyword>.

Особенности входных данных

• calc() не может выполнять вычисления с значениями intrinsic-размера, такими как auto и fit-content. Вместо этого используйте функцию calc-size().
• Операторы * и / не требуют пробелов, но для единообразия рекомендуется их добавлять.
• Функции calc() можно вкладывать друг в друга; в этом случае внутренние функции обрабатываются как обычные скобки.
• Математические выражения с процентами для ширины и высоты столбцов таблиц, групп столбцов, строк, групп строк и ячеек как в таблицах с автоматической, так и с фиксированной раскладкой могут обрабатываться так, как если бы было указано auto.
• Дополнительные сведения о синтаксисе выражений + и - см. в разделе <calc-sum>.

Типизированная арифметика CSS

При умножении значений с помощью calc(), используя оператор *, единицу измерения может содержать только одно значение. Вычисления вида 200px * 4px не поддерживаются, поскольку 800px² не имеет смысла в CSS.

И наоборот, 200px / 4px даёт результат 50, который имеет смысл в CSS. Поэтому при делении чисел с помощью функции calc(), используя оператор /, поддерживающие эту возможность браузеры допускают единицы измерения с обеих сторон операнда, если они относятся к одному типу данных. Например, 100vw / 1px — допустимое выражение, результатом которого будет значение без единиц измерения.

Полученное частное можно использовать в значениях свойств или функций, которые принимают <number> в качестве значения или параметра, либо преобразовать в другой тип данных, умножив его на типизированное значение.

Полное объяснение типизированной арифметики в CSS, а также примеры см. в разделе Использование типизированной арифметики CSS.

Поддержка вычислений цветовых каналов в относительных цветах

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

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

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

<calc()> = 
  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: изменение размера текста

  WAI

  W3C](https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html)

Примеры

Размещение объекта на экране с отступом

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">This is a 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. Далее в HTML используется этот CSS:

<form>
  <div id="form-box">
    <label for="misc">Type something:</label>
    <input type="text" id="misc" name="misc" />
  </div>
</form>

Вложение с переменными CSS

Можно использовать calc() с переменными CSS. Рассмотрим следующий код:

.foo {
  --width-a: 100px;
  --width-b: calc(var(--width-a) / 2);
  --width-c: calc(var(--width-b) / 2);
  width: var(--width-c);
}

После подстановки всех переменных значение --width-c будет равно calc(calc(100px / 2) / 2). При присваивании его свойству width элемента .foo все вложенные функции calc() (независимо от глубины вложения) будут сведены к обычным скобкам. Поэтому значение свойства width в итоге станет равным calc((100px / 2) / 2), то есть 25px. Иными словами, calc() внутри calc() эквивалентна использованию скобок.

Изменение цветовых каналов в относительных цветах

Функцию calc() можно использовать для изменения отдельных цветовых каналов в относительных цветах, не сохраняя значения цветовых каналов в переменных.

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

<p class="original">Original text color in rebeccapurple</p>
<p class="increase-hue">Hue increased by 80</p>
<p class="increase-lightness">Lightness increased by 20</p>
<p class="decrease-lightness">Lightness decreased by 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-sum>
• <calc-keyword>
• Функции CSS
• Полное руководство по calc() в CSS (CSS-Tricks)