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.
