calc()

/* 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() следует стандарту IEEE-754 для вычислений с плавающей точкой, что означает, что есть несколько случаев, о которых следует знать в отношении констант infinity и NaN. Более подробную информацию о том, как сериализуются константы, см. на странице calc-keyword.

• Математические выражения, включающие проценты для ширины и высоты столбцов таблиц, групп столбцов таблиц, строк таблиц, групп строк таблиц и ячеек таблиц как в таблицах с автоматическим, так и с фиксированным макетом, могут рассматриваться так, как будто задано auto.

• Функция calc() не может напрямую подставить числовое значение для типов процентов; например, calc(100 / 4)% недопустимо, а calc(100% / 4) допустимо.

• Когда calc() используется там, где ожидается значение <integer>, значение будет округлено до ближайшего целого. Таким образом, calc(1.4) приведет к значению 1.

  Если дробная часть значения равна ровно 0.5, значение будет округлено вверх. Например, calc(1.5) приведет к значению 2, а calc(-1.5) будет округлено до -1.

• calc() не может выполнять вычисления со значениями внутренней размерности, такими как auto и fit-content. Используйте функцию calc-size() вместо этого.

• Операторы + и - должны быть окружены пробелами. Например, calc(50% -8px) будет проанализировано как "процент, за которым следует отрицательная длина" — что является недопустимым выражением, — в то время как calc(50% - 8px) — это "процент, за которым следует знак вычитания и длина". Аналогично, calc(8px + -50%) интерпретируется как "длина, за которой следует знак сложения и отрицательный процент".
• Операторы * и / не требуют пробелов, но добавление пробелов для согласованности рекомендуется.
• Разрешается вложенность функций calc(), в этом случае внутренние функции обрабатываются как простые скобки.
• Для длин вы не можете использовать 0 для обозначения 0px (или другой единицы длины); вместо этого вы должны использовать версию с единицей: margin-top: calc(0px + 20px); допустимо, а margin-top: calc(0 + 20px); — нет.
• Текущие реализации требуют, чтобы для операторов * и / один из операндов был без единиц. Для /, правым операндом должно быть значение без единиц. Например, font-size: calc(1.25rem / 1.25) допустимо, но font-size: calc(1.25rem / 125%) — нет.

Функция 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> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  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() упрощает позиционирование объекта с заданным отступом. В этом примере 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>

Вы можете использовать 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() можно использовать для настройки отдельных цветовых каналов в относительных цветах без необходимости хранения значений цветовых каналов в переменных.

На примере ниже, первый абзац использует <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>

.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-keyword>
• Функции CSS
• Полное руководство по calc() в CSS (CSS-Tricks)