La commodité du nouveau @position-try de CSS

Le positionnement des ancres CSS est sorti il ​​y a quelque temps. Si, comme moi, vous n'aimez pas écrire du CSS, cette nouvelle API améliorerait certainement les choses.

Positionnement de l'ancre

L'API CSS Anchor Positioning permet aux développeurs de positionner facilement des éléments par rapport aux autres (appelés ancres), sans avoir besoin de bibliothèques supplémentaires ou de JavaScript complexe. Cette fonctionnalité est parfaite pour créer des menus, des info-bulles, des boîtes de dialogue et d'autres interfaces en couches.

Avec cette API, vous pouvez vous assurer que la taille/position d'un élément s'adapte en fonction de son ancre. Cela élimine le besoin d'ajustements manuels et offre une expérience plus fluide et plus réactive lors de la création de mises en page dynamiques et interactives.

Qu'est-ce que l'essai de position ?

Anchor CSS a également publié une nouvelle règle CSS appelée position-try. Il vous permet de définir des positions de repli pour les éléments ancrés lorsqu'ils ne rentrent pas dans l'écran ou le conteneur. Si un élément déborde, le navigateur choisit automatiquement la position alternative suivante, garantissant qu'il reste entièrement visible et fonctionnel. La propriété position-try-fallbacks peut être utilisée pour définir plusieurs positions de repli que le navigateur peut essayer. Auparavant, cela aurait été réalisé en exécutant un écouteur qui vérifie après chaque changement de fenêtre si les choses se passent.

Cela pourrait éviter bien des maux de tête lorsque vous travaillez avec des listes déroulantes, des info-bulles, etc., car nous n'avons désormais plus besoin d'écrire une logique personnalisée pour vérifier les conditions de débordement.

Une démo

Voici une démo rapide du code que j'ai écrit en utilisant les propriétés CSS ci-dessus :

Le sous-menu de mon horrible barre de navigation change de position en fonction de la largeur du port d'affichage.

Le code est écrit en React. Auparavant, j'aurais dû utiliser un effet pour ce faire. Dans mon effet, j'aurais vérifié si l'élément de sous-menu traverse la limite de la fenêtre. Si oui, j'aurais déclenché un autre re-rendu pour mettre à jour les styles du sous-menu. Étant donné que useEffect s'exécute après la peinture et que nous ne voulons pas que l'utilisateur voie le sous-menu au mauvais endroit, j'aurais dû utiliser useLayoutEffect pour cela.

Maintenant, il ne me reste plus qu'à écrire un CSS comme celui-ci :

.button-anchor {
  anchor-name: --anchorButton;
}

@position-try --bottom {
  position-area: bottom;
}

.menu-list {
  position-anchor: --anchorButton;
  border: 1px solid #000;
  font-family: sans-serif;
  width: 60px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  padding: 8px;
  position: fixed;
  position-area: right span-y-end;
  position-try-fallbacks: --bottom;
}

@position-try - crée la règle appelée --bottom.
Anchor-name - définit le bouton comme élément d'ancrage.
position-anchor - permet à menu-list d'utiliser --anchorButton comme élément d'ancrage.
position-try-fallbacks - aide à répertorier les multiples solutions de secours à essayer. Cela signifie qu'il peut y avoir plus de positions même si --bottom échoue.

Résumé

Anchor CSS est venu résoudre des cas d'utilisation très intéressants pour un développeur. En plus de ce qui précède, le positionnement connecté devient très simple. Tout est purement CSS, donc les performances sont également excellentes. À l'heure actuelle, la prise en charge du navigateur n'est pas excellente, mais j'espère qu'il sera bientôt adopté.

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!