The sign()
CSS function contains one calculation, and returns -1
if the numeric value of the argument is negative, +1
if the numeric value of the argument is positive, 0⁺
if the numeric value of the argument is 0⁺, and 0⁻
if the numeric value of the argument is 0⁻.
Note: While abs()
returns the absolute value of the argument, sign()
returns the sign of the argument.
Parameters
The sign(x)
function accepts only one value as its parameter.
-
x
-
A calculation which resolves to a number.
Return value
A number representing the sign of A
:
- If
x
is positive, returns 1
.
- If
x
is negative, returns -1
.
- If
x
is positive zero, returns 0
.
- If
x
is negative zero, returns -0
.
- Otherwise, returns
NaN
.
<sign()> =
sign( <calc-sum> )
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-constant> |
( <calc-sum> )
<calc-constant> =
e |
pi |
infinity |
-infinity |
NaN
Background image position
For example, in background-position
positive percentages resolve to a negative length, and vice versa, if the background image is larger than the background area. Thus sign(10%)
might return 1
or -1
, depending on how the percentage is resolved! (Or even 0
, if it's resolved against a zero length.)
div {
background-position: sign(10%);
}
Position direction
Another use case is to control the position
of the element. Either a positive or a negative value.
div {
position: absolute;
top: calc(100px * sign(var(--value)));
}
Specifications
Browser compatibility
|
Desktop |
Mobile |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
WebView Android |
Chrome Android |
Firefox for Android |
Opera Android |
Safari on IOS |
Samsung Internet |
sign |
No |
No |
118 |
No |
No |
15.4 |
No |
No |
118 |
No |
15.4 |
No |