-
Notifications
You must be signed in to change notification settings - Fork 28
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS anchor positioning #455
Comments
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. |
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.
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! |
I see. Thanks for the elaboration! |
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. |
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
orabsolute
).Example usage:
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
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:
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).
The text was updated successfully, but these errors were encountered: