L'API Popover arriva nella base di riferimento

Una Kravets

È arrivato il momento: Una delle funzionalità che mi piacciono di più è appena arrivata su tutti i browser moderni ed è ufficialmente parte di Baseline 2024. Si tratta dell'API Popover. Popover offre moltissime primitive e fantastiche opportunità di sviluppo per gli sviluppatori per la creazione di interfacce a più livelli come descrizioni dei comandi, menu, UI per l'insegnamento e altro ancora.

Supporto dei browser

  • 114
  • 114
  • 125
  • 17

Origine

Ecco alcuni esempi di funzionalità popover:

  • Promozione al livello superiore. I popover verranno visualizzati nel livello superiore sopra il resto della pagina, quindi non dovrai sperimentare con z-index.
  • Funzionalità per ignorare la sveglia. Se fai clic all'esterno dell'area popover, il popover verrà chiuso e verrà ripristinato lo stato attivo.
  • Gestione predefinita dell'elemento attivo. Quando apri il popover, la tabulazione successiva viene bloccata all'interno del popover.
  • Associazioni da tastiera accessibili. Premi il tasto esc o attiva/disattiva due volte il popover per chiudere il popover e ripristinare lo stato attivo.
  • Associazioni di componenti accessibili. La connessione di un elemento popover a un popover attiva in modo semantico.

Creazione di popover

La creazione dei popover è piuttosto semplice. Per utilizzare i valori predefiniti, è sufficiente un button per attivare il popover e un elemento da attivare.

  • Per prima cosa, imposta un attributo popover sull'elemento che sarà il popover.
  • Quindi, aggiungi un id univoco nell'elemento popover.
  • Infine, per collegare il pulsante al popover, imposta popovertarget del pulsante sul valore id dell'elemento popover.

Questo viene mostrato nel seguente codice:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>
Un esempio base di utilizzo dell'attributo popover.

Per un controllo più granulare sui popover, puoi impostare esplicitamente i tipi di popover. Ad esempio, utilizzare un attributo popover essenziale senza valore equivale a utilizzare popover="auto". Il valore auto consente di spegnere la sveglia e chiude automaticamente gli altri popover. Usa popover="manual" e dovrai aggiungere un pulsante di chiusura. I popover manuali non chiudono altri popover né consentono agli utenti di ignorarli facendo clic fuori dall'interfaccia utente. Per creare un popover manuale devi utilizzare quanto segue:

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>
Un esempio di popover manuale.

Popover e finestra di dialogo modale

Forse ti starai chiedendo se hai bisogno del popover quando è presente una finestra di dialogo e la risposta è: forse no.

È importante notare che l'attributo popover non fornisce la semantica in modo autonomo. Anche se ora è possibile creare esperienze simili a finestre di dialogo modali utilizzando i popover, esistono alcune differenze fondamentali tra i due:

L'elemento modale <dialog>

  • Aperto con dialog.showModal().
  • Chiusa con dialog.close().
  • Rende inerte il resto della pagina.
  • Non supporta il comportamento di chiusura leggera.
  • Puoi definire lo stato aperto con l'attributo [open].
  • Rappresenta semanticamente un componente interattivo che blocca l'interazione con il resto della pagina.

Attributo [popover]

  • Può essere aperto con un richiamo dichiarativo (popovertarget).
  • Chiuso con popovertarget (popover automatico) o popovertargetaction=hide (popover manuale).
  • Non rende inerte il resto della pagina.
  • Supporta il comportamento di chiusura leggera.
  • Puoi definire lo stato aperto con la pseudo-classe :popover-open.
  • Nessuna semantica intrinseca.

Conclusione e ulteriore lettura

popover offre molte funzionalità interessanti sulla piattaforma. Per saperne di più su questa API, ad esempio sull'accessibilità della funzione e sulla documentazione relativa al set di funzionalità, di seguito sono riportate alcune informazioni consigliate: