[csswg-drafts] [css-contain-3] Container Variables (#12604)

kizu has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-contain-3] Container Variables ==
Proposal: Add a new `container-var()` function for retrieving the values from the closest named container.

```
container-var() = container-var(<custom-ident>, <custom-property-name>, <declaration-value>?)`
```

- `<custom-ident>` — the name of a container to get the variable value from.
- `<custom-property-name>` — the name of the propertly.
- `<declaration-value>?` — the variable's fallback.

Basically, the same as `var()` but with an additional first parameter for the container's name.

This function will get the closest container with the specified name and return the value of the given custom property from it. That's it.

## Related links

- [“We Might Need Something Between Root and Relative CSS Units for ‘Base Elements’”](https://css-tricks.com/we-might-need-something-between-root-and-relative-css-units-for-base-elements/) article by @zellwk
 - I was already contemplating having something like that, but this article describes a very similar concept, so this issue can be considered as inspired by this article.
 - This article presents good use cases for this.
- https://github.com/w3c/csswg-drafts/issues/2864 by @LeaVerou
 - An issue about an `inherit()` function that will work in some way similarly, but only getting the value from the _parent_. Still very useful, but for different use cases.
- https://github.com/w3c/csswg-drafts/issues/7858 by @una
 - A related concept, where we will be able to get values of _container query length units_ from named containers.
- https://github.com/w3c/csswg-drafts/issues/8088 by @mirisuzanne
 - Also a related concept, where alongside style queries, we have an ability to probe the values of custom properties on named containers via queries.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12604 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 13 August 2025 19:42:56 UTC