Новые ключевые слова в calc(): e, pi, infinity и NaN

Совсем недавно в CSS появилась небольшая, но любопытная возможность — использовать внутри математических функций вроде calc() готовые константы. Это не новые свойства или сложные функции, а удобные сокращения: e, pi, infinity, -infinity и NaN. Они доступны в браузерах с конца 2022 года, но по-прежнему нечасто встречаются в реальном коде. Разберём, зачем они нужны и когда могут пригодиться.

Константы работают только внутри calc() и её «родственников» — min(), max(), clamp(), sin(), cos() и прочих математических функций. Просто написать font-size: e нельзя, а font-size: calc(e * 1rem) — вполне корректно.

.element {
  font-size: calc(e * 0.5rem); /* ≈ 1.359rem */
}

Константа e — основание натурального логарифма, примерно 2.718. Её можно использовать для плавных, экспоненциальных изменений, например, при анимациях или масштабировании.

@keyframes grow {
  to {
    transform: scale(calc(pow(e, 0.5)));
  }
}

Это эквивалентно scale(1.64872…), но запись через e и pow() читается как «растём в e в степени 0.5» — точнее и выразительнее, чем просто магическое число.

Константа pi (≈ 3.14159…) особенно полезна при работе с углами, особенно в радианах. Например, поворот на 180° — это pi радиан:

.element {
  rotate: calc(pi * 1rad);
}

Можно комбинировать с тригонометрическими функциями:

.element {
  --t: 0.3;
  transform: translateX(calc(100px * sin(calc(pi * var(--t)))));
}

Здесь элемент колеблется по синусоиде, и один полный цикл приходится ровно на изменение --t от 0 до 2.

Более экзотичные константы — infinity, -infinity и NaN. Они не числа в привычном смысле, но ведут себя как числовые значения, и браузер «зажимает» их до максимально или минимально допустимых величин. Например, z-index: calc(infinity) даст самый высокий возможный z-index без необходимости подбирать гигантское число вручную.

.overlay {
  z-index: calc(infinity);
}

Это не «бесконечность» в философском смысле, а гарантированное значение, которое всегда будет больше любого другого z-index, заданного числом.

Константа NaN (Not a Number) почти никогда не нужна в повседневной разработке, но она помогает избежать неопределённого поведения при делении на ноль или других недопустимых операциях. Например:

.test {
  width: calc(0 / 0); /* вычисляется как NaN */
}

Согласно стандарту IEEE-754, любая операция с NaN возвращает NaN, и браузер в итоге проигнорирует такое свойство или заменит на значение по умолчанию. Это предсказуемо — лучше молчать, чем рисковать.

Наконец, напомним: константы чувствительны к регистру только частично. e, pi, infinity можно писать в любом регистре: E, Pi, InFiNiTy — всё сработает. А вот NaN допускает только такой вариант написания. nan, NAN или NaN() — синтаксическая ошибка.

На практике e и pi пригодятся тем, кто строит анимации, диаграммы, визуализации или работает с тригонометрией в CSS. infinity — когда нужно «перебить любой z-index». NaN — скорее для полноты реализации, чем для практического использования.

Иногда простая константа экономит время, избавляет от калькулятора и делает стиль чуть понятнее — особенно если вы любите точность и математику.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.