Poppin ' In

Hey da! Lange nicht gesehen! Ich wollte nur vorbeikommen und Hallo sagen. ?

Apropos "Poping", ich habe mit der neuen Popover -API experimentiert. Wir haben es 2018 zum ersten Mal erwähnt, aber die volle Unterstützung in modernen Browsern ist erst in letzter Zeit (April 2024).

zunächst war ein dediziertes <popover></popover> html -Element geplant. Chromium arbeitete bis September 2021 daran, wurde aber letztendlich durch ein popover -attribut ersetzt. Dies ist sinnvoll, da jedes Element jetzt als Popover fungieren kann. Fügen Sie einfach das Attribut hinzu.

`` `html

<code>
Here's an interesting observation: a simple element like this:

```html
<div>?</div></code>

... zeigt normal an. Das Hinzufügen des popover -attributs verbirgt es jedoch! Dies verwirrte mich anfangs, aber Devtools bestätigte, dass es das erwartete Verhalten hat.

Mehrere Popover sind möglich, differenziert durch IDs:

<div popover="id1"></div>
<div popover="id2"></div>

Ein "Auslöser" ist erforderlich, um den Popover zu aktivieren. Ein anderes Attribut verwandelt eine Schaltfläche (oder schalttastartige Element) in diesen Auslöser:

<button>Say Hello!</button>
<div popover="">?</div>

Klicken auf die Schaltfläche Umschalten die Sichtbarkeit des Popovers. CSS behandelt die Sichtbarkeitslogik und ermöglicht es uns, sich auf das Click -Ereignis zu konzentrieren. Zum Beispiel ist ein dicker schwarzer Rand der Standardstil, wenn das Popover geöffnet ist.

devtools enthüllt weitere interessante Details: Die Breite und Größe des Popover verhalten sich wie Inline -Elemente, auch mit display: block. Es ist zu Inhalt und zentriert, alles ohne benutzerdefinierte CSS!

Die Standardgrenze entfernt ist nicht so einfach wie border: 0;. Das Element :popover-open nur nur , wenn sie öffnen, frühere Stile überschreiben.

Wählen Sie alternativ das Attribut

aus: [popover]

/* All popovers */
[popover] { border: 0; }

/* Specific popover */
#wave[popover] { border: 0; }

/* Equivalent to :popover-open */
#wave:popover-open { border: 0; }

Dies ermöglicht das Hinzufügen von Animationen in den offenen Zustand (inspiriert von Jheys Demos).

können Popovers ein

Pseudo-Elements enthalten, ähnlich ::backdrop, für visuelle Effekte. Das Almanac -Beispiel von Mojtaba ist ausgezeichnet. <dialog></dialog>

Die Möglichkeiten sind groß! Tooltips werden mit CSS -Handhabungs -Sichtbarkeit viel einfacher. Michelle Barker weist darauf hin, dass dies eher ein "Toggletip" (klickkontrolliert) als ein Hover-Tooltip ist.

jhey ist eine weitere großartige Ressource, die hervorhebt, dass ein Popover nicht auf Popovers beschränkt ist. Es kann für andere UI-Elemente mit umgeschalteten Sichtbarkeit wie ausrutschtenmenüs umgestaltet werden.

Es wird spät und es gibt noch viel mehr zu erforschen, aber selbst dieser erste Streifzug ist vielversprechend. Hier ist eine Liste von Ressourcen zum weiteren Lernen:

Popover -Zugänglichkeit: Browserverhalten (Hidde de vries)

• Verwenden Sie
und
• für Modale (Hidde de vries) popover <dialog></dialog>
Öffnen Sie UI und die Popover -API (Brecht de Ruyte)
Popover und Dialoge (Adrian Roselli)
Fortgeschrittene Formsteuerstyling (Brecht de Ruyte)
Popover -API für HTML -Tooltips (Chris Coyier)
Vergleich von Popover -API und
• (Logrocket) <dialog></dialog>

Danke, dass ich mich einbringen ließ!

Das obige ist der detaillierte Inhalt vonPoppin ' In. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!