Intent to prototype and ship: Size container queries

[Emilio Cobos Álvarez]

(Apparently I missed sending the intent to prototype, whoops)

As of real soon (as soon as the patch is r+'d), I intend to turn our
container query implementation on by default on all platforms. It's been
enabled on Nightly for a long while already, and fuzzed as well.

It has been developed behind the layout.css.container-queries.enabled
preference and other browsers ship a similar subset of the spec (which
is fairly stable).

Bug: <https://bugzil.la/1744221>

Bug to turn on by default: <https://bugzil.la/1809720>

Summary:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

Specification: <https://drafts.csswg.org/css-contain-3/#container-queries>

Standards Body: CSSWG (W3C)

Platform coverage: All

Preference: layout.css.container-queries.enabled

DevTools bug: <https://bugzil.la/1774620> and related.

Other browsers:

* Chromium: Shipped since M106
* Safari: Shipped since Safari 16

web-platform-tests:
https://wpt.fyi/results/css/css-contain?label=master&label=experimental&aligned&view=subtest&q=container-queries

Note that there are tests for style() queries that aren't part of this
etc, but in general I think we're in good shape.

A few of our failures wrt Shadow DOM are known, and our current behavior
seems preferable (IMO) and not likely to run into interop issues. It's
not hard to fix if we find them tho. See all the discussion in
<https://github.com/w3c/csswg-drafts/issues/7947> and
<https://github.com/w3c/csswg-drafts/issues/5984>.

Let me know if there's any concern.

-- Emilio

[Geoff Lankow]

Hi Emilio.

I can see this is going to be really useful! I've already made one patch for Thunderbird using it.

Is there going to be a matchMedia equivalent for containers? And if an element is defined as a container, could there be an event when the element is resized (to any size, not just predefined ones)?

GL

[Emilio Cobos Álvarez]

There's no JS API equivalent to matchMedia, see <https://github.com/w3c/csswg-drafts/issues/6205>.

Similarly, there's no event, but there is ResizeObserver, would that not work for your use case? If not, why not?

 -- Emilio

[Geoff Lankow]

Huh! I didn't know ResizeObserver was a thing, and it's been around for ages too. It will do the job nicely. Thanks!