Skip to main
Article
A rusty anchor hanging with the sea in the background.

Updates to the Anchor Position Polyfill

Catching up to the spec

Our sponsors are supporting the continued development of the CSS Anchor Positioning Polyfill. Here’s a summary of the latest updates.

A few years ago, OddBird started working on a polyfill for CSS Anchor Positioning as the spec started to take form. Now that the spec has stabilized and Chromium has begun implementation, we are relying on our sponsors to support development of the polyfill. Thanks to their contributions, we’re releasing v0.1.0.

  1. position-anchor

In their full form, anchor functions can be quite verbose and repetitive.

#target {
  top: anchor(--my-anchor bottom);
  width: anchor-size(--my-anchor width);
}

position-anchor allows you to specify a default anchor for an element.

#target {
  position-anchor: --my-anchor;
  top: anchor(bottom);
  width: anchor-size(width);
}

You can also use this to share positioning rules while using different anchors. Both Target A and Target B will be positioned to the right of their anchor, but they will use different respective anchors.

.target {
  left: anchor(right);
}
.target#a {
  position-anchor: --anchor-a;
}
.target#b {
  position-anchor: --anchor-b;
}

position-anchor will also be useful for things like inset-area, which isn’t yet supported by the polyfill.

  1. Anchor validity

Thanks to a great contribution from @ayoreis, the validity algorithm has been updated to match the spec. More can be found in the issue, but this change makes more elements available for anchoring. Notably, you can now anchor to another element that is anchored as well (as long as the anchor element is layed out before the target element).

  1. Support multiple names in anchor-name.

In this example, both #target-a and #target-b are referring to the same element, but with different names.

.anchor {
  anchor-name: --a, --b;
}
#target-a {
  position-anchor: --a;
}
#target-b {
  position-anchor: --b;
}

This will enable a number of use cases where a target can be anchored to different anchors, depending on what is available. Perhaps some of your pages have a different layout, where you want #target-b to anchor to a #side-anchor if there is one, but otherwise to the default .anchor.

.anchor#side-anchor {
  anchor-name: --b;
}

While a lot of the basic functionality is already possible with the polyfill, there’s a lot left to do to bring the polyfill up to date with the spec. Our v1.0.0 Milestone is prioritized based on what we think will be the most impactful and useful features, and some of the upcoming ones are:

If you’re as excited as I am to use these features, there are a few ways you can help. First, let us know which features you’re most eager to see supported by commenting on the GitHub issues. We also welcome PRs.

And of course, sponsoring OddBird’s Open Source work is a great way to help make our continued work on this polyfill (and others) possible. We’re grateful for our existing sponsors who have made this release possible, and you can see them below.

Upcoming Workshop

Mia from behind,
standing at a laptop -
speaking to a conference audience
and gesturing to one side

Cascading Style Systems

A workshop on resilient & maintainable CSS

New CSS features are shipping at an unprecedented rate – cascade layers, container queries, the :has() selector, subgrid, nesting, and so much more. It’s a good time to step back and understand how these tools fit together in a declarative system – a resilient cascade of styles.

Register for the October workshop »

Open Source Sponsors

Current Sponsors

A huge thank you to the individuals and organizations sponsoring OddBird’s open source work!

Blue-Footed Boobies

Open Collective Avatar for benface

Common Loons

Open Collective Avatar for Outline GbROpen Collective Avatar for Mat MarquisOpen Collective Avatar for ScheppOpen Collective Avatar for Paul van BuurenOpen Collective Avatar for JohannesOpen Collective Avatar for William KillerudOpen Collective Avatar for Nikita DubkoOpen Collective Avatar for ThijsOpen Collective Avatar for Eric PortisOpen Collective Avatar for Tyson Gach

Sponsor OddBird’s OSS 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!

Recent Articles

  1. A dog zooming by the camera, up-close, body twisted and eyes wide as it circles a grass yard
    Article post type

    Zoom, zoom, and zoom

    The three types of browser (and CSS!) magnification

    I’m working on an article about fluid typography, and relative units. But instead, I fell down this rabbit hole – or a cleverly-disguised trap? – trying to understand ‘zoom’ in the browser (not Zoom™️ the software). Since I couldn’t find any up-to-date articles on the subject, I thought I shoul…

    see all Article posts
  2. A back hoe on the bank of the Suez, trying to free the Ever Given cargo ship
    Article post type

    Learn Grid Now, Container Queries Can Wait

    Take your time with new CSS, but don’t sleep on the essentials

    Several people have asked recently why container queries aren’t being used more broadly in production. But I think we underestimate the level of legacy browser support that most companies require to re-write a code-base.

    see all Article posts
  3. A clear kitchen blender filled with chopped fruit and greens
    Article post type

    Can you un-mix a mixin?

    Rethinking the CSS mixin proposal after CSS Day

    The CSS Working Group has agreed to move forward with CSS-native mixins. But some recent mixin-like CSS tricks have an advantage that the official proposal doesn’t account for: they make it easy to remove a mixin after it’s already been mixed in.

    see all Article posts