CSS Conditionals: The @when Proposal Moves Forward

If you’ve been writing conditional styles for a while, you know that media queries already provide a form of logic. Need mutually exclusive rules? You can write two separate media queries to handle it. But that approach can get clunky, especially when conditions pile up.

The CSS Working Group just adopted a proposal from Tab Atkins for the next level of CSS Conditional rules. Instead of that fidgety dual-query pattern, the new syntax offers a cleaner structure:

@when media(min-width: 600px) {
  /* ... */ 
}
@else {
  /* ... */ 
}
  • Chain conditions with and.
  • Build waterfall logic with multiple @else blocks.
  • Use not just @media, but @supports too.
@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
  /* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
  /* B */
} @else {
  /* C */
}

There is one naming debate, though. @if might seem an obvious choice, but Sass already claims it. Given how widely used Sass is, forcing developers to refactor all that logic would be painful. The working group seems set on @when, and some argue it’s a better name anyway.