Mastodawn

Lea Verou, PhD Jun 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 thread

Thomas Michael Semmler Jun 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 thread

Kevin Powell Jun 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 thread

Thomas Michael Semmler Jun 13, 2024

@leaverou @kevinpowell oh I see, that of course makes total sense!

Show thread

Lea Verou, PhD

@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.