DEV Community

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

Posted on

if/else in CSS

#css #webdev #beginners #news

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?

Top comments (19)

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
 
mrbns profile image
Mr. Binary Sniper •

These are different things..

Collapse
 
darkwiiplayer profile image
π’Ž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.

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 •

Good point, I didn't think about it

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€ • • Edited

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

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
 
jmzeph profile image
jmzeph •

why not go further and use switch cases.

Collapse
 
oumaymasghayer profile image
Oumayma JavaScript Developer •

This is helpful, Thank you.

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
 
vish_21 profile image
Vijay •

Will help in code unification

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
 
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. πŸ€·πŸ»β€β™€οΈ

View full discussion (19 comments)

Read next

hamzakhan profile image

πŸŒ€ State Management in React: Comparing Redux Toolkit vs. Zustand πŸ“Š

Hamza Khan -

mofazzelmorshed profile image

Understanding The Future Technology: Artificial Intelligence

Mofazzel Hosen Morshed -

pykpyky profile image

Designing a scalable application with interfaces in C#

Mary πŸ‡ͺπŸ‡Ί πŸ‡·πŸ‡΄ πŸ‡«πŸ‡· -

siisee11 profile image

Langgraph Human In The Loop with socket

Jaeyoun Nam -