Introduzione all'API popover

Una Kravets

I popup sono ovunque sul web. Puoi visualizzarli in menu, suggerimenti di attivazione/disattivazione e finestre di dialogo, ad esempio impostazioni dell'account, widget di informativa e anteprime delle schede di prodotto. Nonostante la loro diffusione, la loro creazione nei browser è ancora sorprendentemente complicata. Devi aggiungere script per gestire lo stato attivo, gli stati di apertura e chiusura, gli hook accessibili nei componenti, le associazioni da tastiera per accedere e uscire dall'esperienza e tutto questo prima ancora di iniziare a creare la funzionalità di base utile e unica del tuo popup.

Per risolvere il problema, nei browser verrà implementata una nuova serie di API HTML dichiarative per la creazione di popup, a partire dall'API popover in Chromium 114.

Attributo popover

Anziché gestire tutta la complessità, puoi lasciare che sia il browser a occuparsene con l'attributo popover e il successivo insieme di funzionalità. I popup HTML supportano:

• Promozione al livello superiore. I popup vengono visualizzati in un livello separato sopra il resto della pagina, quindi non devi preoccuparti dell'indice z.
• Funzionalità di chiusura rapida. Se fai clic all'esterno dell'area del popup, il popup si chiuderà e il focus tornerà al campo precedente.
• Gestione dell'attenzione predefinita. L'apertura del popup imposta la tabulazione successiva all'interno del popup.
• Scorciatoie da tastiera accessibili. Se premi il tasto esc, il popup si chiude e lo stato attivo viene ripristinato.
• Associazioni di componenti accessibili. Collegamento semantico di un elemento popup a un trigger popup.

Ora puoi creare popover con tutte queste funzionalità senza utilizzare JavaScript. Un popup di base richiede tre elementi:

• Un attributo popover sull'elemento contenente il popup.
• Un id sull'elemento contenente il popup.
• Un popovertarget con il valore del id del popup nell'elemento che lo apre.

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

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Ora hai un popup di base completamente funzionale.

Questo popup potrebbe essere utilizzato per trasmettere informazioni aggiuntive o come widget di informativa.

Valori predefiniti e sostituzioni

Per impostazione predefinita, ad esempio nello snippet di codice precedente, la configurazione di un popup con un popovertarget significa che il pulsante o l'elemento che lo apre lo aprirà e chiuderà. Tuttavia, puoi anche creare popover espliciti utilizzando popovertargetaction. Questa azione sostituisce l'azione di attivazione/disattivazione predefinita. Le opzioni popovertargetaction includono:

popovertargetaction="show": mostra il popup. popovertargetaction="hide": nasconde il popup.

Utilizzando popovertargetaction="hide", puoi creare un pulsante "Chiudi" all'interno di un popup, come nel seguente snippet:

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

Popover automatici e manuali

L'utilizzo dell'attributo popover da solo è in realtà una scorciatoia per popover="auto". Quando viene aperto, il popover predefinito chiuderà forzatamente gli altri popup automatici, ad eccezione dei popup dei progenitori. Può essere ignorata tramite un'azione di chiusura rapida o un pulsante di chiusura.

L'impostazione popover=manual, invece, crea un altro tipo di popup: un popup manuale. Questi non forzano la chiusura di nessun altro tipo di elemento e non si chiudono tramite la dismissione rapida. Devi chiuderle tramite un timer o un'azione di chiusura esplicita. I tipi di popup appropriati per popover=manual sono elementi che appaiono e scompaiono, ma non devono influire sul resto della pagina, ad esempio una notifica popup.

Se esamini la demo qui sopra, puoi vedere che fare clic all'esterno dell'area del popup non ne chiude la visualizzazione. Inoltre, se erano aperti altri popup, non si chiudevano.

Per esaminare le differenze:

Popover con popover=auto:

• Quando è aperto, forza la chiusura di altri popup.
• Può essere ignorato con un gesto.

Popover con popover=manual:

• Non forzare la chiusura di nessun altro tipo di elemento.
• Non ignorare la notifica con un tocco. Chiudili utilizzando un'azione di attivazione/disattivazione o di chiusura.

Aggiungere stili ai popup

Finora hai imparato a conoscere i popover di base in HTML. popover offre anche alcune interessanti funzionalità di stile. Una di queste è la possibilità di applicare uno stile a ::backdrop.

Nei popup auto, si tratta di un livello direttamente sotto il livello superiore (dove si trova il popup), che si trova sopra il resto della pagina. Nell'esempio seguente, a ::backdrop viene assegnato un colore semitrasparente:

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

La differenza tra un popover e un dialog

È importante notare che l'attributo popover non fornisce la semantica da solo. Ora puoi creare esperienze simili a finestre di dialogo modali utilizzando popover="auto", ma ci sono alcune differenze chiave tra le due:

Un elemento dialog aperto con dialog.showModal (una finestra di dialogo modale) è un'esperienza che richiede un'interazione esplicita dell'utente per chiudere la finestra modale. Un popover supporta la dismissione rapida. Un modale dialog non lo fa. Una finestra di dialogo modale rende inattivo il resto della pagina. Un popover no.

La demo sopra è una finestra di dialogo semantica con comportamento popup. Ciò significa che il resto della pagina non è inerte e che il popup della finestra di dialogo riceve il comportamento di chiusura rapida. Puoi creare questa finestra di dialogo con il comportamento popup utilizzando il seguente codice:

<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>

Disponibile a breve

Ingresso e uscita interattivi

La possibilità di animare proprietà distinte, inclusa l'animazione da e verso display: none e l'animazione da e verso il livello superiore, non è ancora disponibile nei browser. Tuttavia, sono previste per una versione futura di Chromium, che seguirà da vicino questa release.

Grazie alla possibilità di animare proprietà distinte e all'utilizzo di :popover-open e @starting-style, potrai configurare stili prima e dopo la modifica per consentire transizioni fluide all'apertura e alla chiusura dei popup. Prendiamo l'esempio precedente. L'animazione dentro e fuori è molto più fluida e supporta un'esperienza utente più fluida:

Posizionamento dell'ancora

I popup sono ideali quando vuoi posizionare un avviso, una finestra modale o una notifica in base alla visualizzazione. Tuttavia, i popup sono utili anche per menu, descrizioni comando e altri elementi che devono essere posizionati rispetto ad altri elementi. È qui che entra in gioco l'ancoraggio CSS.

La seguente demo del menu radiale utilizza l'API popover insieme al posizionamento dell'ancora CSS per garantire che il popover #menu-items sia sempre ancorato al suo attivatore di attivazione/disattivazione, il pulsante #menu-toggle.

La configurazione delle ancore è simile a quella dei popup:

<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>

Per configurare un'ancora, assegnale un id (in questo esempio, #menu-toggle) e utilizza anchor="menu-toggle" per collegare i due elementi. Ora puoi utilizzare anchor() per applicare uno stile al popup. Un menu popup centrato ancorato alla linea di base del pulsante di attivazione/disattivazione dell'ancoraggio potrebbe avere lo stile seguente:

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

Ora hai un menu popup completamente funzionale ancorato al pulsante di attivazione/disattivazione e con tutte le funzionalità integrate del popup, senza bisogno di JavaScript.

Conclusione

L'API popover è il primo passo di una serie di nuove funzionalità che semplificano la creazione di applicazioni web e le rendono più accessibili per impostazione predefinita. Non vedo l'ora di scoprire come utilizzerai i popup.

Letture aggiuntive

• Le finestre di dialogo e i popup sembrano simili. Quali sono le differenze?
• Semantica e attributo popover
• Documentazione MDN sui popup
• Spiegazione del popup OpenUI