if/else in CSS

As we know, there are no conditional statements in CSS, but this may soon change with new @when and @else operator

Currently, the only way to perform a conditional statement was to use media queries like this:

@media (min-width: 600px) {
  /* ... */ 
}
@media (max-width: 599px) {
  /* ... */
}

It works perfectly, but in the new proposal it looks much cleaner and very similar to many programming languages.

@when media(min-width: 600px) {
  /* ... */ 
}
@else {
  /* ... */ 
}

We can do multiple conditions as well by using multiple @else statements, and not just use @media, but @supports too.

@when media(width >= 600px) and media(pointer: fine) and supports(display: grid) {
  /* A */
} @else supports(caret-color: red) and supports(background: double-rainbow()) {
  /* B */
} @else {
  /* C */
}

There may be questions about the naming of this new feature. Some people think that @if would be a better name than @when, the reason behind this naming is probably that Sass already uses @if, and it would be annoying to many developers if they had to refactor their Sass logic.

The bad news is that it's not supported by any browser at this moment, it's not even listed on caniuse.com.

What do you think about this new proposal?

Comments

[Daniel Schulz]

But there are already conditional statements in CSS, they're just not named if/else.

:checked { /* if */ }
:not(:checked) { /* else */ }

[data-attr="true"] { /* if */ }
[data-attr="false"] { /* elseif */ }
:not([data-attr]) { /* else */}

As to the new synatx: I'm curious if it's going to solve componentization issues or rather introduce new side effects and specificity problems. I'll be happy to stay with the old and trusty

width: var(--s-width);
@media (min-width > 600px) {
    width: var(--l-width);
}

for as long as new best practices haven't surfaced. I guess i'm just used to structure my styles by viewport and not by instructions.

[Mr. Binary Sniper]

These are different things..

[𒎏Wii 🏳️‍⚧️]

It works perfectly

Not quite: What happens for 599.5px? Neither of the two rules applies. If you want it to work perfectly, you'll have to use not instead.

[Damian Brdej]

Good point, I didn't think about it

[Rudy Nappée]

How can your device have halves pixels ? 🤔

[Sergey Sova]

Yep. On the phones. Pixels in html/css is not real pixels

[Jose Salazar]

I think it will be awesome since it will make it more intuitive.

[Adam Crockett 🌀]

A good long while ago I was working on a new idea before svelte called Jess
github.com/adam-cyclones/Jess/blob...

And

github.com/adam-cyclones/Jess/blob...

Jess is abandonware but the idea was JavaScript for presentational logic and therefore if else
I have no time for this project which is a shame but you lot might like to get inspired 🤷‍♂️

[Oumayma JavaScript Developer]

This is helpful, Thank you.

[Vijay]

Will help in code unification

[Peter Bowater]

This seems shorter, and isn't this SASS style also proposed for plain CSS?

.div {
.......
@media (min-width: 600px {
.......
}
}

Sure you have to write the occasional override, but that is a rarity.

[Judith]

This is good to know. Thx for the info. Usually I put these future specs aside until they get adopted and there is multiple browser support. Too bz keeping track of whats current. 🤷🏻‍♀️

[jmzeph]

why not go further and use switch cases.

[Matt Miller]

I like your concept! And I'm also a fan of these kind of solutions to follow. Year by year there are many good ideas about the CSS to expand it to the next level to make it like an "~analog programming language" which is not dynamic like JS, but more like a static code which is capable to "~reply" or "~react" for "environment changes" such as media queries, scrolls ..etc. So, would be great to have these CSS (new) features at least as a default ones to get a chance/possibility to play with. Therefore would be amazing thing to use (pure) CSS as a tool to make the web both responsive and adaptive as well at the same time. I hope you get the idea what I mean. Cheers!

[Matt Miller]

By the way Damian, if you are up to this topic to develop something based on that particular concept then please let me know about it!

[Matt Miller]

Also you can play with the :has() and the :empty() selectors as well!
They are pretty useful for this if/else topic! Cheers!

developer.mozilla.org/en-US/docs/W...
developer.mozilla.org/en-US/docs/W...

[Matt Miller]

You may find this useful as a playground
the-guild.dev/blog/customizable-cs...

[Mohammed Samgan Khan]

i didn't know this, u are awesome bro.

[Sarthak Dwivedi]

Few important addition would be great. Although I've done some cool stuff with JS in styled components. Again, Vanilla css is a choice for most projects.