An Interactive Guide to CSS Container Queries
Another terrific interactive tutorial from Ahmad, this time on container queries.
Emmet Re:view — fast and easy way to test responsive design in multiple viewports
It’s no substitute for testing with real devices, but the “device wall” view in this Chrome plug-in is a nifty way of getting an overview of a site’s responsiveness at a glance.
Related links
Retrofitting fluid typography | Clagnut by Richard Rutter
Here’s a taste of what Rich will be delivering at Patterns Day on Thursday—can’t wait!
Getting started with CSS container queries | MDN Blog
Michelle has written a detailed practical guide to container queries here.
The Guide To Responsive Design In 2023 and Beyond - Ahmad Shadeed
Instead of thinking about responsive design in terms of media queries, I like to think of responsive design in these categories.
- Responsive to the content
- Responsive to the viewport
- Responsive to the container
- Responsive to the user preferences
Container Queries and Typography
I feel like we need a name for this era, when CSS started getting real good.
I think this is what I’ve been calling declarative design.
Related posts
Making the Patterns Day website
The joy of getting hands-on with HTML and CSS.
Partnering with Google on web.dev
How Clearleft worked with the Chrome team to create a fifteen-part course on modern responsive design.
Media queries with display-mode
I never would’ve known about the `display-mode` media feature if I hadn’t been writing about it.
Even more writing on web.dev
Five more articles on modern responsive design to close out the course.
More writing on web.dev
Another five articles on modern responsive web design.