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édominance de ces composants, leur intégration dans les navigateurs reste étonnamment fastidieuse. 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 permettant de créer des pop-overs sera disponible dans les navigateurs, en commençant 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. Prise en charge des pop-ups HTML:
- Promotion dans 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 Si vous cliquez en dehors de la zone qui s'affiche, celle-ci se ferme et vous remettez le curseur en avant.
- 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
escpour 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.
Vous pouvez désormais créer des pop-ups avec toutes ces fonctionnalités sans utiliser JavaScript. Un pop-over de base nécessite trois éléments:
- Un attribut
popoversur l'élément contenant le pop-up idsur l'élément contenant le pop-up.popovertargetavec la valeur de l'iddu 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'une fenêtre contextuelle de base entièrement fonctionnelle.
Ce pop-over peut être utilisé pour fournir des informations supplémentaires ou comme widget de divulgation.
Valeurs par défaut et remplacements
Par défaut, comme dans l'extrait de code précédent, la configuration d'un pop-up avec popovertarget signifie que le bouton ou l'élément qui ouvre la fenêtre pop-up l'ouvrira et la fermera. 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 pop-up.
À 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>
Pop-overs 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. Vous pouvez l'ignorer à l'aide d'un bouton clair ou d'un bouton de fermeture.
En revanche, la définition de popover=manual crée un autre type de pop-over: le pop-up 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 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 les notifications 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 fenêtres pop-up étaient ouvertes, elles ne se fermaient pas.
Pour examiner les différences:
Pop-overs 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 des autres types d'éléments.
- Ne pas désactiver le mode clair. Fermez-les à l'aide d'un bouton d'activation/de désactivation.
Appliquer un style aux pop-ups
Jusqu'à présent, vous avez découvert les pop-overs de base en HTML. popover propose également des fonctionnalités de style intéressantes. L'une d'elles est la possibilité d'appliquer un style à ::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, ::backdrop reçoit une couleur semi-transparente:
#size-guide::backdrop {
background: rgb(190 190 190 / 50%);
}
Différence entre une popover et une dialog
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 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 modale.
popover permet l'arrêt léger. Ce n'est pas le cas d'une dialog modale.
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 le pop-over de la boîte de dialogue se met à ignorer un peu l'écran. 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, une prochaine version de Chromium devrait être disponible, à la suite de cette mise à jour.
Vous pouvez animer des propriétés discrètes, et à l'aide de :popover-open et @starting-style, afin de pouvoir configurer des styles avant et après modification pour permettre des transitions fluides lors de l'ouverture et de la fermeture des pop-overs. 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 de l'ancre
Les pop-ups sont particulièrement utiles lorsque vous souhaitez positionner une alerte, une modale ou une notification en fonction de la fenêtre d'affichage. Toutefois, les pop-ups 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 du menu radial ci-dessous utilise l'API popover ainsi que le positionnement de l'ancre CSS pour garantir que la fenêtre pop-up #menu-items est toujours ancrée à son déclencheur d'activation, à savoir 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 contextuel centré ancré à la ligne de base du bouton d'activation/de désactivation 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 !