Anchor CSS : limites du layout et des overlays

BotBrowser peut rejouer un fixture d’anchor positioning CSS autorisé dans un profil déclaré, mais il ne peut pas ajouter anchor-name, position-anchor ou position-try à un moteur qui ne les implémente pas. La question utile est de savoir si l’overlay reste attaché à son ancre, choisit un repli déclaré et reste lisible lorsqu’un ancêtre découpe ou fait défiler le contenu. C’est un contrat de layout et d’overflow, distinct du focus et de la fermeture décrits dans Popover API : focus et accessibilité.

TL;DR

• Donnez un anchor-name stable à la cible, puis rattachez le sujet positionné avec position-anchor.
• Placez les alternatives dans position-try; le navigateur les évalue lorsque la position préférée déborde son containing block.
• Considérez position-try-order et position-try-fallbacks comme une liste bornée, pas comme une promesse de tenir dans chaque fenêtre.
• Testez séparément un conteneur défilant et un clip d’overflow : la zone disponible peut changer.
• Conservez les styles calculés, le repli choisi et une capture pour chaque bord ; la présence d’une propriété ne prouve pas une position lisible.

Sommaire

• Le modèle d’ancre
• Un fixture d’overlay minimal
• Les replis forment un algorithme de sélection
• Overflow et conteneurs défilants
• Une matrice de limites reproductible
• Limite de capacité de BotBrowser
• Conclusion

Le modèle d’ancre

Anchor positioning relie deux boîtes. L’ancre publie un nom dans l’arbre de layout et le sujet positionné le référence. anchor() lit un bord ou une dimension de l’ancre, tandis que position-area peut choisir une zone logique autour d’elle. La spécification CSSWG décrit le modèle et son algorithme de repli ; la compatibilité reste une question d’implémentation, donc gardez une alternative de positionnement classique.

Déclaration	Rôle	Vérification
anchor-name: --trigger	Publie une ancre nommée	Le nom est sur l’élément qui bouge ou change de taille
position-anchor: --trigger	Choisit l’ancre du sujet	L’identifiant est résolu par le sujet
position-try: --below, --above	Liste des alternatives nommées	Le navigateur peut choisir une option viable

Une classe qui ne définit que position-anchor ne fait rien si le anchor-name est sur un frère hors du containing block. Le nom ne crée pas non plus de stacking context ni de relation de focus. Gardez ces décisions explicites et utilisez le guide des propriétés écran et viewport pour une mesure du visual viewport.

Un fixture d’overlay minimal

Commencez par une alternative positionnée ordinaire. Le bouton reste utilisable lorsque la fonction manque, et une largeur fixe évite qu’un texte long ne modifie la mesure pendant l’inspection.

<div class="toolbar">
  <button id="help" class="trigger">Help</button>
  <div class="tip" role="tooltip">Keyboard shortcuts</div>
</div>

.toolbar {
  position: relative;
}
.trigger {
  anchor-name: --help-trigger;
}
.tip {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  inline-size: 14rem;
  max-inline-size: min(14rem, 90vw);
  position-anchor: --help-trigger;
  position-try: --above, --inline-end;
}
@position-try --above {
  inset-block-end: anchor(top);
  inset-block-start: auto;
}
@position-try --inline-end {
  inset-block-start: anchor(top);
  inset-inline-start: anchor(right);
  inset-inline-end: auto;
}

Les insets de repli restent du CSS classique : un moteur ancien place donc l’infobulle sous la barre. Dans un moteur compatible, position-anchor rend les valeurs relatives actives. Les blocs @position-try sont des candidats évalués par l’agent utilisateur, pas des callbacks JavaScript. Consultez la référence anchor-name de MDN pour la syntaxe et la compatibilité.

Utilisez un fixture local avec inline-size fixe, outline visible et texte court. Capturez getComputedStyle(tip).positionAnchor ainsi que getBoundingClientRect() des deux boîtes une fois les polices chargées.

Les replis forment un algorithme de sélection

La position préférée vient des déclarations normales. Le navigateur vérifie si le rectangle tient dans le containing block modifié par les insets. Sinon il évalue les alternatives de position-try ou position-try-fallbacks. Chaque candidat peut changer les insets, l’alignement ou la taille, mais pas le sens du composant.

Gardez les candidats ciblés : --above déplace seulement vers le haut et --inline-end seulement vers le côté. La capture devient alors explicable. L’article Chrome sur l’Anchor Positioning API présente ce modèle et position-try-order, qui peut préférer l’option offrant le plus de place.

L’ordre est observable. Avec position-try-order: most-width, une option latérale peut gagner même si --above est écrit en premier. Si l’ordre de lecture est important, déclarez-le et testez-le. Conservez viewport, rectangles et repli dans un petit artefact JSON :

{
  "viewport": "390x844",
  "anchor": { "top": 734, "bottom": 770, "left": 16, "right": 104 },
  "subject": { "top": 610, "bottom": 704, "left": 16, "right": 240 },
  "selected": "--above",
  "overflow": { "blockEnd": 0, "inlineEnd": 0 }
}

Ces nombres illustrent un résultat vérifiable, pas un seuil universel. Gardez des relations attendues comme subject.bottom <= anchor.top pour --above; une propriété présente dans computed style ne suffit pas si le sujet est découpé ou recouvre le déclencheur.

Overflow et conteneurs défilants

Un conteneur défilant et un clip d’overflow posent deux questions différentes. Le premier change les pixels visibles pendant le défilement ; le second limite ce qui peut être peint hors de la padding box. Séparez-les :

.scroll-frame {
  block-size: 12rem;
  overflow: auto;
  border: 1px solid currentColor;
}
.clip-frame {
  overflow: clip;
  contain: paint;
}

Placez l’ancre près du bas de .scroll-frame, faites défiler jusqu’au bord et ouvrez l’overlay. Notez si le sujet suit l’ancre et si le frame le découpe. Répétez dans .clip-frame. Un rectangle peut tenir dans le viewport tout en étant invisible à cause d’un ancêtre ; capture et journal géométrique sont donc complémentaires.

Les transforms, contain: layout et les ancêtres positionnés imbriqués ajoutent des containing blocks. Changez un seul ancêtre à la fois. Si le sujet saute vers le viewport, inspectez l’élément qui établit le containing block avant de modifier les offsets. Un z-index élevé ne traverse jamais un clip.

Une matrice de limites reproductible

Exécutez la même page avec un profil neuf par ligne et conservez build, zoom, chargement des polices et device scale factor.

Ligne	Changement	Observation attendue	Interprétation
A	Ancre centrée, viewport ample	La position préférée reste visible	Relation de référence
B	Ancre au bord du bloc	--above ou une autre option est choisie	Évaluation du repli
C	Ancre dans un wrapper défilant	Le sujet suit après le scroll	Contenance du défilement
D	Ancêtre avec overflow: clip	Le rectangle existe, les pixels peuvent être découpés	Limite de peinture
E	Moteur sans la fonction	L’alternative absolue apparaît	Chemin de compatibilité

Conservez version, viewport, échelle, offsets de scroll, positionAnchor calculé et les deux rectangles. Un rapport utile dit « ligne D découpée par .clip-frame », pas « anchor positioning est cassé ». Si E diffère, gardez l’alternative lisible et reliez l’écart à la table de compatibilité.

Limite de capacité de BotBrowser

BotBrowser peut conserver profil, viewport, zoom et politique de lancement pour un fixture autorisé, rejouer la matrice et garder une géométrie et des captures expurgées. Il ne peut pas ajouter une fonction CSS absente, traverser le clip d’un ancêtre ni garantir le même repli sur toutes les versions. Le résultat décrit un moteur, un build, un profil et un viewport précis.

N’utilisez pas la position anchor comme score d’identité. Redimensionnement, zoom, polices ou réglages d’accessibilité peuvent choisir un autre candidat. Pour une méthode de compatibilité plus large, consultez les tests de plateforme web pour la confiance dans les fonctionnalités.

FAQ

position-anchor remplace-t-il le positionnement JavaScript ?

Il peut remplacer la boucle de mesures et d’écritures de styles pour les relations exprimables en CSS. JavaScript peut rester nécessaire pour l’état, le focus ou une politique de collision propre. Conservez l’alternative pour les moteurs sans support.

Pourquoi un repli tient-il dans le viewport mais reste-t-il invisible ?

Un ancêtre peut créer une padding box de clipping avec overflow: clip, contain: paint ou une scroll viewport. Le rectangle est valide, mais ses pixels ne peuvent pas sortir de l’ancêtre. Inspectez la chaîne avant de changer z-index.

Un repli garantit-il que l’overlay ne recouvre jamais l’ancre ?

Non. La sélection est limitée par le containing block et les candidats déclarés. Une petite fenêtre, un texte agrandi ou une traduction longue peut supprimer toute option complète. Prévoyez une taille maximale lisible et une fermeture explicite.

Conclusion

Anchor positioning est une relation CSS et une liste bornée de replis. Nommez l’élément mobile, référencez-le avec position-anchor, déclarez des candidats courts avec position-try, puis testez un bord, un conteneur défilant et un clip. Conservez rectangles et captures pour distinguer sélection et découpage. BotBrowser peut rejouer cette observation contrôlée ; il ne transforme pas une limite du navigateur en garantie.

Sources publiques

• CSS Anchor Positioning Module Level 1 (CSSWG)
• MDN : anchor-name
• MDN : position-anchor
• MDN : position-try
• Chrome for Developers : Anchor Positioning API