С 7 декабря 2023 года (Baseline: Newly Available) в CSS появились нативные математические функции, которые позволяют выполнять вычисления прямо в стилях — без JavaScript, препроцессоров и переменных. Это важный шаг к более гибкому и выразительному управлению размерами, отступами и другими параметрами оформления.

Теперь вы можете применять привычные математические операции, такие как:

  • pow(x, y) — возведение числа x в степень y;
  • sqrt(x) — извлечение квадратного корня;
  • log(x) — натуральный логарифм;
  • exp(x) — экспонента (e в степени x).

Все эти функции используются внутри calc(), так как именно calc() позволяет комбинировать числа и единицы измерения. Это значит, что вы можете не просто считать, а подставлять вычисленные значения в реальные CSS-свойства.

Пример:

.element {
  width: calc(pow(2, 3) * 10px); /* Результат: 8 * 10px = 80px */
}

Такой подход даёт больше свободы в оформлении без использования JavaScript. Например, вы можете рассчитывать ширины, высоты, пропорции или даже динамически адаптировать отступы в зависимости от других значений — прямо в CSS.

Как это работает на практике

Функции поддерживают как числа, так и относительные единицы (px, em, %), если они совместимы с арифметикой calc(). Вы можете вкладывать одну функцию в другую, строя сложные выражения. Например:

height: calc(sqrt(144) * 1px);     /* 12px */
margin-left: calc(log(10) * 1rem); /* ≈ 2.3rem */

Функции pow() и exp() особенно удобны, если вы работаете с масштабированием, step-based grid-сетками, динамическими компонентами или графиками.

Что нужно учитывать

На момент появления функции доступны не во всех браузерах, поэтому стоит использовать их с осторожностью в продакшене или предварительно проверять поддержку через @supports или тестирование. Также важно помнить, что поведение может быть недоступно в устаревших движках (например, Safari без обновлений).

Если вы разрабатываете интерфейс для мобильных или ограниченных сред — заранее закладывайте fallback, особенно если от вычислений зависит расположение или размер критичных элементов.

Заключение

Математические функции CSS делают оформление интерфейсов умнее, гибче и выразительнее. Они позволяют избавиться от части JavaScript-вычислений, делая код чище и логичнее. Даже такие базовые вещи, как pow() или sqrt(), открывают путь к новым способам построения компонентов и адаптивной вёрстки.