Popover-Fallstudien

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Pop-over sind überall im Web zu finden. Sie werden in Menüs, Ein-/Aus-Tipps und Dialogfeldern verwendet, z. B. für Kontoeinstellungen, Offenlegungs-Widgets und Produktkartenvorschauen. Trotz ihrer Verbreitung ist es immer noch überraschend mühsam, sie in Browsern zu erstellen. Um dieses Problem zu beheben, werden in Browsern neue deklarative HTML-APIs für das Erstellen von Pop-ups eingeführt. Die erste davon ist die Popover API.

 Das Pop-up ist Teil von Baseline Newly Available.

Unterstützte Browser

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

Quelle

Pop-ups werden häufig mit Dialogfeldern verwechselt. Es gibt jedoch einige wichtige Unterschiede in ihrem Verhalten. Ein dialog-Element, das mit dialog.showModal geöffnet wird (ein modales Dialogfeld), erfordert eine explizite Nutzerinteraktion, um das modale Dialogfeld zu schließen. Ein popover unterstützt die einfache Deaktivierung. Ein modales dialog-Objekt hingegen tut dies nicht. Ein modales Dialogfeld macht den Rest der Seite inaktiv. Ein popover ist das nicht. Weitere Informationen zu den Unterschieden

Dieser Artikel ist Teil einer Reihe, in der beschrieben wird, wie E-Commerce-Unternehmen ihre Website mit neuen CSS- und UI-Funktionen optimiert haben. In diesem Artikel erfahren Sie, wie Tokopedia die Popover API implementiert und davon profitiert hat.

Tokopedia

Durch die Verwendung von Popover-Attributen konnten bis zu 70% der Codezeilen in React reduziert werden. Das modale Dialogfeld kann nativ über HTML gesteuert werden, anstatt dass eine Ereignisbehandlung in JavaScript erforderlich ist und React.createPortal zum Verschieben des modalen DOM ans Ende von document.body verwendet wird. Mit @starting-style können wir auch das Öffnen und Schließen des Pop-ups animieren.Andy Wihalim, Senior Software Engineer, Tokopedia

Die Produktdetailseiten (PDP) von Tokopedia enthalten mehrere Produktbilder für jedes Produkt. Wenn auf die Produktminiaturansicht geklickt wird, wird ein Modalfenster mit dem vergrößerten Bild geöffnet. Dies ist ein gängiges Muster, das auf E-Commerce-Websites verwendet wird.

Code

Tokopedia verwendet React für die Frontend-Entwicklung. Vor der Implementierung der Popover API für dieses Modalfenster wurde ein DOM-Modalfenster und eine Schaltfläche verwendet. Die Schaltfläche hat den React-Status geändert, um das modale Fenster zu öffnen. Mit der Popover API wird das Attribut popovertarget im Element angegeben, das das Popover mit einem Wert öffnet, der der ID des Popover-Elements entspricht.

Bei dieser einfachen Implementierung funktioniert das Pop-over, wird aber ohne Animation angezeigt und verschwindet. Verwenden Sie :popover-open und @starting-style, um eine sanfte Ein- und Exit-Animation für das Pop-over zu erstellen. Lassen Sie dabei die Animation einzelner Eigenschaften zu. Im folgenden Codebeispiel wird das Popover mithilfe des Attributs transform: 'scale()' skaliert.

In diesem Codebeispiel wird gezeigt, wie Sie Eintritts- und Ausstiegsanimationen für die Popover API implementieren.

<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',

  transform: 'scale(0.8)',
  opacity: 0,
  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },

  '&:popover-open': {
    transform: 'scale(1)',
    opacity: 1,
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
  },
});

Um auch Browser zu bedienen, die die Popover API nicht unterstützen, hat Tokopedia das popover-polyfill von oddbird implementiert, das mit gzip-Komprimierung nur 3,2 KB groß ist. Er war mit der Polyfill zufrieden, da sie gut funktionierte und keine Leistungseinbußen verursachte. Insgesamt konnte das Team mit der Popover API bis zu 70% der Codezeilen in React reduzieren.

Das sollten Sie bei der Verwendung der Popover API beachten

Tokopedia nutzte React. Das Team erreichte eine Codeaufteilung, indem die Bereitstellung der Popover-Komponente für Seiten, die sie nicht verwenden, aufgehoben und dann eine Codeaufteilung für den Popover-Inhalt durchgeführt wurde. So konnte die Größe der ursprünglichen Anfrage reduziert werden.

Sie können Pop-ups mit der CSS-Ankerpositionierung kombinieren (demnächst in Chrome verfügbar), um sie relativ zu anderen Elementen zu positionieren. Das ist beispielsweise für Menüs und Kurzinfos hilfreich.

Ressourcen

In den anderen Artikeln dieser Reihe erfahren Sie, wie E-Commerce-Unternehmen von neuen CSS- und UI-Funktionen wie scrollgesteuerten Animationen, Pop-ups, Containerabfragen und der has()-Auswahl profitiert haben.