Intent to Prototype: CSS Anchor Positioning
Xiaocheng Hu
Contact emails
ikilp...@chromium.org, ko...@chromium.org, xiaoc...@chromium.org
Explainer
https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSAnchoredPositioning/explainer.md
Specification
https://tabatkins.github.io/specs/css-anchor-position
Summary
Anchor positioning allows a positioned element to size and position itself relative to one or more "anchor elements" elsewhere on the page, possibly constrained by the container or viewport. A typical use case is to "pin" a popup to the button that opens it.
Blink component
Blink>Layout
Motivation
When building interactive components or applications, authors frequently want to leverage UI elements that can render in a "top-layer", and wish to "pin" or "anchor" such top-layer UI to a point on another element, referred to here as an "anchor element". How the top-layer UI is positioned with respect to its anchor element is further influenced or constrained by the edges of the container. CSS Anchor Positioning provides native support for such use cases.
Initial public proposal
https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSAnchoredPositioning/explainer.md
Search tags
css, anchor, position
TAG review
TAG review status
Pending
Risks
Interoperability and Compatibility
Gecko: No signal
WebKit: No signal
Web developers: No signals
Other signals:
Gecko: No signal
WebKit: No signal
Web developers: No signals
Other signals:
WebView application risks
Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?
No.
Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?
No.
Debuggability
In addition to the standard CSS & Layout support, DevTools should be able to show which fallback positioning an anchor-positioned element is using.
Is this feature fully tested by web-platform-tests?
No
Flag name
Requires code in //chrome?
False
Tracking bug
https://bugs.chromium.org/p/chromium/issues/detail?id=1309178
Estimated milestones
No milestones specified