Études de cas Popover

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Les fenêtres pop-up sont partout sur le Web. Vous pouvez les voir dans des menus, des boutons d'activation/de désactivation et des boîtes de dialogue, utilisés pour des fonctionnalités telles que les paramètres de compte, les widgets de communiqué et les aperçus de fiches produit. Malgré la prévalence de ces composants, leur création dans les navigateurs reste étonnamment fastidieuse. Pour résoudre ce problème, un nouvel ensemble d'API HTML déclaratives permettant de créer des fenêtres pop-up sera bientôt disponible dans les navigateurs. La première d'entre elles est l'API Popover.

Popover fait partie de la version Baseline Newly Available.

Navigateurs pris en charge

  • 114
  • 114
  • 125
  • 17

Source

Une fenêtre contextuelle est souvent confondue avec une boîte de dialogue. Cependant, il existe des différences clés dans leur comportement. Un élément dialog ouvert avec dialog.showModal (une boîte de dialogue modale) est une expérience qui nécessite une interaction explicite de l'utilisateur pour fermer la fenêtre modale. Un popover est compatible avec Light-Dismiss. Ce n'est pas le cas d'un dialog modal. Une boîte de dialogue modale rend le reste de la page inerte. Ce n'est pas le cas de popover. En savoir plus sur les différences

Cet article fait partie d'une série qui explique comment les entreprises d'e-commerce ont amélioré leur site Web à l'aide de nouvelles fonctionnalités CSS et UI. Dans cet article, découvrez comment Tokopedia a implémenté et tiré parti de l'API Popover.

Tokopedia

Réduction de 70% des lignes de code grâce aux attributs de pop-over dans React. Le modal peut être contrôlé de manière native par HTML au lieu de nécessiter la gestion des événements en JavaScript et d'utiliser React.createPortal pour déplacer le DOM modal à la fin de document.body. Nous pouvons également utiliser @starting-style pour animer l'ouverture et la fermeture du pop-up – Andy Wihalim, ingénieur logiciel senior, Tokopedia.

Les pages d'informations détaillées sur les produits de Tokopedia contiennent plusieurs images pour chaque produit. Lorsque l'utilisateur clique sur la miniature du produit, une fenêtre modale s'ouvre pour afficher l'image agrandie. Il s'agit d'un schéma couramment utilisé sur les sites d'e-commerce.

Code

Tokopedia utilise React pour le développement de son interface. Avant d'implémenter l'API pop-over pour cette fenêtre modale, l'équipe a utilisé une fenêtre DOM et un bouton. Le bouton a modifié l'état de React pour ouvrir la fenêtre modale. Avec l'API de pop-over, ils spécifient un attribut popovertarget dans l'élément, qui ouvre le pop-over avec une valeur identique à l'ID de l'élément.

Avec cette implémentation de base, le pop-up fonctionne, mais apparaît et disparaît sans aucune animation. Pour créer une animation d'entrée et de sortie fluide pour le pop-over, utilisez :popover-open et @starting-style et autorisez l'animation des propriétés discrètes. Dans l'exemple de code suivant, le pop-up effectue un scaling vertical et horizontal à l'aide de la propriété transform: 'scale()'.

Cet exemple de code montre comment implémenter des animations d'entrée et de sortie pour l'API pop-over.

<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />

export const cssModalWrapper = css({
  background: NN0,
  border: 'none',
  borderRadius: '.625rem',
  width: 1024,
  padding: 24,

  '&::backdrop': {
    opacity: 0,
    transitionProperty: 'opacity, display',
    transition: '.25s ease-out',
    transitionBehavior: 'allow-discrete',
  },

  transitionProperty: 'transform, opacity, display',
  transition: '.25s ease-out',
  transitionBehavior: 'allow-discrete',

  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },
  transform: 'scale(0.8)',
  opacity: 0,

  '&:popover-open': {
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
    transform: 'scale(1)',
    opacity: 1,
  },
});

Pour répondre aux besoins des navigateurs qui ne prennent pas en charge l'API de pop-over, Tokopedia a implémenté le popover-polyfill de impairbird, qui ne fait que 3,2 Ko avec la compression gzip. Il est satisfait du polyfill, car il fonctionnait bien et n'a pas entraîné de régressions des performances. Dans l'ensemble, l'équipe a pu réduire jusqu'à 70% des lignes de code dans React grâce à l'API de pop-over.

Éléments à prendre en compte lors de l'utilisation de l'API Popover

Tokopedia utilise React, et l'équipe a divisé le code en désinstallant le composant de pop-up pour les pages qui ne l'utilisent pas, puis en effectuant un fractionnement de code pour le contenu de la fenêtre contextuelle. De cette façon, l'entreprise a réduit la taille de sa requête initiale.

Envisagez de combiner les fenêtres pop-up avec le positionnement de l'ancrage CSS (bientôt disponible dans Chrome) pour les positionner par rapport à d'autres éléments. C'est utile pour les menus et les info-bulles, par exemple.

Ressources

Découvrez les autres articles de cette série qui expliquent comment les entreprises d'e-commerce ont tiré parti des nouvelles fonctionnalités CSS et UI, telles que les animations basées sur le défilement, le pop-up, les requêtes de conteneur et le sélecteur has().