Container Queries

[jensimmons]

Description

Container Queries — size queries plus container query units, from CSS Containment 3. (Not including style queries.)

Container Queries were proposed for Interop 2022, but we did not have consensus for its inclusion. Instead, we added Containment as a focus area. For 2023, it might make sense to combine Containment (level 2) and Container Queries (level 3) into one area. Or perhaps create a new area alongside the previous one.

Rationale

Container Queries (size queries) has been one of the most requested features from web designers and developers for many years.

Ensuring Container Queries is fully interoperable would definitely help developers writing CSS and users going to websites that use Container Queries.

Specification

CSS Containment Module Level 3

Tests

Presumably an appropriate set of tests selected from:
https://wpt.fyi/results/css/css-contain/container-queries?label=experimental&label=master&aligned

[foolip]

#189 is about CSS Containment Module Level 2. Do these two proposals, and the 2022 Containment focus area add up to all of Containment Level 2 and 3, and all of https://wpt.fyi/results/css/css-contain?

We should handle the proposals separately, but it would be good to know if the result if both are accepted would naturally be one larger focus area.

[foolip]

https://www.zachleat.com/web/origin-container-queries/ has further evidence of web developer demand in the form of a long history of requests for this.

[foolip]

Adding to the rationale, Container Queries was one of the most common responses the State of CSS 2022 question about browser incompatibilities, mentioned in ~18% of responses, see #248.

[foolip]

Thank you for proposing Container Queries for inclusion in Interop 2023.

We are pleased to let you know that this proposal was accepted as the Container Queries focus area. You can follow the progress of this Focus Area on the Interop 2023 dashboard.

For an overview of our process, see the proposal selection summary. Thank you for contributing to Interop 2023!

Posted on behalf of the Interop team.