É :modal?

Esse pseudo-seletor de CSS útil oferece uma maneira de selecionar elementos modais.

Jhey Tompkins

Esse pseudosseletor útil permite selecionar elementos "modais" e evitar o gerenciamento de classes em JavaScript, com uma maneira de detectar elementos modais.

Compatibilidade com navegadores

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

Origem

No momento, dois tipos de elementos estão classificados como :modal:

  • Elementos da caixa de diálogo usando o método showModal.
  • Elementos que estão no modo de tela cheia.

Como você pode usar? Este exemplo define a escala de todos os elementos <dialog> que são :modal.

dialog:modal {
 scale: 2;
}

Considere esta demonstração em que você pode mostrar um <dialog> nos estilos "modal" ou "não modal".

Quando você mostra a versão "modal", ela usa o ::backdrop fornecido pela camada superior.

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

No entanto, para a versão não modal que não tem um ::backdrop, uma falsa é criada com o pseudoelemento ::before. Ele é mais leve e não desfoca o conteúdo por trás. Você pode combinar com :not para detectar um <dialog> não 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);
}

Isso também funciona para elementos que estão no modo de tela cheia. Considere este elemento de título feito de spans.

<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 o elemento está no modo de tela cheia, os spans são animados.

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