First play with CSS Container Queries
In responsive design we generally want a single component to get different styles in different contexts. Up until recently the prevailing method of context-awareness was to use a CSS media query to query the viewport size. This wasn’t ideal. For example you might want an component to be styled differently when in a narrow context such as a sidebar (regardless of the device size), and viewport-based queries don’t help with that.
But everything has changed. We can now use CSS to query the size of any given container and this feature is supported in all major browsers.
There’s a bit of new syntax to learn, so I recently had my first play with container queries on codepen.
My pen is pretty trivial, but the goal was specifically to do the most minimal test that lets me test-drive the key syntax. It turns out that it’s quite straightforward.
Define an element as a container:
Change the styles of another element (
.foo) when it’s inside that container and the container’s inline-size (the logical property name for
width) matches a given query:
Note that you could also omit the
ctr-sidebar context in the above query, if you wanted the change to apply in all defined containers.
Container Queries in Web Components | Max Böck
Max’s demo is really clever and features lots of interesting web component related techniques.
I came up with this demo of a book store. Each of the books is draggable and can be moved to one of three sections, with varying available space. Depending on where it is placed, different styles will be applied to the book.
Observer APIs in a nutshell
I’ve played with the various HTML5 Observer APIs (
MutationObserver) a little over the last few years—for example using
ResizeObserver in a container query solution for responsive grids. But in all honesty their roles, abilities and differences haven’t yet fully stuck in my brain. So I’ve put together a brief explainer for future reference.
Minimalist Container Queries
Scott Jehl’s experimental take on a container/element query aimed at letting us set responsive styles for our elements based on their immediate context rather than that of the viewport.
I made a quick and minimal take on approximating Container/Element Queries using a web component and basic CSS selectors.
See all tags.