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 sort a Set in JavaScript

ES6 introduced the set data structure in JavaScript. But sets are not ordered abstract data structures. So there is no .sort() property...

Debugging CSS scroll using one simple style

I have been doing a lot of complicated front-end work off lately and that always brings me back to the class conundrum...

CSS :has a parent selector now

CSS now includes a :has selector that allows us to apply styles on the basis of what is happening inside an element....

How to fix “invalid active developer path” after MacOS update

If you are here, then you are getting an "invalid active developer path" error on running commands in the terminal after a...

Getting the value of an input element as a number without parseInt

Every once in a while, you come across something and you think, how did I not know this earlier? valueAsNumber is that thing...

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.