Lea Verou, PhD

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
Jun 13, 2024 at 9:54amWeb
Show threadMatthias OttJun 13, 2024
@leaverou Yesss! Congrats! 🎊🤗
Show threadSara Joy Jun 13, 2024

@leaverou whaaaaaaat what what aaaaaaa

Will it just look at var()s or other things too? Aaaaa

Show threadLea Verou, PhDJun 13, 2024
@sarajw
- Any conditional style queries support
- media()
- supports()
Show threadSara Joy Jun 13, 2024

@leaverou ooooooo. Honestly I'm still to play with some queries, I should do that.

Thank you!!

Show threadMassimo Artizzu 🇺🇦🔱Jun 13, 2024
@leaverou Holy moly! I wasn't expecting to see that approved before 2028! 🤯
Show threadOllie BoermansJun 13, 2024
@leaverou 😮
Show threadRaphaelJun 13, 2024
@leaverou This is awesome! Cheers 🥳
Show threadRoma KomarovJun 13, 2024
@leaverou cc @anatudor @JaneOri 
Show threadbigandyJun 13, 2024

@leaverou Woohoo! Looking forward to this. Had to use some hackery to get margin-bottom after x items. This will really simplify things.

https://codepen.io/bigandy/pen/KKLXOmg?editors=0100

mod() v3

...

Show threadChristopher Kirk-NielsenJun 13, 2024
@leaverou Wowza, theming is about to get a lot more fun for me. 😄
Show threadDan Ryan  (he/she/they)Jun 13, 2024
@leaverou I just fell out of my chair!
Show threadSasha ChudesnovJun 13, 2024
@leaverou Personally I don’t get how the second example is supposed to work, and I expect this specific part of the syntax to confuse the hell out of people.
Show threadLea Verou, PhDJun 17, 2024

@chudesnov Would something like this make more sense?

padding: if(var(--2xl) ? 1em : var(--xl) or var(--m) ? .5em);

Show threadSasha ChudesnovJun 17, 2024
@leaverou kinda, but mixing if ( ... ) like syntax and x ? a : b like syntax AND keywords like OR is still super confusing.
Show threadThomasAPowellJun 13, 2024

@leaverou I imagine on webdev X this new hotness will be dubbed “Js” in CSS 😜

Seriously though this is great.

Show threadAleksei☃️Jun 13, 2024
@leaverou Do I understand these examples correctly that now CSS can evaluate logical conditions?
Show thread🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻♓🧿Jun 14, 2024
@placebo @leaverou *flips desk and moves back into the jungle to hunter gather*
Show threadJames NashJun 13, 2024

@leaverou Does this mean #CSS is now a real programming language? 😜

*ducks*

Show threadThomas Michael SemmlerJun 13, 2024

@leaverou that's great. But I am afraid I am not sure how it differs from container style queries? I read that this doesn't share the same limits, but do I understand that this is just a _better_ version of style container queries and that container style queries will become obsolete with it?

Or will `if()` be able to evaluate more than just custom property values?

Sorry if these may have already been answered in the GH issue, it is just a bit too long for me to read

Show threadThomas Michael SemmlerJun 13, 2024

@leaverou regardless, a monumental day for CSS.

Though I always thought it would be `when()` instead? :D

Show threadKevin PowellJun 13, 2024

@nachtfunke @leaverou be happy to be corrected on this, but to me, if() will be for single declarations. Style queries are for entire rulesets for a given selector.

I think both will have their use cases. For selectors where there could be a lot of changes, multiple style queries would be more verbose, but probably easier to read.

One advantage with if() is multiple options for a given property, which style queries can't do, and is cool and will be very useful.

Show threadThomas Michael SemmlerJun 13, 2024
@leaverou @kevinpowell oh I see, that of course makes total sense!
Show threadLea Verou, PhDJun 14, 2024
@nachtfunke @kevinpowell yup, style queries have better ergonomics but are limited to descendants. So I’d imagine in most cases you’d use both: style queries for descendants and if() for the element itself.
Show threadJuan LuisJun 13, 2024
@leaverou Will the "CSS is not a programming language" folks be happy now? 💀
Show threadLuke Dorny Jun 13, 2024
@leaverou wow. Just wow. It’s a coding miracle.
Show threadiamdtmsJun 13, 2024
@leaverou And HTML is not a programming language! ☝️
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, PhDJun 14, 2024
@dutchcelt Why not just use the actual selector there?
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.
Show thread🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻♓🧿Jun 14, 2024
@leaverou thanks, I hate it!