[css-contain] Similar to window.matchMedia(), Container Queries should have a similar method · Issue #6205 · w3c/csswg-drafts (original) (raw)

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?