Абсолютные значения в CSS с помощью abs()

У вас есть пользовательское CSS-свойство, которое может быть положительным или отрицательным в зависимости от контекста, и вам нужно использовать его там, где принимаются только положительные значения — например, в padding или animation-delay. До появления abs() приходилось либо прибегать к JavaScript, либо писать громоздкое решение с max(). Теперь это можно обработать непосредственно в CSS.

Что такое CSS-функция abs()?

abs() — это математическая функция CSS из спецификации CSS Values and Units Module Level 4. Она принимает одно числовое выражение и возвращает его абсолютное значение — всегда неотрицательное, в той же единице измерения, что и входное значение.

width: abs(-200px);         /* → 200px */
padding: abs(20px - 30px);  /* → 10px */
font-size: abs(-1.5rem);    /* → 1.5rem */

Она работает с числами, длинами, процентами, углами и любыми выражениями, которые вы бы написали внутри calc(). Единицы измерения сохраняются в точности.

Синтаксис и поддерживаемые типы значений

abs( <calc-sum> )

Аргументом может быть всё, что разрешается в числовое значение:

abs(-4)                /* простое число → 4 */
abs(-8vh)              /* длина → 8vh */
abs(-60%)              /* процент → 60% */
abs(20% - 60%)         /* выражение → 40% */
abs(min(-20px, 10px))  /* вложенная функция → 20px */

Важное уточнение: abs() оперирует математическим выражением, которое вы предоставляете, но такие значения, как проценты, всё равно разрешаются позже согласно обычным правилам свойства. Например, abs(25%) в background-position всё равно проходит через формулу расчёта размеров этого свойства после применения функции.

Практические примеры использования

Предотвращение недопустимых отрицательных значений из пользовательских свойств

Пользовательские свойства могут содержать знаковые значения, которые нарушают работу некоторых CSS-свойств при отрицательных значениях.

:root {
  --offset: -30px; /* может быть положительным или отрицательным */
}

/* ❌ До: padding-top: -30px недопустимо */
.card { padding-top: var(--offset); }

/* ✅ После: всегда разрешается в 30px */
.card { padding-top: abs(var(--offset)); }

Этот паттерн особенно полезен в дизайн-системах, где токены могут устанавливаться программно.

Стабилизация animation-delay в симметричных анимациях

При вычислении расстояния от центрального индекса вычитание может дать отрицательное значение для элементов перед центром. Отрицательный animation-delay не откладывает старт — он заставляет анимацию начаться с середины цикла, что нарушает симметричную волновую синхронизацию:

.bar {
  --distance: abs(var(--my-idx) - var(--center-idx));
  animation-delay: calc(var(--distance) * 0.1s);
}

Без abs() полосы слева от центра получили бы отрицательную задержку и перескочили бы вперёд в анимации вместо того, чтобы дождаться своей очереди.

Вычисления адаптивных отступов

.section {
  gap: abs(10vw - 4rem); /* всегда положительный gap, независимо от viewport */
}

abs() в сравнении с другими математическими функциями CSS

Обходное решение с max() для абсолютных значений — max(var(--x), calc(-1 * var(--x))) — работает, но многословно. Используйте его только при поддержке старых браузеров, в которых отсутствует abs().

Поддержка браузерами и запасные варианты

abs() поддерживается в современных браузерах, включая последние версии Chrome, Edge, Firefox и Safari. Поддержка стабильна в текущих релизах браузеров, но старые версии могут её не иметь. Проверьте Can I Use — abs() для актуальных данных о совместимости.

Для прогрессивного улучшения:

@supports not (width: abs(-10px)) {
  .element {
    padding: max(var(--val), calc(-1 * var(--val)));
  }
}

Распространённые ошибки

abs() не работает с ключевыми словами CSS:

width: abs(auto);     /* ❌ недопустимо — auto не является числовым выражением */

Обёртывание calc() внутри abs() избыточно:

width: abs(calc(50% - 100px)); /* ⚠️ работает, но излишне */
width: abs(50% - 100px);       /* ✅ чище */

abs() — это не то же самое, что встроенная функция Sass abs() — Sass разрешает её во время компиляции с безразмерными числами, в то время как CSS abs() выполняется в браузере во время компоновки и корректно обрабатывает размерности. Если вы используете оба варианта, имейте в виду, что Sass может перехватить вызов. Чтобы передать его в CSS, можно написать abs(#{...}) или использовать форму math.abs() с пространством имён для явного вызова версии Sass.

Заключение

abs() заполняет реальный пробел в математике CSS: она позволяет безопасно работать со знаковыми значениями без JavaScript или запутанных обходных решений. Если вы создаёте компоненты, использующие пользовательские свойства для отступов, синхронизации или расчётов компоновки, её стоит добавить в свой инструментарий сейчас, когда поддержка браузерами стабильна во всех современных движках.

Часто задаваемые вопросы

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.