Использование CSS функций pow, sqrt, hypot, log и exp
- 8 июля 2025
С 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(), открывают путь к новым способам построения компонентов и адаптивной вёрстки.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Методы окон alert, confirm и prompt в JavaScript
JavaScript предоставляет три простых метода для взаимодействия с пользователем: alert(), confirm() и prompt(). Эти функции встроены в глобальный объект window и доступны в любом браузере. Они позволяют быстро отобразить сообщение, запросить подтверждение действия или получить текстовый ввод.
С 29 января 2018 года эти методы находятся в статусе «Widely Available» по Baseline, то есть их можно использовать без ограничений на совместимость.
- 7 июля 2025
Как работает ping в HTML
Атрибут ping используется в теге <a> для отправки фонового POST-запроса на указанный URL, когда пользователь переходит по ссылке. Это позволяет отслеживать переходы без изменения поведения самой ссылки.
Функция находится в статусе ограниченной доступности в Baseline, что означает: она поддерживается не во всех браузерах, и может быть отключена настройками безопасности.
- 7 июля 2025
Как использовать классы в JavaScript
Классы — это удобный синтаксис, который появился в JavaScript в стандарте ES2015 (ES6) и с 8 сентября 2018 года считается широко поддерживаемым (Baseline: Widely Available). Они позволяют создавать объекты по шаблону — с общими свойствами и методами — и писать более структурированный, понятный код.
За кулисами классы используют ту же прототипную модель, что и раньше. Но теперь вы можете описывать «объектные» структуры так, как это делается в других языках, вроде Java, Python или C# — с конструкторами, методами и наследованием.
- 5 июля 2025
Использование атрибута inert для отключения взаимодействия
С 11 апреля 2023 года (Baseline: Newly Available) в HTML официально поддерживается атрибут inert. Он делает элемент и всех его потомков полностью неинтерактивными: они не могут получать фокус, не реагируют на нажатия клавиш, клики мыши и вообще исключаются из всех пользовательских взаимодействий. Но при этом остаются в DOM и продолжают рендериться.
Это особенно полезно, если нужно временно отключить часть интерфейса — например, при открытии модального окна, активации блокировки, загрузке, или при переключении между вкладками.
- 4 июля 2025
CSS-свойство cursor для управления отображением курсора
Свойство cursor управляет тем, как выглядит указатель мыши, когда пользователь наводит его на элемент. Оно помогает визуально показать, что элемент интерактивный, требует внимания или, наоборот, недоступен. Это особенно важно для улучшения удобства и предсказуемости интерфейса.
Хотя cursor — базовое CSS-свойство, оно находится в статусе ограниченной доступности в Baseline, что значит: часть значений может не поддерживаться в старых браузерах или иметь особенности в поведении.
- 2 июля 2025
Цвет текста в CSS: свойство и изменение
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Доступно в Baseline в статусе «Widely Available» с 2018-01-29
Цвет CSS — это свойство, которое устанавливает основной цвет для текста, границ и линий украшения. Оно влияет на визуальную сторону элементов и помогает сделать интерфейс более приятным и читаемым. Можно задавать цвет через названия, HEX, RGB или HSL, выбирая подходящий способ в зависимости от задачи.
Пример установки цвета текста:
<p style="color: #ff5733;">Этот текст будет оранжево-красным</p>
Больше обзоров веб-функций — в телеграм-канале HTML Academy.
Нашли ошибку или опечатку? Напишите нам.
- 25 июня 2025