Skip to main
Talk
Wireframe of card elements
in different sized containers --
some laid out vertically in small spaces,
others horizontal when there's room.

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.

Events

  1. – San Francisco, CA (hybrid)

    Jamstack Conf

    Use discount code FRIENDOFMIRIAM20 to get 20% off