Popover API erreicht die Referenzversion

Una Kravets

Es ist so weit! Eine der Funktionen, auf die ich am meisten gespannt bin, ist gerade in allen modernen Browsern verfügbar und ist offiziell Teil von Baseline 2024. Das ist die Popover API. Pop-ups bieten viele großartige Primitives und Entwickler-Affordances für die Erstellung mehrschichtiger Benutzeroberflächen wie Kurzinfos, Menüs, Lehr-UIs und mehr.

Unterstützte Browser

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

Quelle

Zu den wichtigsten Funktionen von Pop-ups gehören:

  • Beförderung in die oberste Schicht. Pop-ups werden in der obersten Schicht über dem Rest der Seite angezeigt. Sie müssen also nicht mit z-index herumspielen.
  • Funktion zum Schließen des Pop-ups Wenn Sie außerhalb des Pop-over-Bereichs klicken, wird das Pop-over geschlossen und der Fokus zurückgesetzt.
  • Standardmäßige Fokusverwaltung Wenn Sie das Pop-up öffnen, wird der nächste Markierungsstopp im Pop-up angezeigt.
  • Barrierefreie Tastaturbelegungen Wenn Sie die Taste esc drücken oder das Pop-over zweimal antippen, wird es geschlossen und der Fokus wechselt zurück.
  • Zugängliche Komponentenbindungen Semantische Verknüpfung eines Pop-up-Elements mit einem Pop-up-Trigger

Pop-ups erstellen

Das Erstellen von Pop-ups ist ganz einfach. Wenn Sie Standardwerte verwenden möchten, benötigen Sie nur ein button, um das Pop-over auszulösen, und ein Element, das ausgelöst werden soll.

  • Legen Sie zuerst ein popover-Attribut für das Element fest, das das Pop-over sein soll.
  • Fügen Sie dann dem Popover-Element eine eindeutige id hinzu.
  • Um die Schaltfläche mit dem Popover zu verknüpfen, legen Sie abschließend den Wert popovertarget der Schaltfläche auf den Wert id des Popover-Elements fest.

Dies wird im folgenden Code gezeigt:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>
Ein einfaches Beispiel für die Verwendung des Popover-Attributs.

Wenn Sie das Pop-over genauer steuern möchten, können Sie die Pop-over-Typen explizit festlegen. Wenn Sie beispielsweise ein einfaches popover-Attribut ohne Wert verwenden, entspricht das popover="auto". Der Wert auto aktiviert das einfache Schließen und schließt automatisch andere Pop-ups. Wenn Sie popover="manual" verwenden, müssen Sie eine Schaltfläche zum Schließen hinzufügen. Manuelle Pop-ups schließen keine anderen Pop-ups und Nutzer können das Pop-up nicht durch Klicken in der Benutzeroberfläche schließen. So erstellen Sie ein manuelles Pop-up:

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>
Beispiel für ein manuelles Pop-over

Pop-up-Fenster und modales Dialogfeld im Vergleich

Sie fragen sich vielleicht, ob Sie ein Pop-over benötigen, wenn ein Dialogfeld vorhanden ist. Die Antwort lautet: Möglicherweise nicht.

Das Popovermenü-Attribut bietet keine Semantik für sich. Auch wenn Sie jetzt mit Pop-ups modale Dialoge erstellen können, gibt es einige wichtige Unterschiede zwischen den beiden:

Das modale <dialog>-Element

  • Mit dialog.showModal() geöffnet
  • Geschlossen mit dialog.close().
  • Der Rest der Seite wird inaktiv.
  • Unterstützt nicht das Verhalten beim Ausschalten der Lampe.
  • Sie können den geöffneten Zustand mit dem Attribut [open] formatieren.
  • Stellt semantisch eine interaktive Komponente dar, die die Interaktion mit dem Rest der Seite blockiert.

Das [popover]-Attribut

  • Kann mit einem deklarativen Aufrufer (popovertarget) geöffnet werden.
  • Wurde mit popovertarget (automatisches Pop-over) oder popovertargetaction=hide (manuelles Pop-over) geschlossen.
  • Der Rest der Seite wird nicht inaktiv.
  • Unterstützt das Verhalten beim Schließen des Dialogfelds.
  • Sie können den geöffneten Zustand mit der Pseudoklasse :popover-open stylen.
  • Keine inhärente Semantik.

Fazit und weiterführende Literatur

popover bietet viele spannende Funktionen. Weitere Informationen zu dieser API, einschließlich Informationen zur Barrierefreiheit der Funktion und Dokumentation zu den Funktionen, finden Sie in den folgenden Artikeln: