Description
Currently, container queries rely on several types of containment: size
, layout
, and style
. This already causes some confusion with authors, when fixed-position elements nested in a container are now fixed to the container rather than the viewport (thanks to layout containment).
That issue will become much more noticeable when container queries interact with anchor positioning. As currently defined, layout
and style
containment will make it impossible for elements to anchor across different containers. I think that will mean:
- Positioned elements outside a container cannot see anchors inside a container, since
style
containment scopes the anchor name. - Positioned elements inside a container cannot use an anchor outside the container, since
layout
containment doesn't allow reference to external layout? (I'm less clear on the interaction here)
While these decisions all make sense in terms of 'the promise' that each containment makes, it will cause a lot of problems for users who want to use both container queries and anchor positioning. Authors should be able to use these features without one constantly interfering with the other.
Since container queries are somewhat abstracted away from containment (we set a container-type
, and browsers apply containment as-needed), I think the only path forward here is defining more subtle and targeted containment rules for container queries. Are there ways that we can relax how much layout and style containment is required to make container size queries work?
(This came out of discussion on #9349)
/cc @tabatkins
Metadata
Metadata
Assignees
Type
Projects
Status