- 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 transform
s), 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-default
propertyanchor-scroll
property- anchor functions with
implicit
anchor-element - automatic anchor positioning: anchor functions with
auto
orauto-same
anchor-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 orinset
shorthand property - vertical/rtl writing-modes (partial support)
- absolutely-positioned targets with
grid-column
/grid-row
/grid-area
in a CSS Grid layout @position-fallback
where targets in a CSS Grid layout overflow the grid area but do not overflow the containing block@position-fallback
where 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
bottom
orright
properties on inline targets whose offset-parent is inline withclientHeight
/clientWidth
of0
(partial support -- does not account for possible scrollbar width)