Les fenêtres pop-up sont partout sur le Web. Vous pouvez les voir dans les menus, les boutons d'activation/de désactivation et les boîtes de dialogue, qui peuvent se manifester sous forme de paramètres de compte, de widgets de communiqués et d'aperçus de fiches produit. Bien que ces composants soient très répandus, leur création dans les navigateurs reste étonnamment fastidieuse. Vous devez ajouter des scripts pour gérer le focus, les états d'ouverture et de fermeture, des hooks accessibles dans les composants, des combinaisons de touches pour ouvrir et quitter l'expérience, et tout cela avant même de commencer à créer la fonctionnalité utile, unique et de base de votre pop-over.
Pour résoudre ce problème, un nouvel ensemble d'API HTML déclaratives permettant de créer des fenêtres pop-up est disponible dans les navigateurs, en commençant 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 suivant. Prise en charge des fenêtres pop-up HTML:
- Promotion sur la couche supérieure. Les fenêtres pop-up s'affichent sur une couche distincte au-dessus du reste de la page. Vous n'avez donc pas besoin de saisir un z-index.
- Fonctionnalité Light-Ignorer. Si vous cliquez en dehors de la zone pop-up, celui-ci se ferme et le curseur est rétabli.
- Gestion des sélections par défaut. Si vous ouvrez le pop-over, l'onglet suivant s'arrête dans celui-ci.
- Combinaisons de claviers accessibles. Appuyez sur la touche
escpour fermer le pop-up et rétablir le focus. - Liaisons de composants accessibles. Connecter un élément de pop-over à un déclencheur de pop-over sémantiquement.
Vous pouvez désormais créer des fenêtres pop-up avec toutes ces fonctionnalités sans utiliser JavaScript. Un pop-up de base nécessite trois éléments:
- Un attribut
popoversur l'élément contenant le pop-over - Une
idsur l'élément contenant le pop-over. - Une
popovertargetavec la valeur de l'iddu pop-up sur l'élément qui ouvre le pop-over.
<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-over de base entièrement fonctionnel.
Cette fenêtre contextuelle peut être utilisée pour transmettre des informations supplémentaires ou comme un widget de divulgation.
Valeurs par défaut et forçages
Par défaut, comme dans l'extrait de code précédent, si vous configurez un pop-up avec popovertarget, le bouton ou l'élément qui ouvre le pop-up l'ouvrira et se fermera. Toutefois, vous pouvez également créer des fenêtres contextuelles explicites à l'aide de popovertargetaction. Cette action remplace l'action toggle par défaut. Les options popovertargetaction incluent:
popovertargetaction="show": affiche le pop-over.
popovertargetaction="hide": masque le pop-over.
popovertargetaction="hide" vous permet de 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>
Fenêtres pop-over automatiques ou manuelles
L'utilisation de l'attribut popover seul est un raccourci pour popover="auto". Lorsqu'elle est ouverte, la valeur par défaut popover force la fermeture des autres fenêtres pop-over automatiques, à l'exception de celles des ancêtres. Elle peut être ignorée à l'aide d'un bouton d'arrêt léger ou d'un bouton de fermeture.
En revanche, la définition de popover=manual crée un autre type de pop-up: un pop-up manuel. Ils ne forcent pas la fermeture d'un autre type d'élément et ne se ferment pas via Light-Dismiss. Vous devez les fermer à l'aide d'un minuteur ou d'une action de fermeture explicite. Les types de fenêtres pop-up appropriées pour popover=manual sont des éléments qui apparaissent et disparaissent, mais ne doivent pas affecter le reste de la page, comme un toast.
Si vous explorez la démo ci-dessus, vous pouvez constater que le fait de cliquer en dehors de la zone contextuelle ne la fait pas fermer légèrement. De plus, si d'autres fenêtres pop-up s'ouvrent, elles ne se ferment pas.
Pour examiner les différences:
Pop-overs avec popover=auto:
- Une fois ouvert, forcez la fermeture des autres pop-overs.
- Peut ignorer la lumière.
Pop-overs avec popover=manual:
- Ne forcez pas la fermeture d'autres types d'éléments.
- Ne pas fermer légèrement. Fermez-les à l'aide d'un bouton d'activation/de désactivation ou de fermeture.
Appliquer un style aux fenêtres pop-up
Jusqu'à présent, vous avez appris à connaître les fenêtres contextuelles de base en HTML. Toutefois, popover offre également des fonctionnalités de style intéressantes. L'une d'entre elles est la possibilité de styliser ::backdrop.
Dans les pop-ups auto, il s'agit d'un calque situé directement sous la couche supérieure (où se trouve le pop-over), qui se trouve au-dessus du reste de la page. Dans l'exemple suivant, une couleur semi-transparente est attribuée à ::backdrop:
#size-guide::backdrop {
background: rgb(190 190 190 / 50%);
}
Différence entre popover et dialog
Il est important de noter que l'attribut popover ne fournit pas de sémantique seule. 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 Light-Dismiss. Ce n'est pas le cas d'un dialog modal.
Une boîte de dialogue modale rend le reste de la page inerte. Ce n'est pas le cas de popover.
La démonstration ci-dessus est une boîte de dialogue sémantique avec un comportement contextuel. Cela signifie que le reste de la page n'est pas inerte et que le pop-up de la boîte de dialogue a un comportement léger. Vous pouvez créer cette boîte de dialogue avec le comportement d'un 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 distinctes, y compris l'animation vers et depuis display: none et l'animation vers et depuis la couche supérieure. Une version de Chromium, qui suit de près, est toutefois prévue.
Vous pouvez animer des propriétés distinctes et utiliser :popover-open et @starting-style pour configurer des styles avant et après modification afin d'assurer des transitions fluides lors de l'ouverture et de la fermeture des pop-overs. Reprenons l'exemple précédent. L'animation visuelle est beaucoup plus fluide et offre une expérience utilisateur plus fluide:
Positionnement de l'ancre
Les pop-overs sont particulièrement utiles lorsque vous souhaitez positionner une alerte, une fenêtre modale ou une notification en fonction de la fenêtre d'affichage. Mais 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émo suivante du menu radial utilise l'API du pop-up et le positionnement de l'ancrage CSS pour s'assurer que le pop-over #menu-items est toujours ancré à son déclencheur d'activation, à savoir le bouton #menu-toggle.
La configuration des ancrages est semblable à la configuration des pop-overs:
<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, attribuez-lui un id (dans cet exemple, #menu-toggle), puis utilisez anchor="menu-toggle" pour connecter les deux éléments. Vous pouvez maintenant utiliser anchor() pour appliquer un style au pop-over. Un menu contextuel centré ancré à la ligne 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, sans JavaScript.
Conclusion
L'API contextuelle est la première étape d'une série de nouvelles fonctionnalités visant à faciliter la création d'applications Web et à les rendre plus accessibles par défaut. J'ai hâte de voir comment tu utilises les pop-overs !