Positionnement d'ancrage CSS expliqué

Pendant des années, positionner des info-bulles, des menus déroulants et des popovers signifiait se battre avec des calculs JavaScript. Il fallait mesurer les éléments, suivre les positions de défilement et recalculer constamment pour maintenir vos éléments d’interface utilisateur correctement alignés. Le positionnement d’ancrage CSS change complètement la donne en vous permettant d’attacher des éléments les uns aux autres en utilisant du CSS pur—sans JavaScript requis.

Qu’est-ce que le positionnement d’ancrage CSS ?

Le positionnement d’ancrage CSS est une API native du navigateur qui vous permet de positionner des éléments relativement à d’autres éléments sur la page. Pensez-y comme à la création de connexions invisibles entre éléments : l’un agit comme une “ancre” (le point de référence), et l’autre agit comme la “cible” (l’élément positionné).

Cela élimine le besoin de bibliothèques JavaScript de positionnement lors de la construction de motifs d’interface utilisateur courants comme les info-bulles, les menus contextuels et les boîtes de dialogue flottantes. Le navigateur gère tous les calculs complexes, y compris les limites du viewport et les positions de défilement.

Propriétés fondamentales : Construire des relations d’ancrage

Définir des ancres avec anchor-name

D’abord, vous devez désigner un élément comme ancre en lui donnant un identifiant unique :

.menu-button {
  anchor-name: --main-menu;
}

Le nom de l’ancre doit commencer par des tirets doubles (--), similaire aux propriétés personnalisées CSS.

Connecter des éléments avec position-anchor

Ensuite, connectez votre élément cible à l’ancre :

.dropdown-menu {
  position: absolute;
  position-anchor: --main-menu;
}

L’élément cible doit avoir position: absolute ou position: fixed pour fonctionner avec le positionnement d’ancrage.

Positionner des éléments avec position-area

La propriété position-area fournit le moyen le plus simple de positionner votre cible. Elle utilise un modèle de grille 3×3 avec l’ancre au centre :

.dropdown-menu {
  position: absolute;
  position-anchor: --main-menu;
  position-area: bottom center;
}

Vous pouvez utiliser des valeurs physiques (top, bottom, left, right) ou des valeurs logiques (block-start, inline-end) pour un meilleur support d’internationalisation. Le préfixe span- permet aux éléments de s’étendre sur plusieurs cellules de grille :

.tooltip {
  position-area: top span-inline;
}

Ajustement fin avec la fonction anchor()

Pour un contrôle précis, utilisez la fonction anchor() avec les propriétés inset :

.tooltip {
  position: absolute;
  position-anchor: --trigger;
  top: anchor(bottom);
  left: anchor(left);
}

Cela positionne le bord supérieur de l’info-bulle au bord inférieur de l’ancre, avec les bords gauches alignés. Vous pouvez aussi référencer des ancres spécifiques explicitement :

.multi-anchor-target {
  top: anchor(--anchor-1 bottom);
  right: anchor(--anchor-2 left);
}

Dimensionnement adaptatif avec anchor-size()

La fonction anchor-size() vous permet de dimensionner des éléments basés sur les dimensions de leur ancre :

.dynamic-tooltip {
  position-anchor: --button;
  width: anchor-size(width);
  max-height: calc(anchor-size(height) * 2);
}

Cela crée des info-bulles qui s’adaptent proportionnellement avec leurs ancres—parfait pour les designs adaptatifs.

Gérer les cas limites avec position-try

Que se passe-t-il quand votre élément positionné atteint le bord du viewport ? La propriété position-try fournit des positions de repli :

.context-menu {
  position: absolute;
  position-anchor: --menu-trigger;
  position-area: bottom start;
  position-try: flip-block, flip-inline;
}

Le navigateur essaie automatiquement des positions alternatives quand la position primaire causerait un débordement. Les mots-clés intégrés comme flip-block et flip-inline gèrent les scénarios courants, ou vous pouvez définir des replis personnalisés :

@position-try --compact-menu {
  position-area: top;
  width: 200px;
}

.context-menu {
  position-try: --compact-menu, flip-block;
}

État du support navigateur

Fin 2024, le positionnement d’ancrage CSS a un support navigateur croissant :

• Chrome/Edge : Support complet depuis la version 125
• Safari : Supporté depuis la version 18
• Firefox : Implémentation en cours

Pour un usage en production, considérez le polyfill Oddbird qui fournit une compatibilité jusqu’à Firefox 54 et Chrome 51. La détection de fonctionnalité est simple :

@supports (anchor-name: --test) {
  /* Styles de positionnement d'ancrage */
}

Conseils d’implémentation pratiques

Lors de l’implémentation du positionnement d’ancrage CSS pour les info-bulles et menus :

1. Réinitialisez toujours le positionnement par défaut pour les éléments popover : inset: auto
2. Utilisez les propriétés logiques pour une meilleure internationalisation
3. Combinez avec l’API Popover pour des interactions complètement sans JavaScript
4. N’oubliez pas l’accessibilité—ajoutez les attributs ARIA appropriés pour maintenir les relations sémantiques

Conclusion

Le positionnement d’ancrage CSS transforme la façon dont nous construisons des éléments d’interface utilisateur flottants. En déplaçant la logique de positionnement de JavaScript vers CSS, nous obtenons de meilleures performances, un code plus propre et une gestion automatique des cas limites. En attendant un support navigateur complet, le polyfill fournit un chemin solide pour un usage en production. Commencez à expérimenter avec les info-bulles et menus déroulants—vous apprécierez rapidement la simplicité de déclarer des relations plutôt que de calculer des positions.

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..