Using Container Query Units Relative to an Outer Container 관련

CSS > Article(s)

---

Article(s)

---

Using Container Query Units Relative to an Outer Container

Container units (e.g. cqi) are only able to reference the closest container. But if you register a custom property and set that higher up, you can get your hands on other containers units.

Recently, Matt Wilcoxposted on Mastodon:

The fact you can’t specifywhichcontainer for container query units is a ballache. The moment you have nested containers you’re [screwed]; because if you want the calculated gap from the row’s container; but you’re inside a nested container… tough. Your units are wrong. And you can’t just say “no; not relative tothiscontainer; relative to the named outer container!”

First off, if you’re not familiar with container queries and container query units, you can check out one of the many resources on the topic, for example thisinteractive guideby Ahmad Shadeed, which I believe is the most recent out of all the detailed ones I’ve seen. As always, the date of the resources used is important for web stuff, especially since these units in particular have changed their name sincethey were first proposed (w3c/csswg-drafts)and we got an early draft of the spec.

Now, the problem at hand: let’s say we have an.inner-containerinside an.outer-container– they are both made to be containers:

[class*='container'] { container-type: size }

We want any.inner-childof the.inner-containerto be able to use length values set in container query units relative to the.outer-container(more precisely, to itscontent-boxdimensions). The problem is, if we do something like this (a20cqwlight blue strip at the start of the gradient going towards 3 o’clock):

.inner-child {
  background: linear-gradient(90deg, #0a9396 20cqw, #0000)
}

… then the20cqwvalue is20%(a fifth) of thecontent-boxwidth of the.inner-container. This can be seen below, where we have purple guidelines20%of the width apart.

Screenshot illustrating how a background sized to cqw on the child of the inner container is a fifth of the inner container's width.

what 20cqw represents

But what we want is for that20cqwvalue to be20%of thecontent-boxwidth of the.outer-container.

Strictly for the queries themselves, we could do something like this:

.outer-container { container: outer/ size }
.inner-container { container: inner/ size }

@container outer (min-width: 500px) {
  .inner-child { background: darkorange }
}

This allows us to set certain styles on the.inner-childelements based on where thewidthof the.outer-container(which isn’t thenearestcontainer for.inner-child) is situated relative to the500pxthreshold.

But we cannot do something like this to specify which container should be the one that the query units used on.inner-childare relative to:

.inner-child {
  /* can't do this */
  background: linear-gradient(90deg, #0a9396 outer 20cqw, #0000)
}

Nor can we do this:

.inner-child {
  /* can't do this either */
  --s: outer 20cqw;
  background: linear-gradient(90deg, #0a9396 var(--s), #0000)
}

However, wearegetting closer!

What if we move the--svariable uspstream? After all, a20cqwlength value set on the.inner-containeris20%of thecontent-boxwidth of its nearest container, which is the.outer-container. This would mean our code becomes:

[class*='container'] { container-type: size }

.inner-container {
  --s: 20cqw;
  background: 
    repeating-linear-gradient(45deg, #bb3e03 0 5px, #0000 0 1em) 
      0/ var(--s) no-repeat
}

.inner-child {
  background: 
    linear-gradient(90deg, #0a9396cc var(--s), #0000)
}

We also give the.inner-containera similarbackgroundrestricted to20cqwfrom the left along thexaxis and make the.inner-childsemi-transparent, just to check if the--svalues overlap (which is what we want,--sbeing20%or a fifth of the.outer-containerwidth). However,this fails (thebabydino), as it can be seen below:

Screenshot. Both the inner container and its child have a background sized to 20cqw. However, the container query units are relative to the outer container only for the inner container, the container query units used on its child being still relative to the inner container (one fifth of its content-box width).

For the.inner-containerthe20cqwof the--sis taken to be20%of thecontent-boxwidth of its nearest container,.outer-container(dashed dark blue boundary). However, for the.inner-child, the20cqwof the--saren’t taken to mean the same value. Instead, they are taken to mean20%of the.content-boxwidth of the.inner-container(dotted dark red boundary).

Boo!

But what happens if we also register--s?

@property --s {
  syntax: '<length>';
  initial-value: 0px;
  inherits: true
}

Bingo,this works (thebabydino)!

See the Pen Container query unit values relative to outer container by thebabydino on CodePen.

Screenshot. Both the inner container and its child have a background sized to 20cqw, the container query units being relative to the outer container.

I hope you’ve enjoyed this little trick.

Where would you use this?

Using Container Query Units Relative to an Outer Container

---

Container units (e.g. cqi) are only able to reference the closest container. But if you register a custom property and set that higher up, you can get your hands on other containers units.