Writing conditionals in CSS: when/else

CSS already has had conditionals in the form of @media queries or @support queries to selectively apply styling to the document. But there is a new proposal called when/else which takes it to a different level.

At the time of writing this post, the when proposal for when has been resolved to be adopted by CSSWG. The else proposal is a separate one and is a level 4 specification right now.

- Advertisement -

Let us take a look at how they work.

The when/else syntax

Using media queries, if we were to make our page responsive, we could add some logic like

@media (min-width: 800px) {
  /* styling logic for width > 800px */
}

And if we wanted to add some logic for smaller resolutions, we would do

@media (min-width: 800px) {
  /* styling logic for width > 800px */
}
@media (max-width: 799px) {
  /* width < 800px */
}

The when else syntax is cleaner:

@when media(min-width: 800px) {
  /* .. */ 
}
@else {
  /* .. */ 
}

And it even supports multiple conditionals

@when media(min-width: 800px) {
  /* .. */ 
}
@else media(min-width: 600px) {
  /* .. */ 
}
@else {
  /* .. */ 
}

Creating generalized rules

When else is not limited to @media queries. It can be combined with other conditionals as well.

So instead of doing:

@media (max-width: 799px) {
    @supports (display: flex) {
        .flex {
            flex-direction: row;
        }
    }
}

We can simply do:

@when media(max-width: 769px) and supports(display: flex) {
    .flex {
        flex-direction: row;
    }
}

@when can also be used inline

.button {
  padding: 2rem;
  @when element(max-width: 400px) {
    padding: 1rem;
  }
}

When the width is less than 400 pixels, the padding would be 1 rem instead of 2 rem.

Additional new ways of writing media queries

There is another proposal to the media queries spec, which will allow more semantic conditions while writing media queries themselves. It is again a level 4 specification right now.

Instead of writing min-width and max-width, media queries could then be rewritten as

@media (width <= 800px) {
  /* styling logic */
}

Conclusion

The proposals are moving along fairly quickly and CSS has been on a tear lately. There is a debate about using @if instead of @when but the argument is that it’d conflict with Sass. There is a proposal to replace it with @where as well.

Irrespective of the name, this will be a great addition to the CSS toolset.

Recent Articles

How to debug better using $ sign shortcuts in Chrome devtools

Chrome devtools has a collection of utilities that can be used to perform common debugging tasks and make our life easier. The...

Deep copying in JavaScript using structuredClone

For as long as anyone can remember, deep copying in JavaScript was not a built-in feature and we had to resort to...

Chrome devtools: Using logpoints for logging messages directly

When it comes to debugging JavaScript in Chrome devtools, there are two different camps: the console.log fans and the debugger/breakpoint maximalist. I...

How to prevent npm install for unsupported Node.js versions

npm configurations allow us to do quite a lot of nifty things. One of them is to allow the project to set...

How to terminate a process on a port using the command line

Zombie processes are usually a pain to figure out. More often than not, I end up googling about how to terminate a...

Related Stories

2 Comments

    • Though these are almost at the final stages of approval, the @where spec will be landing first. The only discussion pending there is the name and that should hopefully be a quick one. The @else is a little less further along and will take some time. Not sure about your framework’s timeline, but I would not hold my breath for these if you intend to launch soon.

Leave A Reply

Please enter your comment!
Please enter your name here

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.