[css-extensions] Custom container queries

[romainmenke]

This was requested in csstools/postcss-plugins#671

It would be in parallel with @custom-media.

@custom-container <extension-name> <container-condition>

@custom-container --foo card (inline-size > 30em) and style(--responsive: true)

@container (--foo) {
  /* styles */
}

I personally do think the benefits of having this are smaller than they are with @custom-media.
The same media conditions are often re-used throughout an entire code base.
Assigning these to a named variable has obvious code quality benefits.

Container queries however are much more local.
They are more often tied to the code contained therein.
I can be wrong about this, this is purely my impression.

Maybe @mirisuzanne proposal to allow var() inside <container-condition> is all authors need?

[mirisuzanne]

Yeah, I have a similar sense that this:

• Is a nice parallel that could be useful sometimes
• It's not as useful as the media query version (which is still not implemented)
• Allowing var() in conditions might get us most of the way

[jimmyfrasche]

The majority of my desire for custom media queries was so I could do matchMedia('(--foo)') in a js component and not have to worry about the js saying 546px but the css saying 547px or having to add more build step for this one thing.

If there's ever a js api for container queries that same want would arise.

Although if the js api allowed style queries I could just listen for a custom property and set it to different sentinel values at the various component breakpoints.

[gabrielgrant]

Thanks for submitting this, @romainmenke and to other for taking a look at it!

@mirisuzanne I may be misunderstanding, but I was under the impression that var() couldn't be used within @container queries for the same reasons as it can't be used within @media queries: that these at-rules don't live within the context of an element, while vars must be (based on this explanation from StackOverflow and this blog ). Is there a specific proposal to extend the scope of vars to exist outside the context of elements?

It was seeming for a while that the custom query issue was perhaps going to be solved by allowing declaration of custom env() values, but AFAICT that is bogged down (or "pretty much dead" according to @romainmenke 🙃 ). From what I've read it seemed the core problem is that env values are typed objects, not just primitives or simple string replacements, and so there's no clear way to declare them directly in CSS?

(if that is the main blocking issue, personally I'd be fairly satisfied if I could only declare them through a JS API, or possibly restrict in-CSS declarations to be simple, single values, but I guess others found those options unsatisfying?)

[mirisuzanne]

@gabrielgrant - Unlike media queries, container queries are resolved against individual elements (the containers) – and can be resolved in that context. I cover that in more detail in the linked proposal.

[retroriff]

Container queries have landed in stable browsers and they are a huge milestone for web development. Unfortunately they are not supported yet when scoped:

<style lang="postcss" scoped>
.container {
  container-type: inline-size;
}

@container (min-width: rem(700)) {
  .wrapper {
    flex-direction: row;
  }
}
</style>

This is what we get:

.wrapper[data-v-ec3ae8ce] {
    display: flex;
    flex-direction: column;
}
@container (min-width: 43.75rem)
  .wrapper {
      flex-direction: row;
      gap: 1.875rem;
  }
}

This makes that the container query is not rendered because the class specificity is lower.

[romainmenke]

@retroriff That seems like an issue in the framework or tool you are using.
Not something that the CSSWG can resolve :)

[retroriff]

OK, I am using Nuxt. Thanks