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. Diese Komponenten sind zwar weit verbreitet, aber ihre Erstellung in Browsern ist immer noch erstaunlich umständlich. 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 das Schließen per Wischbewegung. 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 erläutert 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 (Product Detail Pages, 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 bei 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. 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. Sie waren mit dem Polyfill zufrieden, da es gut funktionierte und keine Leistungsabfälle verursacht hat. 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.