- Firefox 54+
- Chrome 51+
- Edge 79+
- Safari 10+
To use the polyfill, add this script tag to your document <head>:
<script type="module">
if (!("anchorName" in document.documentElement.style)) {
import("https://unpkg.com/@oddbird/css-anchor-positioning");
}
</script>If you want to manually apply the polyfill, you can instead import the
polyfill function directly from the
@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js file.
For build tools such as Vite, Webpack, and Parcel, that will look like this:
import polyfill from '@oddbird/css-anchor-positioning/fn';The polyfill function returns a promise that resolves when the polyfill has
been applied.
You can view a more complete demo here.
The polyfill accepts one argument (type: boolean, default: false), which
determines whether anchor calculations should update on every animation
frame (e.g. when the
anchor element is animated using transforms), in addition to always updating
on scroll/resize. While this option is optimized for performance, it should be
used sparingly.
<script type="module">
if (!("anchorName" in document.documentElement.style)) {
const { default: polyfill } = await import("https://unpkg.com/@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js");
polyfill(true);
}
</script>When using the default version of the polyfill that executes automatically, this
option can be set by setting the value of
window.UPDATE_ANCHOR_ON_ANIMATION_FRAME.
<script type="module">
if (!("anchorName" in document.documentElement.style)) {
window.UPDATE_ANCHOR_ON_ANIMATION_FRAME = true;
import("https://unpkg.com/@oddbird/css-anchor-positioning");
}
</script>This polyfill doesn't (yet) support the following:
-
anchor-defaultproperty -
anchor-scrollproperty - anchor functions with
implicitanchor-element - automatic anchor positioning: anchor functions with
autoorauto-sameanchor-side - dynamically added/removed anchors or targets
- anchors or targets in the shadow-dom
- tracking the order of elements in the top-layer to invalidate top-layer target elements from anchoring to succeeding top-layer anchors. See this WPT for an example.
- anchor functions assigned to
inset-*properties orinsetshorthand property - vertical/rtl writing-modes (partial support)
- absolutely-positioned targets with
grid-column/grid-row/grid-areain a CSS Grid layout -
@position-fallbackwhere targets in a CSS Grid layout overflow the grid area but do not overflow the containing block -
@position-fallbackwhere targets overflow their inset-modified containing block, overlapping the anchor element - anchors in multi-column layouts
- anchor functions used as the fallback value in another anchor function
- anchor functions assigned to
bottomorrightproperties on inline targets whose offset-parent is inline withclientHeight/clientWidthof0(partial support -- does not account for possible scrollbar width)