Container Queries

[mirisuzanne]

Description

While all the browsers have shipped the basic functionality - there have been a number of improvements agreed to by the CSS Working Group, which have not been implemented consistently. The first two are especially high priority, since they have compatibility implications:

• Queries resolve against the flat tree: https://github.com/w3c/csswg-drafts/issues/5984#issuecomment-2112977366
• Queries with unknown features, and comma-separated syntax: https://github.com/w3c/csswg-drafts/issues/7551#issuecomment-1854385652
• Container font units: https://github.com/w3c/csswg-drafts/issues/8855
• Explicit container names in units: https://github.com/w3c/csswg-drafts/issues/7858
• Custom properties in dimensional query values: https://github.com/w3c/csswg-drafts/issues/8088
• Optional <container-query> prelude: https://github.com/w3c/csswg-drafts/issues/9192

Specification

https://drafts.csswg.org/css-conditional-5/

Additional Signals

WPT: https://wpt.fyi/results/css/css-conditional/container-queries

Chromium status or issue:

• Queries resolve against the flat tree: https://chromestatus.com/feature/5242724333387776
• Queries with unknown features: https://chromestatus.com/feature/5105423604776960
• Container font units: https://crbug.com/40277671
• Explicit container names in units: https://crbug.com/40261733
• Custom properties in dimensional query values: none
• Optional <container-query> prelude: https://crbug.com/40287550

I haven't had a chance to track down other status/issues. I'll try and get to that, or would be happy for help.

[captainbrosset]

In the preliminary State Of CSS 2024 results, Container Queries is the second most common answer to the question "Are there any existing CSS features that you have difficulties using (or avoid altogether) because of lack of support, or differences between browsers?"

(not providing a link yet because these are preliminary results)

[mirisuzanne]

It's also possible also that there are more interop issues I'm not aware of – so I would welcome people providing additional sub-points to this focus area. I only listed the main improvements that have been discussed in the CSSWG since browsers launched CQs.