Comments on: Proposal for CSS @when

By: John P

John P — Sat, 13 Aug 2022 15:10:02 +0000

In reply to nicolas. Did you ever find a solution for this. I am paying 200 bucks if you can find something like that works in html email.

By: Nico

Nico — Wed, 19 Jan 2022 07:41:06 +0000

Interesting. Not long before we start unit testing CSS files then I guess? ;)

By: Joseph

Joseph — Tue, 28 Sep 2021 05:58:44 +0000

In reply to zeel. Wow, declarative not imperative, this is the best argument, brilliant !

By: Ivan

Ivan — Sat, 25 Sep 2021 05:52:37 +0000

In reply to Chris Morgan. Thanks!

By: Josh Olsen

Josh Olsen — Fri, 24 Sep 2021 00:45:48 +0000

In reply to Dypnotic. Different sure, but CSS isn't like other languages. I think this fits.

By: zeel

zeel — Fri, 24 Sep 2021 00:43:32 +0000

Honestly, since CSS is declarative rather than imperative this makes sense. Using “when” disambiguates this concept from flow-control.

The timeliness of the word works for it, don’t just do the following IF this condition is so, do it WHENEVER it is so.

By: Nux

Nux — Thu, 23 Sep 2021 00:05:24 +0000

Note that calc is a problem in Less in a similar way. I mean you have to use a string escape ~"calc(100% - 20px)" So I guess you could work around @if problem too... But personally I'm fine with @when name. There is also when in xsl so css wouldn't be the first.

By: Jace

Jace — Wed, 22 Sep 2021 19:44:13 +0000

In reply to Matthew Lueck. I'd guess @else isn't a problem because Sass won't compile @else if not used after an @if. Though it might throw a syntax error during compilation.

By: Matthew Lueck

Matthew Lueck — Wed, 22 Sep 2021 15:55:39 +0000

It’s interesting to me that there’s such a hot debate around @if versus @when, but it seems as if no one has brought up the fact that SASS uses @else as well.

By: Dypnotic

Dypnotic — Wed, 22 Sep 2021 13:12:23 +0000

Disagree with the last paragraph. Should be @if refactoring sass is pretty simple and temporary annoying, but @when would be different from every other language, so something specific you have to remember and forever annoying. Otherwise, cool addition!

By: nicolas

nicolas — Wed, 22 Sep 2021 10:58:54 +0000

We could also do something like:

.textbox {
    width: 80%;
    padding: 1rem;
    @when element(width >= 20rem) {
        padding: 2rem;
    }
}

Introducing an element() thingy in passing, and using the calculated value of a property of the element to switch the condition on or off.

By: Chris Morgan

Chris Morgan — Tue, 21 Sep 2021 23:26:34 +0000

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

This is bad code that is not equivalent to the @when shown. Remember that CSS pixels are not integral, so you can absolutely have device widths between 599px and 600px (e.g. with a device pixel ratio of 2, a window that is 1199 device pixels wide will by 599.5 CSS pixels wide). Instead, you should write:

@media (min-width: 600px) {
  /* ... */ 
}
@media not all and (min-width: 600px) {
  /* ... */
}

It’s a pity negation requires a medium to be specified, since not all and is an idiosyncratic spelling of what a reasonable person might expect to be just not, but that’s what’s needed. … and that’s why I think getting @when into CSS might be useful, because too many people get these sorts of negations wrong.