In case you missed it, container queries landed in all steady browsers this week! It’s a fairly thrilling time to be working with CSS, seeing this long-awaited characteristic lastly change into useable.
Una’s put up on internet.dev features a rundown of the best way to use container queries, in addition to some nifty demos. By coincidence, I’ve additionally been modifying a soon-to-be-published article by Stephanie on container queries, which additionally contains some slightly pretty demos. One thing I’ve observed about each units of demos is that they make use of the resize
CSS property to create a resizeable space throughout the doc, slightly than counting on the consumer having to resize their whole viewport to see the container queries in motion.
See the Pen
Untitled by internet.dev (@web-dot-dev)
on CodePen.
I used to be vaguely conscious of the resize
property, however I hadn’t actually considered any use case for it earlier than, so it sort of handed me by. Nevertheless it appears excellent for this! I’ll positively hold it in thoughts for future demos. You possibly can choose which course to use the resizing: horizontal
, vertical
or each
, in addition to logical properties inline
and block
, with none
because the default.
/* Makes the aspect horizontally resizeable */
div {
resize: horizontal;
}
The aspect should be a scroll container, which means that it should have its overflow
property worth set to scroll
or auto
to ensure that resize
to have any impact.
Use circumstances
Moreover these container question demos, I suppose one other situation the place it could be useful is when you’ve got a floating toolbar or some consumer controls, and also you need the consumer to have the ability to transfer these across the web page and place them nevertheless they need. One other potential use case may very well be an extended checklist of choices in a scrollable container: the consumer might resize the aspect vertically to see extra of the choices and scale back the quantity the necessity to scroll.
See the Pen
Untitled by Michelle Barker (@michellebarker)
on CodePen.
A sort of cool factor right here is that we will set a max-height
too, permitted the consumer to resize solely up to some extent if we so select.
resize
additionally respects flex and grid layouts. On this demo the consumer is permitted to resize the navigation column and the primary content material space will adapt, as we’re utilizing 1fr
for the grid column on the suitable, which causes it to fill the out there area.
See the Pen
Resize by Michelle Barker (@michellebarker)
on CodePen.
Limitations
One disadvantage is the resize management is simply positioned within the backside proper nook of the aspect, and it’s not potential to type it. It might be good to have this customiseable capability, and improve the realm of the resize management. Within the menu instance it might be higher if the consumer might seize any a part of the suitable hand edge, for instance.
In any case, resize
will characteristic rather more extremely on my radar any more.