I popover sono ovunque sul web. Puoi vederli nei menu, nei suggerimenti di attivazione/disattivazione e di dialogo, utilizzate per funzionalità quali impostazioni dell'account, widget informative e anteprime delle schede di prodotto. Nonostante la loro diffusione, la loro costruzione nei browser è ancora sorprendentemente ingombrante. Per risolvere questo problema, un nuovo insieme Le API HTML dichiarative per la creazione di popover sono in arrivo nei browser, la prima tra ovvero l'API Popover.
Popover fa parte di Baseline Newly Available.
Un popover viene spesso confuso con una finestra di dialogo. Tuttavia, ci sono alcuni elementi chiave
differenze nel loro comportamento. Un elemento dialog
aperto con dialog.showModal
(una finestra di dialogo modale) è un'esperienza che richiede un'interazione esplicita dell'utente per:
chiudi il modale. Un popover
supporta la disattivazione della luce. Un dialog
modale non lo fa.
Una finestra di dialogo modale rende inerte il resto della pagina. Un popover
non lo fa.
Scopri di più sulle differenze.
Questo articolo fa parte di una serie che illustra in che modo le aziende di e-commerce ha migliorato il proprio sito web usando nuove funzionalità CSS e UI. In questo articolo, scoprirai come Tokopedia ha implementato e sfruttato l'API Popover.
Tokopedia
L'utilizzo degli attributi popover ha ridotto fino al 70% le righe di codice in React. Il modale possono essere controllate in modo nativo tramite HTML anziché richiedere la gestione degli eventi JavaScript e utilizzo di
React.createPortal
per spostare il DOM modale alla finedocument.body
. Possiamo anche utilizzare@starting-style
per animare apertura e chiusura della popover.-Andy Wihalim, Senior Software Engineer, Tokopedia.
Le pagine dei dettagli dei prodotti di Tokopedia contengono più immagini prodotto per ogni prodotto. Quando l'utente fa clic sulla miniatura del prodotto, si apre una finestra modale che mostra ingrandita. Si tratta di un modello comune utilizzato nei siti web di e-commerce.
Codice
Tokopedia utilizza React per il suo sviluppo frontend. Prima di implementare
l'API popover per questa finestra modale, ha usato una finestra modale DOM e un pulsante. Il pulsante
ha modificato lo stato della reazione per aprire la finestra modale. Con l'API popover, specificano
Attributo popovertarget
nell'elemento che apre il popover con un valore
che corrisponde all'ID dell'elemento popover.
Con questa implementazione di base, il popover funziona, ma appare e scompare
senza animazioni. Per creare un'animazione di entrata e uscita senza problemi per gli elementi
popover, usa :popover-open
e @starting-style
e consenti l'animazione di
proprietà discrete.
Nel codice di esempio che segue, il popover viene sottoposto a scale in e out utilizzando la proprietà
transform: 'scale()'
proprietà.
Questo esempio di codice mostra come implementare le animazioni di entrata e uscita per l'API popover.
<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />
export const cssModalWrapper = css({
background: NN0,
border: 'none',
borderRadius: '.625rem',
width: 1024,
padding: 24,
'&::backdrop': {
opacity: 0,
transitionProperty: 'opacity, display',
transition: '.25s ease-out',
transitionBehavior: 'allow-discrete',
},
transitionProperty: 'transform, opacity, display',
transition: '.25s ease-out',
transitionBehavior: 'allow-discrete',
'@starting-style': {
transform: 'scale(1)',
opacity: 1,
},
transform: 'scale(0.8)',
opacity: 0,
'&:popover-open': {
'@starting-style': {
transform: 'scale(0.8)',
opacity: 0,
},
transform: 'scale(1)',
opacity: 1,
},
});
Per soddisfare i browser che non supportano l'API popover, Tokopedia ha implementato popover-polyfill di oddbird, che è di soli 3,2 kB con compressione gzip. Il polyfill era soddisfatto funzionava bene e non causava regressioni delle prestazioni. Nel complesso, in grado di ridurre fino al 70% di righe di codice in React con l'API popover.
Aspetti da considerare quando si utilizza l'API Popover
Tokopedia utilizza React e il team è riuscito a suddividere il codice smontando il popover per le pagine che non lo utilizzano, quindi eseguire una suddivisione del codice per contenuti popover. In questo modo ha ridotto le dimensioni della richiesta iniziale.
Valuta la possibilità di combinare i popover con il posizionamento degli ancoraggi CSS (disponibile a breve su Chrome) per posizionarle rispetto ad altri elementi. Ciò è utile, ad esempio, per i menu e le descrizioni comando.
Risorse
- Presentazione dell'API popover
- La differenza tra un popover e una finestra di dialogo
- Vuoi segnalare un bug o richiedere una nuova funzionalità? Vogliamo conoscere la tua opinione.
Esplora gli altri articoli di questa serie che parlano di come l'e-commerce
le aziende hanno tratto vantaggio dall'utilizzo di nuove funzionalità CSS e UI come le funzionalità di scorrimento
animazioni, popover, query container e il selettore has()
.