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