CSS if/else conditional style based on value
Some people say that there are no conditional statements in css, but this will soon change with new @when and @else operator
Today, conditional logic is set up differently. For example, you can use CSS media queries like this:
|
1 2 3 4 5 6 |
@media (min-width: 768px) { /* CSS Code Here */ } @media (max-width: 767px) { /* CSS Code Here */ } |
It works like a charm, but the new proposal it looks much cleaner and is very similar to many other programming languages.
|
1 2 3 4 5 6 |
@when media(min-width: 768px) { /* CSS Code Here */ } @else { /* CSS Code Here */ } |
Multiple @else statements can also be used to do multiple conditions. Not just @media, but @supports too.
|
1 2 3 4 5 6 7 |
@when media(width >= 600px) and media(pointer: fine) and supports(display: grid) { /* CSS Code A */ } @else supports(caret-color: green) and supports(background: double-rainbow()) { /* CSS Code B */ } @else { /* CSS Code C */ } |
There may be some confusion about this feature’s name, as some people think that it should be named @when. I think that the naming certainly makes sense as Sass already has the @if function built-in. To avoid confusion with other developers, it might be best to leave this alone.
It doesn’t seem to be supported by any browser. The only place I found which lists compatibility for this is caniuse.com, but I couldn’t find it there.
