Creazione di notifiche popup

Le notifiche toast sono messaggi di stato temporanei. A differenza dei menu, non devono chiudersi quando un utente interagisce con altre parti della pagina. Lo stato popover="manual" è ideale perché non ha il comportamento "light-dismiss" e consente la coesistenza di più notifiche.

Linee guida per l'implementazione

• OBBLIGATORIO: utilizza popover="manual" in modo che la notifica rimanga visibile finché non viene chiusa esplicitamente o non scade tramite uno script.
• SÌ: utilizza un container per gestire l'impilamento di più toast. Poiché i popover nel livello superiore ignorano l'indice z principale, devi posizionarli singolarmente o all'interno di un gruppo di layout comune.
• SÌ: utilizza sibling-index() per aggiungere un margine tra le notifiche toast in modo che gli elementi più in basso nello stack siano visibili.
• SÌ: fornisci un pulsante "Chiudi" esplicito all'interno del toast utilizzando popovertargetaction="hide".
• SÌ: utilizza JavaScript per i timer di chiusura automatica (ad es. chiamando hidePopover() dopo 3000 ms).
• DO utilizza transition-behavior: allow-discrete per animare l'entrata e l'uscita dal livello superiore.

Strategie di fallback

Alternative e supporto del browser per Popover

L'API Popover è per lo più un potenziamento progressivo, ma i suoi comportamenti distintivi (promozione al livello superiore, chiusura con un clic e attivazione di popovertarget) non hanno un equivalente solo CSS. I browser meno recenti richiedono un polyfill o un fallback manuale se preferisci non fornirne uno.

Polyfill: per supportare l'attributo popover nei browser meno recenti, carica @oddbird/popover-polyfill in modo condizionale. OBBLIGATORIO: esegui il rilevamento delle funzionalità controllando la proprietà popover su HTMLElement.prototype e carica il polyfill solo quando manca il supporto nativo; NON caricarlo incondizionatamente.

Con un bundler o una mappa di importazione:

// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
  import("@oddbird/popover-polyfill");
}

Senza un bundler, importa da una CDN all'interno di 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>

Avvertenza sullo stile: il polyfill non può definire la pseudo-classe :popover-open reale, quindi applica una classe .\:popover-open. OBBLIGATORIO: combina i due elementi con :is() o :where(), altrimenti i browser che non dispongono di :popover-open ignorano l'intera regola:

[popover]:is(:popover-open, .\:popover-open) {
  display: block;
}

In alternativa, per un fallback legacy senza un polyfill, utilizza position: fixed e calcola manualmente le coordinate tramite getBoundingClientRect() o affidati al posizionamento predefinito con inset: auto se è accettabile per il caso d'uso.

sibling-index()

• Indicazioni: se sibling-index() non è supportato, utilizza l'operatore + per aggiungere il margine manualmente. Ad esempio popover + popover { margin-top: 1rem }

anchor-positioning

• Indicazioni: utilizza il polyfill per il posizionamento degli ancoraggi CSS. Per un comportamento di riserva senza polyfill, imposta il tooltip su una posizione fissa nella parte inferiore dell'area visibile utilizzando @supports not (anchor-name: --foo).

transition-behavior

• Indicazioni: se transition-behavior non è supportato, utilizza JavaScript per aggiungere l'animazione tramite classi durante la transizione dell'elemento toast.