Case study Popover

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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.

Supporto dei browser

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

Origine

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 fine document.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 ha eseguito la suddivisione del 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

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().