CSS Equivalent of the "if" statement

#css #programming

Sometimes there is a need to select between two values based on some condition in css styling. One can uses simple two classes or javascript two select right stiling. But thanks to css variables if statements can be done also in pure CSS.

To select between two values in pure CSS you can use folowing math trick

Pseudocod:

if( valueSel < th) 
  return valueA
else
  return valueB

This statement can be converted to folowing pseudocod:

selector = (sign(valueSel-th)+1)/2
return valueA * (1-selector) + valueB * selector

Which can be expresed with help of css variables as:

CSS:

.some-class {
  --valueSel: /* Some Value - predicate */;
  --th: /* Some Treshold */;
  --valueA: /* Result A */;
  --valueB: /* Result B */;
  --selector: calc(clamp(0,tan( clamp(-1,var(--valueSel) - th, 1) ),1));
  --result: calc( var(--valueA) * (1 - var(--selector) ) + var(--valueB) * var(--selector) );    
}

The selection can be extended to selecting colors via mix-color

You can see usage if this in Pure CSS radiational progress bar
https://codepen.io/owcakw/pen/KKEGvgZ

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide