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

Una Kravets

La mise à jour va prendre effet ! L'une des fonctionnalités qui me passionnent le plus vient d'arriver sur tous les navigateurs modernes et fait officiellement partie de Baseline 2024. Il s'agit de l'API Popover. Popover fournit de nombreuses primitives et affordances de développement performantes pour créer des interfaces multicouches telles que des info-bulles, des menus, des interfaces utilisateur d'enseignement, etc.

Navigateurs pris en charge

  • Chrome: 114 <ph type="x-smartling-placeholder">
  • Edge: 114 <ph type="x-smartling-placeholder">
  • Firefox: 125 <ph type="x-smartling-placeholder">
  • Safari: 17. <ph type="x-smartling-placeholder">

Source

Voici quelques-uns des avantages des fenêtres pop-up:

  • Promotion dans la couche supérieure. Les pop-overs s'affichent dans la couche supérieure, au-dessus du reste de la page. Vous n'avez donc pas à jouer avec z-index.
  • Fonctionnalité Lumière désactivée Si vous cliquez en dehors de la zone, cette dernière se ferme et le curseur est à nouveau activé.
  • Gestion du focus par défaut. Lorsque vous ouvrez le pop-up, l'onglet suivant s'arrête dans le pop-up.
  • Combinaisons de touches accessibles : Appuyez sur la touche esc ou appuyez deux fois sur l'écran pour fermer le pop-up et replacer le curseur au premier plan.
  • Liaisons de composants accessibles. Connexion sémantique d'un élément de pop-over à un déclencheur de fenêtre contextuelle.

Créer des pop-overs

La création de fenêtres pop-up est assez simple. Pour utiliser les valeurs par défaut, il vous suffit de disposer d'un button pour déclencher le pop-up et d'un élément à déclencher.

  • Tout d'abord, définissez un attribut popover sur l'élément qui sera le pop-up.
  • Ensuite, ajoutez un id unique à l'élément pop-up.
  • Enfin, pour connecter le bouton au pop-up, définissez l'popovertarget du bouton sur la valeur de l'id de l'élément de pop-over.

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>
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
Exemple basique d'utilisation de l'attribut popover.

Pour exercer un contrôle plus précis sur le pop-up, vous pouvez définir explicitement les types de pop-up. Par exemple, utiliser un attribut popover simple sans valeur revient à utiliser popover="auto". La valeur auto active le comportement d'abandon léger et ferme automatiquement les autres fenêtres pop-up. Utilisez popover="manual" pour ajouter un bouton de fermeture. Les pop-ups manuels ne ferment pas les autres fenêtres pop-up et ne permettent pas aux utilisateurs de le fermer en cliquant ailleurs dans l'interface utilisateur. Vous pouvez créer 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>
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
Exemple de pop-over manuel.

Boîte de dialogue pop-up ou modale

Vous vous demandez peut-être si vous avez besoin d'un pop-over alors qu'une boîte de dialogue existe et que la réponse est: ce n'est peut-être pas le cas.

Il est important de noter que l'attribut popover ne fournit pas de sémantique en lui-même. Bien que vous puissiez désormais créer des expériences de type boîte de dialogue modale à l'aide d'un pop-up, il existe quelques différences clés entre les deux:

L'élément <dialog> modal

  • Ouvert avec dialog.showModal().
  • Fermée avec dialog.close().
  • Rend le reste de la page inerte.
  • Non compatible avec le comportement de fermeture en mode clair.
  • Vous pouvez styliser l'état ouvert avec l'attribut [open].
  • Représente de manière sémantique un composant interactif qui bloque l'interaction avec le reste de la page.

Attribut [popover]

  • Peut être ouvert avec un demandeur déclaratif (popovertarget).
  • Fermée avec popovertarget (pop-over automatique) ou popovertargetaction=hide (pop-over manuel).
  • Le reste de la page n'est pas inerte.
  • Accepte le comportement d'arrêt clair.
  • Vous pouvez styliser l'état ouvert avec la pseudo-classe :popover-open.
  • Pas de sémantique inhérente.

Conclusion et autres documents

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