Container queries without the rewrite: a seven-day migration
Swapping every media query in one afternoon is why teams abandon container queries. Here is the slower path that gets you there with your sprint intact.
Container queries have been safe to ship for a while now. What is not safe is treating the migration as a find-and-replace across a design system that four teams depend on.
Why the big-bang version fails
A media query asks about the viewport, which is global. A container query asks about an ancestor, which is local. Swapping one for the other changes which element owns the decision, and every component that was quietly relying on the viewport agreeing with its parent starts disagreeing.
Do not start with the layout components
The seven days
- Day one: pick one component.Something that already appears in a wide slot and a narrow slot. A post card is ideal.
- Days two and three: name the containers.Add container-type to the wrappers, and nothing else. Ship it. Nothing should change.
- Days four and five: move that component's breakpoints.One component, both slots, side by side in a review.
- Days six and seven: write down what surprised you.Then repeat for the next component with the notes in hand.
.card-slot {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 26rem) {
.card { grid-template-columns: 8rem 1fr; }
}The important line is the first one. Naming containers early, before any query depends on them, is the change you can ship on a Tuesday and forget about.
Key takeaways
- Add container-type before you add a single query, and ship that on its own.
- Start with a component that already lives in two widths.
- Keep the media queries until the container version has been in production for a week.
Comments
1The “name containers first, query later” split is the bit I had not thought of. That alone makes it reviewable.