CSS Anchor Positioning : placer menus et infobulles sans JavaScript
CSS Anchor Positioning permet de placer menus, infobulles et panneaux près de leur déclencheur sans calculs JavaScript ni dépendance UI lourde.
Utilisez CSS Anchor Positioning pour placer un menu, une infobulle ou un panneau près de son déclencheur sans calculer de coordonnées en JavaScript. Cette API simplifie la géométrie des composants courants, mais elle ne gère ni leur ouverture, ni le clavier, ni le focus.
Elle convient lorsqu’un élément possède une ancre claire et que le placement reste simple. Conservez une solution dédiée si vous devez assurer une compatibilité homogène ou appliquer des règles avancées de collision et de positionnement.
Attacher un panneau à son déclencheur
Donnez un nom d’ancre au déclencheur, par exemple anchor-name: --actions, puis associez le panneau avec position-anchor: --actions. Utilisez ensuite anchor() pour aligner ses bords sur ceux du déclencheur.
Pour ouvrir un panneau sous un bouton, utilisez top: anchor(bottom) et right: anchor(right), puis ajoutez une marge afin que les deux éléments ne se touchent pas.
Vous évitez ainsi de lire getBoundingClientRect(), de convertir des coordonnées en pixels et de les recalculer au défilement. CSS propose aussi position-area, position-try-fallbacks et @position-try pour prévoir des positions alternatives lorsque l’espace manque.
Vérifiez toutefois le comportement de ces mécanismes dans les navigateurs que vous prenez réellement en charge. La référence technique est la spécification CSS Anchor Positioning ; consultez également le niveau de prise en charge par navigateur avant de rendre cette API indispensable à une action critique.
Cas adaptés et accessibilité
Commencez par un menu d’actions non critique, tel qu’un panneau ouvert par un bouton « Actions » dans une liste. Utilisez la Popover API natif pour l’affichage et la fermeture, et CSS Anchor Positioning pour sa géométrie.
Le bouton peut déclarer le panneau avec popovertarget. L’ouverture, la fermeture par Échap et le comportement de couche supérieure relèvent alors du navigateur plutôt que d’un gestionnaire JavaScript maison.
Une infobulle d’aide ou un panneau bref lié à une ligne de liste sont aussi de bons candidats. Si le contenu devient long, contient un formulaire complexe ou doit couvrir une grande partie de l’écran, préférez une modale ou une page dédiée.
Le positionnement ne rend pas le composant accessible. Ne donnez pas automatiquement le rôle menu à un bloc de liens : suivez le pattern ARIA de bouton de menu seulement pour un véritable menu de commandes.
De même, une aide importante doit être disponible au clavier et associée au contrôle concerné. Le pattern WAI-ARIA Tooltip précise les attentes relatives au focus et à la fermeture ; ne cachez pas une information nécessaire derrière le seul effet :hover.
Prévoir un fallback
Ne supposez pas que l’API est disponible partout. Encadrez les règles d’ancrage dans @supports (position-anchor: --actions) et gardez un rendu utilisable sans elles.
- Pour un panneau secondaire, affichez le contenu dans le flux ou prévoyez un placement absolu simple.
- Pour une action essentielle, fournissez une page, une modale éprouvée ou un comportement JavaScript compatible avec vos navigateurs cibles.
- Testez au zoom, au clavier, dans un conteneur défilant et près des bords de la fenêtre.
Vérifiez aussi les effets d’un parent avec overflow, de la couche supérieure et d’une position alternative. Gardez une bibliothèque de floating UI si vous avez besoin d’éléments virtuels, d’une flèche précisément reliée au panneau, de décalages complexes ou de règles de collision poussées.