Este práctico pseudoselector CSS te brinda una forma de seleccionar elementos modales.
Este pseudoseleccionador útil te brinda una forma de seleccionar elementos que son "modales" y evitar administrar clases en JavaScript, ya que proporciona una forma de detectar elementos modales.
Actualmente, existen dos tipos de elementos que se clasifican como :modal
:
- Elementos de diálogo con el método
showModal
- Elementos que están en modo de pantalla completa
¿Cómo puedes usarlo? En este ejemplo, se establece la escala de todos los elementos <dialog>
que son :modal
.
dialog:modal {
scale: 2;
}
Considera esta demostración en la que puedes mostrar un <dialog>
en estilos "modales" o "no modales".
Cuando muestras la versión "modal", se usa el ::backdrop
que proporciona la capa superior.
dialog::backdrop {
background: hsl(0 0% 10% / 0.5);
}
Sin embargo, para la versión no modal que no tiene un ::backdrop
, se crea uno falso con el pseudoelemento ::before
. Es más ligero y no desenfoca el contenido que se encuentra detrás. Puedes combinarlo con :not
para detectar un <dialog>
no modal.
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);
}
Esto también funcionará para los elementos que estén en modo de pantalla completa. Considera este elemento de encabezado hecho de tramos.
<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>
Cuando el elemento esté en el modo de pantalla completa, los tramos se animarán.
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%);
}
}