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 check if a string contains emojis in JavaScript?

If you have user-generated content in your web application, chances are you have to deal with strings containing emojis. Since emojis are...

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...

Retrieving content value of ::after or ::before in JavaScript

For the following element:#element::after { content: 'Custom value' }If we needed a way of...

How to permanently remove a file from Git history

We all make mistakes sometimes. Pushing files that contain some secrets or sensitive information to a Git repository is fairly common. And...

Select all text on click using CSS

When a user has to select some text on a website, they have to drag and hold their mouse, or use double-click...

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.