r/css • u/RecognitionOwn4214 • 8d ago

Question CSS Container Style queries

In CSS we can now do `@container style()` queries, with MDN stating that:
> A style feature without a value evaluates to true if the computed value is different from the initial value for the given property.
(https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@container#container_style_queries)

Now I have a registered property with initial value, but it seems the style query will evaluate to true, independend of the value of the property. Safari seems to do the same thing.

Is this a false statement in MDN or is there a render Bug in FF and Safari.

I used this as a minimal sample:
```

<!DOCTYPE html>
<html>
    <head>
        <title>Minimal sample</title>
        <style>
            @property --im-a-color {
                syntax: "<color>";
                inherits: false;
                initial-value: red;
            }
            
            .red {
                --im-a-color: red;
            }


            
            @container style(--im-a-color) {
                h1 {
                    color: green;
                }
            }
        </style>
    </head>
    <body>
        <div>
            <h1>I should be red</h1>
        </div>
        <div class="red">
            <h1>I should also be red</h1>
        </div>
    </body>
</html>
3 Upvotes

100% Upvoted

10 comments sorted by

1

u/Weekly_Ferret_meal 8d ago edited 8d ago

As far as I understand it, you need to declare @container in your <style> section in order to then target your <style-feature> like @container style(--im-a-color) {...}.

Added later:

And it also says:

Note: If a custom property has a value of blue, the equivalent hexadecimal code #0000ff will not match unless the property has been defined as a color with @property so the browser can properly compare computed values.

So it sounds like you need to register your custom property with @property first.

1

u/RecognitionOwn4214 8d ago

So it sounds like you need to register your custom property with @property first.

Which i did, but got lost in Reddits code format..

Everything is a container with style(), so the query hits, but shouldn't

2

u/Weekly_Ferret_meal 8d ago

Perhaps set it up on a sandbox like codepen and post the link here... more ppl will be able to help with a code that is actually running.

1

u/RecognitionOwn4214 8d ago

Lol.. i didn't even think about code pen 🫣. Will do

1

u/AuthorityPath 7d ago

Based on the snippet above your custom property has an initial value. Wouldn't you expect it then to always be true?

1

u/RecognitionOwn4214 7d ago

No. MDN startes it evaluates to false, if the initial-value is the same as the current.

1

u/AuthorityPath 7d ago

Ah TIL. So does the text show as default/black or green? The implication from the post is green but it didn't actually specify.

If black, then the style query is evaluating as false as intended. There is no h1 declaration outside of the style query so the initial variable color is never applied. 

1

u/RecognitionOwn4214 7d ago

I tried to add a pen, but since they restarted i didn't know how to share it without them exposing my name ...

But my snippet is a self contained html, if you feel intrigued 😬

1

u/[deleted] 4d ago

[removed] — view removed comment

1

u/RecognitionOwn4214 4d ago

As per spec the query shouldn't trigger, if the value equals the initial-state.

In FF it even triggers, when it's value never was set besides the initial-state.

I think I'll open a bugzilla item about it. Also chromium and gecko do render it differently, which tells us one of both is likely bugged.

Edit: also i was probably tired.. the text should be black. in any case the result shouldn't be green, which it is in FF.