A First Look at CSS When and Else Statements

In CSS, we make selections of different devices by using media queries. Media queries give us an easy way to select devices based on numerous conditions, such as screen size, pixel density, or even format: i.e., print or screen.

This has progressively gotten more complicated over time, and now we are often balancing many conditions that sometimes conflict with each other.

The new CSS Conditional Rules 5 Specification tries to resolve this problem by introducing two new ways to do media queries - @when and @else. These will finally allow us to create conditional statements directly in vanilla CSS. Let's take a look at how it works!

@when/@else Support

Currently, no browsers natively support @when/@elseHowever, that is likely to change soon. Full support for @when/@else is shown below.

Using @when/@else in CSS

Let's suppose we have one set of rules which we want to apply to screen sizes less than 780px wide, which supports, display: flexand another which should apply to anything apart from that. Previously, we would have to use @media queries to select for both of those things separately. This became a little bit messy when selecting multiple different things. With @when and @else it looks like this:

@when screen and (max-width: 780px) and supports(display: flex) {
    .my-element {
        color: red;
        display: flex;
    }
}
@else {
    .my-element {
        display: block;
    }
}

We can also chain multiple conditions. For example, let's say we have three scenarios: screens with a max-width of 780px that support, display: flexscreens larger that support display: flexAnd everything else. In that case, we can have multiple conditions:

@when screen and (max-width: 780px) and supports(display: flex) {
    .my-element {
        color: red;
        display: flex;
    }
}
@else screen and supports(display: flex) {
    .my-element {
        display: flex;
    }
}
@else {
    .my-element {
        display: block;
    }
}

As you'd expect, we can have even more @else statements, but the above gives you an idea of how useful both @when and @else will become when implemented in CSS.

Conclusion

Conditional statements have never been in vanilla CSS, so it's great to see them coming soon finally. It's also going to simplify how we make media queries greatly. We already have logic in CSS if we use third-party packages like SASS, but when it comes natively to CSS, we can avoid using a pre-processor or build with this addition.