• Can We Create a “Resize Hack” With Container Queries?
  • By Jhey Tompkins
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Hoarfroster
  • Reviewer:

If you’ve been paying attention to new developments in CSS, you’ve probably heard that Container queries are coming. We’ll look at the basics here, but if you want to take another look, check out Una’s Next Gen CSS CSS: @Container (or my Next generation CSS: @Container, which I translated and published on the Nuggets community). After we’ve learned the basics ourselves, we’ll use them to build something really interesting: a new take on the classic CSS meme, “Peter Griffin Fussing with Window Blinds.” 😉

So, what is a container query? Is… Is… Just as we have media queries for things like viewport size, container queries allow us to query the size of containers. Based on this, we can apply different styles to the children of the container.

What does it look like? Well, the exact criteria are being worked out. But for now, it looks like this:

.container {
  contain: layout size;
  /* Or... * /
  contain: layout inline-size;
}

@container (min-width: 768px) {
  .child { background: hotpink; }}Copy the code

The Layout keyword turns on the layout-containment function for elements. Inline-size allows the user to get more specific about the container. This currently means that we can only query the width of the container, whereas with size we can query the height of the container.

Similarly, what we do now may still change in the future. At the time of this writing, the only way to use container queries (without polyfill) is hidden behind Flags in Chrome Canary (Chrome :// Flags). I definitely recommend a quick read of the draft at CSSWg.org.

The easiest way to start experimenting with Container queries is to make a few quick demos with resizable Container elements.

CodePen jh3y/poeyxba

CodePen jh3y/zYZKEyM

Try changing the contain value in Chrome Canary and see how the demo responds. Contain: Layout Size these demos use an unrestricted folder: Layout size. The shirt size is adjusted in the first demo when the container’s height and width both meet certain thresholds. The second demo shows how each axis works independently, such as the beard changing color when adjusting the horizontal axis value.

@container (min-width: 400px) and (min-height: 400px) {
  .t-shirt__container {
    --size: "L";
    --scale: 2; }}Copy the code

That’s all we need to know about container queries for now, it’s really just some new CSS styles…

The only problem: Most of the container query demonstrations I’ve seen so far use a very standard “card” example to demonstrate this concept. Don’t get me wrong, because cards are a good use case for container queries, the card component is actually a child of container queries. It is a common question to consider the generic card design and how it is affected when used in different layouts. Many of us were involved in projects where we ended up making variations on various cards, all of which catered to different layouts using them.

But cards don’t spark our imagination with container queries, and I’d like to see them motivated to do interesting things at even greater limits. I tried that T-shirt size demo with them for a while, and I’ll wait for better browser support until I start digging deeper (I’m currently a Brave user). But then Bramus shared a container query called Polyfill!

This got me thinking about how to “hack” container queries.

⚠️ Reveal plot warning: My Hack doesn’t work. For a short time it worked, or at least I think it worked. However, this is actually a blessing because it leads to more conversations about container queries.

What do I think? I want to create something like a “Checkbox Hack”, but for container queries.

<div class="container">
  <div class="container__resizer"></div>
  <div class="container__fixed-content"></div>
</div>
Copy the code

The idea is that we can have a container with a resizable element inside, and then another element is fixed outside the container, and resizing the container might trigger the container to query and restyle the fixed element.

.container {
  contain: layout size;
}

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

.container__fixed-content {
  position: fixed;
  left: 200%;
  top: 0;
  background: red;
}

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

Try resizing the red box in this demo, it will change the color of the purple box.

CodePen jh3y/mdWylBW

Can we do classic CSS memes with container queries?

I was really excited to see that one work. Now we finally have the chance to create a CSS version of Peter Griffin’s MEME with CSS and debunk it!

You’ve probably already seen this meme. This is a blow to Cascade and how difficult it is to manage it. I created this demo using [email protected]… Of course, I made some minor changes myself. 😅

CodePen jh3y/LYxKjKX

Move the rope handle to resize the element to affect the size of the container. Different container breakpoints update the CSS variable –open, from 0 to 1, where 1 equals the “on” state and 0 equals the “off” 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; }}Copy the code

But… . As I mentioned, this kind of Hack is impossible.

What’s nice is that it starts a conversation about how container queries work. It also highlighted an error in the container’s query for Polyfill, which has since been fixed. I’d love to see this Hack work, though.

Miriam Suzanne has been building some great stuff around container queries. The ability to query containers has changed a lot, and that’s the risk of living on the cutting edge. Her latest article sums up the current state of affairs.

Although my original demo /Hack didn’t work, we can still create this shutter using the “resize” Hack. Also, if we use contain: layout size, we can query height. Note: Interestingly, there is no way to use folders to query the height of a container based on the size of its children.

Anyway, take a look at this demo:

CodePen jh3y/jOBEKZO

The arrows rotate with the size of the container. The trick here is to use container queries to update scoped CSS custom properties.

.container {
  contain: layout size;
}

.arrow {
  transform: rotate(var(--rotate, 0deg));
}

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

So we have a container query technique here. The downside of our inability to use the first Hack concept is that we can’t fully implement 3D. Overflow Hidden will solve this problem it. We also needed to pass the rope underneath the window, which meant that the windowsill prevented us from achieving the effect.

But we can get pretty close.

CodePen jh3y/qBrEMEe

The above demonstration uses a preprocessor to generate container query steps. At each step, the custom properties within the scope are updated. This shows Peter and opens the blinds.

The trick here is to zoom in on the container to make the resizing handle bigger, and then I shrink the content to fit what it looks like.

This interesting demonstration of “debunking memes” isn’t 100% yet, but we’re getting closer. Container queries are an exciting prospect. It will be interesting to see how they change as browser support evolves. It’s also exciting to see how people push the limits or use them differently.

Who knows? One day, the “Resize Hack” may be right up there with the infamous “Checkbox Hack.”

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.