Updates to the Most Desired CSS Feature You Can’t Use Yet

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.

@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!

1. Sponsor us. We display sponsor logos and avatars here on our website and offer other fun perks.
2. Hire us to develop the Anchor Positioning polyfill or another OSS language/tool you rely on. Our client work also helps fund our open source work like this polyfill, so get in touch with us if you have any web development needs.