https://developer.chrome.com/blog/new-in-chrome-137
The example uses a newer `style(..)` condition I haven't seen yet:
https://developer.mozilla.org/en-US/docs/Web/CSS/@container#...
I'm curious if you can accidentally make loops using some of these, and if there's some sort of settling/recursion limit.
EDIT: Apparently `style(..)` can only evaluate vars in this `if()`? It looks like `@container` is a way to manage generic style queries and that supports the full gamut of CSS queries.
https://developer.mozilla.org/en-US/docs/Web/CSS/if
A @container query does have some advantages — you
can only set single property values at a time with
if() style queries, whereas @container queries can
be used to conditionally apply whole sets of rules.
The two approaches are complementary, and have
different uses.
Note that container style queries currently don't
support regular CSS properties, just CSS custom
properties. For example, the following won't work: [..]
https://drafts.csswg.org/css-values-5/#if-notation
For example, in --foo: if(style(--foo: bar): baz);
the style() query is automatically false, since
property replacement has already established a
«"property", "--foo"» substitution context. "
https://drafts.csswg.org/css-values-5/#cyclic-substitution-c...
When a cycle is detected, all participants in the cycle
become invalid. For example, all of the following
declarations become invalid at computed-value time."
If anything, it should enable (minor) expansion of noscript!
Some people have already claimed it's Turing complete by making the user hit tab and space to copy data between iterations, but I wouldn't listen to them. That copying role is simple but it's not negligible.
https://developer.mozilla.org/en-US/docs/Web/CSS/if
I for one would much rather use local conditionals than do the logical equivalent through conditionally set CSS variables. It is much more readable and extendable than several layers of abstraction (design token vars -> semantic vars -> theme vars potentially complexed by media/container queries -> element styles).
Of course I wouldn’t replace all of that, but if() would certainly make many things easier to grok for the next guy. Just don’t overuse it.
if() is just a general purpose conditional.
Using if() is going to reduce complexity for a whole range of use cases. Right now, developers are using custom property hacks to simulate true conditionals [1].
[1]: "The --var: ; hack to toggle multiple values with one custom property"—https://lea.verou.me/blog/2020/10/the-var-space-hack-to-togg...
webdevver•6h ago