Cette page a été traduite par l'API Cloud Translation.

Présentation de l'API de positionnement de l'ancrage CSS

Una Kravets

L'API CSS Anchor Positioning change la donne dans le développement Web, car elle vous permet de positionner des éléments de manière native les uns par rapport aux autres. 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 et bien d'autres. Grâce au positionnement des ancres intégré au navigateur, vous pourrez créer des interfaces utilisateur multicouches sans utiliser de bibliothèques tierces, ce qui vous donnera accès à tout un éventail de possibilités créatives.

Le positionnement de l'ancre est disponible à partir de Chrome 125.

Navigateurs pris en charge

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Source

Concepts fondamentaux: Ancres et éléments positionnés

La relation entre les ancres et les éléments positionnés est au cœur de cette API. 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 en utilisant anchor-name dans sa logique de positionnement.

Éléments d'ancrage et éléments positionnés

Configurer des ancres

La création d'une ancre est simple. Appliquez la propriété du nom de l'ancre à 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 le nom d'ancrage attribué, .anchor-button sert d'ancrage et permet de guider le positionnement d'autres éléments. Vous pouvez connecter cette ancre à d'autres éléments de deux manières:

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 à votre ancre. Le nom de l'ancre (dans ce cas, --anchor-el) est utilisé comme 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 lors de 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, qui peut être utile si vous souhaitez ancrer l'élément à plusieurs éléments (poursuivez la lecture pour voir un exemple).

.positioned-notice {
    top: anchor(--anchor-el bottom);
}

Positionner les éléments par rapport aux ancrages

Diagramme de positionnement de l'ancre avec propriétés physiques.

Le positionnement d'ancrage s'appuie 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);
}

Diagramme de positionnement des bords sur l'élément positionné.

Vous avez maintenant un élément ancré à un autre, comme ceci:

</ph> <ph type="x-smartling-placeholder">

Démonstration d'une ancre de base

Capture d'écran de la démonstration.

Pour utiliser le positionnement logique pour ces valeurs, les équivalents sont les suivants:

top = inset-block-start
left= inset-inline-start
bottom = inset-block-end
right= inset-inline-end

Centrer un élément positionné avec `anchor-center`

Pour faciliter le centre de l'élément positionné par rapport à son ancrage, il existe une nouvelle valeur appelée anchor-center qui 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;
}

</ph> <ph type="x-smartling-placeholder">

Démonstration d'une ancre centrée à l'aide de justify-center

Capture d'écran de la démonstration.

Plusieurs ancres

Des éléments peuvent être partagés avec plusieurs ancres. Cela signifie que vous devrez peut-être définir des valeurs de position positionnées par rapport à plusieurs ancres. Pour ce faire, utilisez la fonction anchor() et indiquez explicitement l'ancre que vous référencez dans le premier argument. Dans l'exemple suivant, le coin supérieur gauche d'un élément positionné est ancré en bas à droite d'une ancre, et le coin 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);
}

</ph> <ph type="x-smartling-placeholder">

Démonstration montrant plusieurs ancres.

Capture d'écran de la démonstration.

Position avec `inset-area`

En plus du positionnement directionnel par défaut à partir du positionnement absolu, l'API d'ancrage inclut un nouveau mécanisme de mise en page appelé "zone d'encart".

La zone d'encart facilite le positionnement des éléments positionnés par rapport à leurs ancrages respectifs. Elle fonctionne sur une grille à 9 cellules avec l'élément d'ancrage au centre.

Diverses options de positionnement d'encart, illustrées sur la grille à 9 cellules

Pour utiliser une zone en encart plutôt qu'un positionnement absolu, utilisez la propriété inset-area avec des valeurs physiques ou logiques. Exemple :

En haut au centre: inset-area: top ou inset-area: block-start
Centrer à gauche: inset-area: left ou inset-area: inline-start
En bas au centre: inset-area: bottom ou inset-area: block-end
Centrer à droite: inset-area: right ou inset-area: inline-end

</ph> <ph type="x-smartling-placeholder">

Démonstration montrant plusieurs ancres.

Capture d'écran de la démonstration.

Pour explorer ces postes plus en détail, utilisez l'outil suivant:

</ph> <ph type="x-smartling-placeholder">

Outil d'ancrage pour les positions de zone en incrustation

Éléments de taille avec `anchor-size()`

La fonction anchor-size(), qui fait également partie de l'API de positionnement d'ancrage, 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 de bloc).

Le code CSS suivant montre un exemple d'utilisation pour la hauteur,en utilisant 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);
}

</ph> <ph type="x-smartling-placeholder">

Démonstration pour anchor-size

Capture d'écran de la démonstration.

Le positionnement de l'ancrage fonctionne très bien avec des éléments de couche supérieure tels que popover. et <dialog>. Bien que ces éléments soient placés dans une couche distincte du reste de la sous-arborescence DOM, le positionnement de l'ancrage vous permet de les partager à nouveau et de faire défiler les éléments qui ne figurent pas dans la couche supérieure. C'est un avantage considérable pour les interfaces multicouches.

Dans l'exemple suivant, un ensemble de pop-overs d'info-bulle sont ouverts à l'aide d'un bouton. Le bouton correspond à l'ancre et l'info-bulle à 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 doit avoir un nom unique, l'intégration est la méthode la plus simple lorsque vous générez du contenu dynamique.

</ph> <ph type="x-smartling-placeholder">

Démonstration de l'utilisation d'une ancre avec popover

Capture d'écran de la démonstration

Ajuster la position des ancres avec `@position-try`

Une fois que vous avez défini la position initiale de l'ancre, vous pouvez la modifier si elle atteint les bords du volume qui la contient. Pour créer d'autres positions d'ancrage, vous pouvez utiliser la directive @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 sous-menus sont une excellente utilisation de l'API de positionnement de l'ancre, ainsi que de l'attribut de fenêtre contextuelle, car ces menus ont tendance à être ancrés à un bouton de déclenchement.

Pour ce sous-menu, si l'espace horizontal est insuffisant, vous pouvez le déplacer sous le menu à la place. Pour ce faire, commencez par configurer la position initiale:

#submenu {
  position: absolute;
  position-anchor: --submenu;

  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
}

Ensuite, configurez vos positions ancrées 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 avec position-try-options. L'ensemble se présente comme suit:

#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;
}

</ph> <ph type="x-smartling-placeholder">

Démonstration de l'utilisation d'une ancre avec popover

Mots clés de retournement automatique de position d'ancrage

Si vous avez un ajustement de base, tel qu'une rotation 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 d'inversement intégrés pris en charge par le navigateur, comme flip-block et flip-inline. Ils remplacent les déclarations @position-try personnalisées et peuvent être utilisés les uns avec les autres:

position-try-options: flip-block, flip-inline, flip-block flip-inline;

Inverser les mots clés peut considérablement simplifier votre code d'ancrage. En seulement quelques lignes, vous pouvez créer un point d'ancrage entièrement fonctionnel avec d'autres positions:

#my-tooltip {
  position-anchor: --question-mark;
  inset-area: top;
  position-try-options: flip-block;
}

</ph> <ph type="x-smartling-placeholder">

Utiliser le retournement automatique avec position-try-options: flip-block

`position-visibility` pour les ancres dans les sous-défileurs

Dans certains cas, vous souhaiterez peut-être ancrer un élément dans un sous-défileur 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 dans le champ de vision ? Quand disparaît-il ? 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);
}

</ph> <ph type="x-smartling-placeholder">

Démo position-visibility: anchors-visible

Vous 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);
}

</ph> <ph type="x-smartling-placeholder">

Démo position-visibility: no-overflow

Détection de caractéristiques et polyfilling

La prise en charge des navigateurs étant limitée pour le moment, vous souhaiterez probablement utiliser cette API en prenant quelques précautions. Tout d'abord, vous pouvez vérifier la compatibilité directement dans CSS à l'aide de la requête de fonctionnalité @supports. Pour ce faire, procédez comme suit:

@supports (anchor-name: --myanchor) {

  /* Anchor styles here */

}

De plus, vous pouvez émuler la fonctionnalité de positionnement de l'ancre à l'aide du polyfill de positionnement des ancres CSS d'Oddbird, qui fonctionne avec Firefox 54, Chrome 51, Edge 79 et Safari 10. Ce polyfill est compatible avec la plupart des fonctionnalités de base de position d'ancrage, même si l'implémentation actuelle n'est pas complète et contient une syntaxe obsolète. Vous pouvez utiliser le lien unpkg ou l'importer directement dans un gestionnaire de paquets.

Remarque sur l'accessibilité

Bien que l'API de positionnement d'ancre permette de positionner un élément par rapport à d'autres, elle ne crée pas intrinsèquement de relation sémantique significative entre ces éléments. S'il existe une relation sémantique entre l'élément d'ancrage et l'élément positionné (par exemple, l'élément positionné est un commentaire dans la barre latérale concernant le texte d'ancrage), vous pouvez utiliser aria-details pour pointer de l'élément d'ancrage vers les éléments positionnés. Le logiciel de lecteur d'écran apprend encore à gérer les détails aria, mais la prise en charge 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'ancre avec l'attribut popover ou un élément <dialog>, le navigateur gère les corrections de navigation du focus pour une accessibilité correcte. Vous n'avez donc pas besoin d'organiser vos pop-ups 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 créer avec elle. Jusqu'à présent, nous avons vu des cas d'utilisation vraiment intéressants dans la communauté, comme les libellés dynamiques dans les graphiques, les lignes de connexion, les notes de bas de page et les références visuelles. Pendant que vous testez le positionnement de l'ancre, n'hésitez pas à nous faire part de vos commentaires. Si vous rencontrez des bugs, n'hésitez pas à nous contacter.

Présentation de l'API de positionnement de l'ancrage CSS

Concepts fondamentaux: Ancres et éléments positionnés

Configurer des ancres

Ancres implicites

Ancres explicites

Positionner les éléments par rapport aux ancrages

Centrer un élément positionné avec `anchor-center`

Plusieurs ancres

Position avec `inset-area`

Éléments de taille avec `anchor-size()`

Utilisez une ancre avec des éléments de couche supérieure tels que le pop-up et la boîte de dialogue

Ajuster la position des ancres avec `@position-try`

Mots clés de retournement automatique de position d'ancrage

`position-visibility` pour les ancres dans les sous-défileurs

Détection de caractéristiques et polyfilling

Remarque sur l'accessibilité

Conclusion

Documentation complémentaire

Présentation de l'API de positionnement de l'ancrage CSS

Concepts fondamentaux: Ancres et éléments positionnés

Configurer des ancres

Ancres implicites

Ancres explicites

Positionner les éléments par rapport aux ancrages

Centrer un élément positionné avec anchor-center

Plusieurs ancres

Position avec inset-area

Éléments de taille avec anchor-size()

Utilisez une ancre avec des éléments de couche supérieure tels que le pop-up et la boîte de dialogue

Ajuster la position des ancres avec @position-try

Mots clés de retournement automatique de position d'ancrage

position-visibility pour les ancres dans les sous-défileurs

Détection de caractéristiques et polyfilling

Remarque sur l'accessibilité

Conclusion

Documentation complémentaire

Centrer un élément positionné avec `anchor-center`

Position avec `inset-area`

Éléments de taille avec `anchor-size()`

Ajuster la position des ancres avec `@position-try`

`position-visibility` pour les ancres dans les sous-défileurs