CSS anchor positioning

[mayank99]

Description

The CSS anchor positioning API allows for elements to be positioned relative to one or more "anchor" elements (rather than relative to a containing block).

This is done by evaluating the anchor() functions into pixel values, and then running regular CSS positioned layout (fixed or absolute).

Example usage:

.anchor {
  anchor-name: --my-anchor;
}

.anchored {
  position: fixed;

  anchor-default: --my-anchor; /* Sets the default target of the anchor() function */
  left: anchor(right);         /* Aligns left edge with anchor's right edge */

  position-fallback: --top-then-bottom; /* To account for overflowing viewport */
}

@position-fallback --top-then-bottom {
  @try {
    bottom: anchor(top); /* Aligns bottom edge with anchor's top edge */
  }
  @try {
    top: anchor(bottom); /* Aligns top edge with anchor's bottom edge */
  }
}

Crucially, there is no JavaScript that would otherwise be needed to calculate the position of the anchor element.

Also it can be combined with the popover api (#423) to style elements in the top layer, thus avoiding any stacking context issues which would otherwise require even more JavaScript to work around. Combining these two apis also creates an implicit anchor which can be used to avoid specifying a custom anchor-name.

Specification

https://drafts.csswg.org/css-anchor-position-1/

Open Issues

No response

Tests

https://wpt.fyi/results/css/css-anchor-position

Current Implementations

• Blink (behind a flag)
• Gecko
• WebKit

Standards Positions

Blink: https://chromestatus.com/feature/5124922471874560
Gecko: mozilla/standards-positions#794
Webkit: WebKit/standards-positions#167

Browser bug reports

Blink: https://bugs.chromium.org/p/chromium/issues/detail?id=1309178
Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1838746
Webkit: ?

Developer discussions

Chrome article with examples: https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning/#examples

Polls & Surveys

No response

Existing Usage

No response

Workarounds

Lots of JavaScript:

• https://github.com/oddbird/css-anchor-positioning
• https://floating-ui.com/

Accessibility Impact

No response

Privacy Impact

No response

Other

Given that Webkit feels the spec is not mature enough (WebKit/standards-positions#167 (comment)) and they have ideas for improvements, it may not be a good idea to make this part of Interop 2024. But this could change in the coming months. I just wanted to bring it up now ahead of time, and it's also just nice to have all these links in one place (can be easily referenced in next year's proposal for example).

[jensimmons]

Anchor Positioning is a fantastic feature that would make sense to include in the Interop project. I don't believe, however, that the spec is mature enough to be included. There is still significant debate in the CSS Working Group about fundamental choices about the design & mental model of how it will work. It's too early for any browser to ship.

[kizu]

Anchor Positioning is a fantastic feature that would make sense to include in the Interop project. I don't believe, however, that the spec is mature enough to be included. There is still significant debate in the CSS Working Group about fundamental choices about the design & mental model of how it will work. It's too early for any browser to ship.

I think I agree — while I would really want to see anchor positioning in production, going too fast could harm it.

However, given how it is a very crucial part of the Popover API, authors would really benefit from it being there sooner rather than later, and it would be rather sad if we'd miss this arbitrary “updated once a year” milestone.

I wonder if we could make it an “Investigation Effort” instead?

It sounds more fitting its current state (both formally lack the “widely implemented”, but a lot of other areas also lack it; maybe it is an artifact from like “Compat 2021”?), and that's actually what we need to do in order to move forward the specification — investigate all the proposals that we have and make decisions on them.

[jensimmons]

given how it is a very crucial part of the Popover API, authors would really benefit from it being there sooner rather than later

Agreed!

But it doesn't make sense for Anchor Positioning to be an Interop Project Investigation. The work of finishing the specification (and providing browser engineers with all the needed information on how to implement it) is the work of the CSS Working Group. Not the WPT Interop Project.

Interop Investigations are for creating new automated tests, improving the testing infrastructure, or other similar WPT/Interop group projects. Not for writing web standards.

it would be rather sad if we'd miss this arbitrary “updated once a year” milestone

There's nothing in place to hold back browsers from implementing any new web standard that they deem valuable or high priority, once the standards process has been complete. Any browser can implement Anchor Positioning, and ship their implementation once the standard is mature and has consensus in the CSSWG.

And there's nothing the Interop Project can or will do to "speed up" the standards process at CSSWG. That would be a considerable violation of the how things are supposed to work. Standards organizations make standards. Web Platform Tests (WPT) makes tests and runs testing infrastructure. The WPT Interop Project chooses tests in specific areas to display results on the dashboard. The charters of each organization define their scope and purpose, and they each stick to their jobs.

Some of the same people are involved in both CSSWG and Interop 2024... so the most the Interop project could do to speed along Anchor Positioning is take up less of our time, so we have time to work on Anchor Positioning!

[kizu]

I see. Thanks for the elaboration!

[wpt-interop]

Thank you for proposing CSS Anchor Positioning for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

As of the deadline, the specifications for CSS Anchor Positioning were not yet complete enough to allow interoperable implementations. To make progress on this area in the future, it will first be necessary to ensure that the feature has a clear specification in a standards track document.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.