#885: CSS State Container Queries

Visit on Github.

Opened Aug 23, 2023

こんにちは TAG-さん!

I'm requesting a TAG review of CSS State Container Queries.

Level 3 of CSS Containment introduces Container Queries for querying size and style of containers to style their descendants depending on layout and computed styles respectively. There are requests to allow to query other states associated with a container, in particular various scroll based states.

  • Explainer¹ (minimally containing user needs and example code): url
  • Primary contacts (and their relationship to the specification):
    • @lilles (Google, Implementer)
    • @tabatkins (Google, Editor)
    • @frivoal (On behalf of Bloomberg, Editor)
    • @mirisuzanne (Invited Expert, Editor)
  • Organization/project driving the design: Google
  • External status/issue trackers for this feature (publicly visible, e.g. Chrome Status):

Further details:

  • I have reviewed the TAG's Web Platform Design Principles
  • The group where the incubation/design work on this is being done (or is intended to be done in the future): CSSWG
  • The group where standardization of this work is intended to be done ("unknown" if not known): CSSWG
  • Major unresolved issues with or opposition to this design:
    • Should containment be enforced for the new container-types, and if so which (size, layout, paint, style)?
    • Are container queries a better choice than pseudo classes?
  • This work is being funded by: Google

We'd prefer the TAG provide feedback as (please delete all but the desired option):

💬 leave review feedback as a comment in this issue and @-notify @lilles

Discussions

Discussed Oct 23, 2023 (See Github)

Lea: seems great, does address real author needs. What percentage of use cases would be esatisfied by container queries. Eg. stack elements with position sticky, want to style stack element not descendents. At least it introduces a workaround whereas right now you have to use js. Didn't get the part about a two pass rendering update that this introduces. Does anyone understand it better?

Peter: cycles in rule matching you avoid with container queries but if you detect something being stuck and you change sizes of things it could no longer be stuck, right?

Lea: can it? Something that is stuck is also positioned

Peter: but it can scroll or be stuck to the edge based on the scroll position

Lea: in my opinion cycles are something that prevents implementers from implementing css that might involve cycles, it's not usually usability concern. A lot of very useful features are not being done because they could introduce cycles. If this has implementer support I'm not that concern. Remember when I proposed a design principle that css features could not have cycles? Peter said rather not because lots of useful things can introduce cycles. If implementers are happy I'm happy.

Peter: agree with that. I don't think the fact it can cause cycles is a reason to not do it. CSS just needs better detection and resolution of cycles. If they're willing to do the work of dealing with it then great.

Rossen: agree. Is this different than the scroll driven animations have? If it exacerbates it or it's more or less the same.. at the high level as a proposal I'm happy with it.

Lea: Are implementers happy with this? Everybody seems to be... there are no signals from mozilla or safari on the chrome status issue. I don't know if standards positions have been filed

Rossen: it's also an early review

Lea: [writes comment]

Comment by @LeaVerou Oct 23, 2023 (See Github)

We looked at this during a breakout today. Great explainer, thank you! We think the feature covers a lot of very prominent author use cases, and the container query design circumvents a lot of the issues with past proposals. What is the status of multi-stakeholder support? Going forwards, it may help to request standards positions from Gecko and WebKit to see if they’re also on board.

Comment by @lilles Nov 1, 2023 (See Github)

What is the status of multi-stakeholder support? Going forwards, it may help to request standards positions from Gecko and WebKit to see if they’re also on board.

The standards positions were previously filed, but no response yet:

https://github.com/mozilla/standards-positions/issues/896 https://github.com/WebKit/standards-positions/issues/261

I have Agenda+'ed the CSSWG issue to get a resolution to start working on the spec.