v138 · css

CSS Sign-Related Functions: abs(), sign()

The sign-related functions ​abs() and sign() ​compute various functions related to the sign of their argument. The abs(A) function contains one calculation A, and returns the absolute value of A, as the same type as the input: if A’s numeric value is positive or 0⁺, just A again; otherwise -1 * A. The sign(A) function contains one calculation A, and re

concepts

  1. abs() and sign()

    CSS gains abs() and sign() math functions. Author-side arithmetic that previously needed a JS bridge becomes a one-liner.

  2. Delta badge

    A dashboard metric tile driven by a single --delta property: sign() picks the color and arrow direction, abs() sets the bar width. No JS layout math.

  3. Scroll direction indicator

    One signed value, twelve coordinated outputs. sign() rotates an arrow, selects a hue, switches a label; abs() sets bar width and distance. Two side-by-side panels react in lockstep with zero JS branching.

  4. Symmetry Animator

    abs() folds a linear sweep into a V-shaped bounce; sign() flips a direction arrow as the value crosses zero — all in CSS custom property arithmetic, no JavaScript layout math.

  5. Equalizer Bars

    A 10-band audio EQ where each bar's height is calc(abs(var(--v)) * 2px) and its hue shifts with sign(var(--v)) — teal for positive gain, amber for negative. JS only sets one --v custom property per band; all visual output flows from CSS abs() and sign() math. Animate mode runs a sine sweep so you can see the functions work continuously.

why it shipped

The sign-related functions ​abs() and sign() ​compute various functions related to the sign of their argument. The abs(A) function contains one calculation A, and returns the absolute value of A, as the same type as the input: if A’s numeric value is positive or 0⁺, just A again; otherwise -1 * A. The sign(A) function contains one calculation A, and re

references