Writing conditionals in CSS: @when/@else

WHAT IS IT?

In CSS, we make selections of different devices by using media queries. Media queries give us an easy way to select a 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.

Creating generalised conditional rules with @when

The proposed @when rule generalises conditionals, so instead of using a specific conditional rule for a specific task, such as a feature query with @support, you can generalise your rule block to use two or more kinds of queries.

So, suppose you want to test to see whether a media screen is below 660pixels and perform two feature queries to check whether the browser supports both grid and flex display features.

Without @when, you might have to write something similar to this:

In the above code, we check for three conditions before activating the following style sheet and use two different conditional rules.

But with @when, we can create a generalised rule to wrap all the disparate conditions into one statement:

Using @when inline

@when can also be used inline. In the following example, When the width is less than 500 pixels, the padding would be 1px instead of 2px.:

Creating conditional chains with @else

By using @else, we can create a chain of conditional statements, each containing a condition to evaluate.

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

Additional new ways of writing media queries

So far, we used min-width and max-width to set breakpoints for styling. Semantically, these terms can be difficult to understand.

min-width refers to larger screens, while max-width refers to smaller screens. This can get quite tricky to make sense of, especially for beginners.

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 for media queries right now.

So, instead of writing your media queries this way:

You can soon write them this way instead:

Conclusion

The proposals are moving along fairly quickly and CSS has been on a tear lately. There is a strong debate against the use of @when since @if is considered a more common name.

But, @when was picked to avoid conflict with Sass, a popular CSS preprocessor.

Regardless of its name, one cannot deny that these rules will be very useful when officially implemented by web browsers.

Thanks for reading.