abs() and sign()
The abs() and sign() CSS functions compute the absolute value or the sign of the input.
Overview
The abs() and sign() CSS functions compute the absolute value or the sign of 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.
Related links
Powered by web-features