Ist es :modal?

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

Jhey Tompkins

Mit dieser praktischen Pseudoauswahl können Sie „modale“ Elemente auswählen und müssen keine Klassen in JavaScript verwalten, da modale Elemente erkannt werden können.

Derzeit werden zwei Elementtypen als :modal klassifiziert:

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

Wie können Sie es verwenden? In diesem Beispiel wird die Größe aller <dialog>-Elemente festgelegt, die :modal sind.

dialog:modal {
 scale: 2;
}

Sehen Sie sich diese Demo an, in der Sie ein <dialog> entweder „modal“ oder „nicht modal“ zeigen können.

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 kein ::backdrop enthält, wird mit dem Pseudoelement ::before ein fiktives Element erstellt. Es ist leichter und verwischt nicht den Inhalt dahinter. Sie können sie mit :not kombinieren, um eine nicht modale <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);
}

Dies funktioniert auch bei Elementen im Vollbildmodus. Betrachten Sie dieses Überschriftenelement aus Spans.

<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 Spannen 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%);
  }
}

Teil der Videoreihe „Neu interoperable“