Questo pratico pseudo-selettore CSS ti permette di selezionare gli elementi modali.
Questo pratico pseudo-selettore permette di selezionare elementi "modali" ed evitare di gestire le classi in JavaScript, in quanto offre un modo per rilevarli.
Due tipi di elementi sono attualmente classificati come :modal
:
- Elementi della finestra di dialogo che utilizzano il metodo
showModal
. - Elementi in modalità a schermo intero.
Come si usa? 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 elemento <dialog>
in stili "modali" o "non modali".
Quando mostri la versione "modale", viene utilizzato il valore ::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 creata una finta con lo pseudo-elemento ::before
. È più leggera e non sfoca i contenuti sottostanti. 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);
}
La stessa operazione funziona anche per gli elementi in modalità a schermo intero. Considera questo elemento di intestazione composto da intervalli.
<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, le sezioni si animano.
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%);
}
}
Parte della serie Newly interoperable