Encore une autre ancre positionnement bizarrerie

Positionnement de l'ancrage CSS: une caractéristique surprenante, mais il y a des problèmes délicats. Bien qu'il ne change pas la donne comme Flexbox ou Grid, il comble l'écart dans le positionnement du CSS pendant des décennies. Cependant, il a également des caractéristiques uniques qui conduisent à un comportement déroutant. Cet article explorera un problème de positionnement d'ancrage qui m'a troublé depuis longtemps.

Origin

J'ai découvert ce problème il y a un mois en lisant le cas de quelqu'un d'autre de positionnement de l'ancrage, en particulier l'article de Temani Afif sur "le positionnement de l'ancrage et l'animation axée sur le défilement". Nous recommandons fortement de lire cet article pour voir ce qui a attiré mon attention. Il combine intelligemment le positionnement de l'ancrage et les animations pilotées par défilement pour créer un curseur de plage qui change également la couleur à mesure que le progrès change.

Ce qui est encore plus étonnant, c'est qu'il utilise deux éléments cibles avec le même nom d'ancrage, chaque élément attaché à son point d'ancrage correspondant, comme la magie. Si cela ne semble pas intéressant, nous devons passer brièvement comment fonctionne le positionnement de l'ancrage.

CSS Position d'ancrage et attribut d'ancrage-scope

Veuillez vous référer à notre guide complet de positionnement de l'ancrage CSS pour une compréhension plus approfondie.

Le positionnement de l'ancrage apporte deux nouveaux concepts à l'élément CSS: Anchor Point et Target . Une ancre est un élément de référence utilisé pour localiser d'autres éléments. L'élément cible est un élément qui est absolument positionné par rapport à un ou plusieurs points d'ancrage.

Les ancres et les cibles peuvent être presque n'importe quel élément, vous pouvez les considérer comme deux divs placés côte à côte:

<code><div>anchor</div>
<div>target</div></code>

Tout d'abord, nous devons enregistrer l'élément d'ancrage dans CSS en utilisant l'attribut anchor-name:

<code>.anchor {
  anchor-name: --my-anchor;
}</code>

Ensuite, utilisez l'attribut position-anchor sur l'élément absolument positionné pour le fixer à un point d'ancrage avec le même nom. Cependant, pour déplacer la cible autour du point d'ancrage, nous avons besoin de l'attribut position-area.

<code>.target {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: top right;
}</code>

Cela fonctionne bien, mais si nous changeons le marqueur pour inclure plus d'ancres et de cibles, la situation devient compliquée:

<code></code>

• ancre 1
  cible 1
• ancre 2
  cible 2
• ancre 3
  cible 3

L'élément cible n'est pas attaché à son point d'ancrage le plus proche, mais est tout empilé sur le dernier point d'ancrage enregistré dans le DOM.

L'attribut

anchor-scope a été introduit dans Chrome 131 pour résoudre ce problème. Il limite la portée de l'ancrage pointe vers les sous-arbres afin que chaque cible soit correctement attachée. Cependant, je ne veux pas prêter attention à cette propriété, car ce qui a attiré mon attention au départ, c'est que temani ne l'utilisait pas . Pour une raison quelconque, toutes les cibles sont attachées correctement, encore une fois comme la magie.

Que s'est-il passé?

La cible

est généralement attachée à la dernière ancre du DOM, pas son ancre la plus proche, mais dans notre premier exemple, nous voyons deux ancres avec le même anchor-name et leurs cibles supplémentaires correspondantes. Tout cela n'utilise pas l'attribut anchor-scope. ce qui s'est passé?

Deux mots: contient un bloc .

Il convient de noter sur le positionnement de l'ancrage qu'il dépend dans une large mesure de la façon dont les éléments contiennent des blocs. Ce n'est pas une caractéristique inhérente du positionnement de l'ancrage lui-même, mais une caractéristique de positionnement absolu. Un élément absolument positionné est positionné par rapport à son bloc de confinement, tandis que les attributs de marge comme top: 0px, left: 30px ou inset: 1rem déplacent simplement des éléments autour de la limite du bloc contenant, créant le bloc d'inclusion soi-disant modifié .

La cible attachée à l'ancre n'est pas différente. position-area

Habituellement, le bloc contenant d'un élément de positionnement absolu est la fenêtre entière, mais peut être modifié par n'importe quel attribut de position qui n'est pas un élément ancêtre de

(généralement static). Temani profite de ce fait pour créer un nouveau bloc d'inclusion pour chaque curseur afin qu'ils ne puissent être attachés qu'à leurs points d'ancrage correspondants. Si vous regardez le code, vous pouvez le trouver au début: relative

<code><div>anchor</div>
<div>target</div></code>

Si nous utilisons cette stratégie dans l'exemple précédent, ils seront soudainement attachés correctement!

une autre question

Au lieu d'utiliser l'attribut

pour attacher chaque ancre à sa cible respective, nous profitons de la façon de calculer le bloc contenant des éléments absolus. Cependant, il existe un autre moyen, sans aucun code supplémentaire requis. anchor-scope

J'ai découvert cela lorsque j'ai expérimenté l'animation de la conduite en défilement et le positionnement de l'ancrage en même temps et j'ai essayé de fixer une note de bas de page de bulle de texte sur le côté du poteau, comme ainsi:

Logiquement, chaque note de bas de page est un objectif, mais le choix des points d'ancrage est un peu délicat. J'ai d'abord pensé que chaque paragraphe pouvait être utilisé comme ancre, mais cela signifie qu'il y aura plusieurs ancres avec le même

. Résultat: toutes les cibles seront empilées sur la dernière ancre: anchor-name

Cela peut être résolu par notre méthode précédente pour créer un nouveau bloc contenant pour chaque commentaire. Cependant, nous pouvons adopter une autre approche, que j'appelle l'approche réductionniste. Le problème se pose lorsqu'il y a plusieurs ancres avec le même

, nous réduisons donc le nombre d'ancres à un, en utilisant un élément qui peut être une ancre courante pour toutes les cibles. anchor-name

Dans ce cas, nous voulons positionner chaque cible uniquement des deux côtés du poteau, nous pouvons donc utiliser le corps entier du poteau comme ancre, et comme chaque cible est naturellement alignée sur l'axe vertical, il ne reste plus que de les déplacer le long de l'axe horizontal:

Vous pouvez mieux vérifier comment le message d'origine a été fait!

Conclusion

anchor-scope Probablement une propriété CSS récemment publiée au navigateur (jusqu'à présent, uniquement dans Chrome 131), nous ne pouvons donc pas nous attendre à ce que son soutien dépasse les attentes. Bien que j'aimerais l'utiliser à tout moment, n'importe où, il restera limité aux démos courtes pendant un certain temps. Ce n'est pas une raison de limiter l'utilisation d'autres propriétés de positionnement d'ancrage, qui sont soutenues dans Chrome 125 et plus tard (et espérons-le dans d'autres navigateurs dans un avenir proche), donc j'espère que ces problèmes mineurs pourront vous aider à continuer à utiliser le positionnement de l'ancrage sans aucun souci.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!