È :modal?

Questo pratico pseudo-selettore CSS ti consente di selezionare gli elementi modali.

Questo pratico pseudo-selettore ti consente di selezionare gli elementi "modali" ed evitare di gestire le classi in JavaScript fornendo un modo per rilevare gli elementi modali.

Supporto dei browser

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

Origine

Attualmente, esistono due tipi di elementi classificati come :modal:

  • Elementi di dialogo che utilizzano il metodo showModal.
  • Elementi in modalità a schermo intero.

Come puoi utilizzarlo? Questo esempio imposta la scala di tutti gli elementi <dialog> che sono :modal.

dialog:modal {
 scale: 2;
}

Considera questa demo in cui puoi mostrare un <dialog> in stili "modale" o "non modale".

Quando viene mostrata la versione "modale", viene utilizzato il ::backdrop fornito dal livello superiore.

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

Tuttavia, per la versione non modale che non ha un ::backdrop, ne viene creato uno falso con l'elemento pseudo ::before. È più leggero e non sfoca i contenuti al di là. Puoi combinarlo con :not per rilevare un <dialog> non modale.

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

Questo vale anche per gli elementi in modalità a schermo intero. Prendiamo in considerazione questo elemento di intestazione composto da span.

<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>

Quando l'elemento è in modalità a schermo intero, gli elementi di span vengono animati.

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