DEV Community

Cover image for if/else in CSS
Damian Brdej
Damian Brdej

Posted on

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) {
  /* ... */
}
Enter fullscreen mode Exit fullscreen mode

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 {
  /* ... */ 
}
Enter fullscreen mode Exit fullscreen mode

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 */
}
Enter fullscreen mode Exit fullscreen mode

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?

Discussion (17)

Collapse
iamschulz profile image
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 */}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
darkwiiplayer profile image
DarkWiiPlayer

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.

Collapse
devdufutur profile image
Rudy Nappée

How can your device have halves pixels ? 🤔

Collapse
sergeysova profile image
Sergey Sova

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

Collapse
quentindamianino profile image
Damian Brdej Author

Good point, I didn't think about it

Collapse
adam_cyclones profile image
Adam Crockett • Edited on

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 🤷‍♂️

Collapse
r4nd3l profile image
Matt Miller • Edited on

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...

Collapse
oumaymasghayer profile image
Oumayma JavaScript Developer

This is helpful, Thank you.

Collapse
jmzeph profile image
jmzeph

why not go further and use switch cases.

Collapse
peterbowater profile image
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.

Collapse
jrohatiner profile image
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. 🤷🏻‍♀️

Collapse
r4nd3l profile image
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!

Collapse
r4nd3l profile image
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!

Collapse
joesalaz profile image
Jose Salazar

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

Collapse
vish_21 profile image
Vijay

Will help in code unification

Collapse
r4nd3l profile image
Matt Miller

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

Collapse
msamgan profile image
Mohammed Samgan Khan

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