Une de ces interfaces utilisateurs 'intégrés', avec positionnement d'ancrage

Plongez dans le monde fascinant du positionnement de l'ancrage CSS! Ce tutoriel explore cette fonctionnalité CSS innovante, en utilisant le "Guide de positionnement d'ancrage" de Juan Diego Rodriguez (disponible sur CSS-Tricks) comme référence.

Il s'agit d'un développement passionnant. Beaucoup se souviendront de l'impact du "Guide de mise en page Flexbox" de CSS-Tricks et du "Guide de mise en page" - des ressources inestimables que j'utilise toujours régulièrement! Je jongle souvent sur plusieurs onglets pour assurer une syntaxe correcte dans mes expériences de codepen.

Depuis le guide de Juan, j'ai expérimenté le positionnement de l'ancrage CSS, et je suis impatient de partager mes résultats, d'apprendre plus, d'expérimenter plus loin et, bien sûr, construire des choses!

Présentation du positionnement de l'ancrage CSS

Le positionnement de l'ancrage nous permet de nous connecter - ou "ancre" - un élément à un ou plusieurs autres. Surtout, il définit comment un élément "cible" (l'élément attaché à une ancre) est positionné par rapport à l'ancre, y compris positionnement de secours via le @position-try at-rule.

En termes simples, le positionnement de l'ancrage améliore considérablement position: absolute;, en aidant les éléments absolument positionnés se comporter de manière prévisible. Nous explorerons cela en détail.

Actuellement une spécification de projet W3C, le positionnement de l'ancrage est relativement nouveau. Il est marqué "Disponibilité limitée" dans la ligne de base, ce qui signifie qu'il est principalement pris en charge par les navigateurs à base de chrome (version 125). Cependant, Oddbird fournit un polyfill utile pour une compatibilité plus large du navigateur.

Les détails de la prise en charge du navigateur sont disponibles sur caniuse.com. Un nombre indique la version où le support commence.

Prise en charge du navigateur de bureau

Prise en charge du navigateur mobile / tablette

Oddbird crée des polyfills pour de nombreuses nouvelles fonctionnalités CSS. Soutenez leur travail sur Github ou Open Collective!

TAB Atkins-Bittner, contributeur à la spécification W3C, a présenté le positionnement de l'ancrage au CSS Day 2024 (vidéo disponible sur YouTube). Juan a démontré son utilisation avec des animations axées sur la vue pour un effet de notes flottantes sur CSS-Tricks. Kevin Powell a présenté "CSS Popover Anchor Positioning" dans une vidéo récente, et Thomas Park a créé Anchoreum (un jeu de style Flexbox Froggy) pour enseigner le positionnement de l'ancrage.

l'affectation

Maintenant que nous comprenons le positionnement de l'ancrage CSS, explorons sa fonctionnalité. Les éléments d'attache offrent un immense potentiel, résolvant de nombreux problèmes précédemment résolus avec un positionnement absolu complexe et z-index ajustements.

Examinons la syntaxe de base. Nous avons besoin de deux éléments: un élément positionné ancre et sa cible attachée.

<div>
  Anchor
</div>
<div>
  Target
</div>

Nous désignons un élément positionné d'ancrage en utilisant anchor-name, un nom unique (préfixé avec des tirets doubles, comme les propriétés personnalisées CSS).

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

L'élément cible nécessite position: absolute; et position-anchor (correspondant à l'ancre anchor-name).

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
}

Ces éléments sont désormais liés. position-area crée une grille 3x3 invisible sur l'élément d'ancrage, permettant un placement cible précis.

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
  position-area: top center;
}

La cible est désormais ancrée au centre supérieur de l'élément d'ancrage!

ancrage pseudo-éléments

Les pseudo-éléments peuvent être ancrés comme des éléments réguliers:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;

  &::before {
    content: "Target";
    position: absolute;
    position-anchor: --anchor;
    left: anchor(center);
    bottom: anchor(center);
  }
}

Ceci est utile pour ajouter des améliorations visuelles ou des indicateurs.

ancres en mouvement

Les ancres peuvent être repositionnées à l'aide de fonctions anchor() au lieu de position-area.

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor-one;
  top: anchor(bottom);
  left: anchor(left);
}

Les fonctions

anchor() utilisent les valeurs calculées de l'élément d'ancrage. Ici, le top de la cible correspond au bottom de l'ancre. Les changements de volant position-anchor et des transitions lisses sont possibles.

Expériences avancées

L'équipe Chrome a publié de nouveaux pseudo-sélectionneurs pour les éléments <details></details> et <summary></summary> (:details-content). Ceux-ci peuvent également être ancrés. Ceci est expérimental mais démontre le potentiel.

Applications pratiques

Explorons les utilisations pratiques du positionnement de l'ancrage CSS (actuellement chrome uniquement).

Info-bullets

Les infractions sont un ajustement naturel. Faire planer sur une icône affiche une étiquette à proximité. L'article de Zell Liew sur les meilleures pratiques de l'infraction fournit des conseils sémantiques.

<button id="inbox-tool" class="tool" aria-labelledby="inbox-label">
  <svg></svg>
</button>
<div id="inbox-label" role="tooltip">Inbox</div>

L'infiltron est un frère ou une sœur de l'élément d'ancrage (aria-labelledby les relie). CSS gère le positionnement et la visibilité.

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15binbox-tool {
  anchor-name: --inbox-tool;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15binbox-label {
  position: absolute;
  position-anchor: --inbox-tool;
  position-area: end center;
  visibility: hidden;
}

.tool:hover + [role="tooltip"],
.tool:focus-visible + [role="tooltip"] {
  visibility: visible;
}

Une info-bulle ancrée CSS fonctionnelle! Considérez les toggletips pour les appareils tactiles.

Divulgations flottantes

Les divulgations (comme

/<summary></summary>

) bénéficient du positionnement de l'ancrage, en particulier pour les éléments flottants. L'API Popover fournit une solution non modale et supérieure avec des fonctionnalités telles que des licenciements légers. Zell Liew offre plus d'informations sur les popovers, les dialogues et la modalité.

Un exemple de menu déroulant:

<div>
  Anchor
</div>
<div>
  Target
</div>

CSS gère l'ancrage et le positionnement de l'ancrage:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

Composant de panier d'achat

En combinant les techniques précédentes, nous pouvons créer un composant de panier:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
}

CSS ancre la boîte à petit, la boîte de dialogue de panier et le badge:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
  position-area: top center;
}

Trois éléments ancrés à une seule ancre!

combinant des techniques

Cette section présente l'utilisation combinée des infractions, des divulgations et des badges, démontrant la puissance du positionnement de l'ancrage.

Projet final: outil d'intégration

En tant que projet final, j'ai construit un outil d'intégration positionné par l'ancrage CSS (CodePen disponible). Cela évite les complexités de ma précédente tentative basée sur JavaScript ("HandholdJS").

Un élément personnalisé <hand-hold></hand-hold> utilise data-tour-stop attributs pour définir les étapes de la tournée. JavaScript met à jour dynamiquement les positions d'ancrage et une transition de vue assure des transitions en douceur. Ce projet est expérimental et non prêt pour la production en raison d'un support limité du navigateur.

Conclusion

Le positionnement de l'ancrage CSS a le potentiel de révolutionner le développement de CSS, similaire à Flexbox et Grid. Ses applications sont vastes, et je suis ravi de voir les innovations futures de la communauté.

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!