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:

• Passa al livello superiore. I popup vengono visualizzati in un livello separato sopra il resto della pagina, quindi non devi preoccuparti dell'indice z.
• Funzionalità per ignorare facilmente. 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 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 elementi:

• Un attributo popover sull'elemento contenente il popup.
• Un id sull'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 popover di base completamente funzionale.

Questo popover può essere utilizzato per trasmettere informazioni aggiuntive o come widget di divulgazione.

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

Utilizzando popovertargetaction="hide", puoi creare un pulsante di "chiusura" all'interno di un popover, come nello snippet seguente:

<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 ignorato tramite la funzionalità Ignora luce o un pulsante di chiusura.

L'impostazione popover=manual, invece, crea un altro tipo di popup: un popup manuale. Questi elementi non forzano la chiusura di qualsiasi altro tipo di elemento e non si chiudono con la funzionalità di eliminazione della luce. Devi chiuderle 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 di avviso 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, chiudi forzatamente gli altri popover.
• Può essere ignorato con un gesto.

Popover con popover=manual:

• Non forzare la chiusura di nessun altro tipo di elemento.
• Non ignorare la notifica. 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, 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 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 il resto della pagina inerte. 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

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, è prevista un'imminente versione di Chromium, poco dopo 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 popover sono ideali per posizionare un avviso, una finestra modale o una notifica in base all'area visibile. 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 ancoraggio, assegnagli un id (in questo esempio, #menu-toggle) e poi usi anchor="menu-toggle" per collegare i due elementi. Ora puoi usare anchor() per applicare uno stile al popover. 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 popover sembrano simili. In cosa differiscono?
• Semantica e attributo popover
• Documentazione MDN sui popup
• Spiegazione del popup OpenUI