Einführung der Popover API

Una Kravets

Pop-over sind überall im Web zu finden. Sie werden in Menüs, Tipps und Dialogfeldern angezeigt, die sich beispielsweise in Kontoeinstellungen, Offenlegungs-Widgets oder Produktkartenvorschauen niederschlagen. Diese Komponenten sind zwar weit verbreitet, aber ihre Erstellung in Browsern ist immer noch erstaunlich umständlich. Sie müssen Scripting hinzufügen, um den Fokus zu verwalten, den Öffnungs- und Schließstatus zu steuern, zugängliche Hooks in die Komponenten einzufügen und Tastaturbindungen zum Aufrufen und Verlassen des Pop-ups zu erstellen. Und das alles, bevor Sie mit dem Erstellen der nützlichen, einzigartigen Hauptfunktionen Ihres Pop-ups beginnen.

Um dieses Problem zu beheben, werden in Browsern neue deklarative HTML-APIs für das Erstellen von Pop-ups eingeführt, beginnend mit der popover API in Chromium 114.

Das Popovermenü-Attribut

Unterstützte Browser

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

Quelle

Anstatt die gesamte Komplexität selbst zu verwalten, können Sie den Browser mit dem popover-Attribut und den nachfolgenden Funktionen beauftragen. HTML-Popover werden unterstützt:

  • Wandern Sie in die oberste Ebene. Pop-ups werden auf einer separaten Ebene über dem Rest der Seite angezeigt, sodass Sie sich nicht mit dem Z-Index herumschlagen müssen.
  • 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, wird das Pop-over geschlossen und der Fokus zurückgesetzt.
  • Barrierefreie Komponentenbindungen: Semantische Verknüpfung eines Pop-up-Elements mit einem Pop-up-Trigger

Sie können jetzt Pop-ups mit all diesen Funktionen erstellen, ohne JavaScript zu verwenden. Für ein einfaches Pop-over sind drei Dinge erforderlich:

  • Ein popover-Attribut für das Element, das das Pop-over enthält.
  • Ein id-Element für das Element, das das Pop-over enthält.
  • Ein popovertarget mit dem Wert des id des Pop-ups im Element, das das Pop-up öffnet.
<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Jetzt haben Sie ein voll funktionsfähiges einfaches Pop-over.

Dieses Pop-up kann verwendet werden, um zusätzliche Informationen zu vermitteln oder als Offenlegungs-Widget.

Standardeinstellungen und Überschreibungen

Wenn Sie, wie im vorherigen Code-Snippet, ein Pop-over mit einem popovertarget einrichten, bedeutet dies standardmäßig, dass es durch die Schaltfläche oder das Element, mit dem das Pop-over geöffnet wird, geöffnet und geschlossen wird. Sie können jedoch auch explizite Pop-ups mit popovertargetaction erstellen. Dadurch wird die Standardaktion Ein/Aus überschrieben. Zu den popovertargetaction-Optionen gehören:

popovertargetaction="show": Zeigt das Pop-over an. popovertargetaction="hide": Das Pop-over wird ausgeblendet.

Mit popovertargetaction="hide" können Sie in einem Popover eine Schaltfläche „Schließen“ erstellen, wie im folgenden Snippet:

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

Automatische und manuelle Pop-ups

Die Verwendung des Attributs popover allein ist eigentlich ein Kürzel für popover="auto". Wenn das Standard-Pop-up popover geöffnet wird, werden andere automatische Pop-ups geschlossen, mit Ausnahme von übergeordneten Pop-ups. Sie kann durch Wischen oder über eine Schaltfläche geschlossen werden.

Wenn Sie hingegen popover=manual festlegen, wird eine andere Art von Pop-up erstellt: ein manuelles Pop-up. Sie schließen keine anderen Elementtypen erzwungen und werden nicht durch ein leichtes Antippen geschlossen. Sie müssen sie über einen Timer oder eine explizite Schließaktion schließen. Für popover=manual geeignete Pop-over-Typen sind Elemente, die ein- und ausgeblendet werden, sich aber nicht auf den Rest der Seite auswirken sollten. Dazu zählen beispielsweise Toast-Benachrichtigungen.

Wenn Sie sich die Demo oben ansehen, werden Sie feststellen, dass das Pop-over durch Klicken auf eine Stelle außerhalb des Pop-over-Bereichs nicht ausgeblendet wird. Außerdem werden andere Pop-ups, die geöffnet sind, nicht geschlossen.

So prüfen Sie die Unterschiede:

Pop-ups mit popover=auto:

  • Andere Pop-ups werden geschlossen, wenn sie geöffnet sind.
  • Kann leicht geschlossen werden.

Pop-ups mit popover=manual:

  • Erzwingen Sie das Schließen anderer Elementtypen nicht.
  • Das Licht darf nicht durch einen kurzen Druck auf den Touchbildschirm ausgeschaltet werden. Sie können sie mit einer Ein-/Aus-Schaltfläche oder einer Schließaktion schließen.

Pop-ups stylen

Bisher haben Sie sich mit einfachen Pop-ups in HTML beschäftigt. popover bietet aber auch einige praktische Stiloptionen. Dazu gehört die Möglichkeit, ::backdrop zu formatieren.

Bei auto-Pop-ups ist dies eine Ebene direkt unter der obersten Ebene (in der sich das Pop-up befindet), die über dem Rest der Seite liegt. Im folgenden Beispiel hat die ::backdrop eine halbtransparente Farbe:

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

Der Unterschied zwischen popover und dialog

Das Attribut popover bietet keine Semantik für sich allein. Mit popover="auto" können Sie zwar jetzt modale Dialoge erstellen, aber es gibt einige wichtige Unterschiede zwischen den beiden:

Ein dialog-Element, das mit dialog.showModal (ein modales Dialogfeld) geöffnet wird, erfordert eine explizite Nutzerinteraktion, um das modale Dialogfeld zu schließen. Ein popover unterstützt das Schließen per Wischbewegung. Ein modales dialog-Objekt hingegen tut dies nicht. Ein modales Dialogfeld macht den Rest der Seite inaktiv. Ein popover ist das nicht.

Die obige Demo ist ein semantischer Dialog mit Popover-Verhalten. Das bedeutet, dass der Rest der Seite nicht inaktiv ist und dass das Pop-up-Dialogfeld geschlossen werden kann. Mit dem folgenden Code können Sie dieses Dialogfeld mit Pop-up-Verhalten erstellen:

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

Demnächst

Interaktives Ein- und Ausblenden

Das Animieren diskreter Eigenschaften, einschließlich Animieren zu und von display: none und Animieren zu und von der obersten Ebene, ist in Browsern noch nicht verfügbar. Sie sind jedoch für eine baldige Version von Chromium geplant, die genau im Anschluss an diese Veröffentlichung erfolgt.

Mit der Möglichkeit, einzelne Eigenschaften zu animieren, und mit :popover-open und @starting-style können Sie Stile vor und nach der Änderung einrichten, um reibungslose Übergänge beim Öffnen und Schließen von Pop-ups zu ermöglichen. Sehen wir uns das vorherige Beispiel an. Wenn Sie das Bild ein- und ausblenden, wirkt es viel flüssiger und die Nutzerfreundlichkeit wird verbessert:

Positionierung der Anker

Pop-ups eignen sich hervorragend, wenn Sie eine Benachrichtigung, ein modales Fenster oder eine Meldung basierend auf dem Darstellungsbereich platzieren möchten. Pop-ups eignen sich aber auch für Menüs, Kurzinfos und andere Elemente, die relativ zu anderen Elementen positioniert werden müssen. Hier kommt das CSS-Ankern ins Spiel.

In der folgenden Demo für ein radiales Menü wird die Popover API zusammen mit der CSS-Ankerposition verwendet, damit das Pop-over #menu-items immer mit seinem Umschalter, der Schaltfläche #menu-toggle, verankert ist.

Das Einrichten von Ankern ähnelt dem Einrichten von Pop-ups:

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

Zum Einrichten eines Ankers weisen Sie ihm ein id zu (in diesem Beispiel #menu-toggle) und verwenden dann anchor="menu-toggle", um die beiden Elemente zu verbinden. Jetzt können Sie das Pop-over mit anchor() gestalten. Ein zentriertes Popover-Menü, das an der Basislinie der Anker-Ein-/Aus-Schaltfläche verankert ist, könnte wie folgt aussehen:

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

Jetzt haben Sie ein voll funktionsfähiges Popover-Menü, das an der Ein/Aus-Schaltfläche verankert ist und alle integrierten Popover-Funktionen umfasst. JavaScript ist nicht erforderlich.

Fazit

Die Popover API ist der erste Schritt in einer Reihe neuer Funktionen, die das Erstellen von Webanwendungen einfacher und standardmäßig barrierefreier machen. Ich bin gespannt, wie Sie Pop-ups verwenden.

Weitere Informationen