CSS-функция `sign()`

sign() — это CSS-функция, которая содержит одно вычисление и возвращает -1, если числовое значение аргумента отрицательное, +1, если числовое значение аргумента положительное, 0⁺, если числовое значение аргумента равно 0⁺, и 0⁻, если числовое значение аргумента равно 0⁻.

Синтаксис

/* property: sign( expression ) */
top: sign(20vh - 100px);

Параметры

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

x

Вычисление, результатом которого является число.

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

Число, представляющее знак A:

• Если x положительное, возвращается 1.
• Если x отрицательное, возвращается -1.
• Если x — положительный ноль, возвращается 0.
• Если x — отрицательный ноль, возвращается -0.
• В остальных случаях возвращается NaN.

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

<sign()> = 
  sign( <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

Примеры

Положение фонового изображения

Например, в свойстве background-position положительные процентные значения преобразуются в отрицательную длину, и наоборот, если фоновое изображение больше области фона. Таким образом, sign(10%) может вернуть 1 или -1 в зависимости от того, как вычисляется процентное значение! (Или даже 0, если оно вычисляется относительно нулевой длины.)

div {
  background-position: sign(10%);
}

Направление позиционирования

Ещё один вариант использования — управление position элемента с помощью положительного или отрицательного значения.

div {
  position: absolute;
  top: calc(100px * sign(var(--value)));
}

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

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

См. также

• abs()
• Использование типизированной арифметики CSS