Proposal for CSS @when

CSS is on a tear these days. Once more, I’ve heard of a model new factor I’ve by no means seen earlier than, and once more it’s through Miriam: CSS Conditionals.

There’s already such a factor as logic in media queries. Actually, a media question is already logic.

@media (min-width: 600px) {
/* WHEN this media question is true, do these kinds. */
}

And if you wish to have kinds which are mutually unique to the above, you’d write two media queries:

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

That’s slightly… fidgety. The syntax is far cleaner on this new proposal:

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

Appears like you are able to do a number of circumstances through and, have a waterfall logic stack with a number of @else statements, and never simply use @media, however @helps as nicely.

@when media(width >= 400px) and media(pointer: tremendous) and helps(show: flex) {
/* A */
} @else helps(caret-color: pink) and helps(background: double-rainbow()) {
/* B */
} @else {
/* C */
}

Appears very logical and helpful to me!

I noticed one little squabble concerning the naming. @if could possibly be a logical identify right here too. However Sass makes use of @if and it will be tremendous annoying to a ton of builders in the event that they needed to refactor all their Sass logic to one thing new or nevertheless that may fall out. Ought to CSS cede to any preprocessor on the market? Nah, however Sass has been round a very long time and is tremendous fashionable, and there’s a completely good various, so why trigger the ache? In that thread, it’s not nearly Sass both — some of us suppose @when is a greater identify anyway.

The publish Proposal for CSS @when appeared first on CSS-Methods. You may assist CSS-Methods by being an MVP Supporter.