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

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

== [css-contain] Similar to window.matchMedia(), Container Queries should have a similar method ==
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?

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


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

Received on Sunday, 11 April 2021 01:40:35 UTC