Ist es :modal?

Mit diesem praktischen CSS-Pseudoselektor können Sie modale Elemente auswählen.

Jhey Tompkins

Mit diesem praktischen Pseudo-Sellektor können Sie Elemente auswählen, die „modal“ sind, und Klassen in JavaScript nicht verwalten, da modale Elemente erkannt werden.

Unterstützte Browser

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 103.
  • Safari: 15.6.

Quelle

Derzeit werden zwei Arten von Elementen als :modal klassifiziert:

  • Dialogfeldelemente mit der Methode showModal.
  • Elemente, die sich im Vollbildmodus befinden

Wie können Sie sie nutzen? In diesem Beispiel wird die Skalierung aller <dialog>-Elemente festgelegt, die :modal sind.

dialog:modal {
 scale: 2;
}

In dieser Demo können Sie ein <dialog> entweder im modalen oder im nicht modalen Stil anzeigen.

Wenn Sie die modale Version anzeigen, wird die ::backdrop der obersten Ebene verwendet.

dialog::backdrop {
 background: hsl(0 0% 10% / 0.5);
}

Für die nicht modale Version, die keine ::backdrop hat, wird jedoch ein gefälschter modaler Dialog mit dem Pseudo-Element ::before erstellt. Es ist leichter und der dahinterliegende Inhalt wird nicht verschwommen dargestellt. Sie können :not kombinieren, um einen nicht modalen <dialog> zu erkennen.

dialog[open]:not(:modal)::before {
  content: "";
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 50%;
  left: 50%;
  background: hsl(0 0% 10% / 0.25);
  transform: translate3d(-50%, -50%, -1px);
}

Das funktioniert auch für Elemente, die sich im Vollbildmodus befinden. Sehen Sie sich dieses Überschriftenelement aus Spans an.

<header>
  <h1>
    <span style="--index: 0;">:</span>
    <span style="--index: 1;">m</span>
    <span style="--index: 2;">o</span>
    <span style="--index: 3;">d</span>
    <span style="--index: 4;">a</span>
    <span style="--index: 5;">l</span>
 </h1>
</header>

Wenn sich das Element im Vollbildmodus befindet, werden die Spans animiert.

h1 span {
 animation: jump calc(var(--speed, 0) * 1s) calc(var(--index, 0) * 0.1s) infinite ease;
}
header:modal span {
  --speed: 0.75;
}
@keyframes jump {
  50% {
    transform: translateY(-50%);
  }
}