I want to pin evaluation of a CSS custom property to the element it's defined on

[aarongustafson]

As an example, if I need to know the width of a container element to calculate the width of a deeply nested element:

.container {
  --container-width: 100%; 
}

.container__deeply-nested-element {
  // what I need is the actual container width to be able to correctly
  // calculate the desired width of the nested element...
  // but 100% is evaluated here to the element's parent :(
  width: calc(var(--container-width, 0) / 3); 
}

[aarongustafson]

@phloe Could you expand on this a bit more? I think I know where you’re coming from, but I want to make sure.

[phloe]

I want to be able to pin the evaluation of relative units in custom properties to the actual element I defined said custom property on. So every time it is used further down the node tree it will still look at the original element for evaluation (meaning it's stil live/dynamic - not just a static number).

Does that help?

Obviously this would require some new syntax - I haven't given that any thought :D

[captainbrosset]

This seems like a job for Container Queries: https://developer.mozilla.org/en-US/blog/getting-started-with-css-container-queries/
@phloe container queries appeared in browsers in 2022, so after you posted this Want. Do you think this addresses your need?

[phloe]

Yes! That would cover the usecase 🙂

[aarongustafson]

This is addressed by the cqi unit, which is part of the CSS Containment Module Level 3:

.container {
  container-type: inline-size;
}
.container__deeply-nested-element {
  width: calc(100cqi / 3);
}

You can view a demo on Codepen.

[phloe]

Perfect 👌