Pop-ups: ils font leur grand retour !

Jhey Tompkins

L'objectif de l'initiative Open UI est de permettre aux développeurs de créer plus facilement des expériences utilisateur de qualité. Pour ce faire, nous essayons de nous attaquer aux modèles les plus problématiques rencontrés par les développeurs. Pour ce faire, nous fournissons de meilleures API et composants intégrés à la plate-forme.

Les pop-ups, décrits dans l'UI Open sous le nom de "Popovers", en font partie.

Les pop-ups ont longtemps eu une réputation plutôt polarisante. Cela est en partie dû à la façon dont ils sont à la fois compilés et déployés. Ce modèle n'est pas facile à créer, mais il peut être très utile pour rediriger les utilisateurs vers certains éléments ou les sensibiliser au contenu de votre site, en particulier lorsqu'il est utilisé avec goût.

La création de pop-overs pose souvent deux problèmes majeurs:

  • Assurez-vous qu'il est placé au-dessus du reste de votre contenu, à un endroit approprié.
  • Comment le rendre accessible (compatible avec le clavier, sélectionnable, etc.)

L'API Popover intégrée offre de différents objectifs, tous ayant le même objectif global : permettre aux développeurs de créer facilement ce modèle. Voici quelques-uns de ces objectifs:

  • Facilitez l'affichage d'un élément et de ses descendants au-dessus du reste du document.
  • Rendez-les accessibles.
  • Ne nécessite pas de code JavaScript pour la plupart des comportements courants (fermeture légère, singleton, empilement, etc.).

Vous pouvez consulter les spécifications complètes relatives aux fenêtres pop-up sur le site OpenUI.

Compatibilité du navigateur

Où pouvez-vous utiliser l'API Popover intégrée ? Au moment de la rédaction de cet article, elle est compatible avec Chrome Canary via le commutateur "Experimental Web Platform features".

Pour activer cet indicateur, ouvrez Chrome Canary et accédez à chrome://flags. Activez ensuite l'option "Experimental web platform features".

Une version d'essai d'Origin est également disponible pour les développeurs qui souhaitent tester cette fonctionnalité dans un environnement de production.

Enfin, un polyfill est en cours de développement pour l'API. N'hésitez pas à consulter le dépôt sur github.com/oddbird/popup-polyfill.

Pour vérifier la compatibilité avec les pop-ups:

const supported = HTMLElement.prototype.hasOwnProperty("popover");

Solutions actuelles

Que pouvez-vous faire actuellement pour promouvoir vos contenus avant tout le reste ? Si votre navigateur le permet, vous pouvez utiliser l'élément HTML Dialog. Vous devez l'utiliser dans un formulaire "Modal". JavaScript doit être utilisé.

Dialog.showModal();

Des considérations d'accessibilité sont à prendre en compte. Nous vous recommandons d'utiliser a11y-dialog, par exemple si vous prenez en charge les utilisateurs de Safari version 15.4 ou antérieure.

Vous pouvez également utiliser l'une des nombreuses bibliothèques basées sur des popovers, des alertes ou des info-bulles. Beaucoup d'entre eux fonctionnent de la même manière.

  • Ajoutez un conteneur au corps pour afficher les popovers.
  • Personnalisez-le de sorte qu'il se place au-dessus des autres.
  • Créez un élément et ajoutez-le au conteneur pour afficher un popover.
  • Masquez-le en supprimant l'élément contextuel du DOM.

Cela nécessite une dépendance supplémentaire et plus de décisions de la part des développeurs. Il faut également faire des recherches pour trouver une offre qui réponde à tout ce dont vous avez besoin. L'API Popover vise à répondre à de nombreux scénarios, y compris les info-bulles. L'objectif est de couvrir tous ces scénarios courants, ce qui évite aux développeurs de devoir prendre une autre décision et leur permet de se concentrer sur la création de leurs expériences.

Votre premier pop-up

C'est tout ce dont vous avez besoin.

<div id="my-first-popover" popover>Popover Content!</div>
<button popovertoggletarget="my-first-popover">Toggle Popover</button>

Mais que se passe-t-il ici ?

  • Vous n'avez pas besoin de placer l'élément popover dans un conteneur ni quoi que ce soit : il est masqué par défaut.
  • Vous n'avez pas besoin d'écrire de code JavaScript pour l'afficher. C'est l'attribut popovertoggletarget qui s'en charge.
  • Lorsqu'il apparaît, il est promu à la couche supérieure. Cela signifie qu'il est promu au-dessus de document dans la fenêtre d'affichage. Vous n'avez pas besoin de gérer z-index ni de vous soucier de l'emplacement de votre popover dans le DOM. Il peut être profondément imbriqué dans le DOM, avec des ancêtres de découpage. Vous pouvez également voir les éléments actuellement situés dans la couche supérieure via les outils de développement. Pour en savoir plus sur la couche supérieure, consultez cet article.

GIF montrant la prise en charge de la couche supérieure dans DevTools

  • La fonctionnalité "Light Dismiss" est disponible par défaut. Cela signifie que vous pouvez fermer le pop-up avec un signal de fermeture, par exemple en cliquant en dehors du pop-up, en accédant à un autre élément à l'aide du clavier ou en appuyant sur la touche Échap. Ouvrez-la à nouveau et testez-la.

Quels sont les autres avantages des popovers ? Allons plus loin dans cet exemple. Prenons l'exemple de cette démonstration avec du contenu sur la page.

Le positionnement du bouton d'action flottant est fixe avec une z-index élevée.

.fab {
  position: fixed;
  z-index: 99999;
}

Le contenu de la fenêtre contextuelle est imbriqué dans le DOM, mais lorsque vous l'ouvrez, il est placé au-dessus de cet élément de position fixe. Vous n'avez pas besoin de définir de styles.

Vous remarquerez également que le pop-up comporte désormais un pseudo-élément ::backdrop. Tous les éléments de la couche supérieure reçoivent un pseudo-élément ::backdrop stylable. Cet exemple stylise ::backdrop avec une couleur d'arrière-plan alpha réduite et un filtre de fond, qui floute le contenu sous-jacent.

Styliser un pop-up

Concentrons-nous sur le style du popover. Par défaut, une fenêtre contextuelle a une position fixe et une marge intérieure est appliquée. Il comporte également display: none. Vous pouvez remplacer ce comportement pour afficher un popover. Mais cela ne le ferait pas passer à la couche supérieure.

[popover] { display: block; }

Quelle que soit la méthode utilisée pour promouvoir votre popover, vous devrez peut-être le mettre en page ou le positionner une fois qu'il aura été promu à la couche supérieure. Vous ne pouvez pas cibler la couche supérieure et effectuer une action comme

:open {
  display: grid;
  place-items: center;
}

Par défaut, un pop-up s'affiche au centre de la fenêtre d'affichage à l'aide de margin: auto. Toutefois, dans certains cas, vous pouvez être explicite sur le positionnement. Exemple :

[popover] {
  top: 50%;
  left: 50%;
  translate: -50%;
}

Si vous souhaitez mettre en page le contenu de votre popover à l'aide d'une grille CSS ou d'une grille flexbox, il peut être judicieux de l'encapsuler dans un élément. Sinon, vous devrez déclarer une règle distincte qui modifie display une fois que le pop-up se trouve dans la couche supérieure. Si vous le définissez par défaut, il s'affichera par défaut en remplaçant display: none.

[popover]:open {
 display: flex;
}

Si vous avez essayé cette démonstration, vous remarquerez que le popover s'affiche et se ferme désormais. Vous pouvez faire apparaître et disparaître des popovers à l'aide du pseudo-sélecteur :open. Le pseudo-sélecteur :open correspond aux pop-overs qui s'affichent (et donc dans la couche supérieure).

Cet exemple utilise une propriété personnalisée pour piloter la transition. Vous pouvez également appliquer une transition au ::backdrop du pop-up.

[popover] {
  --hide: 1;
  transition: transform 0.2s;
  transform: translateY(calc(var(--hide) * -100vh))
            scale(calc(1 - var(--hide)));
}

[popover]::backdrop {
  transition: opacity 0.2s;
  opacity: calc(1 - var(--hide, 1));
}


[popover]:open::backdrop  {
  --hide: 0;
}

Nous vous conseillons de regrouper les transitions et les animations dans une requête multimédia pour le mouvement. Cela peut également vous aider à respecter vos délais. En effet, vous ne pouvez pas partager de valeurs entre popover et ::backdrop via une propriété personnalisée.

@media(prefers-reduced-motion: no-preference) {
  [popover] { transition: transform 0.2s; }
  [popover]::backdrop { transition: opacity 0.2s; }
}

Jusqu'à présent, vous avez vu comment utiliser popovertoggletarget pour afficher un popover. Pour l'ignorer, nous utilisons "Ignorer". Vous pouvez également utiliser les attributs popovershowtarget et popoverhidetarget. Ajoutons un bouton à un popover pour le masquer et modifions le bouton d'activation/de désactivation pour utiliser popovershowtarget.

<div id="code-popover" popover>
  <button popoverhidetarget="code-popover">Hide Code</button>
</div>
<button popovershowtarget="code-popover">Reveal Code</button>

Comme indiqué précédemment, l'API Popover ne se limite pas à notre notion historique de pop-up. Vous pouvez créer des applications pour tous les types de scénarios, tels que les notifications, les menus, les info-bulles, etc.

Certains de ces scénarios nécessitent des modèles d'interaction différents. Interactions telles que le pointage. L'utilisation d'un attribut popoverhovertarget a été testée, mais n'est pas implémentée pour le moment.

<div popoverhovertarget="hover-popover">Hover for Code</div>

L'idée est de passer la souris sur un élément pour afficher la cible. Ce comportement peut être configuré via des propriétés CSS. Ces propriétés CSS définissent la période de survol d'un élément auquel un pop-up réagit. Le comportement par défaut testé consistait à afficher un popover après un 0.5s explicite de :hover. Ensuite, il faudrait une légère fermeture ou l'ouverture d'un autre pop-up pour fermer (plus d'informations à venir sur ce sujet). Cela était dû au fait que la durée de masquage du pop-up était définie sur Infinity.

En attendant, vous pouvez utiliser JavaScript pour polyfiller cette fonctionnalité.

let hoverTimer;
const HOVER_TRIGGERS = document.querySelectorAll("[popoverhovertarget]");
const tearDown = () => {
  if (hoverTimer) clearTimeout(hoverTimer);
};
HOVER_TRIGGERS.forEach((trigger) => {
  const popover = document.querySelector(
    `#${trigger.getAttribute("popoverhovertarget")}`
  );
  trigger.addEventListener("pointerenter", () => {
    hoverTimer = setTimeout(() => {
      if (!popover.matches(":open")) popover.showPopOver();
    }, 500);
    trigger.addEventListener("pointerleave", tearDown);
  });
});

L'avantage de définir une fenêtre de survol explicite est qu'elle garantit que l'action de l'utilisateur est intentionnelle (par exemple, un utilisateur passe son pointeur sur une cible). Nous ne voulons pas afficher le pop-up, sauf si c'est leur intention.

Essayez cette démonstration, dans laquelle vous pouvez pointer sur la cible lorsque la fenêtre est définie sur 0.5s.

.

Avant d'explorer quelques cas d'utilisation et exemples courants, passons en revue quelques points.

Types de popover

Nous avons vu le comportement des interactions non JavaScript. Mais qu'en est-il du comportement des pop-ups dans son ensemble ? Que faire si vous ne voulez pas de l'option "Fermer le message" ? Vous souhaitez appliquer un modèle Singleton à vos popovers ?

L'API Popover vous permet de spécifier trois types de pop-over dont le comportement diffère.

[popover=auto]/[popover] :

  • Prise en charge de l'imbrication. Cela ne signifie pas non plus qu'ils sont uniquement imbriqués dans le DOM. Un popover ancestral est un popover :
    • en fonction de la position DOM (enfant).
    • en déclenchant des attributs sur les éléments enfants tels que popovertoggletarget, popovershowtarget, etc.
    • liés par l'attribut anchor (API d'ancrage CSS en cours de développement).
  • Fermeture légère.
  • L'ouverture ferme les autres fenêtres pop-up qui ne sont pas des pop-overs ancêtres. Jouez avec la démo ci-dessous qui montre comment fonctionne l'imbrication avec des pop-overs ancêtres. Découvrez comment la modification de certaines instances popoverhidetarget/popovershowtarget en popovertoggletarget modifie les choses.
  • Si vous appuyez sur la touche Éclair pour fermer une notification, toutes les notifications sont supprimées. Si vous appuyez sur la touche Éclair pour fermer une notification de la pile, seules les notifications situées au-dessus de celle-ci sont supprimées.

[popover=manual] :

  • Ne ferme pas les autres popovers.
  • Aucune lumière ne s'éteint.
  • Nécessite une fermeture explicite via un élément de déclencheur ou JavaScript.

API JavaScript

Lorsque vous avez besoin de mieux contrôler vos popovers, vous pouvez utiliser JavaScript. Vous obtenez à la fois une méthode showPopover et une méthode hidePopover. Vous devez également écouter les événements popovershow et popoverhide:

Afficher un pop-up js popoverElement.showPopover() Masquer un pop-up:

popoverElement.hidePopover()

Écoutez l'affichage d'un popover:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

Écoutez l'affichage d'un popover et annulez son affichage:

popoverElement.addEventListener('popovershow',event => {
  event.preventDefault();
  console.warn(‘We blocked a popover from being shown’);
})

Écoutez un popover masqué:

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

Vous ne pouvez pas annuler le masquage d'un popover:

popoverElement.addEventListener('popoverhide',event => {
  event.preventDefault();
  console.warn("You aren't allowed to cancel the hiding of a popover");
})

Vérifiez si un popover se trouve dans la couche supérieure:

popoverElement.matches(':open')

Vous bénéficiez ainsi d'une puissance supplémentaire pour des scénarios moins courants. Par exemple, affichez un pop-up après une période d'inactivité.

Cette démonstration comporte des pop-ups avec des sons audibles. Nous aurons donc besoin de JavaScript pour lire l'audio. Lorsque l'utilisateur clique, le pop-up est masqué, l'audio est lu, puis le pop-up s'affiche à nouveau.

Accessibilité

Avec l'API Popover, l'accessibilité est au premier plan de la réflexion. Les mappages d'accessibilité associent le popover à son élément déclencheur, si nécessaire. Cela signifie que vous n'avez pas besoin de déclarer d'attributs aria-* tels que aria-haspopup, en supposant que vous utilisiez l'un des attributs de déclenchement tels que popovertoggletarget.

Pour gérer la sélection, vous pouvez utiliser l'attribut "autofocus" afin de déplacer la sélection vers un élément dans un popover. C'est la même chose que pour une boîte de dialogue, à la différence que la différence se produit au moment du retour de la mise au point, en raison de l'arrêt de la lumière. Dans la plupart des cas, la fermeture d'une fenêtre contextuelle remet le focus à l'élément précédemment sélectionné. Toutefois, le focus est déplacé vers un élément cliqué lors de la fermeture légère, s'il peut être sélectionné. Consultez la section sur la gestion de la concentration dans la vidéo explicative.

Vous devez ouvrir la version plein écran de cette démonstration pour qu'elle fonctionne.

Dans cette démonstration, l'élément sélectionné est entouré d'un contour vert. Essayez de naviguer dans l'interface à l'aide de votre clavier. Notez où la mise au point est renvoyée lorsqu'un popover est fermé. Vous pouvez également remarquer que si vous avez appuyé sur la touche de tabulation, le pop-up s'est fermé. C'est volontaire. Bien que les pop-ups permettent de gérer le focus, ils ne piégeent pas le focus. La navigation au clavier identifie un signal de fermeture lorsque le focus quitte le popover.

Ancrage (en cours de développement)

En ce qui concerne les popovers, l'ancrage de l'élément à son déclencheur est un modèle difficile à gérer. Par exemple, si une info-bulle est définie pour s'afficher au-dessus de son déclencheur, mais que le document est fait défiler. Cette info-bulle risque d'être coupée par le viewport. Il existe actuellement des solutions JavaScript pour gérer ce problème, telles que l'interface utilisateur flottante. Il repositionnera l'info-bulle pour que vous puissiez éviter que cela ne se produise et s'appuie sur l'ordre de position souhaité.

Mais nous voulons que vous puissiez définir cela avec vos styles. Une API complémentaire est en cours de développement avec l'API Popover pour résoudre ce problème. L'API CSS Anchor Positioning vous permet d'attacher des éléments à d'autres éléments. Elle le fait de manière à repositionner les éléments afin qu'ils ne soient pas coupés par le viewport.

Cette démonstration utilise l'API Anchoring dans son état actuel. La position du bateau dépend de la position de l'ancre dans la fenêtre d'affichage.

Voici un extrait du code CSS permettant de faire fonctionner cette démonstration. Aucun JavaScript requis.

.anchor {
  --anchor-name: --anchor;
}
.anchored {
  position: absolute;
  position-fallback: --compass;
}
@position-fallback --compass {
  @try {
    bottom: anchor(--anchor top);
    left: anchor(--anchor right);
  }
  @try {
    top: anchor(--anchor bottom);
    left: anchor(--anchor right);
  }
}

Vous pouvez consulter les spécifications ici. Un polyfill sera également disponible pour cette API.

Exemples

Maintenant que vous savez ce qu'est un popover et comment l'utiliser, examinons quelques exemples.

Notifications

Cette démonstration présente une notification "Copier dans le presse-papiers".

  • Fuseau horaire : [popover=manual].
  • À l'action, afficher le pop-up avec showPopover.
  • Après un délai avant expiration de 2000ms, masquez-le avec hidePopover.

Notifications toast

Cette démonstration utilise la couche supérieure pour afficher des notifications de type toast.

  • Un popover de type manual sert de conteneur.
  • Les nouvelles notifications sont ajoutées au pop-up et celui-ci s'affiche.
  • Ils sont supprimés avec l'API Web Animations au clic et supprimés du DOM.
  • Si aucun message ne s'affiche, le pop-up est masqué.

Menu imbriqué

Cette démonstration montre comment un menu de navigation imbriqué peut fonctionner.

  • Utilisez [popover=auto], car il permet d'imbriquer des popovers.
  • Utilisez autofocus sur le premier lien de chaque liste déroulante pour naviguer avec le clavier.
  • Il s'agit d'un candidat idéal pour l'API d'ancrage CSS. Toutefois, pour cette démonstration, vous pouvez utiliser une petite quantité de code JavaScript pour mettre à jour les positions à l'aide de propriétés personnalisées.
const ANCHOR = (anchor, anchored) => () => {
  const { top, bottom, left, right } = anchor.getBoundingClientRect();
  anchored.style.setProperty("--top", top);
  anchored.style.setProperty("--right", right);
  anchored.style.setProperty("--bottom", bottom);
  anchored.style.setProperty("--left", left);
};

PRODUCTS_MENU.addEventListener("popovershow", ANCHOR(PRODUCT_TARGET, PRODUCTS_MENU));

N'oubliez pas que, comme cette démonstration utilise autofocus, vous devez l'ouvrir en plein écran pour pouvoir naviguer à l'aide du clavier.

Pop-over multimédia

Cette démonstration montre comment afficher des contenus multimédias.

  • Utilise [popover=auto] pour la fermeture légère.
  • JavaScript écoute l'événement play de la vidéo et l'affiche.
  • L'événement popoverhide des popovers met la vidéo en pause.

Pop-ups de style Wiki

Cette démonstration vous montre comment créer des info-bulles de contenu intégré contenant des contenus multimédias.

  • Fuseau horaire : [popover=auto]. Si vous en affichez un, les autres sont masqués, car ils ne sont pas ancestraux.
  • Affichée sur pointerenter avec JavaScript.
  • L'API CSS Anchoring est un autre candidat idéal.

Cette démonstration crée un panneau de navigation à l'aide d'un popover.

  • Utilise [popover=auto] pour la fermeture légère.
  • Utilise autofocus pour mettre en surbrillance le premier élément de navigation.

Gérer les Backdrops

Cette démonstration montre comment gérer les arrière-plans de plusieurs popovers pour lesquels vous ne souhaitez qu'un seul ::backdrop soit visible.

  • Utilisez JavaScript pour gérer une liste des popovers visibles.
  • Appliquez un nom de classe au pop-up le plus bas de la couche supérieure.
.

Pop-up de curseur personnalisé

Cette démonstration montre comment utiliser popover pour promouvoir un canvas dans la couche supérieure et l'utiliser pour afficher un curseur personnalisé.

  • Mettez en avant canvas en tant que couche supérieure avec showPopover et [popover=manual].
  • Lorsque d'autres pop-ups sont ouverts, masquez et affichez le pop-up canvas pour vous assurer qu'il se trouve au-dessus.

Pop-over de la feuille d'action

Cette démonstration montre comment utiliser un popover comme une actionsheet.

  • Affichez le pop-up par défaut en ignorant display.
  • La feuille d'action s'ouvre avec le déclencheur du pop-up.
  • Lorsque la fenêtre contextuelle s'affiche, elle est placée dans la couche supérieure et convertie en vue.
  • La fermeture légère peut être utilisée pour la renvoyer.

Popover activé par le clavier

Cette démonstration montre comment utiliser un pop-up pour une interface utilisateur de style palette de commandes.

  • Appuyez sur cmd+j pour afficher le pop-up.
  • Le input est mis au point avec autofocus.
  • La zone de liste déroulante est un deuxième popover placé sous l'entrée principale.
  • La fermeture légère ferme la palette si le menu déroulant n'est pas présent.
  • Autre candidat pour l'API Anchoring

Pop-over temporisé

Cette démonstration affiche un pop-up d'inactivité au bout de quatre secondes. Modèle d'UI souvent utilisé dans les applications qui contiennent des informations sécurisées sur un utilisateur pour afficher une fenêtre modale de déconnexion.

  • Utilisez JavaScript pour afficher le pop-up après une période d'inactivité.
  • Lorsque le pop-up s'affiche, réinitialisez le minuteur.

Éco. d'écran

Comme dans la démonstration précédente, vous pouvez ajouter une touche de fantaisie à votre site et ajouter un économiseur d'écran.

  • Utilisez JavaScript pour afficher le pop-up après une période d'inactivité.
  • Balayez l'écran pour masquer et réinitialiser le minuteur.

Suivi du point d'insertion

Cette démonstration montre comment un popover peut suivre un curseur de saisie.

  • Affichez le pop-up en fonction d'une sélection, d'un événement clé ou de la saisie de caractères spéciaux.
  • Utilisez JavaScript pour mettre à jour la position de la fenêtre pop-up avec des propriétés personnalisées limitées.
  • Ce modèle nécessite une réflexion approfondie sur le contenu affiché et l'accessibilité.
  • On le voit souvent dans l'interface utilisateur de l'édition de texte et dans les applications où vous pouvez ajouter des tags.

Menu du bouton d'action flottant

Cette démonstration montre comment utiliser le pop-up pour implémenter un menu de boutons d'action flottant sans JavaScript.

  • Promouvoir un popover de type manual avec la méthode showPopover Il s'agit du bouton principal.
  • Le menu est un autre pop-up qui est la cible du bouton principal.
  • Le menu s'ouvre avec popovertoggletarget.
  • Utilisez autofocus pour mettre en surbrillance le premier élément de menu à afficher.
  • Le rejet léger ferme le menu.
  • La torsion de l'icône utilise :has(). Pour en savoir plus sur :has(), consultez cet article.

Et voilà !

Nous allons donc vous présenter les pop-ups dans le cadre de l'initiative Open UI. Utilisé de manière judicieuse, il sera un ajout fantastique à la plate-forme Web.

N'oubliez pas de consulter Ouvrir l'UI. La fenêtre d'explication contextuelle est mise à jour à mesure que l'API évolue. Et voici la collection de toutes les démonstrations.

Merci pour votre participation !

Photo par Madison Oren, publiée sur Unsplash