Intrinsic CSS with Container Queries & Units

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 over contextual adaptation. 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 roadmap for querying container styles, states, and more. 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.