L'Anchor Positioning API (CSS) permet de positionner des éléments (tooltips, popovers) par rapport à un « ancêtre » sans JavaScript. Fini les calculs getBoundingClientRect et les position: absolute fragiles.
On déclare un élément comme anchor avec anchor-name, puis on positionne un autre élément avec position: absolute et les propriétés anchor() (top, left, etc.). Le positionnement s'adapte au scroll et au resize. Les dynamic viewport units (dvh, svh) complètent le tout pour les overlays en plein écran. Pour les design systems et les composants accessibles (tooltips, dropdowns), Anchor Positioning simplifie le code et améliore la stabilité.
Conseil : prévoir un fallback (position classique ou JS) pour les navigateurs qui ne supportent pas encore l'API.
Points forts / Points faibles
Points forts
- Positionnement déclaratif, plus de JS pour placer les bulles
- Réactivité au scroll/resize gérée par le navigateur
- Accessibilité et focus plus simples à gérer
- Alignement avec les standards (Popover API, etc.)
Points faibles
- Support navigateurs encore partiel (Chrome, Safari récents)
- Documentation et exemples à suivre (spéc en évolution)
- Fallback nécessaire pour une large compatibilité