Poppin’ In

Oh, hallo! Das ist eine Ewigkeit her, nicht wahr? Ich dachte, ich schaue mal kurz vorbei und sage Hallo. 👋

Wo wir gerade vom "Hineinplatzen" sprechen, ich habe mich ein wenig mit der Popover API beschäftigt. Wir haben sie tatsächlich schon 2018 bemerkt, als Chris einige Informationen über das <dialog>-Element verlinkte. Aber erst seit April dieses Jahres haben wir vollständige Popover API-Unterstützung in modernen Browsern.

Es gab eine Zeit, da sollten wir ein brandneues <popover>-Element in HTML dafür bekommen. Chromium arbeitete bis September 2021 an der Entwicklung, erreichte aber einen Punkt, an dem es zugunsten eines popover-Attributs wieder verworfen wurde. Das scheint am sinnvollsten, da *jedes* Element ein Popover sein kann — wir müssen es lediglich mit dem Attribut versehen, um es zu aktivieren.

<div popover>
  <!-- Stuff -->
</div>

Das ist interessant, denn nehmen wir an, wir haben ein kleines, einfaches Element, das wir als Popover verwenden

<div>👋</div>

Wenn dies die gesamte MarkUp ist, die wir haben, und wir im CSS absolut nichts tun, dann wird das winkende Emoji wie erwartet angezeigt.

Fügen Sie jedoch das popover-Attribut hinzu, und es ist weg!

Das ist vielleicht das Erste, was mich verwirrt hat. Meistens verschwindet etwas und ich gehe davon aus, dass ich etwas falsch gemacht habe. Aber wenn man DevTools öffnet, sieht man, dass dies genau das ist, was passieren soll.

Es kann mehrere Popover auf einer Seite geben und wir können sie mit IDs unterscheiden.

<div popover id="tooltip">
  <!-- Stuff -->
</div>

<div popover id="notification">
  <!-- Stuff -->
</div>

Das reicht nicht aus, da wir auch eine Art "Trigger" benötigen, damit das Popover, nun ja, *aufploppt*! Wir erhalten ein weiteres Attribut, das jeden Button (oder Button mit <input>-Flavor) zu diesem Trigger macht.

<button popovertarget="wave">Say Hello!</button>
<div popover id="wave">👋</div>

Jetzt haben wir ein popover, das auf einen <button> "gezielt" ist. Wenn der Button geklickt wird, wechselt das Popover-Element die Sichtbarkeit.

Hier wird es richtig spannend, denn jetzt, wo CSS Logik zur Umschaltung der Sichtbarkeit handhaben kann, können wir uns mehr darauf konzentrieren, was passiert, wenn der Klick erfolgt.

Zum Beispiel ist das Emoji gerade von einem wirklich dicken schwarzen Rahmen umgeben, wenn es aktiviert ist. Das sind Standardstile.

Neben dem angelegten Rahmen geschehen in DevTools noch einige andere bemerkenswerte Dinge. Beachten Sie zum Beispiel, dass die berechnete Breite und Höhe sich eher wie ein Inline-Element als ein Block-Element verhalten, obwohl wir es mit einem einfachen <div> zu tun haben — und das gilt auch, obwohl das Element eindeutig als display: block berechnet wird. Stattdessen haben wir ein Element, das entsprechend seinem Inhalt dimensioniert ist und sich genau in der Mitte der Seite befindet. Wir haben noch keine einzige Zeile CSS hinzugefügt!

Wo wir gerade von CSS sprechen, kehren wir zur Entfernung dieses Standardrahmens zurück. Man könnte denken, dass dies durch die Deklaration von keinem Rahmen auf dem Element möglich ist.

/* Nope 👎 */
#wave {
  border: 0;
}

Es gibt tatsächlich eine :popover-open-Pseudoklasse, die das Element speziell dann auswählt, wenn es sich im "offenen" Zustand befindet. Ich würde es lieben, wenn diese :popover-popped genannt würde, aber das tut hier nichts zur Sache. Wichtig ist, dass :popover-open nur mit dem Popover-Element übereinstimmt, wenn es geöffnet ist. Das bedeutet, dass diese Stile nach denen angewendet werden, die auf dem Elementselektor deklariert sind, und sie somit überschreiben.

Ein anderer Weg, das zu tun? Wählen Sie das [popover]-Attribut

/* Select all popovers on the page */
[popover] {
  border: 0;
}

/* Select a specific popover: */
#wave[popover] {
  border: 0;
}

/* Same as: */
#wave:popover-open {
  border: 0;
}

Mit diesem Wissen können wir beispielsweise eine Animation an das #wave im offenen Zustand anhängen. Ich nehme diese Idee komplett aus einer Demo von Jhey.

Moment, Moment, da ist noch mehr! Popover können viel wie ein <dialog> mit einem ::backdrop sein, wenn wir es brauchen. Das ::backdrop-Pseudo-Element kann dem Popover mehr Aufmerksamkeit schenken, indem es es vor einen speziellen Hintergrund stellt oder die dahinter liegenden Elemente verdeckt.

Ich liebe dieses Beispiel, das Mojtaba für uns im Almanac zusammengestellt hat, also bleiben wir dabei.

Können Sie sich all die Möglichkeiten vorstellen?! Zum Beispiel, wie viel einfacher es sein wird, Tooltips zu erstellen, jetzt, wo CSS die Logik für die Sichtbarkeit abstrahiert hat? Viel, viel einfacher.

Michelle Barker merkt an, dass dies wahrscheinlich weniger ein traditioneller "Tooltip" ist, der die Sichtbarkeit beim Hovern umschaltet, als vielmehr ein "Toggletip", der per Klick gesteuert wird. Das macht viel Sinn. Aber der eigentliche Grund, warum ich Michelles Beitrag erwähne, ist, dass sie zeigt, wie gut die Popover API mit CSS Anchor Positioning zusammenarbeiten sollte, da diese breitere Browserunterstützung erhält. Das wird helfen, die magischen Zahlen für die Positionierung auszuräumen, die meine Demo überschwemmen.

Hier ist ein weiteres Juwel von Jhey: Ein Popover muss kein Popover sein. Warum nicht die Popover API für andere UI-Elemente wiederverwenden, die von umgeschalteter Sichtbarkeit abhängen, wie z. B. ein ausklappbares Menü?

Oh Gott, schau mal, es wird spät. Es gibt noch viel mehr über die Popover API, was ich immer noch verstehe, aber selbst das Wenige, mit dem ich gespielt habe, fühlt sich an, als würde es weit reichen. Ich werde eine Liste der Dinge einfügen, die ich mir als Lesezeichen gespeichert habe, um darauf zurückzukommen. Vorerst danke, dass ich für einen Moment hineinplatzen durfte, um Hallo zu sagen.

• Zur Popover-Barrierefreiheit: Was der Browser tut und was nicht (Hidde de Vries)
• Wenn Sie Popover verwenden, verwenden Sie auch das dialog-Element für Ihre modalen Dialoge 📺(Hidde de Vries)
• Open UI und die Popover API (Brecht De Ruyte)
• Kurze Anmerkung zu Popovern mit Dialogen (Adrian Roselli)
• Erweitertes Styling von Formularsteuerelementen mit Selectmenu und Anchoring API (Brecht De Ruyte)
• Verwendung der Popover API für HTML-Tooltips (Chris Coyier)
• Vergleich der Popover API und des <dialog>-Elements (LogRocket)