Тип <calc-keyword> определяет числовые константы, которые могут быть использованы в математических функциях CSS.

e

Основание натурального логарифма, приблизительно равное 2.7182818284590452354.

pi

Отношение окружности круга к его диаметру, приблизительно равное 3.1415926535897932.

infinity & -infinity

Бесконечное значение, используемое для обозначения наибольшего/наименьшего возможного значения.

NaN

Значение, представляющее «Не число» (canonical casing).

Сериализация аргументов внутри calc() следует стандарту IEEE-754 для вычислений с плавающей запятой, что означает, что нужно учитывать несколько случаев, касающихся констант, таких как infinity и NaN:

• Деление на ноль вернёт положительное или отрицательное infinity в зависимости от знака числителя.

• Сложение, вычитание или умножение infinity на что-либо вернёт infinity, если не будет произведено NaN (см. ниже).

• Любая операция с хотя бы одним NaN аргументом вернёт NaN. Это означает, что 0 / 0, infinity / infinity, 0 * infinity, infinity + (-infinity), и infinity - infinity все вернут NaN.

• Положительный и отрицательный ноль являются возможными значениями (0⁺ и 0⁻). Это имеет следующие последствия:

  • Умножение или деление, которое даёт ноль с ровно одним отрицательным аргументом (-5 * 0 или 1 / (-infinity)) или отрицательный результат от комбинаций в других математических функциях, вернёт 0⁻.
  • 0⁻ + 0⁻ или 0⁻ - 0 вернут 0⁻. Все остальные сложения или вычитания, которые привели бы к нулю, вернут 0⁺.
  • Умножение или деление 0⁻ на положительное число (включая 0⁺) вернёт отрицательный результат (либо 0⁻ или -infinity), в то время как умножение или деление 0⁻ на отрицательное число вернёт положительный результат.

Примеры того, как эти правила применяются, показаны в разделе Бесконечность, NaN и деление на ноль.

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

Математические константы могут быть использованы только внутри математических функций CSS для вычислений. Математические константы не являются ключевыми словами CSS, но если они используются вне вычисления, они обрабатываются как любое другое ключевое слово. Например:

• animation-name: pi; относится к анимации под названием «pi», а не к pi числовой константе.
• line-height: e; недействительно, но line-height: calc(e); действительно.
• rotate(1rad * pi); не сработает, потому что rotate() не является математической функцией. Используйте rotate(calc(1rad * pi));

В математических функциях <calc-keyword> значения оцениваются как значения <number>, поэтому e и pi действуют как числовые константы.

Как infinity, так и NaN, являются немного разными, они считаются вырожденными числовыми константами. Хотя технически они не являются числами, они действуют как значения <number>, поэтому для получения бесконечной <length>, например, требуется выражение, подобное calc(infinity * 1px).

Значения infinity и NaN включены в основном для упрощения сериализации и повышения ясности, но могут быть использованы для обозначения «наибольшего возможного значения», поскольку бесконечное значение ограничено допустимым диапазоном. Вряд ли это будет разумным, но при использовании бесконечности намного проще, чем просто вставлять огромные числа в таблицу стилей или жёстко задавать магические числа.

Все константы нечувствительны к регистру, за исключением NaN, что делает calc(Pi), calc(E) и calc(InFiNiTy) допустимыми:

e
-e
E
pi
-pi
Pi
infinity
-infinity
InFiNiTy
NaN

Следующие являются недействительными:

nan
Nan
NAN

Следующий пример демонстрирует, как использовать e внутри calc() для вращения элемента с экспоненциально возрастающим углом. Второй блок демонстрирует, как использовать pi внутри функции sin().

<div id="wrapper">
  <div class="container">
    <div id="e"></div>
    <input type="range" min="0" max="7" step="0.01" value="0" id="e-slider" />
    <label for="e-slider">e:</label>
    <span id="e-value"></span>
  </div>
  <div class="container">
    <div id="pi"></div>
    <input type="range" min="0" max="1" step="0.01" value="0" id="pi-slider" />
    <label for="pi-slider">pi:</label>
    <span id="pi-value"></span>
  </div>
</div>

// sliders
const eInput = document.querySelector("#e-slider");
const piInput = document.querySelector("#pi-slider");
// spans for displaying values
const eValue = document.querySelector("#e-value");
const piValue = document.querySelector("#pi-value");

eInput.addEventListener("input", function () {
  e.style.transform = "rotate(calc(1deg * pow(" + this.value + ", e)))";
  eValue.textContent = e.style.transform;
});

piInput.addEventListener("input", function () {
  pi.style.rotate = "calc(sin(" + this.value + " * pi) * 100deg)";
  piValue.textContent = pi.style.rotate;
});

Следующий пример демонстрирует вычисленное значение свойства width при делении на ноль, а затем, как сериализация с различными calc() константами выглядит в консоли:

<div></div>

div {
  height: 50px;
  background-color: red;
  width: calc(1px / 0);
}

const div = document.querySelector("div");
console.log(div.offsetWidth); // 17895698 (infinity clamped to largest value for width)

function logSerializedWidth(value) {
  div.style.width = value;
  console.log(div.style.width);
}

logSerializedWidth("calc(1px / 0)"); // calc(infinity * 1px)
logSerializedWidth("calc(1px / -0)"); // calc(-infinity * 1px)

logSerializedWidth("calc(1px * -infinity * -infinity)"); // calc(infinity * 1px)
logSerializedWidth("calc(1px * -infinity * infinity)"); // calc(-infinity * 1px)

logSerializedWidth("calc(1px * (NaN + 1))"); // calc(NaN * 1px)

• <calc-sum>
• <calc-product>
• <calc-value>