Oddbird の CSS Anchor Positioning Polyfill を使う

ポリフィルが行うこと

Oddbird の CSS Anchor Positioning Polyfill は、あなたのCSSをパースしてアンカーポジショニングルールを見つけ、JavaScript でエミュレートします：ResizeObserver と MutationObserver でアンカー要素を監視し、変更ごとにターゲットの位置を計算し、結果をインラインの style 属性で適用します。

結果：anchor-name、position-anchor、anchor()、position-area がすべて Firefox や古いブラウザでも動き、ネイティブコードと同じ構文が使えます。

インストール

npm install @oddbird/css-anchor-positioning

import polyfill from '@oddbird/css-anchor-positioning';

// ネイティブサポートがない場合のみ条件適用
if (!('anchorName' in document.documentElement.style)) {
  polyfill();
}

パフォーマンス特性

ポリフィルは ネイティブのアンカーポジショニングより厳密に遅い です。ブラウザがレイアウトの一部としてアンカー処理を行う（実質無料）のに対し、ポリフィルはレイアウト影響変更ごとにJavaScriptで処理します。シンプルなケース（ページに数個のツールチップ）では差は感知できませんが、スクロール中に100個以上のアンカード要素が更新されるとフレーム落ちが見えます。

トレードオフは正しさです：ポリフィルがあれば、コードは今日100%のブラウザで動きます。なければ Firefox ユーザーは壊れたレイアウトか、あなたが手動で書いたフォールバック配置のいずれかになります。

ポリフィルを外せるとき

Firefox がネイティブ対応を出荷したら（2026年4月時点で具体的日付なし）、リリースで外せます — CSSは変える必要がありません。それまでは条件付きでポリフィルを出荷します。

注意点

ポリフィルは最も一般的な構文をサポートしますが、すべての機能ではありません：

• ✅ anchor-name、position-anchor
• ✅ 名前付きアンカーでの anchor() 関数
• ✅ position-area ショートハンド
• ✅ flip-block と flip-inline キーワードの position-try-fallbacks
• ⚠️ 名前付き @position-try ルール — 部分サポート
• ⚠️ anchor-scope — 未対応
• ❌ 暗黙的アンカー（同じスタッキングコンテキスト内で名前なしアンカー）— 未対応

最新の機能マトリクスはポリフィルのREADMEを確認してください。

バンドルサイズ

ポリフィルは minified+gzipped で約30KB です。条件付きロード（上記スニペット）でモダンブラウザはコストゼロです。