Einführung der Popover API

Una Kravets

Pop-ups sind im Web überall zu finden. Sie werden in Menüs, Ein-/Aus-Tipps und Dialogfeldern angezeigt, die sich beispielsweise in Kontoeinstellungen, Offenlegungs-Widgets und Produktkartenvorschauen äußern können. 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 der Entwicklung der nützlichen, einzigartigen Hauptfunktionen Ihres Pop-ups beginnen.

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

Das Popovermenü-Attribut

Unterstützte Browser

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

Quelle

Anstatt die gesamte Komplexität selbst zu verwalten, können Sie den Browser mit dem popover-Attribut und den nachfolgenden Funktionen beauftragen. HTML-Pop-ups unterstützen:

  • Beförderung in die oberste Schicht. Pop-ups werden auf einer separaten Ebene über dem Rest der Seite angezeigt, sodass Sie sich nicht mit dem Z-Index herumschlagen müssen.
  • Funktion zum Schließen des Pop-ups 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 Tastaturbelegungen Wenn Sie die Taste esc drücken, wird das Pop-over geschlossen und der Fokus zurückgesetzt.
  • Zugängliche Komponentenbindungen Semantische Verknüpfung eines Pop-up-Elements mit einem Pop-up-Trigger

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 Popover enthält.
  • Ein id-Element für das Element, das das Pop-over 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>

Sie haben jetzt ein voll funktionsfähiges einfaches Pop-over.

Dieses Pop-up kann verwendet werden, um zusätzliche Informationen zu vermitteln oder als Offenlegungs-Widget.

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 jedoch auch explizite Pop-ups mit popovertargetaction erstellen. Dadurch wird die Standardaktion Ein/Aus überschrieben. Zu den popovertargetaction-Optionen gehören:

popovertargetaction="show": Das Pop-up wird angezeigt. popovertargetaction="hide": Das Pop-over wird ausgeblendet.

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

Die Verwendung des Attributs popover allein ist eigentlich ein Kürzel für popover="auto". Wenn das Standard-Pop-up popover geöffnet wird, werden andere automatische Pop-ups geschlossen, mit Ausnahme von übergeordneten Pop-ups. 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. Sie schließen keine anderen Elementtypen erzwungen und werden nicht durch ein leichtes Antippen geschlossen. Sie müssen sie über einen Timer oder eine explizite Schließaktion schließen. Für popover=manual geeignete Pop-ups sind Elemente, die erscheinen und verschwinden, aber den Rest der Seite nicht beeinflussen sollten, z. B. eine Toast-Benachrichtigung.

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:

  • Andere Pop-ups werden geschlossen, wenn das Pop-up geöffnet wird.
  • Kann durch das Ausschalten des Lichts geschlossen werden.

Pop-ups mit popover=manual:

  • Erzwingen Sie das Schließen anderer Elementtypen nicht.
  • Das Licht darf nicht durch einen kurzen Druck auf den Touchbildschirm ausgeschaltet werden. Sie können sie mit einer Ein-/Aus-Schaltfläche oder einer Schließaktion schließen.

Pop-ups stylen

Bisher haben Sie sich mit einfachen Pop-ups in HTML beschäftigt. popover bietet aber auch einige praktische Stiloptionen. Dazu gehört die Möglichkeit, ::backdrop zu formatieren.

Bei auto-Pop-ups ist dies eine Ebene direkt unter der obersten Ebene (in der sich das Pop-up befindet), die sich über dem Rest der Seite befindet. Im folgenden Beispiel hat die ::backdrop eine halbtransparente Farbe:

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

Der Unterschied zwischen popover und dialog

Das Attribut popover bietet keine Semantik für sich allein. Mit popover="auto" können Sie zwar jetzt modale Dialoge erstellen, aber es gibt 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 schnelle Schließen. Ein modales dialog tut das nicht. Ein modales Dialogfeld deaktiviert den Rest der Seite. 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-up-Dialogfeld geschlossen werden kann. 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 Möglichkeit, einzelne Properties zu animieren, einschließlich der Animation von und zu display: none und von und zur 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. Sehen wir uns das vorherige Beispiel an. Wenn Sie das Bild ein- und ausblenden, wirkt es viel flüssiger und die Nutzerfreundlichkeit wird verbessert:

Ankerpositionierung

Pop-ups eignen sich hervorragend, wenn Sie eine Benachrichtigung, ein modales Fenster oder eine Meldung basierend auf dem Darstellungsbereich platzieren 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, damit das Popover #menu-items immer an seinem Ein-/Aus-Trigger, der Schaltfläche #menu-toggle, verankert ist.

Das Einrichten von Ankern ähnelt dem Einrichten von Pop-ups:

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

Sie richten einen Anker ein, indem Sie ihm ein id zuweisen (in diesem Beispiel #menu-toggle), und verbinden dann die beiden Elemente mit anchor="menu-toggle". Jetzt können Sie mit anchor() den Pop-up-Bereich stylen. Ein zentriertes Popover-Menü, das an der Baseline der Ein/Aus-Schaltfläche verankert ist, könnte so gestaltet werden:

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

Sie haben jetzt ein voll funktionsfähiges Pop-over-Menü, das an der Ein-/Aus-Schaltfläche verankert ist und alle integrierten Pop-over-Funktionen bietet – ganz ohne JavaScript!

Fazit

Die Popover API ist der erste Schritt in einer Reihe neuer Funktionen, die das Erstellen von Webanwendungen einfacher und standardmäßig barrierefreier machen. Ich bin gespannt, wie Sie Pop-ups verwenden.

Weitere Informationen