Same card component, two contexts. In the sidebar it is 240px wide and needs to stack. On the main page it is around 900px and should be a row with the meta on the right.
I already have a useElementSize hook in the codebase from something else, so using it is close to free. But it feels like the wrong tool and I cannot articulate why beyond vibes. Convince me either way.
If you have exactly two contexts and you know which one you are in at the route level, honestly just pass compact. Container queries are great, and this specific problem might be a boolean.
Works right up until the card appears in a modal, or a drawer, or a two-column layout on tablet, and now the prop has three values and one of them is a lie. The whole reason container queries feel right here is that the card stops needing to know where it is.
The case for the hook is when the difference is not visual. Different data fetch, different subtree, mounting a map in one and a list in the other. CSS cannot decline to render a component, and doing it in CSS by hiding one means you paid for both.
Container queries still need a polyfill for Safari, which is worth factoring in before you commit.
They have shipped in every current browser including Safari for a good while now. Check your actual support target rather than adding a polyfill from a blog post - the polyfill is heavier and more fragile than the feature.
Small practical note: container-type: inline-size only constrains the inline direction, so height-based tricks inside still behave normally. If you ever reach for full size containment you have to give the container an explicit height or it collapses, and that surprise is where most of the "container queries broke my layout" complaints come from.
@serger_seth · 3mo ago · 3 replies
Container queries, and it is not close.
The hook means your first render is wrong, then you measure, then you re-render. On a server-rendered page that is a visible layout shift on every load, and it is a shift that happens after the user has already started reading. You also re-render the component on every resize, and you cannot render the correct layout on the server at all because the server does not know how wide anything is.
In v4 the variants are built in. Put
@containeron the wrapper, then@sm:flex-rowon the child, or@min-[380px]:when you need a specific number rather than a scale step. No JavaScript, correct on the first paint, works inside a modal you have not built yet.The hook is the right answer for one thing only, which is when the decision is not really about width.
Reply
Report
@thea_mandel · 3mo ago
One gotcha: the container has to be an ancestor, not the element you are querying, and turning something into a container changes how it sizes. If your wrapper collapses to nothing the moment you add it, you asked for full containment when you wanted
inline-size.Reply
Report
@hemline_hana · 3mo ago
Name your containers from day one -
@container/cardand@lg/card:- otherwise the first time you nest a card inside another card the inner one starts answering to the wrong ancestor and the bug looks like magic.Reply
Report