Element's matchContainer

[DevSDK]

Specification

Spec PR

Description

Introduce matchContainer() on Element instances for the container query, that provides a similar mechanism to window.matchMedia().

Documentation

The explainer and documentation are not ready yet. That would probably be enough for the proposed issue: w3c/csswg-drafts#6205

Browser support

Starting to prototype in Chromium. Feature entry: https://chromestatus.com/feature/5150754462629888

[ddbeck]

Thanks for filing this, @DevSDK. I've tagged this as an early feature, since it does not appear to be shipping anywhere yet. The following is mostly notes for myself but I'd welcome an accuracy check, if you're inclined.

The ID for this feature is likely to be matchcontainer and the name to be matchMedia(), similar to matchmedia (source, dist).

A description in our style is probably something like:

The matchContainer() method of an Element object returns a ContainerQueryList object that represents a CSS container query. You can use it to check if a query applies to an element or listen to the object's change events.

I've never actually used matchMedia() so this could probably use some work. Feedback welcome.

Based on the IDL in the spec PR, browser compat keys will likely be:

• api.Element.matchContainer
• api.ContainerQueryList
• api.ContainerQueryList.container
• api.ContainerQueryList.matches
• api.ContainerQueryList.change_event