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:
.sidebar {
container: ctr-sidebar / inline-size;
}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:
@container ctr-sidebar (max-width: 300px) {
.foo {
// context-specific styles go here
}
}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.