Performance, scope, and fallbacks for the anchor positioning polyfill
Our sponsors are supporting the continued development of the CSS Anchor Positioning Polyfill. Here’s a summary of the latest updates.
A lot has happened with Anchor Positioning since our last update.
Along with changes to the spec and Chromium’s continued work towards implementing the spec, there’s been a lot of interest in using anchor positioning. In fact, the State of CSS survey identified anchor positioning as the most desired feature that you can’t yet use because of browser incompatibilities.
And while it’s true that anchor positioning is only implemented in Chromium browsers, our team at OddBird has made a lot of progress in our goal of catching up our polyfill to the spec. Based on the feedback we’re hearing, people are finding it covers enough of their needs to be able to start using anchor positioning in production.
@ayoreis added support for using ::before and
::after pseudo-elements as anchoring elements.
What pseudo-elements can be anchors?
The specification
defining which pseudo-elements can be anchors was recently updated from
part-like to fully styleable tree-abiding pseudo-element. This means that
::file-selector-button and ::details-content are not anchors.
::-webkit-slider-thumb is not likely to fit this criteria either, which is a
shame as it’s been extremely
useful for examples.
@mmalerba added support for anchor-scope, which
is extremely useful when working with lists of elements that each have their own
anchor elements.
In this example, anchoring is applied with shared .target and .anchor rules,
meaning there are multiple elements with anchor-name: --list-item set. By
default, the last element with that rule will be the anchor.
But that’s not what we want. We want the anchoring element within the same list
item to be our anchor. To do that, set anchor-scope: --list-item on
the li element to limit the search for an anchoring element.
See the Pen Popover with anchor-scope by @jamessw on CodePen.
Note that Chromium released support for anchor-scope in version 131, but since
the polyfill doesn’t support partial polyfilling, this demo will only work in
Chromium before 125, after 131, or in a non-Chromium browser.
What happens when an anchored element doesn’t fit where it would go? We implemented the Overflow Management portion of the spec to handle that.
In simple cases, you could add position-try: flip-block, flip-inline, flip-start; to first try flipping over the block axis, then the inline axis,
then over a diagonal axis. You can even combine the options.
See the Pen Fallbacks with `position-try` by @jamessw on CodePen.
v0.3.0 was a performance-focused release. It turns out that applying anchor positioning is a fairly intensive process, which is one of the reasons why it’s getting moved from the realm of JavaScript into the native browser.
@marchbox contributed a huge win that allows you to apply the polyfill to just the styles that impact anchor positioning. By default, the polyfill parses all of your CSS, which is likely more than you need. You’re now able to specify exactly which CSS stylesheets contain rules that impact how you use anchor positioning, so not all CSS has to be parsed.
What are you excited for with anchor positioning? We’d love to implement
position-area
and apply the polyfill to dynamic
elements.
There are 2 ways to help us keep this work sustainable and centered on your needs as a developer!
A huge thank you to the individuals and organizations sponsoring OddBird’s open source work!
We love contributing back to the languages & tools that developers rely on, from CSS & Sass to browser polyfills and Python. Help us keep that work sustainable and focused on developer needs!
Are we responding to the right inputs?
For many years, it has been ‘best practice’ to use relative units (especially em and rem) for sizing text. That’s great! But after playing around with my user preferences, I think we can improve on the common approaches.
How to find an anchor element
It is frustrating to track down why an anchor isn’t being found. I’ve found a simple way that should work in most cases. If that doesn’t work, step through the checklist, and then dive in to get a better understanding of how Anchor Positioning works.
New layouts will be possible
The more I play with it, the more convinced I am that anchor positioning is going to unlock some surprising new layouts.