Popover-Fallstudien

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Pop-ups sind im Web überall 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 im 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 das schnelle Schließen. Ein modales dialog tut das 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 geben sie im Element ein popovertarget-Attribut an, das das Popover mit einem Wert öffnet, der mit der ID des Popover-Elements übereinstimmt.

Bei dieser einfachen Implementierung funktioniert das Pop-over, wird aber ohne Animation angezeigt und verschwindet. Wenn Sie eine flüssige Ein- und Ausblendungsanimation für das Pop-over erstellen möchten, verwenden Sie :popover-open und @starting-style und erlauben Sie die Animation diskreter Eigenschaften. Im folgenden Codebeispiel wird das Pop-over mithilfe der Property transform: 'scale()' herangezoomt und herausgezoomt.

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,
    },
  },
});

Für Browser, die die Popover API nicht unterstützen, hat Tokopedia die Popover-Polyfill von Oddbird implementiert, die 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 verwendet React. Das Team hat das Code-Splitting erreicht, indem es die Popover-Komponente für Seiten, auf denen sie nicht verwendet wird, entfernt und dann einen Code-Split für den Popover-Inhalt durchgeführt hat. 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.