Maison >interface Web >tutoriel CSS >Une de ces interfaces utilisateurs 'intégrés', avec positionnement d'ancrage
Une de ces interfaces utilisateurs 'intégrés', avec positionnement d'ancrage
- Jennifer Anistonoriginal
- 2025-03-07 16:56:13610parcourir
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.
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
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!