Présentation de l'API pop-over

Una Kravets

Les pop-overs sont partout sur le Web. Vous pouvez les voir dans des menus, des info-bulles et des boîtes de dialogue, qui peuvent prendre la forme de paramètres de compte, de widgets d'informations et d'aperçus de fiches produit. Malgré la prévalence de ces composants, leur création dans les navigateurs reste étonnamment complexe. Vous devez ajouter des scripts pour gérer les états de focus, d'ouverture et de fermeture, des hooks d'accès dans les composants, des combinaisons de touches pour accéder à l'expérience et la quitter, et tout cela avant même de commencer à créer la fonctionnalité de base utile et unique de votre pop-up.

Pour résoudre ce problème, un nouvel ensemble d'API HTML déclaratives pour créer des popovers sera disponible dans les navigateurs, à commencer par l'API popover dans Chromium 114.

Attribut popover

Plutôt que de gérer vous-même toute la complexité, vous pouvez laisser le navigateur s'en charger avec l'attribut popover et l'ensemble de fonctionnalités suivant. Les popovers HTML sont compatibles avec les éléments suivants :

• Promotion vers la couche supérieure. Les pop-ups s'affichent sur une couche distincte au-dessus du reste de la page. Vous n'avez donc pas besoin de vous soucier du z-index.
• Fonctionnalité de fermeture rapide. Cliquez en dehors de la zone du pop-up pour le fermer et rétablir la sélection.
• Gestion du focus par défaut. Lorsque vous ouvrez le pop-up, l'onglet suivant s'arrête dans le pop-up.
• Associations de clavier accessibles Appuyer sur la touche esc ferme le pop-up et rétablit le focus.
• Liaisons de composants accessibles. Connecter sémantiquement un élément de popover à un déclencheur de popover

Vous pouvez désormais créer des pop-ups avec toutes ces fonctionnalités sans utiliser JavaScript. Un popover de base nécessite trois éléments :

• Attribut popover sur l'élément contenant le popover.
• id sur l'élément contenant le popover.
• popovertarget avec la valeur de l'id du pop-up sur l'élément qui ouvre le pop-up.

<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Vous disposez maintenant d'un pop-up de base entièrement fonctionnel.

Ce pop-up peut être utilisé pour transmettre des informations supplémentaires ou comme widget de divulgation.

Valeurs par défaut et forçages

Par défaut, comme dans l'extrait de code précédent, configurer un popover avec un popovertarget signifie que le bouton ou l'élément qui ouvre le popover l'ouvre et le ferme. Cependant, vous pouvez également créer des pop-overs explicites à l'aide de popovertargetaction. Cette action remplace l'action toggle par défaut. popovertargetaction options sont les suivantes:

popovertargetaction="show": affiche le pop-up. popovertargetaction="hide" : masque le popover.

À l'aide de popovertargetaction="hide", vous pouvez créer un bouton de fermeture dans un pop-up, comme dans l'extrait suivant:

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

Popovers automatiques et manuels

L'utilisation de l'attribut popover seul est en réalité un raccourci pour popover="auto". Lorsqu'il est ouvert, le popover par défaut force la fermeture des autres pop-overs automatiques, à l'exception des pop-overs ancêtres. Il peut être ignoré via une option de fermeture ou un bouton de fermeture.

En revanche, le paramètre popover=manual crée un autre type de popover : un popover manuel. Ils ne forcent pas la fermeture d'un autre type d'élément et ne se ferment pas via un effet de rétroéclairage. Vous devez les fermer à l'aide d'un minuteur ou d'une action de fermeture explicite. Les types de popovers appropriés pour popover=manual sont des éléments qui apparaissent et disparaissent, mais qui ne doivent pas affecter le reste de la page, comme une notification toast.

Si vous explorez la démonstration ci-dessus, vous pouvez constater que le popover ne se ferme pas lorsque vous cliquez en dehors de sa zone. De plus, si d'autres fenêtres pop-up étaient ouvertes, elles ne se fermaient pas.

Pour examiner les différences:

Pop-ups avec popover=auto :

• Lorsqu'elle est ouverte, forcez la fermeture des autres fenêtres pop-up.
• Peut désactiver l'éclairage.

Pop-overs avec popover=manual:

• Ne forcez pas la fermeture d'un autre type d'élément.
• Ne pas fermer par appui sur le bouton d'alimentation. Fermez-les à l'aide d'un bouton d'activation/de désactivation.

Mettre en forme les popovers

Jusqu'à présent, vous avez découvert les pop-overs de base en HTML. popover propose également de belles fonctionnalités de style. L'une d'elles est la possibilité de styliser ::backdrop.

Dans les fenêtres pop-up auto, il s'agit d'un calque situé directement sous la couche supérieure (là où se trouve le pop-up), qui se trouve au-dessus du reste de la page. Dans l'exemple suivant, la couleur semi-transparente est appliquée à ::backdrop :

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

Différence entre un popover et un dialog

Notez que l'attribut popover ne fournit pas de sémantique par lui-même. Bien que vous puissiez désormais créer des expériences de type boîte de dialogue modale à l'aide de popover="auto", il existe quelques différences clés entre les deux:

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. popover permet l'arrêt léger. Un dialog modal ne le fait pas. Une boîte de dialogue modale rend le reste de la page inerte. Ce n'est pas le cas avec un popover.

La démonstration ci-dessus est une boîte de dialogue sémantique avec un comportement de pop-over. Cela signifie que le reste de la page n'est pas inerte et que la fenêtre pop-up de la boîte de dialogue se ferme légèrement. Vous pouvez créer cette boîte de dialogue avec un comportement de pop-over à l'aide du code suivant:

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

Bientôt disponible

Entrée et sortie interactives

Les navigateurs ne permettent pas encore d'animer des propriétés discrètes, y compris l'animation vers et depuis display: none, et vers et depuis la couche supérieure. Toutefois, elles sont prévues pour une prochaine version de Chromium, qui suivra de près cette version.

Grâce à la possibilité d'animer des propriétés distinctes et à l'utilisation de :popover-open et @starting-style, vous pouvez configurer des styles avant et après le changement pour permettre des transitions fluides lors de l'ouverture et de la fermeture des popovers. Prenons l'exemple précédent. L'animation de l'élément est beaucoup plus fluide et offre une expérience utilisateur plus fluide :

Positionnement de l'ancre

Les pop-ups sont très utiles lorsque vous souhaitez positionner une alerte, une fenêtre modale ou une notification en fonction de la fenêtre d'affichage. Mais les popovers sont également utiles pour les menus, les info-bulles et d'autres éléments qui doivent être positionnés par rapport à d'autres éléments. C'est là que l'ancrage CSS entre en jeu.

La démonstration de menu radial suivante utilise l'API popover ainsi que le positionnement d'ancrage CSS pour s'assurer que le popover #menu-items est toujours ancré à son déclencheur d'activation/de désactivation, le bouton #menu-toggle.

La configuration des ancres et des pop-overs est semblable:

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

Pour configurer une ancre en lui attribuant un id (dans cet exemple, #menu-toggle), puis utiliser anchor="menu-toggle" pour connecter les deux éléments. Vous pouvez maintenant utiliser anchor() pour styliser la fenêtre pop-up. Un menu popover centré ancré à la ligne de base du bouton d'activation de l'ancrage peut être stylisé comme suit :

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

Vous disposez désormais d'un menu contextuel entièrement fonctionnel, ancré au bouton d'activation et doté de toutes les fonctionnalités intégrées de la fenêtre pop-up, sans JavaScript.

Conclusion

L'API popover est la première étape d'une série de nouvelles fonctionnalités visant à faciliter la gestion des applications Web et à les rendre plus accessibles par défaut. J'ai hâte de voir comment vous utilisez les pop-ups !

Autres ressources à lire

• Les boîtes de dialogue et les pop-overs semblent similaires. En quoi sont-ils différents ?
• Sémantique et attribut popover
• Documentation MMD sur le pop-up
• Explication du pop-up OpenUI