CSS if() style query not working like @container style query
In this codepen, I tried to use the new
if() css function but it seems like the style query used for it cannot be used with declarations like it should
=> if I do style(color: red) it doesn't work but if I use custom props instead : style(--color: red), everything works well. (this is exactly the same with @container style queries but on mdn or in this article it seems like it should have been possible 🤔)
Does anybody know why or what I am missing?
=> Here is a small codepen that illustrates my issue
(If I understand the official documentation, it should work as I expect https://www.w3.org/TR/css-contain-3/#typedef-style-feature)Chrome for Developers
Getting Started with Style Queries  | CSS and UI  | Chrome fo...
Style queries allow developers to query a parent element's style values using the @container rule. In Chrome 111, style queries for CSS custom properties are landing stable. Learn how to get started with them.
5 Replies
i don't think the color:red is supported yet
container style queries (which if() uses behind the scenes) only work with checking custom property values at the moment.
The spec has them supporting any property value pair, but for the time being, no browser supports that (and I have a feeling it will be a long time, it's a big hurdle, both from a technical and performance standpoint).
Okay, thanks for the information! I couldn't find it anywhere 😅 May I ask you where you found it?
it's listed on caniuse.com - if you look up style queries, it shows only partial support and explains it there.
I've been following them since before they made it into the browsers as well, so I've been pretty aware of the limitation for awhile 😄
Indeed, out of all the sources I looked into, I forgot about the most important 😅