L'API Popover atterrit en ligne de référence

Una Kravets

La mise à jour va prendre effet ! L'une des fonctionnalités que j'attends le plus avec impatience vient d'être déployée sur tous les navigateurs modernes et fait officiellement partie de la référence 2024. Cette fonctionnalité est l'API Popover. Les pop-ups offrent de nombreuses primitives et affordances pour les développeurs afin de créer des interfaces multicouches telles que des info-bulles, des menus, des UI pédagogiques, etc.

Navigateurs pris en charge

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

Source

Voici quelques-unes des fonctionnalités des popovers:

  • Promotion vers la couche supérieure. Les pop-ups s'affichent dans la couche supérieure au-dessus du reste de la page. Vous n'avez donc pas besoin de jouer avec 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 ou activer/désactiver deux fois le bouton permet de fermer le pop-up et de rétablir la sélection.
  • Liaisons de composants accessibles. Connecter sémantiquement un élément de popover à un déclencheur de popover

Créer des popovers

La création de popovers est assez simple. Pour utiliser des valeurs par défaut, il vous suffit d'un button pour déclencher le popover et d'un élément à déclencher.

  • Commencez par définir un attribut popover sur l'élément qui va servir de popover.
  • Ajoutez ensuite un id unique à l'élément popover.
  • Enfin, pour connecter le bouton au popover, définissez le popovertarget du bouton sur la valeur du id de l'élément popover.

Ce processus est illustré dans le code suivant :

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

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>
Exemple d'utilisation de base de l'attribut popover.

Pour un contrôle plus précis du pop-up, vous pouvez définir explicitement des types de pop-ups. Par exemple, utiliser un attribut popover sans valeur est équivalent à popover="auto". La valeur auto active le comportement de fermeture légère et ferme automatiquement les autres popovers. Utilisez popover="manual" et vous devrez ajouter un bouton de fermeture. Les popovers manuels ne ferment pas les autres popovers et ne permettent pas aux utilisateurs de les fermer en cliquant ailleurs dans l'UI. Vous créez un pop-up manuel à l'aide des éléments suivants:

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

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>
Exemple de pop-up manuel.

Pop-up par rapport à la boîte de dialogue modale

Vous vous demandez peut-être si vous avez besoin d'un pop-up lorsqu'une boîte de dialogue existe. La réponse est que vous n'en avez peut-être pas besoin.

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 d'un popover, il existe quelques différences clés entre les deux:

Élément <dialog> modal

  • Ouvrir avec dialog.showModal()
  • Résolu avec dialog.close().
  • Rend le reste de la page inerte.
  • Ne prend pas en charge le comportement de fermeture de la lumière.
  • Vous pouvez styliser l'état ouvert à l'aide de l'attribut [open].
  • Représente sémantiquement un composant interactif qui bloque l'interaction avec le reste de la page.

Attribut [popover]

  • Peut être ouvert avec un invocateur déclaratif (popovertarget).
  • Fermé avec popovertarget (popover automatique) ou popovertargetaction=hide (popover manuel).
  • Ne rend pas le reste de la page inerte.
  • Compatible avec le comportement de fermeture de la lumière.
  • Vous pouvez styliser l'état ouvert à l'aide de la pseudo-classe :popover-open.
  • Aucune sémantique inhérente.

Conclusion et lectures complémentaires

popover apporte de nombreuses fonctionnalités intéressantes à la plate-forme. Pour en savoir plus sur cette API, y compris sur l'accessibilité de la fonctionnalité et la documentation sur l'ensemble de fonctionnalités, consultez les ressources suivantes: