Les pop-overs sont partout sur le Web. Vous pouvez les voir dans des menus, des astuces pour activer/désactiver et utilisées pour des fonctionnalités telles que les paramètres de compte, les widgets d'informations les aperçus des fiches produit. Malgré la prédominance de ces composants, leur création dans les navigateurs reste étonnamment fastidieux. Pour résoudre ce problème, un nouvel ensemble de Les API HTML déclaratives permettant de créer des pop-overs seront bientôt disponibles dans les navigateurs, la première il s'agit de l'API Popover.
Le pop-up fait partie de Baseline Newly Available.
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Une fenêtre contextuelle est généralement confondue avec une boîte de dialogue. Cependant, il existe des
des différences de comportement. Un élément dialog
ouvert avec dialog.showModal
(boîte de dialogue modale), est une expérience qui nécessite une interaction explicite de l'utilisateur pour
fermer la fenêtre modale. popover
permet l'arrêt léger. Ce n'est pas le cas d'une dialog
modale.
Une boîte de dialogue modale rend le reste de la page inerte. Ce n'est pas le cas avec un popover
.
En savoir plus sur les différences
Cet article fait partie d'une série qui explique comment les entreprises d'e-commerce amélioré son site Web grâce à de nouvelles fonctionnalités CSS et UI. Dans cet article, vous découvrirez comment Tokopedia a implémenté l'API Popover et en a bénéficié.
Tokopedia
L'utilisation d'attributs de pop-over a permis de réduire jusqu'à 70% les lignes de code dans React. La fenêtre modale peuvent être contrôlés de manière native par HTML au lieu de nécessiter la gestion des événements JavaScript et l'utilisation de
React.createPortal
pour déplacer le DOM modal à la fin dedocument.body
Nous pouvons également utiliser@starting-style
pour animer le l'ouverture et la fermeture du pop-up. Andy Wihalim, Senior Software Ingénieur, Tokopedia.
Les pages d'informations détaillées sur les produits de Tokopedia contiennent plusieurs images pour chacune d'elles. produit. Lorsque l'utilisateur clique sur la miniature du produit, une modale s'ouvre pour afficher une 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, elle a utilisé une modale DOM et un bouton. Bouton
modifié l'état React pour ouvrir la fenêtre modale. Avec l'API popover, ils spécifient
Attribut popovertarget
dans l'élément qui ouvre le pop-over avec une valeur
qui est identique à l'ID de l'élément contextuel.
Avec cette implémentation de base, le pop-over fonctionne, mais apparaît et disparaît
sans aucune animation. Pour créer une animation d'entrée et de sortie fluide pour
utilisez :popover-open
et @starting-style
, et autorisez l'animation
des propriétés discrètes.
Dans l'exemple de code suivant, la fenêtre pop-up effectue un scaling vertical et horizontal à l'aide du
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',
'@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 popover, Tokopedia a implémenté le paramètre popover-polyfill d' lanceredbird ; qui ne fait que 3,2 Ko avec une compression gzip. Ils étaient satisfaits du polyfill car il fonctionnait bien et n'entraînait pas de régressions de performances. Globalement, il s'agissait capable de 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, et l'équipe a réussi à diviser le code en désinstallant le pour les pages qui ne l'utilisent pas, une division du code pop-over. Elle a ainsi réduit la taille de sa demande initiale.
Envisagez de combiner des pop-ups avec le positionnement de l'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
- Présentation de l'API popover
- Différence entre un pop-up et une boîte de dialogue
- Voulez-vous signaler un bug ou demander une nouvelle fonctionnalité ? Votre avis nous intéresse.
Lisez les autres articles de cette série sur l'e-commerce
entreprises ont profité de l'utilisation de nouvelles fonctionnalités CSS et UI, comme
animations, pop-over, requêtes de conteneur et sélecteur has()
.