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 nei browser, la loro creazione nei browser è ancora sorprendentemente complessa. Devi aggiungere script per gestire lo stato attivo, lo stato di apertura e chiusura, gli hook accessibili nei componenti, le associazioni di tastiera per entrare e uscire dall'esperienza, il tutto ancor prima di iniziare a creare la funzionalità di base utile e unica del popover.

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

Supporto dei browser

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Origine

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

  • Passa al livello superiore. I popover verranno visualizzati su un livello separato sopra il resto della pagina, così non dovrai preoccuparti di usare z-index.
  • 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. Se apri il popover, la scheda successiva si ferma all'interno del popover.
  • Associazioni da tastiera accessibili. Se premi il tasto esc, il popover verrà chiuso e ripristinerà lo stato attivo.
  • 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 popover di base richiede tre cose:

  • Un attributo popover sull'elemento contenente il popup.
  • Un id nell'elemento contenente il popup.
  • Un elemento popovertarget con il valore id del popover sull'elemento che apre il popover.
<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 di popovertargetaction includono:

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

Con 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 popover: il popover manuale. Questi elementi non forzano la chiusura di altri tipi di elementi e non si chiudono con la funzionalità di eliminazione della luce. Devi chiuderli tramite un timer o un'azione di chiusura esplicita. I tipi di popover appropriati per popover=manual sono elementi che vengono visualizzati e scompaiono, ma che non dovrebbero influire sul resto della pagina, ad esempio una notifica popup.

Se esamini la demo precedente, puoi constatare che facendo clic all'esterno dell'area del popover, il popover non viene semplicemente ignorato. Inoltre, se ci fossero altri popover aperti, non si chiuderebbero.

Per esaminare le differenze:

Popover con popover=auto:

  • Quando è aperto, chiudi forzatamente gli altri popover.
  • Può ignorare con la luce.

Popover con popover=manual:

  • Non forzare la chiusura di nessun altro tipo di elemento.
  • Non spegnere la luce. Chiudili utilizzando un'azione di attivazione/disattivazione o di chiusura.

Stili dei popover

Finora hai appreso 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 popover auto, si tratta di un livello direttamente sotto il livello superiore (dove si trova il popover), che si trova sopra il resto della pagina. Nell'esempio seguente, all'elemento ::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 autonomamente. 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 disattivazione della luce. Un popup dialog non lo fa. Una finestra di dialogo modale rende inattivo il resto della pagina. Un popover no.

La demo precedente è una finestra di dialogo semantica con comportamento del popover. 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 del popover 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

Entrata e uscita interattive

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à discrete e all'uso di :popover-open e @starting-style, potrai impostare gli stili prima e dopo la modifica per consentire transizioni fluide durante l'apertura e la chiusura dei popover. 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 e il posizionamento dell'ancoraggio CSS per garantire che il popover #menu-items sia sempre ancorato al suo attivatore di attivazione/disattivazione, il pulsante #menu-toggle.

L'impostazione degli ancoraggi è simile a quella dei popover:

<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 poi utilizza anchor="menu-toggle" per collegare i due elementi. Ora puoi usare anchor() per applicare uno stile al popover. Un menu popover centrato ancorato alla base dell'opzione 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 popover completamente funzionale ancorato al pulsante di attivazione/disattivazione e ha tutte le funzionalità integrate del popover, senza bisogno di JavaScript.

Conclusione

L'API popover è il primo passo di una serie di nuove funzionalità per rendere la creazione di applicazioni web più facile da gestire e più accessibile per impostazione predefinita. Non vedo l'ora di vedere come usate i popover.

Letture aggiuntive