Post

Adam Argyle
@nerdy.dev

```#css .container { container-name: --example; } h1 { color: red; @container --example { color: green; } } ``` Canary and Tech Preview both showing green text! Gettin there, excited for these to hit stable.

4 reposts48 likes

Anthony Frehner
@frehner.me

We’ve got a 3 day hack fest coming up soon; I was thinking I could use that time to try and contribute to FF for the first time. Maybe.

Spookycyte
@sagacyte.bsky.social

Pardon the question: Wouldn't a ".container h1" selector (after the standard h1 selector) accomplish the same thing? I admit, I'm not aware of the latest stuff, so there's probably a modern angle I'm missing 😅

Alexander Kuznetsov
@alexkuz.me

I think the idea is to use container queries with more specificity, this example just doesn't reflect that. Example from MDN: ``` @container sidebar (width > 700px) { .card { font-size: 2em; } } ```

Spookycyte
@sagacyte.bsky.social

I kinda see where this is going. My old-ways mind immedately jumps to "Why not just put '.container sidebar .card' in the appropiate >700 media query?" but I guess this will allow for surgical changes without being too global 😊 I'll check MDN!

Alexander Kuznetsov
@alexkuz.me

The key thing here is that the query relates to the container, not the window. AFAIK there's no way to check if element is of a certain size in pure CSS without @container.