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