I popover sono ovunque sul web. Puoi vederli in menu, suggerimenti di attivazione/disattivazione e finestre di dialogo, che potrebbero manifestarsi come 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 questo problema, nei browser sarà disponibile un nuovo set di API HTML dichiarative per la creazione di popover, a partire dall'API popover in Chromium 114.
Attributo popover
Invece di gestire da solo 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à per ignorare facilmente. Se fai clic all'esterno dell'area popover, il popover verrà chiuso e ripristinerà lo stato attivo.
- Gestione predefinita dello stato attivo. 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. Connessione di un elemento popover a un trigger popover semanticamente.
Ora puoi creare popover con tutte queste funzionalità senza utilizzare JavaScript. Un popover di base richiede tre cose:
- Un attributo
popovernell'elemento contenente il popover. - Un elemento
idsull'elemento contenente il popover. - Un elemento
popovertargetcon il valoreiddel 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 override
Per impostazione predefinita, ad esempio nello snippet di codice precedente, la configurazione di un popover con popovertarget comporta l'attivazione o la chiusura del pulsante o dell'elemento che apre il popover. Tuttavia, puoi anche creare popover espliciti utilizzando popovertargetaction. Questa azione sostituisce l'azione predefinita di attivazione/disattivazione. Le opzioni di popovertargetaction includono:
popovertargetaction="show": mostra il popover.
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 valore predefinito popover forza la chiusura di altri popover automatici, ad eccezione dei popover predecessori. Può essere ignorato tramite la funzionalità Ignora luce o un pulsante di chiusura.
Se invece imposti popover=manual, viene creato un altro tipo di popover: il popover manuale. Non forzano la chiusura di nessun altro tipo di elemento e non si chiudono con la funzionalità di chiusura della luce. Devi chiuderli tramite un timer o un'azione di chiusura esplicita. I tipi di popover appropriati per popover=manual sono elementi che appaiono e scompaiono, ma che non dovrebbero influire sul resto della pagina, ad esempio una notifica di avviso popup.
Se esamini la demo qui sopra, noterai che facendo clic all'esterno dell'area del popover non puoi chiudere il popover. 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 altri tipi di elementi.
- Non spegnere la luce. Chiudile utilizzando un pulsante di attivazione/disattivazione o un'azione di chiusura.
Stili dei popover
Finora hai appreso i popover di base in HTML. popover offre anche alcune utili caratteristiche 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. Anche se ora puoi creare esperienze simili a una finestra di dialogo modale utilizzando popover="auto", ci sono alcune differenze fondamentali tra i 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 dialog modale non lo fa.
Una finestra di dialogo modale rende il resto della pagina inerte. Un popover non lo fa.
La demo precedente è una finestra di dialogo semantica con comportamento del popover. Ciò significa che il resto della pagina non è inerte e che il popover della finestra di dialogo ha un comportamento di chiusura. 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à discrete, inclusa l'animazione da e verso display: none e da e verso il livello superiore non è ancora disponibile nei browser. Tuttavia, è prevista l'uscita di una versione imminente 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. Le animazioni all'interno e all'esterno risultano molto più fluide e offrono un'esperienza utente più fluida.
Posizionamento degli ancoraggi
I popover sono ideali per posizionare un avviso, una finestra modale o una notifica in base all'area visibile. Tuttavia, i popover 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 ancoraggio, assegnagli un id (in questo esempio, #menu-toggle) e poi usa 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.