New CSS If/elseif/else statments

CSS Is Finally Getting If, Else, and elseif Statements!

 

Even though the Unofficial Proposal Draft for If, Else, and elseif statements for CSS was made on the 14th of September 2018, it took three years to be taken into serious considiration.

 

However, the past few years have rolled out an explosive amount of new CSS features. Some of these could be perceived as “if statements” too, like the @supports style:

 

@supports (border-radius: 50 %) {

html { background: red; }

}

 

There is also the classic media query too, which has been around for over a decade now:

 

@media (max-width: 1000 px) {

html { background: red; }

}

 

The one with “and”:

 

@media (min-width: 600px) and (max-width: 800px) {

html { background: red; }

}

 

The one with “or” (or is a Comma separater):

 

@media (max-width: 600px), (min-width: 800px) {

html { background: red; }

}

 

Technically these are treated like two separate media queries, but that is effectively or.

 

The one with “Not”:

 

@media not all and (max-width: 600px) {

html { background: red; }

}

 

There is also the new clamp() which is a little bit different, but looks like this:

 

width: clamp(1000 px, 50 %, 10 vw);

 

But functions like this:

 

width: clamp(1000 px >= (50 % >= 10 vw));

 

But those are arguable just “if statements”. If we wanted an “if and else statement” we would need to do something like this:

 

@media (max-width: 1000 px) and (prefers-color-scheme: dark) {

// maybe a mobile device in dark mode {} */

}

@media (max-width: 1000 px) and (prefers-color-scheme: light) {

/* maybe a mobile device in light mode {} */

}

 

Which is annoying and it comes to repeating the code.

But now, thankfully we can be annoyed no more with the newly proposed @when statement. It works something like this:

 

@when media (max-width: 1000 px) {

/* maybe a mobile device {} */

}

 

Which is just fine, I guess. But what about an else statment?

@when media (max-width: 1000 px) {

/* maybe a mobile device {} */

} @else {

/* maybe a desktop{} */

}

 

And an else if example!?

@when media (max-width: 1000 px) {

/* maybe a mobile device {} */

} @else media (max-width: 700 px) { {

/* totally a mobile device{} */

} @else {

/* a desktop or tablet{} */

}

 

We could probably even do something like this too:

 

@when media (max-width: 700 px) {

@when (prefers-color-scheme: dark) {

/* dark mode on mobile device */

} @else {

/* light mode on mobile device  */

}

}

 

We could also do multiple conditions via and, have a waterfall logic stack:

 

@when media (width >= 400px) and media (pointer: fine) and supports (display: flex) {

/* show some code  */

} @else supports (caret-color: pink) and supports (background: double-rainbow()) {

/* show some code  */

} @else {

/* show some code  */

}

 

I say “probably” because the spec is still in consideration, but hey, if Chris Coyier is celebrating it already, we can too!

But I know what you are thinking. Why the @s? Other languages do not need them. And also why the name @when instead of for just simple @if like almost every other programming languages? Well, the answer to both of those questions is simple SASS.

 

Sass uses @if and it would be super annoying to a ton of developers if they had to refactor all their Sass logic to something new or however that would fall out. Should CSS cede to any preprocessor out there? No, it should not, but Sass has been around for such a long time and is so popular, and since there is a perfectly good alternative, there is no special reason to additionally complicate things? In that thread, it is not just about Sass either — some in the programming community even think @when is a more suitable name anyway.

 

Hopefully, very soon @when will become officially accepted and it will make our CSS coding much easier.