Lea Verou, PhDJun 13, 2024

A historical day for CSS 😀🎉

If you write any components used and/or styled by others, you know how huge this is!

background: if(style(--variant: success), var(--green));

Even if you don’t, this will allow things like:
padding: if(var(--2xl), 1em, var(--xl) or var(--m), .5em);

GitHub issue: https://github.com/w3c/csswg-drafts/issues/10064

[css-values-5] What is the MVP for inline conditionals on custom properties? · Issue #10064 · w3c/csswg-drafts

Edit: Resolved to pursue this! 🎉 There are several issues across this repo proposing some kind of inline conditional function. Here is a sample: #5624 #5009 #6638 #4731 #3455 Yet, this is another c...

GitHub
Show threadEgor KloosJun 14, 2024
@leaverou I can't wait to play around with this. Also, wondering if `if()` would also be able to do `if(:state(newmember), var(--promo)).`
Show threadLea Verou, PhD
@dutchcelt Why not just use the actual selector there?
Jun 14, 2024 at 12:26pmWeb
Show threadEgor KloosJun 14, 2024
@leaverou Fair point. I thought aloud (I should stop doing that) about triggering style queries loosely coupled to a given state, grouping them with an `if()` looked like another way to do that.