:popover-open

Die CSS-Pseudoklasse :popover-open ist Teil der Popover-API; sie wählt ein popover-Element aus und gestaltet das Popover, wenn es sich im Zustand „offen“ befindet.

/* Select any open popover */
:popover-open {
  /* Styles */
}

/* Select a specific popover */
#toggletip:popover-open {
  /* Styles */
}

Einige Kontextinformationen

Die Popover-API ermöglicht es uns im Grunde, jedes Element auf der Seite als "Popover" zu definieren. Ein Popover ist ein Element, dessen Sichtbarkeit durch Klicken auf ein anderes "Ziel"-Element, wie z. B. einen <button> (oder einen <input>-ähnlichen Button), ein- und ausgeschaltet werden kann.

<button popovertarget=“wave”>Say Hello</button>
<div popover id=“wave”>👋</div>

Das popover-Element hat standardmäßig display: hidden, also seinen "geschlossenen" Zustand. Wenn wir auf den Button klicken, erscheint das popover in seinem "offenen" Zustand.

Dieser offene Zustand ist es, worüber wir mit der Pseudoklasse :popover-open sprechen. Sie ermöglicht es uns, das popover auszuwählen und ihm Stile zuzuweisen, wenn – und nur wenn – es geöffnet ist.

Standardstile

Haben Sie in dem letzten Beispiel bemerkt, wie das popover perfekt mittig auf der Seite zentriert ist, wenn es geöffnet ist? Wir haben dafür noch keinen CSS-Code geschrieben!

Wie bei vielen Selektoren wenden Browser "Standard"-Stile auf das [popover]-Attribut an. Wir können sie in den Chrome DevTools sehen.

[popover] {
  position: fixed;
  width: fit-content;
  height: fit-content;
  color: canvastext;
  background-color: canvas;
  inset: 0px;
  margin: auto;
  border-width: initial;
  border-style: solid;
  border-color: initial;
  border-image: initial;
  padding: 0.25em;
  overflow: auto;
}

Dies ist das, was ein popover exakt mittig auf der Seite platziert, und wir müssen diese Stile überschreiben, wenn wir es an eine andere Stelle verschieben, seine Abmessungen ändern oder was auch immer möchten. Das Pseudoelement :popover-open eignet sich perfekt zum Überschreiben dieser Stile, da es nur dann Stile anwendet, wenn das popover in seinem offenen Zustand ist, und somit Vorrang vor den Standardstilen hat.

:popover-open {
  background-color: hsl(25 100% 50%);
  border: 0;
  color: hsl(300 50% 3% / .85);
  padding: 1.5rem;
  width: 25ch;
}

Spezifikation

Die CSS-Pseudoklasse :popover-open ist im HTML Standard definiert.

Browser-Unterstützung

IE	Chrome	Edge	Firefox	Safari	Opera
Nein	114	114	125	17	101

Safari iOS	Chrome Android	Firefox Android	Android Browser	Opera Mobil	Samsung Internet
17	125	126	23	80	125

Verwandt