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 Skripte hinzufügen, um den Fokus, den Öffnungs- und Schließstatus zu verwalten, zugängliche Aufhänger in die Komponenten, Tastaturbelegungen zum Ein- und Ausblenden der App – und das alles, noch bevor Sie mit der Entwicklung der nützlichen, einzigartigen Kernfunktion Ihres Popovers 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
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-Popover werden unterstützt:
- 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 auf eine Stelle außerhalb des Popover-Bereichs klicken, wird es geschlossen und wieder in den Fokus rückt.
- Standardmäßige Fokusverwaltung: Durch das Öffnen des Pop-overs wird der nächste Tab innerhalb des Pop-overs gestoppt.
- Barrierefreie Tastaturbindungen Wenn Sie die Taste
escdrücken, wird das Pop-over geschlossen und der Fokus kehrt zurück. - Barrierefreie Komponentenbindungen: Popover-Element semantisch mit einem Popover-Trigger verbinden
Mit all diesen Funktionen können Sie jetzt Popovers 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
idfür das Element, das das Pop-over enthält - Ein
popovertargetmit dem Wert desidfür das Element, mit dem das Pop-over geöffnet wird.
<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
Wie im vorherigen Code-Snippet bedeutet die Einrichtung eines Pop-overs mit popovertarget, dass es durch die Schaltfläche oder das Element, mit dem das Pop-over geöffnet wird, standardmäßig geöffnet bzw. geschlossen wird. Sie können aber auch explizite Pop-overs mit popovertargetaction erstellen. Dadurch wird die Standardaktion toggle überschrieben. popovertargetaction-Optionen beinhalten:
popovertargetaction="show": Zeigt das Pop-over an.
popovertargetaction="hide": Blendet das Pop-over aus.
Mit popovertargetaction="hide" können Sie eine Schaltfläche „Schließen“ in einem Pop-over erstellen, wie im folgenden Snippet gezeigt:
<button popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Close</span>
</button>
Automatische vs. manuelle Pop-over
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. Er kann über eine Taste zum Ein- und Ausschalten des Lichts oder über eine Schaltfläche zum Schließen geschlossen werden.
Wenn Sie popover=manual festlegen, wird jedoch eine andere Art von Popover erstellt: ein manuelles Popover. Damit wird das Schließen anderer Elementtypen nicht erzwungen und sie werden nicht durch Lichtabschaltung geschlossen. Sie müssen über einen Timer oder eine explizite Schließaktion geschlossen werden. 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. Wenn andere Pop-over geöffnet sind, würden sie nicht geschlossen werden.
So sehen Sie sich die Unterschiede an:
Pop-over mit popover=auto:
- Erzwingen Sie beim Öffnen das Schließen anderer Pop-over.
- Kann leicht 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-over gestalten
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-Popovers ist dies eine Ebene direkt unter der obersten Ebene (dort, wo sich das Popover befindet), die sich über dem Rest der Seite befindet. 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 jetzt ein modales dialogorientiertes Erlebnis erstellen. Es gibt jedoch einige wichtige Unterschiede:
Ein dialog-Element, das mit dialog.showModal geöffnet wird (ein modales Dialogfeld), ist ein Erlebnis, das eine explizite Nutzerinteraktion zum Schließen des modalen Dialogfelds erfordert.
Ein popover unterstützt die einfache Deaktivierung. Ein modales dialog-Objekt hingegen tut dies nicht.
Ein modales Dialogfeld macht den Rest der Seite inaktiv. Bei popover ist das nicht der Fall.
Die obige Demo ist ein semantisches Dialogfeld mit Popover-Verhalten. Das bedeutet, dass der Rest der Seite nicht inaktiv ist und dass das Pop-over leicht ausgeblendet wird. Sie können dieses Dialogfeld mit Popover-Verhalten mithilfe des folgenden Codes 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 verfügbar
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, diskrete Eigenschaften zu animieren und :popover-open und @starting-style zu verwenden, können Sie Stile vor und nach der Änderung einrichten, um reibungslose Übergänge beim Öffnen und Schließen von Pop-overs 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:
Positionierung der Anker
Popover sind ideal, wenn Sie eine Warnung, ein modales Fenster oder eine Benachrichtigung basierend auf dem Darstellungsbereich positionieren möchten. Popover sind jedoch auch für Menüs, Kurzinfos und andere Elemente nützlich, die relativ zu anderen Elementen positioniert werden müssen. Hier kommt die CSS-Verankerung 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 an der Ein/Aus-Schaltfläche verankert 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-over einsetzen!