Les notifications toast sont des messages d'état temporaires. Contrairement aux menus, ils ne doivent pas se fermer lorsqu'un utilisateur interagit avec d'autres parties de la page. L'état popover="manual" est idéal, car il ne présente pas de comportement de "fermeture par clic" et permet à plusieurs notifications de coexister.
Consignes de mise en œuvre
- OBLIGATOIRE : Utilisez popover="manual" pour que la notification reste visible jusqu'à ce qu'elle soit explicitement fermée ou qu'un script l'ait fait expirer.
- À FAIRE : Utilisez un conteneur pour gérer l'empilement de plusieurs toasts. Comme les popovers de la couche supérieure ignorent l'index Z parent, vous devez les positionner individuellement ou dans un groupe de mise en page commun.
- À FAIRE : Utilisez sibling-index() pour ajouter une marge entre les notifications toast afin que les éléments situés plus bas dans la pile soient visibles.
- À FAIRE : Fournissez un bouton "Fermer" explicite dans le toast à l'aide de popovertargetaction="hide".
- À FAIRE : Utilisez JavaScript pour les minuteurs de fermeture automatique (par exemple, en appelant hidePopover() après 3 000 ms).
- À FAIRE : Utilisez transition-behavior: allow-discrete pour animer l'entrée et la sortie de la couche supérieure.
Stratégies de remplacement
Solutions de remplacement et compatibilité des navigateurs pour Popover
L'API Popover est principalement une amélioration progressive, mais ses comportements déterminants (promotion de la couche supérieure, fermeture par clic en dehors de l'élément et appel de popovertarget) n'ont pas d'équivalent CSS uniquement. Les anciens navigateurs ont besoin d'un polyfill ou d'un remplacement manuel si vous préférez ne pas en fournir.
Polyfill : pour que l'attribut popover soit compatible avec les anciens navigateurs, chargez @oddbird/popover-polyfill de manière conditionnelle. OBLIGATOIRE : Détectez la fonctionnalité en vérifiant la propriété popover sur HTMLElement.prototype, et chargez le polyfill uniquement lorsque la compatibilité native est manquante. Ne le chargez PAS de manière inconditionnelle.
Avec un bundler ou une carte d'importation :
// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
import("@oddbird/popover-polyfill");
}
Sans bundler, importez depuis un CDN dans un <script type="module"> :
<script type="module">
if (!("popover" in HTMLElement.prototype)) {
import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
}
</script>
Mise en garde concernant l'application de styles : le polyfill ne peut pas définir la véritable pseudo-classe :popover-open. Il applique donc une classe .\:popover-open à la place. OBLIGATOIRE : Combinez les deux avec :is() ou :where(), sinon les navigateurs qui ne disposent pas de :popover-open ignorent l'intégralité de la règle :
[popover]:is(:popover-open, .\:popover-open) {
display: block;
}
Vous pouvez également utiliser position: fixed pour une solution de remplacement sans polyfill et calculer manuellement les coordonnées via getBoundingClientRect(), ou vous appuyer sur le positionnement par défaut avec inset: auto si cela convient à votre cas d'utilisation.
sibling-index()
- Conseil : Si sibling-index() n'est pas compatible, utilisez l'opérateur
+pour ajouter une marge manuellement. (par exemple,popover + popover { margin-top: 1rem })
anchor-positioning
- Conseil : Utilisez le polyfill de positionnement des ancres CSS. Pour une solution de remplacement sans polyfill, définissez l'info-bulle sur une position fixe en bas de la fenêtre d'affichage à l'aide de
@supports not (anchor-name: --foo).
transition-behavior
- Conseil : Si transition-behavior n'est pas pris en charge, utilisez JavaScript pour ajouter une animation via des classes lors de l'apparition et de la disparition de l'élément toast.