sign()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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.
Syntax
/* property: sign( expression ) */
top: sign(20vh - 100px);
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, returns1
. - If
x
is negative, returns-1
. - If
x
is positive zero, returns0
. - If
x
is negative zero, returns-0
. - Otherwise, returns
NaN
.
Formal syntax
Examples
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
Specification |
---|
CSS Values and Units Module Level 4 # sign-funcs |
Browser compatibility
BCD tables only load in the browser