Firefox と古いブラウザのためのフォールバック戦略

現実

2026年4月時点：

機能	Chrome	Edge	Safari	Firefox
anchor-name	125+	125+	26+	❌
position-anchor	125+	125+	26+	❌
anchor() 関数	125+	125+	26+	❌
position-area	125+	125+	26.1+	❌
position-try-fallbacks	125+	125+	26+	❌
@position-try 名前付き	128+	128+	❌	❌

Firefox はグローバルトラフィックの約3%ですが、技術系・アクセシビリティ意識の高い・開発者層では多めに表れます — 無視してはいけません。

戦略 1：@supports によるプログレッシブエンハンスメント

アンカースタイルを @supports でラップし、合理的なデフォルトを用意します：

.tooltip {
  /* デフォルト：ラッパー相対の position: absolute */
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

@supports (anchor-name: --x) {
  .tooltip-trigger {
    anchor-name: --tt;
  }
  .tooltip {
    /* アンカーポジショニングで上書き */
    position-anchor: --tt;
    position-area: top;
    margin-bottom: 8px;
    /* ラッパー版デフォルトをリセット */
    bottom: auto;
    left: auto;
    transform: none;
  }
}

アンカーサポートのないブラウザはラッパーベースの配置を得ます（独自の制限あり — オーバーフロークリッピング、自動反転なし — が機能はします）。アンカーサポートのあるブラウザは良い体験を得ます。

戦略 2：JS 駆動の検出

ランタイム判定（例：ポリフィルをロードするか）には：

const supportsAnchor = CSS.supports('anchor-name', '--x');
const supportsPositionArea = CSS.supports('position-area', 'top');

if (!supportsAnchor) {
  // Oddbird ポリフィルをロード、または機能をスキップ
  import('@oddbird/css-anchor-positioning').then(({ default: polyfill }) => polyfill());
}

戦略 3：フォールバックレイヤーとしての Floating UI

すでにツールチップに Floating UI を使っているなら、当面はすべての場所で使い続ける — アンカーポジショニングは速いが、Floating UI はユニバーサル。コンポーネントを触るたびに段階的に移行してください。

フォールバックなしの選択肢

ブラウザを制御できる社内ツールや管理ダッシュボード（「Chrome のみ、最新版」）では、フォールバックを完全にスキップしてください。アンカーポジショニングのCSSを書くだけでサポート前提でOK。多くの社内ツールはこのプロファイルにフィットします。

「未対応」と「壊れている」を混同しない

アンカーポジショニング未対応の場合、ターゲット要素は依然としてレンダリングされます — デフォルト位置（通常は他のオフセットがない position: absolute の top: 0; left: 0）に配置されるだけです。消えはしません。ユーザーは見えるが配置がおかしいUI要素を得る、欠けたUI要素ではありません。重要でないアンカーUI（装飾的バッジ、ホバーヒント）にはこれが許容されることもあります。