[csswg-drafts] [css-anchor-position-2] Add a new container-type `anchored` for querying anchored elements (#12390)

lilles has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-anchor-position-2] Add a new container-type `anchored` for querying anchored elements ==
Issue #8171 there is a proposal to introduce a way of querying the applied position-try-fallback for anchored elements.

## Proposal

Introduce a new `anchored` `container-type` which establishes an element as a container for querying an anchored element features such as which position-try-fallback is used. An `anchored()` function is added to `@container` which can be used for queries to style descendant elements of the anchored element.

The `anchored` container-type can be combined with existing container-types. For instance: `container-type: inline-size anchored`.

## Containment

### Size containment

Anchored queries should not rely on the size of the anchored element in any other ways than anchor positioning and fallback already does through intrinsic sizing. There should be no need to impose size containment for `anchored` containers. 

### Layout containment

Anchored element queries typically rely on layout, similar to size container queries. The specification (ED) for size containers says that size containers establish an independent formatting context. However, since all anchored elements are absolute positioned, they are already independent formatting contexts.

### Style containment

An in-flow anchor element may appear after its anchored element in the tree order, which means counter changes in the anchored element may affect the layout of the anchor element, which may in turn affect the positioning of the anchored element. Hence, we have a cycle which can be solved my imposing style containment for `container-type:anchored`.

Here is a demo that would have given unstable rendering in the Chrome prototype if the anchored containers were not style contained:

```html
<!DOCTYPE html>
<style>
  #container {
    position: relative;
    width: 220px;
    height: 100px;
  }
  #anchor {
    anchor-name: --a;
    width: fit-content;
    height: 100px;
    background: teal;
  }
  #anchor::before {
    font-size: 50px;
    content: counter(c);
  }
  #anchored {
    contain: style;
    container-type: anchored;
    counter-reset: c 0;
    position: absolute;
    position-anchor: --a;
    position-try-fallbacks: flip-inline;
    right: anchor(left);
    top: anchor(top);
    width: 100px;
    height: 100px;
    background: yellow;
  }
  @container anchored(fallback: flip-inline) {
    div {
      counter-increment: c 999999999;
    }
  }
</style>
<div id="container">
  <div id="anchored">
    <div></div>
  </div>
  <div id="anchor"></div>
</div>
```

@fantasai 


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12390 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 24 June 2025 13:31:01 UTC