In case you missed it, container queries landed in all stable browsers this week! It’s a pretty exciting time to be working with CSS, seeing this long-awaited feature finally become useable.
Una’s post on web.dev includes a rundown of how to use container queries, as well as some nifty demos. By coincidence, I’ve also been editing a soon-to-be-published article by Stephanie on container queries, which also includes some rather lovely demos. Something I’ve noticed about both sets of demos is that they make use of the
resize CSS property to create a resizeable area within the document, rather than relying on the user having to resize their entire viewport to see the container queries in action.
See the Pen Untitled by web.dev (@web-dot-dev) on CodePen.
I was vaguely aware of the
resize property, but I hadn’t really thought about any use case for it before, so it kind of passed me by. But it seems perfect for this! I’ll definitely keep it in mind for future demos. You can select which direction to apply the resizing:
both, as well as logical properties
none as the default.
/* Makes the element horizontally resizeable */
The element must be a scroll container, meaning that it must have its
overflow property value set to
auto in order for
resize to have any effect.
Besides these container query demos, I guess another scenario where it might be handy is if you have a floating toolbar or some user controls, and you want the user to be able to move these around the page and position them however they want. Another possible use case could be a long list of options in a scrollable container: the user could resize the element vertically to see more of the options and reduce the amount the need to scroll.
See the Pen Untitled by Michelle Barker (@michellebarker) on CodePen.
A kind of cool thing here is that we can set a
max-height too, permitted the user to resize only up to a point if we so choose.
resize also respects flex and grid layouts. In this demo the user is permitted to resize the navigation column and the main content area will adapt, as we’re using
1fr for the grid column on the right, which causes it to fill the available space.
See the Pen Resize by Michelle Barker (@michellebarker) on CodePen.
One drawback is the resize control is only positioned in the bottom right corner of the element, and it’s not possible to style it. It would be nice to have this customiseable ability, and increase the area of the resize control. In the menu example it would be better if the user could grab any part of the right hand edge, for example.
In any case,
resize will feature much more highly on my radar from now on.
Webmentions for this pageAbout webmentions
@michelle Another drawback might be that it doesn't work on mobile...?- Bernard Nijenhuis
@michelle I just dug this up recently too! I used it on a widget that lets a user preview an HTML module at different sizes 👍- Tim Murtaugh
@bnijenhuis True, on iOS at any rate- Michelle Barker
@michelle I usually add resize: vertical to all textareas, since by default the user can stretch it outside the container.- Jason Nickel
@andy I must say, I really enjoy your “I really enjoyed reading”
It’s like a mini curated RSS feed 👍🏻- Toby
@tosbourn there’s an RSS feed too https://feedbin.com/starred/91894d3eb1e30664631b3d475c213f5e.xml- Andy Bell
@andy I’m not a fan of this automated posting of your likes. Your roots are interesting, but I don’t want to see all the likes in my timeline…- Wenzel — ⌞w⌝
@bramus @michelle @bnijenhuis You could try sneaking it into Interop 2023. Maybe nobody will notice.- Šime Vidas
@michelle nice one! I filed a very naive issue for the CSSWG, right after I joined: https://github.com/w3c/csswg-drafts/issues/7208[css-ui][proposal] Enhance resize capabilities and shadow DOM styling · Issue #7208 · w3c/csswg-drafts - Yehonatan Daniv
maybe someone would care to pick it up and start an explainer doc?