¿Es :modal?

Este práctico pseudoselector de CSS te brinda una forma de seleccionar elementos modales.

Jhey Tompkins

Celebración: Esta función web ya está disponible en los tres motores principales de navegadores.

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.

Navegadores compatibles

• 105
• 105
• 103
• 15.6

Origen

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.

Nota: Los elementos de la capa superior tienen un elemento de fondo que se puede aplicar diseño.

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 compuesto por intervalos.

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