If/Else in CSS

Today I got to try the experimental if/else syntax in CSS:

/* Component.module.css */
img {
  transform: if(style(--isZoomed: true): scale(2) ; else: scale(1));
}

I used it to pass a variable from React state to the stylesheet:

// Component.tsx
<img style={{'--isZoomed': isZoomed ? 'true' : 'false'}} />

I think conditional classes would be my preference for managing this for real, but this is an alternative.

• if() CSS Function — MDN