Numeric comparison in CSS (for conditional logic)

George Adamson — Fri, 23 May 2025 15:56:24 +0000

Conditional logic in CSS is tantalisingly close.

Until CSS supports if() and else then we have to make do with workarounds.

Others, such as Lea Verou, have written superb guides about using binary logic to perform conditionals in CSS, using CSS Variables with values of 0 or 1.

Often however, we have ranges or numbers other than 0 or 1 in our CSS Variables so it would be handy if we could compare numeric values and drive logic from them.

TLDR: We can test for equality, less-than and greater-than by using a combination of calc(), abs() and sign() to give you a "boolean" value of 0 or 1.

When you have 0 or 1 in a variable you can do conditional styles like padding: calc(25px * var(--bool) + 10px * (1 - var(--bool))).

In JS we might simply write:

if (a === b) {
  // Apply some styles
}

if (a > b) {
  // Apply some styles
}

...but the best we could hope for in CSS right now is to set boolean variables like the following, and to use them in Binary Linear Interpolation:

--isEqual:       /* Some magical logic here */
--isGreaterThan: /* Some other magical logic */

Well there is a way using calc(), and the more recent abs() and sign(), to compare numbers and return 0 or 1.

Like this...

--isNotEqual: sign(abs(calc(var(--a) - var(--b))));
--isEqual:    calc(1 - var(--isNotEqual));

--isLessThan:    sign(max(0, calc(var(--b) - var(--a))));
--isGreaterThan: sign(max(0, calc(var(--a) - var(--b))));

--isLessThanOrEqual:    calc(1 - var(--isGreaterThan));
--isGreaterThanOrEqual: calc(1 - var(--isLessThan));

/* I'd welcome any suggestions for smarter ways to derive these! */

Demo on CodePen, with fallbacks.

Note: abs() and sign() have only partial browser support but they can be achieved using older syntax. At time of writing only Safari & Firefox supported them.

Polyfill for CSS sign() and abs()

George Adamson — Fri, 23 May 2025 12:10:30 +0000

sign()

CSS sign() is not well supported but can be "polyfilled" with calc() & clamp():

Given...

  --input: 10; /* <-- Any number */

...then sign() can be calculated using:

  --num: calc(var(--input) * infinity); 
  --sign: clamp(-1, var(--num), 1);

The code above is equivalent to:

  --sign: sign(var(--input));

Handy if you're attempting conditional logic and you need 0's and 1's instead of numbers. (What? Why? Read more about Binary Linear Interpolation).

How it works:

Multiply by infinity to give us 0 or +/-infinity to avoid rounding errors when dealing with very small decimals. Tip: If you know your input numbers will never be between -1 & 1 then you can skip the calc().
Round to the nearest -1, 0 or 1.

Demo on CodePen.

abs()

If you also need CSS abs(n) then simply use sqrt(pow(n,2)) instead: Demo on CodePen.
Combined with sign() you can derive "truthy" 0 or 1 from any number.

DEV Community: George Adamson

Numeric comparison in CSS (for conditional logic)

Polyfill for CSS sign() and abs()

sign()

abs()