Études de cas Popover

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Les pop-ups sont partout sur le Web. Vous pouvez les voir dans les menus, les boutons d'activation/de désactivation et les boîtes de dialogue, qui sont utilisés pour des fonctionnalités telles que les paramètres de compte, les widgets de divulgation et les aperçus de fiche produit. Malgré la prévalence de ces composants, leur création dans les navigateurs reste étonnamment complexe. Pour résoudre ce problème, un nouvel ensemble d'API HTML déclaratives pour la création de popovers est disponible dans les navigateurs, la première étant l'API Popover.

Le pop-up fait partie de la nouvelle version de référence.

Navigateurs pris en charge

  • Chrome : 114.
  • Edge : 114.
  • Firefox: 125
  • Safari : 17.

Source

On confond souvent un pop-up avec une boîte de dialogue. Cependant, leur comportement présente des différences importantes. 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 modale. Un popover est compatible avec la fermeture de la lumière. Un dialog modal ne le fait pas. Une boîte de dialogue modale rend le reste de la page inerte. Un popover ne le fait pas. 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 d'UI. Dans cet article, découvrez comment Tokopedia a implémenté l'API Popover et en a tiré parti.

Tokopedia

L'utilisation d'attributs de pop-over a permis de réduire jusqu'à 70% les lignes de code 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 (PDP) 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 modèle couramment utilisé sur les sites Web d'e-commerce.

Code

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

Avec cette implémentation de base, le popover fonctionne, mais apparaît et disparaît sans aucune animation. Pour créer une animation d'entrée et de sortie fluide pour le popover, utilisez :popover-open et @starting-style, et autorisez l'animation de propriétés distinctes. Dans l'exemple de code suivant, le popover se réduit et se développe à 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 popover.

<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',

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

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

Pour prendre en charge les navigateurs qui ne sont pas compatibles avec l'API popover, Tokopedia a implémenté le polyfill popover d'Oddbird, qui ne fait que 3,2 ko avec la compression gzip. Il était satisfait du polyfill, car il fonctionnait bien et ne provoquait pas de régression des performances. Au total, ils ont pu réduire jusqu'à 70% de lignes de code dans React avec l'API popover.

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

Tokopedia utilise React. L'équipe a effectué le fractionnement du code en démontant le composant popover pour les pages qui ne l'utilisent pas, puis en effectuant un fractionnement du code pour le contenu du popover. Il a ainsi réduit la taille de sa requête initiale.

Envisagez de combiner les popovers avec le positionnement d'ancre CSS (bientôt disponible dans Chrome) pour les positionner par rapport à d'autres éléments. Cela 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 bénéficié de l'utilisation de nouvelles fonctionnalités CSS et d'UI telles que les animations basées sur le défilement, les popovers, les requêtes de conteneur et le sélecteur has().