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