abs() and sign()
The abs() CSS function returns the absolute value of the argument, as the same type as the input.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 138 | 138 | 118 | 15.4 | 138 | 15.4 | |
| Other | ||||||
| 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⁻. | 138 | 138 | 118 | 15.4 | 138 | 15.4 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.distance-indicator {
/* Get the absolute value of the difference */
--distance: abs(var(--target) - var(--current));
width: calc(var(--distance) * 1px);
}
.directional {
/* Change direction based on the sign of the value */
--direction: sign(var(--velocity));
transform: scaleX(var(--direction));
}Live demo
Use cases
-
Maintainable CSS architecture
Use abs() and sign() to make stylesheet intent clearer in larger codebases and shared design systems.
-
Fallback management
Control resets, imports, inheritance, or feature branches with explicit CSS rules instead of ad hoc duplication.
Cautions
- Cascade-level tools are powerful, so misuse can make style ownership harder to understand.
- Keep rules scoped and documented when they affect many selectors or entire stylesheets.
Accessibility
- Global CSS controls should not accidentally remove focus, contrast, or structural cues.
- Fallback paths should remain readable and functional, especially for assistive-technology users.