Функция CSS `abs()`

abs() CSS-функция возвращает абсолютное значение аргумента того же типа, что и входное значение.

Синтаксис

/* abs( <calc-sum> ) */
abs(20% - 100px)
abs(var(--gradientAngle))

Параметры

Функция abs() принимает один параметр.

<calc-sum>

Выражение или вычисление, результатом которого является <number>, <dimension>, <percentage> или <calc-keyword>.

Возвращаемое значение

Абсолютное значение <calc-sum>.

• Если числовое значение <calc-sum> положительное или равно 0⁺, функция возвращает <calc-sum>.
• В противном случае она возвращает -1 * <calc-sum>.

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

<abs()> = 
  abs( <calc-sum> )

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*

<calc-product> = 
  <calc-value> [ '*' <calc-value> | '/' <number> ]*

<calc-value> = 
  <number> |
  <dimension> |
  <percentage> |
  <calc-constant> |
  ( <calc-sum> )

<calc-constant> = 
  e |
  pi |
  infinity |
  -infinity |
  NaN

Примеры

Положительные переменные

Функцию abs() можно использовать, чтобы гарантировать, что значение всегда будет положительным. В следующем примере пользовательское свойство CSS --font-size используется в качестве значения font-size. Обёртывание этого пользовательского свойства в abs() преобразует отрицательное значение в положительное.

h1 {
  font-size: abs(var(--font-size));
}

Управление направлением градиента

Также можно управлять направлением градиента с помощью функции abs(). В следующем примере при угле -45deg градиент будет начинаться с красного цвета и переходить к синему. Использование abs() для получения положительного значения изменит направление: градиент будет начинаться с синего цвета и переходить к красному.

div {
  --deg: -45deg;
  background-image: linear-gradient(abs(var(--deg)), blue, red);
}

Обратная совместимость

В браузерах, не поддерживающих функцию CSS abs(), можно использовать функцию CSS max() для получения того же результата:

p {
  line-height: max(var(--lh), -1 * var(--lh));
}

Мы используем функцию max(), чтобы вернуть наибольшее (самое положительное) значение из двух: var(--lh) или -1 * var(--lh). Независимо от того, является ли --lh положительным или отрицательным, вычисленное возвращаемое значение всегда будет положительным, то есть абсолютным числом.

Спецификации

Совместимость с браузерами

См. также

• sign()