Intrinsic CSS with Container Queries & Units
Container queries & units have a lot to offer as we enter a more content-out era of Intrinsic Web Design, but they also come with some limitations of their own. Join Miriam to learn about how the feature works, how to start using it in production, and what to look forward to as Container Queries continue to evolve.
CSS has always been contextual,
with a Cascade & Normal Flow
that allow content & styles to adapt across browsers,
writing modes, device interfaces,
and user-defined preferences.
Media Queries
(part of the initial language proposal!)
kicked off a decade of Responsive Web Design –
with more explicit control for
adapting designs to different context.
But with @media,
there’s only one global context shared by every element on the page.
Container Queries are here to change that. We can define ‘containers’ that expose more localized context – and then query those containers in a variety of ways. Beyond just the highly anticipated size queries, we also get new container-relative units, and a road-map for querying container styles, states, and more.