Einführung der Popover API

Una Kravets

Pop-over sind überall im Web zu finden. Sie können sie in Menüs, Ein-/Aus-Schaltflächen und Dialogfeldern sehen, was sich in Kontoeinstellungen, Offenlegungs-Widgets und Produktkartenvorschauen bemerkbar machen kann. Trotz der Verbreitung dieser Komponenten ist deren Erstellung in Browsern erstaunlich umständlich. Sie müssen Scripts hinzufügen, um den Fokus, den Öffnungs- und Schließstatus, barrierefreie Hooks in den Komponenten und Tastaturbelegungen zum Ein- und Beenden des Erlebnisses zu verwalten, und das alles, bevor Sie damit beginnen, die nützliche, einzigartige Hauptfunktion Ihres Pop-over zu erstellen.

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

Popover-Attribut

Unterstützte Browser

  • 114
  • 114
  • 17

Quelle

Anstatt die ganze Komplexität selbst zu verwalten, können Sie den Browser mit dem Attribut popover und den nachfolgenden Funktionen die Verwaltung überlassen. Unterstützung für HTML-Popover:

  • Die oberste Ebene erreichen: Pop-over werden in einer separaten Ebene über dem Rest der Seite angezeigt, sodass Sie sich nicht mit dem Z-Index herumschlagen müssen.
  • Funktion „Licht schließen“: Wenn Sie auf eine Stelle außerhalb des Pop-over-Bereichs klicken, wird das Pop-over geschlossen und wieder fokussiert.
  • Standardfokusverwaltung: Durch das Öffnen des Popovers stoppt der nächste Tab im Popover.
  • Barrierefreie Tastaturbelegungen. Wenn Sie die Taste esc drücken, wird das Pop-over geschlossen und der Fokus wieder eingeblendet.
  • Barrierefreie Komponentenbindungen. Ein Popover-Element wird semantisch mit einem Popover-Trigger verbunden.

Sie können jetzt Pop-over mit all diesen Funktionen erstellen, ohne JavaScript zu verwenden. Ein einfaches Popover erfordert drei Elemente:

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

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

Sie haben jetzt ein voll funktionsfähiges Standard-Popover.

Dieses Pop-over könnte verwendet werden, um zusätzliche Informationen zu vermitteln oder ein Widget zur Offenlegung zu verwenden.

Standardeinstellungen und Überschreibungen

Wenn Sie ein Pop-over mit popovertarget einrichten, bedeutet dies standardmäßig, dass die Schaltfläche oder das Element, das bzw. das das Pop-over öffnet, das Öffnen bzw. Schließen ein- und ausblenden kann, wie im vorherigen Code-Snippet. Du kannst aber auch explizite Pop-over mit popovertargetaction erstellen. Dadurch wird die standardmäßige Umschalt-aktion überschrieben. Zu den Optionen für popovertargetaction gehören:

popovertargetaction="show": Das Pop-over wird angezeigt. popovertargetaction="hide": Blendet das Pop-over aus.

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

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

Automatische und manuelle Pop-overs im Vergleich

Die Verwendung des Attributs popover allein ist eigentlich eine Kurzform für popover="auto". Wenn sie geöffnet wird, erzwingt der standardmäßige popover das Schließen anderer automatischer Pop-over, mit Ausnahme von Ancestor-Popovers. Sie kann durch eine Licht- oder eine Schließen-Schaltfläche geschlossen werden.

Wenn Sie hingegen popover=manual festlegen, wird ein manueller Popover-Typ erstellt. Diese erzwingen kein Schließen eines anderen Elementtyps und schließen sich nicht durch eine Lichtabschaltung. Du musst sie mit einem Timer oder einer expliziten 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, z. B. eine Toast-Benachrichtigung.

Wenn Sie sich die Demo oben ansehen, werden Sie feststellen, dass das Popover durch Klicken auf eine Stelle außerhalb des Pop-over-Bereichs nicht automatisch geschlossen wird. Außerdem werden andere Popovers, die offen wären, nicht geschlossen.

So überprüfen Sie die Unterschiede:

Pop-over mit popover=auto:

  • Schließen Sie andere Pop-over, wenn sie geöffnet werden.
  • Kann Licht ausschalten.

Pop-over mit popover=manual:

  • Erzwingen Sie kein Schließen eines anderen Elementtyps.
  • Nicht leuchten lassen. Schließen Sie sie mit einer Ein/Aus-Schaltfläche.

Stile für Popovers

Bisher haben Sie grundlegende Popovers in HTML kennengelernt. Außerdem gibt es in popover auch einige schöne Stilfunktionen. Dazu gehört z. B. die Möglichkeit, ::backdrop zu gestalten.

In auto-Pop-overs ist dies eine Ebene, die direkt unter der obersten Ebene (dort befindet sich das Popover) über dem Rest der Seite liegt. Im folgenden Beispiel wird dem ::backdrop eine halbtransparente Farbe zugewiesen:

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

Der Unterschied zwischen einem popover und einem dialog

Bitte beachten Sie, dass das popover-Attribut keine eigene Semantik bereitstellt. Und obwohl Sie jetzt mit popover="auto" modale, dialogorientierte Lösungen erstellen können, gibt es einige wesentliche Unterschiede zwischen den beiden:

Ein dialog-Element, das mit dialog.showModal (ein modales Dialogfeld) geöffnet wird, ist ein Vorgang, bei dem eine explizite Nutzerinteraktion zum Schließen des modalen Dialogfelds erforderlich ist. Ein popover unterstützt die Lichtabschaltung. Bei einem modalen dialog ist das nicht der Fall. Ein modales Dialogfeld macht den Rest der Seite inaktiv. Bei popover ist dies nicht der Fall.

Die obige Demo ist ein semantisches Dialogfeld mit Pop-over-Verhalten. Das bedeutet, dass der Rest der Seite nicht inaktiv ist und dass das Dialog-Pop-over nicht hell ausgeschaltet ist. Mit dem folgenden Code können Sie dieses Dialogfeld mit Pop-over-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>

Bald verfügbar

Interaktives Ein- und Ausgang

Die Möglichkeit, diskrete Eigenschaften zu animieren, einschließlich Animationen zu und von display: none sowie Animationen zu und von der obersten Ebene, sind in Browsern noch nicht verfügbar. Sie sind jedoch für eine künftige Version von Chromium geplant, die eng auf diese Version folgt.

Durch das Animieren diskreter Eigenschaften und die Verwendung von :popover-open und @starting-style können Sie Stile vor und nach der Änderung einrichten, um beim Öffnen und Schließen von Pop-overs einen reibungslosen Übergang zu ermöglichen. Nehmen wir das vorherige Beispiel. Das An- und Herauszoomen sieht viel flüssiger aus und sorgt für eine flüssigere User Experience:

Ankerpositionierung

Pop-over eignen sich hervorragend, wenn Sie eine Warnung, ein modales Fenster oder eine Benachrichtigung basierend auf dem Darstellungsbereich positionieren möchten. Popovers sind aber auch nützlich für Menüs, Kurzinfos und andere Elemente, die relativ zu anderen Elementen positioniert werden müssen. Hier kommen die CSS-Anker ins Spiel.

In der folgenden Demo des radialen Menüs wird die Popover API zusammen mit der CSS-Ankerpositionierung verwendet, um sicherzustellen, dass das Pop-over-#menu-items immer mit seinem Umschalttaste-Trigger, der Schaltfläche #menu-toggle, verbunden ist.

Das Einrichten von Ankern funktioniert ähnlich wie das Einrichten von Pop-overs:

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

Um einen Anker einzurichten, geben Sie ihm id (in diesem Beispiel #menu-toggle) und verbinden dann mit anchor="menu-toggle" die beiden Elemente. Jetzt können Sie das Pop-over mit anchor() gestalten. Ein zentriertes Pop-over-Menü, das mit der Basis der Ein-/Aus-Schaltfläche für Anker verankert ist, kann wie folgt aussehen:

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

Jetzt haben Sie ein voll funktionsfähiges Pop-over-Menü, das mit der Ein-/Aus-Schaltfläche verknüpft ist und über alle integrierten Pop-over-Funktionen verfügt. JavaScript ist dafür nicht erforderlich.

Fazit

Die Popover-API ist der erste Schritt in einer Reihe neuer Funktionen, um das Erstellen von Webanwendungen standardmäßig einfacher zu verwalten und zugänglicher zu machen. Ich bin gespannt, wie du Popovers verwendest!

Weitere Informationen