Container Queries Lab: Ahmad Shadeed's Early Collection

Ahmad Shadeed jumped on container queries early and maintains a growing set of demonstrations built from everyday design patterns. The examples show how the feature can apply to real-world components rather than abstract scenarios.

His latest write-up on container queries also clarifies the mechanics now that Chrome 105 shipped the feature this month, with Safari 16 expected to follow soon. A few takeaways stand out:

  • Define containers with the container-type property. Earlier demos and proposals had used contain in its place.
  • Container queries closely mirror the media queries we already use to target viewport size. So rather than @media (min-width: 600px) {}, we get @container (min-width: 600px) {}. Converting many existing media queries should be fairly straightforward, aside from determining the new breakpoint values.
  • You can name containers to keep them distinct in the codebase — e.g., container-name: blockquote.

Nice work, Ahmad — and thanks for sharing.