Einführung der Popover API

Una Kravets

Pop-ups sind im Web überall zu finden. Sie werden in Menüs, Tipps und Dialogfeldern angezeigt, die sich beispielsweise in Kontoeinstellungen, Offenlegungs-Widgets oder Produktkartenvorschauen niederschlagen. Trotz ihrer Verbreitung ist es immer noch überraschend mühsam, sie in Browsern zu erstellen. 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 lösen, wird in Browsern eine neue Reihe von deklarativen HTML-APIs zum Erstellen von Pop-over verfügbar sein, beginnend mit der popover API in Chromium 114.

Das Popover-Attribut

Unterstützte Browser

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

Quelle

Anstatt die gesamte Komplexität selbst zu bewältigen, können Sie dem Browser die Verwaltung über das Attribut popover und die nachfolgenden Funktionen überlassen. HTML-Pop-ups unterstützen:

  • Wandern Sie in die oberste Ebene. Popover werden auf einer separaten Ebene über dem Rest der Seite eingeblendet, damit Sie den Z-Index nicht jedes Mal neugierig machen müssen.
  • Lichtabschaltung: 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 Tastaturbindungen Wenn Sie die Taste esc drücken, wird das Pop-over geschlossen und der Fokus kehrt zurück.
  • Zugängliche Komponentenbindungen Popover-Element semantisch mit einem Popover-Trigger verbinden

Sie können jetzt Pop-ups mit all diesen Funktionen erstellen, ohne JavaScript verwenden zu müssen. 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 auf dem Element, das das Popover 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 Popover.

Dieses Pop-over kann als Widget für zusätzliche Informationen oder als Offenlegungs-Widget dienen.

Standardeinstellungen und Überschreibungen

Wenn Sie ein Popover mit einem popovertarget einrichten, wird es standardmäßig, wie im vorherigen Code-Snippet, durch die Schaltfläche oder das Element geöffnet und geschlossen. Sie können aber auch explizite Pop-overs 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": Blendet das Pop-over aus.

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

Das Attribut popover allein zu verwenden ist eigentlich eine Kurzform für popover="auto". Beim Öffnen erzwingt das standardmäßige popover das Schließen anderer automatischer Pop-over, mit Ausnahme von Ancestor-Popovers. 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. Damit wird das Schließen anderer Elementtypen nicht erzwungen und sie werden nicht durch Aufleuchten 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.

In der Demo oben sehen Sie, dass das Pop-up nicht geschlossen wird, wenn Sie außerhalb des Pop-up-Bereichs klicken. Außerdem werden andere Pop-ups, die geöffnet sind, nicht geschlossen.

So prüfen Sie die Unterschiede:

Pop-ups mit popover=auto:

  • Erzwingen Sie beim Öffnen das Schließen anderer Pop-over.
  • Kann durch das Ausschalten des Lichts geschlossen werden.

Pop-over mit popover=manual:

  • Erzwinge das Schließen anderer Elementtypen nicht.
  • Lassen Sie das Licht nicht schließen. Sie können sie über die Ein/Aus-Schaltfläche oder die Aktion schließen.

Pop-ups stylen

Bisher haben Sie sich mit den grundlegenden Pop-overs in HTML vertraut gemacht. popover bietet aber auch einige tolle Stilfunktionen. Eine davon ist die Möglichkeit, ::backdrop zu gestalten.

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 wird dem ::backdrop eine halbtransparente Farbe zugewiesen:

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

Der Unterschied zwischen popover und dialog

Beachten Sie, dass das Attribut popover keine eigene Semantik bietet. Mit popover="auto" können Sie zwar jetzt modale Dialoge erstellen, es gibt aber 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-over leicht ausgeblendet wird. 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

Die Animierung diskreter Eigenschaften, einschließlich Animationen zu und von display: none und Animationen zu und von der obersten Ebene, ist in Browsern noch nicht verfügbar. Sie sind jedoch für eine kommende Version von Chromium geplant, die kurz nach dieser Veröffentlichung erscheinen wird.

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. Nehmen wir das vorherige Beispiel. Die Heran- und Herausbewegen der Animation sieht viel flüssiger aus und sorgt für eine flüssigere Nutzererfahrung:

Ankerpositionierung

Popover sind ideal, wenn Sie eine Warnung, ein modales Fenster oder eine Benachrichtigung basierend auf dem Darstellungsbereich positionieren 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-Ankerpositionierung verwendet, um sicherzustellen, dass das Pop-over #menu-items immer mit seinem Umschalter, der Schaltfläche #menu-toggle, verankert ist.

Anker werden ähnlich wie Popover eingerichtet:

<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 mit der Ein/Aus-Schaltfläche verbunden ist und alle integrierten Popover-Funktionen umfasst. JavaScript ist nicht erforderlich.

Fazit

Das Popover-API ist der erste Schritt einer Reihe neuer Funktionen, mit denen das Erstellen von Webanwendungen standardmäßig einfacher verwaltet und zugänglicher wird. Ich bin gespannt, wie Sie Pop-ups verwenden.

Weitere Informationen