Studios • Front-End & UX Instructor with GDI • Organizer of Front-End Meetup • Front-End and Back-End Developer • Product and Service Designer • Business, Dev, and Design Consultant Tim Knight @timknight
we need them? Can’t Flexbox and CSS Grid do that? • What’s browser support look like? • Start using them now. With sample concepts to get you thinking.
to do, and the tools CSS gives us to meet those needs. We’re making design decisions at smaller and smaller levels, but our code asks us to bind those decisions to a larger, often-irrelevant abstraction of a “page.” — ETHAN MARCOTTE From “On Container Queries”
to managing UI as a series of components and design systems, but media queries only let us define UI based the viewport. A container query let’s you define UI based on an element’s attributes (like width). This gives you flexibility in creating truly reusable and repeatable components.
like column management and reflowing content. However, there are often other considerations based on the component’s placement you’ll want to make. Contrast, hierarchy, or visual weight just to name a few.
on creating a technical spec. The previous examples comes from this polyfill. • *eq.js - a lot more lightweight than EQCSS. Unlikely to be similar to a final implementation or technical spec. • Elementary - from the folks at The Filament Group. • react-element-query - because I knew you’d ask. • vue-element-queries - because it’s not always about React ;). • CSS Element Queries - another one that’s often recommended. • elementQuery - hasn’t been updated in 4 years.
Uses a data attribute on the component to define sizes that can be selected using an attribute selector • Has a Sass mixin to make writing self- contained components even easier
Bit More on Container Queries, by Ethan Marcotte • Questioning Container Queries, by Paul Robert Lloyd • Container Queries: Once More Unto the Breach, by Mat Marquis • Container Queries, by Jeremy Keith