Présentation de l'API pop-over

Les pop-ups sont partout sur le Web. Vous pouvez les voir dans les menus, les info-bulles et les boîtes de dialogue, qui peuvent se présenter sous la forme de paramètres de compte, de widgets de divulgation 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 la sélection, les états d'ouverture et de fermeture, les crochets accessibles dans les composants, les combinaisons de touches pour accéder et quitter l'expérience, et ce, avant même de commencer à créer la fonctionnalité de base utile et unique de votre popover.

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 toute la complexité vous-même, vous pouvez laisser le navigateur s'en charger avec l'attribut popover et l'ensemble de fonctionnalités qui en découle. 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 de la mise au point par défaut Lorsque vous ouvrez le pop-up, le prochain arrêt d'onglet se trouve 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 popovers 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 popover sur l'élément qui ouvre le popover.

<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. Toutefois, vous pouvez également créer des popovers explicites à l'aide de popovertargetaction. Cette action remplace l'action toggle (Basculer) par défaut. Les options popovertargetaction sont les suivantes:

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

Avec popovertargetaction="hide", vous pouvez créer un bouton "Fermer" dans un popover, comme dans l'extrait de code 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, popover par défaut force la fermeture des autres pop-ups automatiques, à l'exception des pop-ups 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 la fermeture légère. 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 popovers étaient ouverts, ils ne se fermaient pas.

Pour examiner les différences:

Pop-ups avec popover=auto:

• Lorsque le popover est ouvert, forcez la fermeture des autres popovers.
• Peut être ignoré en appuyant sur le bouton d'alimentation.

Pop-ups avec popover=manual:

• Ne forcez pas la fermeture d'un autre type d'élément.
• Ne pas ignorer par lumière. Fermez-les à l'aide d'un bouton d'activation/de désactivation ou d'une action de fermeture.

Mettre en forme les popovers

Jusqu'à présent, vous avez appris les popovers 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 popovers auto, il s'agit d'une couche située directement sous la couche supérieure (où se trouve le popover), 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

Il est important de noter 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 semblables à des boîtes de dialogue modales à 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. 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.

La démonstration ci-dessus est une boîte de dialogue sémantique avec un comportement popover. Cela signifie que le reste de la page n'est pas inerte et que le comportement de fermeture de la boîte de dialogue popover est léger. Vous pouvez créer cette boîte de dialogue avec un comportement de popover à 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

La possibilité d'animer des propriétés distinctes, y compris d'animer depuis et vers display: none, et d'animer depuis et vers la couche supérieure n'est pas encore disponible dans les navigateurs. 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 des ancrages

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à qu'intervient l'ancrage CSS.

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 est semblable à celle des popovers:

<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 un ancrage, attribuez-lui un id (#menu-toggle dans cet exemple), puis utilisez anchor="menu-toggle" pour connecter les deux éléments. Vous pouvez maintenant utiliser anchor() pour styliser le popover. 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 popover entièrement fonctionnel, ancré au bouton d'activation/de désactivation et doté de toutes les fonctionnalités intégrées du popover, sans JavaScript !

Conclusion

L'API popover est la première étape d'une série de nouvelles fonctionnalités qui facilitent la création d'applications Web et les rendent plus accessibles par défaut. Nous avons hâte de voir comment vous allez utiliser les popovers.

Autres ressources à lire

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