[css-contain] Similar to window.matchMedia(), Container Queries should have a similar method

[clairebaire]

CSS Media Queries have a method on the Window interface (window.matchMedia()) giving a script the ability to listen for media query changes. I propose that CSS Container Queries has the same functionality. However, I think this introduces some complexity, and therefore I'd like to present two thoughts for consideration:

Proposal 1

A new method on the HTMLElement interface possibly called matchContainer() or something similar. Reason it wouldn't be on the Window is due to the nature of container queries - not being based upon viewport size, but size of the container. However, this should be influenced by the question still pending, which is what is the default behavior of a container query when there is no contain property on any parent element.

Proposal 2

A new Observer of sorts, similar to ResizeObserver or MutationObserver where it's a bit more clear that it is listening for any kind of container change, and that it relays the container as a member of a ContainerQueryList. This would make it not pollute the HTMLElement interface, and instead be a DOM method. This would solely be used to identify when a container query is activated, and which items are affected by that activation.

Admittedly, the second proposal seems very similar to what ResizeObserver does already, but I feel it misses the connection that CSS Contain Level 3 is attempting to solve. This could be something that might be added to ResizeObserver, but might also be its own API.

Thoughts?

[andruud]

but I feel it misses the connection that CSS Contain Level 3 is attempting to solve

Why isn't the existing ResizeObserver (as-is) good enough to listen for resize events on containers?

[css-meeting-bot]

The CSS Working Group just discussed Similar to window.matchMedia(), Container Queries should have a similar method, and agreed to the following:

• RESOLVED: Add a matchContainer method as proposed in issue. Keep issue open to decide if need new observer or if we can reuse the existing

The full IRC log of that discussion

<dael> Topic: Similar to window.matchMedia(), Container Queries should have a similar method
<dael> github: /~https://github.com//issues/6205
<dael> miriam: Idea is have something similar for container queries. Claire (sp?) has provided a few options. Would be great to resolve on one. Or something else
<dael> astearns: 3 options: new method. new observer. reuse resize observer
<dael> fantasai: Possible use cases for both approaches. Could start with defining matchContainer since that's easy
<dael> astearns: You're thinking we would need matchContainer and either new observer or reuse resize?
<dael> fantasai: Yeah
<dael> astearns: Anyone with opinions about adding matchContainer?
<dael> TabAtkins: This would allow style queries in the matchContainer since they're under container query umbrella?
<dael> fantasai: Yeah
<dael> TabAtkins: Nice. Good
<dael> astearns: Prop: Add a matchContainer method as proposed in issue. Keep issue open to decide if need new observer or if we can reuse the existing
<dael> astearns: Objections?
<dael> RESOLVED: Add a matchContainer method as proposed in issue. Keep issue open to decide if need new observer or if we can reuse the existing
<fremy> FWIW I will not join the second call, I am going to bed, I think most issues I was involved in have been discussed already, or I left a comment with my thoughts. Talk to you all next week!

[jogibear9988]

Is there anything new about this? We created a Designer with CSS parsing support (/~https://github.com/node-projects/web-component-designer) where we would need the "matchContainer" API to find the mathcing container queries

[seedee]

Wouldn't just checking a container element's offsetWidth when the window resizes be functionally the same as container query?

[jogibear9988]

Wouldn't just checking a container element's offsetWidth when the window resizes be functionally the same as container query?

no? container queries could not only check for a size....

[aradalvand]

I expected this to have already been implemented, such a shame.

[Loque-]

Just wanted to add that I ran into a use case where I wanted to be able to do;

window.matchContainer('(aspect-ratio < 16 / 9)')

Would have loved to be able to do this instead of writing some custom ResizeObserver which could potentially lead to performance issues if not managed mindful of re-paints for calculating/retrieving values.

[xamir82]

No movement on this yet? No offense but do we have to wait another 10 years for something as basic as this again?

[robrez]

Some experimenting with learning about container-query changes via JS

• MutationObserver
  • Not possible, CSS cannot cause mutations to be observed; Thought perhaps pseudo-elements might work.. they don't.
• IntersectionObserver
  • Viable perhaps by toggling display: none on a "dummy" element. Limitations: If the container is outside the viewport
  • Example: https://codepen.io/robrez/pen/jOROErL
• ResizeObserver
  • Viable by toggling any css property. I'm unsure if the CSS engine will always run prior to the resizeObserver callback
  • Example: https://codepen.io/robrez/pen/yLrLyKE
  • Note that many would just use the ResizeObserver w/o any interaction w/ an underlying container query css policy... but the point of this thread is to have something similar to mediaMatch. The things you can do in CSS might be tricky to otherwise detect in JS
  • Note also that Element.matches seems like a reasonable instictive "let me try this"... but it will not tolerate any container query

[jogibear9988]

Browser Bugs:

https://issues.chromium.org/issues/40887402
https://bugzilla.mozilla.org/show_bug.cgi?id=1897594
https://bugs.webkit.org/show_bug.cgi?id=274347

[jogibear9988]

Also stated here: https://www.w3.org/TR/css-contain-3/#the-csscontainerrule-interface

[rejhgadellaa]

I just ran into a case where I'd like to watch changes to a css variable using container style queries:

const match = document.body.matchContainer( 'style( --theme: dark )' );
match.addEventListener( () => { /* .... */ } );

[lukewarlow]

It would be good to get clarification on if this is intended to be in HTMLElement or Element? I would imagine Element so it works with SVG and MathML?

Edit: the spec note itself says Elements but this issue and some of the browser issues say HTMLElement

[jogibear9988]

For sure it needs to be Element. Every Node wich is styleable via CSS and respects ContainerQueries should have this method.

[waruyama]

Why does it have to be on the element? getComputedStyle(element) is a global function, and IMHO matchesContainer(element, containerQuery) could be, too.

[jogibear9988]

i think the other similar APIs like matchMedia and matches are on the coresponding object, so this also should be.

I think it the browser vendors should implement this in the near future. We have container queries but no API to check if a element matches...

[alienself]

I was also surprised that there wasn't such api but that being said it can be very easily polyfilled using an invisible iframe in case you need this feature today:

/~https://github.com/tomhodgins/element-match-media/

[teetotum]

I created a polyfill for Element.matchContainer()
It supports size queries and style queries and uses the CSS feature under the hood so it will only work in browsers that already support the @container queries CSS feature. All it really does is only adding the scripting API.