Présentation de l'API pop-over

Una Kravets

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

Navigateurs pris en charge

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

Source

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. Prise en charge des pop-ups HTML:

  • Promotion vers la couche supérieure. Les pop-overs s'affichent sur une couche distincte au-dessus du reste de la page, ce qui vous évite de devoir utiliser la propriété z-index.
  • Fonctionnalité Lumière désactivée 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, le prochain arrêt d'onglet se trouve dans le pop-up.
  • Associations de clavier accessibles Appuyez sur la touche esc pour fermer le pop-up et replacer le curseur au premier plan.
  • 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 pop-up.
  • 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>
.

Fenêtres pop-up automatiques ou manuelles

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 fermeture rapide 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 pop-overs appropriés pour popover=manual sont des éléments qui apparaissent et disparaissent, mais ils ne doivent pas affecter le reste de la page, comme un toast.

Si vous consultez la démo ci-dessus, vous pouvez constater qu'un clic en dehors de la zone de la fenêtre pop-up ne permet pas de la fermer à la lumière. De plus, si d'autres popovers étaient ouverts, ils 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 être ignoré en appuyant sur le bouton d'alimentation.

Pop-overs avec popover=manual:

  • Ne forcez pas la fermeture d'un autre type d'élément.
  • Ne pas désactiver le mode clair. Fermez-les à l'aide d'un bouton d'activation/de désactivation.

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 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. 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. 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 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 à l'intérieur et à l'extérieur 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 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