Détecter les positions de secours avec les requêtes de conteneur ancrées à partir de Chrome 143

Una Kravets

Publié le 29 octobre 2025

À partir de Chrome 143, vous pouvez utiliser des requêtes de conteneur ancrées pour identifier quand un élément ancré utilise un positionnement d'ancrage de secours. Cet article explique le problème que cette fonctionnalité résout.

L'API CSS Anchor Positioning offre un moyen puissant d'ancrer un élément (comme un pop-up) à un autre (l'ancrage) et de définir un ensemble de solutions de repli de positionnement à utiliser si l'élément manque d'espace. Par exemple, si votre élément ancré est initialement stylisé pour être en haut, mais qu'il atteint le bord de l'écran lorsque vous faites défiler la page, le navigateur peut gérer l'inversion pour le maintenir dans la fenêtre d'affichage.

Toutefois, le niveau 1 de la spécification de positionnement d'ancrage a laissé une lacune importante : alors que le CSS pouvait déplacer l'élément vers une position de secours, il n'avait aucun moyen de savoir quelle position de secours avait été choisie. Cela signifiait que vous ne pouviez pas appliquer différents styles en fonction de cette position finale. Si votre info-bulle est passée du bas vers le haut, sa flèche pointerait toujours dans la mauvaise direction, à moins que vous ne l'ayez corrigée avec JavaScript.

Les requêtes de conteneur ancrées (définies dans la spécification CSS Anchor Position Level 2) résolvent ce problème en donnant au positionnement des ancres CSS la conscience contextuelle qui lui manquait.

Fonctionnement : interroger les chemins de remplacement

Les requêtes de conteneur ancrées vous permettent d'appliquer des styles en fonction de la façon dont le navigateur a résolu le positionnement de l'ancrage.

Pour cela, deux nouvelles fonctionnalités CSS sont utilisées :

  • container-type: anchored : appliquez cette valeur à l'élément positionné (par exemple, votre info-bulle). Il devient alors un conteneur de requête "conscient " de l'état de positionnement de son ancrage.
  • @container anchored(fallback: ...) : cette nouvelle syntaxe de règle @ vous permet de déterminer quelle option de position-try-fallbacks a finalement été utilisée.

Imaginez que vous ayez un info-bulle que vous souhaitez positionner en bas, mais avec la position en haut comme solution de repli. Le code suivant :

  • Tente d'abord de positionner .tooltip en bas de son ancrage (--my-anchor).
  • Si elle ne tient pas, la solution de remplacement la déplace en haut.
  • La requête @container détecte ce problème. Lorsque le premier fallback est appliqué, la requête anchored(fallback: top) devient "true".
  • Cela vous permet de remplacer le contenu du pseudo-élément ::before par une flèche vers le bas (▼) au lieu d'une flèche vers le haut (▲) et d'ajuster sa position.
/* The element our tooltip is anchored to */
.anchor {
  anchor-name: --my-anchor;
}

/* The positioned element (tooltip) */
.tooltip {
  /* Use anchor positioning to set fallbacks */
  position: absolute;
  margin-top: 1rem;
  position-anchor: --my-anchor;
  position-area: bottom;
  position-try-fallbacks: flip-block; /* Reposition in the block direction */
  
  /* Make it an anchored query container */
  container-type: anchored;

  /* Add a default "up" arrow */
  &::before {
    content: '▲';
    position: absolute;
    bottom: 100%; /* Sits on top of the tooltip, pointing up */
  }
}

/* Use the anchored query to check the fallback */
@container anchored(fallback: flip-block) {
  .tooltip::before {
    /* The 'top' fallback was used, so flip the arrow */
    content: '▼';
    bottom: auto;
    top: 100%; /* Move the arrow below the tooltip */
  }
}

Tout cela est fait entièrement en CSS : pas de JavaScript, pas d'observateurs, pas de classes supplémentaires. Remarque : Si vous utilisez l'API Popover, vous n'avez pas besoin de nommer explicitement vos ancres, car une relation d'ancrage implicite est créée.

Consultez la démo suivante, qui utilise le hack de bordure pour créer un triangle CSS et le repositionne avec des requêtes ancrées :

Conclusion

Les requêtes ancrées permettent au navigateur CSS de connaître la position d'ancrage actuelle d'un élément positionné. Cela signifie que vous pouvez créer des composants beaucoup plus résilients et contextuels. La flèche de l'info-bulle n'est qu'un exemple. Vous pouvez également :

  • Modifiez la couleur d'arrière-plan d'un menu lorsqu'il est inversé.
  • Déplacez un style de bordure vers le bord le plus proche de l'ancrage.
  • Ajustez le border-radius d'un popover pour que l'angle "attaché" soit droit.
  • Animer un élément différemment selon la position de repli à laquelle il s'accroche.

Il s'agit d'un avantage considérable pour le positionnement des ancres et les bibliothèques de composants en général, car il permet de créer des éléments d'interface utilisateur plus robustes et autonomes avec moins de code.

Ressources