2024年Chrome 125+/Safari TP対応の新CSS仕様。anchor()/anchor-name/position-anchor properties+Tooltip Positioning+Floating UI代替+Native Popover連携搭載。
CSS Anchor Positioningは2024年5月にChrome 125で正式採用された新CSS仕様で、要素を別の要素に「アンカー」として紐付けて位置決めする機能。従来はJavaScript+Floating UI(Popper.js 2022年廃止後の後継)で実装していたTooltip・Popover・Dropdown・Context Menuの位置調整をCSSのみで実現する。anchor-name/position-anchor/anchor()/position-area等のCSS propertyを組み合わせ、トリガー要素(ボタン等)に対する相対位置(top・bottom・left・right・center)を宣言的に記述可能。HTMLのpopover attributeとセットで使うと、JavaScript依存ゼロでフル機能のドロップダウンメニューを構築できる。Safari Technology Preview・Firefox Nightlyでも実装中で、2025-2026年に主要ブラウザで広く利用可能になる見込み。
anchor-name: --my-anchor でアンカーポイントを定義position-anchor: --my-anchor でアンカー要素を参照top: anchor(bottom) のように、アンカーの辺に相対配置position-area: top で簡略記法、9エリア(top/right/bottom/left+対角)position-try-fallbacks: flip-block, flip-inlinewidth: anchor-size(width)popover HTML attribute+popovertarget でトグル制御| 項目 | CSS Anchor Positioning | Floating UI (JS) | Popper.js (deprecated) | Native Popover (HTML) |
|---|---|---|---|---|
| 実装 | 純粋CSS | JavaScript | JavaScript | HTML attribute |
| Browser Support | Chrome 125+ Edge | Chrome/Safari/Firefox全 | (古いPolyfill) | Chrome 114+ Safari 17 |
| 位置調整 | position-area + anchor() | Plugin Architecture | Modifiers | (位置調整なし) |
| 画面端対応 | flip-block/flip-inline | flip middleware | flip modifier | × |
| Reactive | CSS Native | Auto Update | Manual | × |
| Bundle Size | 0KB (Native) | ~10KB | ~9KB | 0KB (Native) |
| 学習曲線 | CSS知識のみ | JS+Plugin | JS+Plugin | HTML attribute |
| RTL/i18n | 完全対応 | 完全対応 | 完全対応 | (位置はCSS必要) |
/* 基本的なTooltip Positioning */
.button { anchor-name: --tooltip-anchor; }
.tooltip {
position: absolute;
position-anchor: --tooltip-anchor;
top: anchor(bottom);
left: anchor(center);
position-try-fallbacks: flip-block;
}
/* position-area shorthand 使用 */
.dropdown {
position: absolute;
position-anchor: --my-button;
position-area: bottom span-right;
}
CSS Anchor PositioningはWeb開発者向けのCSS仕様で、自作PCの選択とは無関係だが、jisaku.com開発者として認識すべき重要な新Web仕様。jisaku.com Web Frontend(Next.js 16+TypeScript+Tailwind CSS 4)では、Tooltip・Popover・Dropdown実装でAnchor Positioningへ移行することで、Floating UIライブラリ依存を排除し、Bundle Size 10KB削減+JavaScript Hydration不要+SSR完全対応のメリットを得られる。一方、Safari/Firefoxの実装が遅れているため、2026年5月時点ではPolyfillまたはFloating UIフォールバック併用が現実的。Tailwind CSS Plugin として @tailwindcss/anchor-positioning(コミュニティ製)を使うと、ユーティリティクラス感覚で記述可能。Chrome 125+のみで動作するProduction採用は、ユーザーのブラウザ統計をMixpanel/GA4で確認してから判断すべき。jisaku.comのユーザー層(技術者+ガジェット好き)はChromeシェアが高い(80%+)ため、段階的移行が有効。Vercel Analyticsで Anchor Positioning Polyfill 適用率をモニタリング推奨。
Floating UI(JavaScript)との違い: Floating UIはJS実装で全ブラウザ動作+Pluginによる柔軟性、Anchor PositioningはCSS実装でChrome先行+JavaScript不要。FuturesプルーフならAnchor、現状互換性ならFloating UI。
Native Popover APIとの違い: Popover APIは「表示/非表示」の状態管理(popover attribute+トグル)、Anchor Positioningは「位置決め」(CSS Property)。両者を組み合わせると、JavaScript非依存のフル機能ドロップダウンが実現する。
Q1: Tailwind CSS 4でAnchor Positioningは使える？
A: 公式Plugin非対応(2026年5月時点)、@tailwindcss/anchor-positioningコミュニティ製Pluginまたは生CSSで記述。CSS Custom Property経由で [--anchor-name:--btn] のような書き方が可能。Tailwind 4.1+で標準対応予定。
Q2: Safari/Firefoxで動かない場合の代替策は？ A: oddbird/css-anchor-positioningのPolyfill(JavaScript実装)を読み込むか、Floating UI 1.6+でAnchor Positioning風APIを併用。Polyfillは約5KB、Floating UIは10KBで、後者はAuto-Updateや高度なMiddleware対応で柔軟性高い。
Q3: position-try-fallbacksとは？
A: 画面端でアンカー要素が見切れる場合の代替位置を指定する機能。position-try-fallbacks: flip-block, flip-inline で「縦反転を試行→ダメなら横反転」のフォールバック順序を指定。Floating UIのflip middlewareをCSS Native化した形。