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.
Check out our Winging It conversations about design, frontend, and backend development.
Winging It episode 8: CSS Anchor Positioning in Practice
Winging It episode 16: Debugging CSS Anchor Positioning
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!
There are several proposals, but one major road block
We’re trying to make progress on shorthand syntax for CSS logical properties. But the path forward depends on where we hope to be a decade from now.
Can we get this process unstuck?
The CSS Working Group recently resolved to add a size shorthand for setting both the width and height of an element. Many people asked about using it to set the ‘logical’ inline-size and block-size properties instead. But ‘logical shorthands’ have been stalled in the working group for years. Can we…
It’s not just a shorthand for anchor()
position-area might be my favorite part of the CSS Anchor Positioning spec, with a ton of features packed in to make things just… work. But there’s no magic here, just a few key parts that work well.