[css-contain-3] Container Variables

[kizu]

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.

<div style="container-name: --foo; --bar: 1;">
    <div style="--bar: 2;">
        <div style="--baz: container-var(--foo, --bar)"> // 1

Related links

• CSS Containment Module Level 3
• CSS Custom Properties for Cascading Variables Module Level 1
• “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.
• [css-values-5] inherit() function: like var() for parent value, for any property #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.
• [css-contain-3] Reference named containers for cq units #7858 by @una
  • A related concept, where we will be able to get values of container query length units from named containers.
• [css-contain-3] Can we allow custom properties in dimensional container queries? #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.

[EricSL]

I wrote an alternative for a more general syntax not specific to containers. #12990