I popover sono ovunque sul Web. Li puoi trovare in menu, suggerimenti di attivazione/disattivazione e finestre di dialogo, che possono manifestarsi sotto forma di impostazioni dell'account, widget di informativa e anteprime delle schede di prodotto. Nonostante la prevalenza di questi componenti, la loro realizzazione nei browser è ancora sorprendentemente difficile. 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 questo è tutto ancora prima di iniziare a creare la funzionalità utile, unica e di base del tuo 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
Anziché gestire autonomamente tutta la complessità, puoi lasciare che sia il browser a gestirla con l'attributo popover e il successivo insieme di funzionalità. Supporto dei popover HTML:
- Promozione al livello superiore. I popover verranno visualizzati su un livello separato sopra il resto della pagina, in questo modo non dovrai più andare avanti con lo 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. Se premi il tasto
esc, il popover verrà chiuso e verrà ripristinato lo stato attivo. - Associazioni di componenti accessibili. La connessione di un elemento popover a un popover attiva in modo semantico.
Ora puoi creare popover con tutte queste funzionalità senza utilizzare JavaScript. Per creare un popover semplice sono necessari tre elementi:
- Un attributo
popovernell'elemento che contiene il popover. - Un
idsull'elemento che contiene il popover. - Un
popovertargetcon il valore deliddel 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 informativa.
Valori predefiniti e override
Per impostazione predefinita, come nel precedente snippet di codice, se configuri un popover con popovertarget, il pulsante o l'elemento che apre il popover aprirà e verrà chiuso. Tuttavia, puoi anche creare popover espliciti utilizzando popovertargetaction. In questo modo viene sostituita l'azione di attivazione/disattivazione predefinita. Le opzioni popovertargetaction includono:
popovertargetaction="show": mostra il popover.
popovertargetaction="hide": nasconde il popover.
Con popovertargetaction="hide" puoi creare un pulsante "chiudi" all'interno di un popover, come nel seguente snippet:
<button popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Close</span>
</button>
Confronto tra popover automatici e manuali
Utilizzare solo l'attributo popover è una scorciatoia per popover="auto". Quando è aperto, il valore predefinito popover forzerà la chiusura di altri popover automatici, ad eccezione dei popover predecessori. Può essere ignorata mediante un pulsante di chiusura o un pulsante di chiusura.
L'impostazione popover=manual, invece, crea un altro tipo di popover: un popover manuale. Non forzano la chiusura degli altri tipi di elementi e non si chiudono tramite chiusura leggera. Devi chiuderli con un timer o con un'azione di chiusura esplicita. I tipi di popover appropriati per popover=manual sono elementi che appaiono e scompaiono, ma non dovrebbero influire sul resto della pagina, ad esempio una notifica di avviso popup.
Se guardi la demo in alto, puoi notare che facendo clic all'esterno dell'area del popover non si chiude automaticamente il popover. Inoltre, se ci fossero altri popover aperti, non si chiuderebbero.
Per esaminare le differenze:
Popover con popover=auto:
- Quando è aperto, forza la chiusura di altri popover.
- Può ignorare facilmente.
Popover con popover=manual:
- Non forzare la chiusura di altri tipi di elementi.
- Non spegnere la fotocamera. Chiudili utilizzando un pulsante di attivazione/disattivazione o un'azione di chiusura.
Stili dei popover
Finora hai imparato a conoscere i popover di base in HTML. Ma ci sono anche alcune utili funzionalità di stile che sono disponibili con popover. Una di queste è la possibilità di applicare uno stile a ::backdrop.
Nei popover auto, si tratta di un livello che si trova direttamente sotto il livello superiore (dove si trova il popover), 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 popover e dialog
È importante notare che l'attributo popover non fornisce la semantica in modo autonomo. Anche se ora puoi creare esperienze simili a finestre di dialogo modale utilizzando popover="auto", esistono 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 chiusura leggera. al contrario di un criterio modale dialog.
Una finestra di dialogo modale rende inerte il resto della pagina. Un'popover non sa.
La demo riportata sopra è una finestra di dialogo semantica con il comportamento dei popover. Ciò significa che il resto della pagina non è inerte e che il popover della finestra di dialogo si chiude facilmente. Puoi creare questa finestra di dialogo con il comportamento dei 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
Ingresso e uscita della sessione interattiva
Nei browser non è ancora possibile animare le proprietà discrete, incluse l'animazione da e verso display: none e da e verso il livello superiore. Tuttavia, è prevista una versione imminente di Chromium, che sarà implementata da vicino.
Con la possibilità di animare le proprietà discrete e l'uso di :popover-open e @starting-style, potrai impostare stili prima e dopo la modifica per consentire transizioni fluide durante l'apertura e la chiusura dei popover. Prendiamo l'esempio precedente. L'animazione automatica appare molto più fluida e supporta un'esperienza utente più fluida:
Posizionamento ancoraggio
I popover sono ideali quando vuoi 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 in relazione ad altri elementi. È qui che entra in gioco l'ancoraggio CSS.
La seguente demo del menu radiale utilizza l'API popover insieme al posizionamento di ancoraggio CSS per garantire che il popover #menu-items sia sempre ancorato al relativo 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 usa il anchor="menu-toggle" per collegare i due elementi. Ora puoi utilizzare anchor() per applicare uno stile al popover. A un menu popover centrato ancorato alla base del pulsante di attivazione/disattivazione dell'ancoraggio potrebbe essere applicato lo stile seguente:
#menu-items {
bottom: anchor(bottom);
left: anchor(center);
translate: -50% 0;
}
Ora hai un menu popover completamente funzionale che è ancorato al pulsante di attivazione/disattivazione e ha tutte le funzionalità integrate dei 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ù semplici da gestire e più accessibili per impostazione predefinita. Non vedo l'ora di vedere come usi i popover.