Тип CSS `<calc-keyword>`

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

Синтаксис

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

Значения

e

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

pi

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

infinity & -infinity

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

NaN

Значение, представляющее «не число» в каноническом регистре.

Примечания

Сериализация аргументов внутри 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 и деление на ноль».

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

Описание

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

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

#wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 200px;
}
.container > div {
  width: 100px;
  height: 100px;
  margin: 10px;
}

span {
  font-family: monospace;
  font-size: 0.8em;
}

#e {
  background-color: blue;
}

#pi {
  background-color: blue;
}

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

Бесконечность, NaN и деление на ноль

В следующем примере показано вычисленное значение свойства 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>