L'API CSS Anchor Positioning change la donne dans le développement Web, car elle permet de positionner des éléments de manière native par rapport à d'autres éléments. C'est ce que l'on appelle des ancres. Cette API simplifie les exigences de mise en page complexes pour de nombreuses fonctionnalités d'interface telles que les menus et sous-menus, les info-bulles, les sélections, les libellés, les cartes, les boîtes de dialogue de paramètres, etc. Grâce au positionnement de l'ancrage intégré au navigateur, vous pouvez créer des interfaces utilisateur multicouches sans avoir recours à des bibliothèques tierces, ce qui ouvre un monde de possibilités créatives.
Le positionnement de l'ancrage est disponible à partir de Chrome 125.
Concepts fondamentaux: ancrages et éléments positionnés
Au cœur de cette API se trouve la relation entre les ancres et les éléments positionnés. Une ancre est un élément désigné comme point de référence à l'aide de la propriété anchor-name. Un élément positionné est un élément placé par rapport à une ancre à l'aide de la propriété position-anchor ou explicitement utilisant anchor-name dans sa logique de positionnement.
Configurer des ancres
La création d'une ancre est simple. Appliquez la propriété "anchor-name" à l'élément sélectionné et attribuez-lui un identifiant unique. Cet identifiant unique doit être précédé d'un double tiret, comme pour une variable CSS.
.anchor-button {
anchor-name: --anchor-el;
}
Une fois que vous lui avez attribué un nom d'ancre, .anchor-button sert d'ancre et est prêt à positionner les autres éléments. Vous pouvez connecter cette ancre à d'autres éléments de l'une des deux manières suivantes:
Ancres implicites
La première façon de connecter une ancre à un autre élément consiste à utiliser une ancre implicite, comme dans l'exemple de code suivant. La propriété position-anchor est ajoutée à l'élément que vous souhaitez connecter à l'ancre, et son nom (dans ce cas, --anchor-el) est une valeur.
.positioned-notice {
position-anchor: --anchor-el;
}
Avec une relation d'ancrage implicite, vous pouvez positionner des éléments à l'aide de la fonction anchor() sans spécifier explicitement le nom de l'ancre dans son premier argument.
.positioned-notice {
position-anchor: --anchor-el;
top: anchor(bottom);
}
Ancres explicites
Vous pouvez également utiliser le nom de l'ancre directement dans la fonction d'ancrage (par exemple, top: anchor(--anchor-el bottom). C'est ce qu'on appelle une ancre explicite et peut être pratique si vous souhaitez ancrer plusieurs éléments (poursuivez votre lecture pour un exemple).
.positioned-notice {
top: anchor(--anchor-el bottom);
}
Positionner les éléments par rapport aux ancrages
Le positionnement d'ancrage repose sur le positionnement absolu CSS. Pour utiliser des valeurs de positionnement, vous devez ajouter position: absolute à votre élément positionné. Ensuite, utilisez la fonction anchor() pour appliquer des valeurs de positionnement. Par exemple, pour positionner un élément ancré en haut à gauche de l'élément d'ancrage, utilisez le positionnement suivant:
.positioned-notice {
position-anchor: --anchor-el;
/* absolutely position the positioned element */
position: absolute;
/* position the right of the positioned element at the right edge of the anchor */
right: anchor(right);
/* position the bottom of the positioned element at the top edge of the anchor */
bottom: anchor(top);
}
Vous avez maintenant un élément ancré à un autre, comme ceci:
Pour utiliser le positionnement logique de ces valeurs, les équivalents sont les suivants:
top=inset-block-startleft=inset-inline-startbottom=inset-block-endright=inset-inline-end
Centrer un élément positionné avec anchor-center
Pour faciliter le centrer l'élément positionné par rapport à l'ancre, une nouvelle valeur appelée anchor-center peut être utilisée avec les propriétés justify-self, align-self, justify-items et align-items.
Cet exemple modifie le précédent en utilisant justify-self: anchor-center pour centrer l'élément positionné au-dessus de son ancrage.
.positioned-notice {
position: absolute;
/* Anchor reference */
position-anchor: --anchor-el;
/* Position bottom of positioned elem at top of anchor */
bottom: anchor(top);
/* Center justification to the anchor */
justify-self: anchor-center;
}
justify-center.
Plusieurs ancres
Les éléments peuvent être partagés avec plusieurs points d'ancrage. Cela signifie que vous devrez peut-être définir des valeurs de position positionnées par rapport à plusieurs points d'ancrage. Pour ce faire, utilisez la fonction anchor() et indiquez explicitement l'ancre à laquelle vous faites référence dans le premier argument. Dans l'exemple suivant, l'angle supérieur gauche d'un élément positionné est ancré en bas à droite d'une ancre, tandis que l'angle inférieur droit de l'élément positionné est ancré en haut à gauche de la deuxième ancre:
.anchored {
position: absolute;
top: anchor(--one bottom);
left: anchor(--one right);
right: anchor(--two left);
bottom: anchor(--two top);
}
Position avec inset-area
En plus du positionnement directionnel par défaut issu du positionnement absolu, il existe un nouveau mécanisme de mise en page inclus dans l'API d'ancrage, appelé zone d'encart.
La zone d'encart facilite le positionnement des éléments positionnés par rapport à leurs ancrages respectifs et fonctionne sur une grille à neuf cellules avec l'élément d'ancrage au centre.
Grille à neuf cellules qui affiche les différentes options de positionnement de la zone d'encart.
Pour utiliser la zone d'encart plutôt que le positionnement absolu, utilisez la propriété inset-area avec des valeurs physiques ou logiques. Exemple :
- En haut au centre:
inset-area: topouinset-area: block-start - Centrer à gauche:
inset-area: leftouinset-area: inline-start - En bas au centre:
inset-area: bottomouinset-area: block-end - Centrer à droite:
inset-area: rightouinset-area: inline-end
Pour explorer ces postes plus en détail, utilisez l’outil suivant:
Dimensionner les éléments avec anchor-size()
La fonction anchor-size(), qui fait également partie de l'API de positionnement de l'ancre, peut être utilisée pour dimensionner ou positionner un élément positionné selon la taille de son ancrage (largeur, hauteur, ou tailles intégrées et blocs).
Le code CSS suivant montre un exemple d'utilisation de anchor-size(height) dans une fonction calc() pour définir la hauteur maximale de l'info-bulle sur deux fois la hauteur de l'ancre.
.positioned-notice {
position-anchor: --question-mark;
/* set max height of the tooltip to 2x height of the anchor */
max-height: calc(anchor-size(height) * 2);
}
anchor-size
Utiliser l'ancrage avec des éléments de la couche supérieure comme le pop-up et la boîte de dialogue
Le positionnement de l'ancrage fonctionne particulièrement bien avec les éléments de la couche supérieure tels que popover. et <dialog>. Bien que ces éléments soient placés dans un calque distinct du reste de la sous-arborescence DOM, le positionnement de l'ancrage vous permet de les relier et de faire défiler l'écran avec les éléments qui ne se trouvent pas dans la couche supérieure. C'est une grande victoire pour les interfaces multicouches.
Dans l'exemple suivant, un ensemble de fenêtres contextuelles d'info-bulle est ouvert à l'aide d'un bouton. Le bouton est l'ancre et l'info-bulle correspond à l'élément positionné. Vous pouvez styliser l'élément positionné comme n'importe quel autre élément ancré. Pour cet exemple spécifique, anchor-name et position-anchor sont des styles intégrés sur le bouton et l'info-bulle. Étant donné que chaque ancre nécessite un nom unique, l'intégration est la méthode la plus simple pour générer du contenu dynamique.
popover
Ajuster la position de l'ancrage avec @position-try
Une fois que vous avez défini la position de l'ancre, vous pouvez l'ajuster si elle atteint les bords du volume qui la contient. Pour créer d'autres positions d'ancrage, vous pouvez utiliser l'instruction @position-try avec la propriété position-try-options.
Dans l'exemple suivant, un sous-menu apparaît à droite d'un menu. Les menus et les sous-menus constituent un excellent moyen d'utiliser l'API de positionnement d'ancrage conjointement à l'attribut de pop-over, car ces menus ont tendance à être ancrés à un bouton de déclencheur.
Pour ce sous-menu, si l'espace horizontal est insuffisant, vous pouvez le déplacer sous le menu. Pour ce faire, commencez par définir la position initiale:
#submenu {
position: absolute;
position-anchor: --submenu;
/* initial position */
margin-left: var(--padding);
inset-area: right span-bottom;
}
Configurez ensuite les positions d'ancrage de remplacement à l'aide de @position-try:
/* alternate position */
@position-try --bottom {
margin: var(--padding) 0 0 var(--padding);
inset-area: bottom;
}
Enfin, connectez les deux à position-try-options. L'ensemble ressemble à ceci:
#submenu {
position: absolute;
position-anchor: --submenu;
/* initial position */
margin-left: var(--padding);
inset-area: right span-bottom;
*/ connect with position-try options */
position-try-options: --bottom;
}
/* alternate position */
@position-try --bottom {
margin: var(--padding) 0 0 var(--padding);
inset-area: bottom;
}
popoverMots clés d'ancrage de position d'ancrage et de retournement automatique
Si vous disposez d'un ajustement de base, comme basculer de haut en bas ou de gauche à droite (ou les deux), vous pouvez même ignorer l'étape de création de déclarations @position-try personnalisées et utiliser les mots clés intégrés compatibles avec le navigateur, comme flip-block et flip-inline. Ils servent de remplacements pour les déclarations @position-try personnalisées et peuvent être utilisés conjointement:
position-try-options: flip-block, flip-inline, flip-block flip-inline;
Inverser les mots clés peut considérablement simplifier votre code d'ancrage. Avec seulement quelques lignes, vous pouvez créer une ancre entièrement fonctionnelle avec d'autres positions:
#my-tooltip {
position-anchor: --question-mark;
inset-area: top;
position-try-options: flip-block;
}
position-try-options: flip-blockposition-visibility pour les ancrages dans les sous-défileurs
Dans certains cas, vous pouvez ancrer un élément dans un conteneur de sous-défilement de la page. Dans ce cas, vous pouvez contrôler la visibilité de l'ancre à l'aide de position-visibility. Quand l'ancre reste-t-elle visible ? Quand disparaît-elle ? Cette fonctionnalité vous permet de contrôler ces options. Utilisez position-visibility: anchors-visible lorsque vous souhaitez que l'élément positionné reste visible jusqu'à ce que l'ancre soit hors du champ:
#tooltip {
position: fixed;
position-anchor: --anchor-top-anchor;
position-visibility: anchors-visible;
bottom: anchor(top);
}
position-visibility: anchors-visibleVous pouvez également utiliser position-visibility: no-overflow pour empêcher l'ancre de dépasser son conteneur.
#tooltip {
position: absolute;
position-anchor: --anchor-top-anchor;
position-visibility: no-overflow;
bottom: anchor(top);
}
position-visibility: no-overflowDétection de caractéristiques et polyfilling
Les navigateurs pris en charge étant limités pour le moment, vous souhaiterez probablement utiliser cette API avec quelques précautions. Tout d'abord, vous pouvez rechercher de l'aide directement dans CSS à l'aide de la requête de fonctionnalité @supports. Pour ce faire, encapsulez vos styles d'ancrage comme suit:
@supports (anchor-name: --myanchor) {
/* Anchor styles here */
}
De plus, vous pouvez émuler la fonctionnalité de positionnement d'ancrage avec le polyfill de positionnement d'ancrage CSS d'Oddbird, qui fonctionne à partir de Firefox 54, Chrome 51, Edge 79 et Safari 10. Ce polyfill est compatible avec la plupart des fonctionnalités de base de la position d'ancrage, bien que l'implémentation actuelle ne soit pas complète et contienne une syntaxe obsolète. Vous pouvez utiliser le lien unpkg ou l'importer directement dans un gestionnaire de packages.
Remarque sur l'accessibilité
Bien que l'API de positionnement d'ancrage permette de positionner un élément par rapport aux autres, elle ne crée pas intrinsèquement de relation sémantique significative entre eux. S'il existe en réalité une relation sémantique entre l'élément d'ancrage et l'élément positionné (par exemple, l'élément positionné est un commentaire de la barre latérale sur le texte d'ancrage), vous pouvez utiliser aria-details pour pointer de l'élément d'ancrage vers le ou les éléments positionnés. Les logiciels de lecture d'écran apprennent encore à gérer les détails aria, mais leur compatibilité s'améliore.
<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>
.anchor {
anchor-name: --anchor;
}
.positioned {
position: fixed;
position-anchor: --anchor;
}
Si vous utilisez le positionnement de l'ancrage avec l'attribut popover ou un élément <dialog>, le navigateur gère les corrections de navigation de sélection pour une accessibilité appropriée. Vous n'avez donc pas besoin d'organiser vos fenêtres pop-up ou boîtes de dialogue dans l'ordre DOM. Pour en savoir plus, consultez la remarque sur l'accessibilité dans la spécification.
Conclusion
Il s'agit d'une toute nouvelle fonctionnalité, et nous avons hâte de découvrir ce que vous allez développer. Jusqu'à présent, nous avons vu des cas d'utilisation particulièrement intéressants, tels que les libellés dynamiques dans les graphiques, les lignes de connexion, les notes de bas de page et les recoupements visuels. Pendant que vous testez le positionnement des ancrages, n'hésitez pas à nous faire part de vos commentaires. N'hésitez pas à nous contacter si vous rencontrez des bugs.