Understanding the new CSS anchor positioning API

日本語要約

CSSアンカーポジショニングAPIが全主要ブラウザで利用可能になりました。JavaScriptなしでツールチップ、ポップオーバー、ドロップダウンメニューを実装する方法を解説したガイドです。Floating UIやPopper.jsが不要になるケースが増えそうです。

ポイント

• ▸ anchor()関数で要素を別の要素に対して相対的に配置可能
• ▸ position-fallbackでビューポート端での自動位置調整が実現
• ▸ ツールチップやドロップダウンがCSSのみで完結する実装例を紹介
• ▸ Floating UI/Popper.jsの多くのユースケースをCSSだけで代替可能
• ▸ Chrome 125、Firefox 133、Safari 18.2で全主要ブラウザ対応が完了

原文抜粋

CSS anchor positioning is now available in all major browsers. This guide explains how to use it for tooltips, popovers, and dropdown menus without JavaScript.