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. tries to resolve this problem, by introducing two new ways to do media queries - and . These will finally allow us to create conditional statements directly in vanilla CSS. The new CSS Conditional Rules 5 Specification @when @else Let's take a look at how it works! @when/@else support Currently, no browsers natively support / , however, that is likely to change soon. Full support for / is shown below. @when @else @when @else 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 , and another which should apply to anything apart from that. Previously, we would have to use queries to select for both of those things separately. This became a little bit messy when selecting for multiple different things. With and it looks like this: display: flex @media @when @else @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 scenarios: screens with a max width of 780px that support , screens larger that support , and everything else. In that case, we can have multiple conditions: three display: flex display: flex @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 statements, but the above gives you an idea of how useful both and will become when implemented in CSS. @else @when @else Conclusion Conditional statements have never been in vanilla CSS, so it's great to finally see them coming soon. It's also going to greatly simplify how we make media queries. We already have logic in CSS if we use third-party packages like SASS, but when it comes natively to CSS, we can avoid the need to use a pre-processor or build with this addition. Also Published here

Chain

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

A First Look into Conditional When and Else Statements in CSS

A First Look into Conditional When and Else Statements in CSS

Too Long; Didn't Read

Coin Mentioned

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

A First Look into Conditional When and Else Statements in CSS

Too Long; Didn't Read

Coin Mentioned

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES