abs()

Функция abs(x) принимает только одно значение в качестве параметра.

x

Вычисление, которое разрешается в число.

Абсолютное значение x.

• Если числовое значение x положительно или 0⁺, возвращается x.
• В противном случае, возвращается -1 * x.

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

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

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

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

<calc-keyword> = 
  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()