Can We Create a “Resize Hack” With Container Queries?

If you happen to observe new developments in CSS, you’ve probably heard of the upcoming arrival of container queries. We’re going to take a look at the fundamentals right here, however should you’d like one other look, try Una’s “Subsequent Gen CSS: @container” article. After we’ve got a poke on the fundamentals ourselves, we’re going to construct one thing tremendous enjoyable with them: a contemporary tackle the basic CSS meme that includes Peter Griffin fussing with window blinds. 😉

So, what is a container question? It’s… precisely that. Very similar to we’ve got media queries for querying issues such because the viewport dimension, a container question permits us to question the scale of a container. Based mostly on that, we are able to then apply completely different types to the youngsters of mentioned container.

What does it appear like? Properly, the precise requirements are being labored out. At present, although, it’s one thing like this:

.container {
comprise: format dimension;
/* Or… */
comprise: format inline-size;
}

@container (min-width: 768px) {
.little one { background: hotpink; }
}

The format key phrase activates layout-containment for a component. inline-size permits customers to be extra particular about containment. This at the moment means we are able to solely question the container’s width. With dimension, we’re capable of question the container’s peak.

Once more, we issues might nonetheless change. On the time of writing, the one means to make use of container queries (with no polyfill) is behind a flag in Chrome Canary (chrome://flags). I might undoubtedly suggest having a fast learn by means of the drafts over on csswg.org.

The best solution to begin taking part in can be to whip up a pair fast demos that sport a resizable container factor.

Attempt altering the comprise values (in Chrome Canary) and see how the demos reply. These demo makes use of comprise: format dimension which doesn’t prohibit the axis. When each the peak and width of the containers meet sure thresholds, the shirt sizing adjusts within the first demo. The second demo exhibits how the axes can work individually as an alternative, the place the beard modifications shade, however solely when adjusting the horizontal axis.

@container (min-width: 400px) and (min-height: 400px) {
.t-shirt__container {
–size: “L”;
–scale: 2;
}
}

That’s what it’s good to know to about container queries for now. It’s actually only a few new strains of CSS.

The one factor is: most demos for container queries I’ve seen to this point use a reasonably normal “card” instance to reveal the idea. Don’t get me unsuitable, as a result of playing cards are an ideal use case for container queries. A card element is virtually the poster little one of container queries. Take into account a generic card design and the way it might get affected when utilized in completely different layouts. This can be a frequent downside. Many people have labored on initiatives the place we wind up making numerous card variations, all catering to the completely different layouts that use them.

However playing cards don‘t encourage a lot to begin taking part in with container queries. I need to see them pushed to higher limits to do attention-grabbing issues. I‘ve performed with them a bit of in that t-shirt sizing demo. And I used to be going to attend till there was higher browser help till I began digging in additional (I’m a Courageous consumer at the moment). However then Bramus shared there was a container question polyfill!

Shout out to @bramus for sharing the Container Queries polyfill by @jon_neal the opposite day 👏

This prompted me to get “hacking”! 😅https://t.co/Em5TLyslip

— Jhey 🐻🛠 (Exploring Alternatives ✨) (@jh3yy) April 30, 2021

And this bought me fascinated about methods to “hack” container queries.

⚠️ Spoiler alert: My hack didn’t work. It did momentarily, or no less than I assumed it did. However, this was really a blessing as a result of it prompted extra dialog round container queries.

What was my thought? I wished to create one thing kind of just like the “Checkbox Hack” however for container queries.

<div class=”container”>
<div class=”container__resizer”></div>
<div class=”container__fixed-content”></div>
</div>

The concept is that you can have a container with a resizable factor inside it, after which one other factor that will get mounted positioning exterior of the container. Resizing containers might set off container queries and restyle the mounted parts.

.container {
comprise: format dimension;
}

.container__resize {
resize: vertical;
overflow: hidden;
width: 200px;
min-height: 100px;
max-height: 500px;
}

.container__fixed-content {
place: mounted;
left: 200%;
high: 0;
background: crimson;
}

@container(min-height: 300px) {
.container__fixed-content {
background: blue;
}
}

Attempt resizing the crimson field on this demo. It’s going to change the colour of the purple field.

Can we debunk a basic CSS meme with container queries?

Seeing this work excited me a bunch. Lastly, a possibility to create a model of the Peter Griffin CSS meme with CSS and debunk it!

You’ve in all probability seen the meme. It’s a knock on the Cascade and the way troublesome it’s to handle it. I created the demo utilizing cqfill@0.5.0… with my very own little touches, after all. 😅

Transferring the wire deal with, resizes a component which in flip impacts the container dimension. Totally different container breakpoints would replace a CSS variable, –open, from 0 to 1, the place 1 is the same as an “open” and 0 is the same as a “closed” state.

@container (min-height: 54px) {
.blinds__blinds {
–open: 0.1;
}
}
@media –css-container and (min-height: 54px) {
.blinds__blinds {
–open: 0.1;
}
}
@container (min-height: 58px) {
.blinds__blinds {
–open: 0.2;
}
}
@media –css-container and (min-height: 58px) {
.blinds__blinds {
–open: 0.2;
}
}
@container (min-height: 62px) {
.blinds__blinds {
–open: 0.3;
}
}
@media –css-container and (min-height: 62px) {
.blinds__blinds {
–open: 0.3;
}
}

However…. as I discussed, this hack isn’t potential.

Hmmm, containing inline-size shouldn’t permit block (peak) queries. You’re probably hacking a bug within the js polyfill.

I really like the thought, however I don’t assume this method will work utilizing Container Queries in CSS.

— Miriam (However Horrible) (@TerribleMia) Could 1, 2021

What’s nice right here is that it prompted dialog round how container queries work. It additionally highlighted a bug with the container question polyfill which is now mounted. I might like to see this “hack” work although.

Miriam Suzanne has been creating some implausible content material round container queries. The capabilities have been altering a bunch. That’s the danger of dwelling on the bleeding edge. Certainly one of her newest articles sums up the present standing.

I’ll get this mounted quickly. Following the spec is CRITICAL.

BTW, I’m kinda frightened about what number of movies & demos already depend on the “export” habits. The yet-published code on principal drops this requirement, so `import ‘/path/to/cqfill.js’` will likely be all that’s wanted.

— Jonathan Neal (@jon_neal) Could 2, 2021

Though my unique demo/hack didn’t work, we are able to nonetheless kinda use a “resize” hack to create these blinds. Once more, we are able to question peak if we use comprise: format dimension. Facet be aware: it’s attention-grabbing how we’re at the moment unable to make use of comprise to question a container’s peak primarily based on resizing its little one parts.

Anyway. Take into account this demo:

The arrow rotates because the container is resized. The trick right here is to make use of a container question to replace a scoped CSS customized property.

.container {
comprise: format dimension;
}

.arrow {
rework: rotate(var(–rotate, 0deg));
}

@container(min-height: 200px) {
.arrow {
–rotate: 90deg;
}
}

We‘ve kinda bought a container question trick right here then. The downside with not having the ability to use the primary hack idea is that we are able to’t go fully 3D. Overflow hidden will cease that. We additionally want the wire to go beneath the window which suggests the windowsill would get in the best way.

However, we are able to nearly get there.

This demo makes use of a preprocessor to generate the container question steps. At every step, a scoped customized property will get up to date. This reveals Peter and opens the blinds.

The trick right here is to scale up the container to make the resize deal with greater. Then I scale down the content material to suit again the place it’s meant to.

This enjoyable demo “debunking the meme” isn’t 100% there but, however, we’re getting nearer. Container queries are an thrilling prospect. And it’ll be attention-grabbing to see how they modify as browser help evolves. It’ll even be thrilling to see how individuals push the bounds with them or use them in numerous methods.

Who know? The “Resize Hack” may slot in properly alongside the notorious “Checkbox Hack” at some point.

The publish Can We Create a “Resize Hack” With Container Queries? appeared first on CSS-Tips.

You possibly can help CSS-Tips by being an MVP Supporter.