Esse pseudosseletor CSS útil oferece uma maneira de selecionar elementos modais.
Este pseudosseletor é uma maneira de selecionar elementos "modais" e de evitar o gerenciamento de classes em JavaScript, fornecendo uma maneira de detectar elementos modais.
Atualmente, dois tipos de elementos sã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 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> em estilos "modais" ou "não modais".
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 versão falsa é criada com o pseudoelemento ::before. Ela é mais leve e não desfoca o conteúdo atrás dela. 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 funcionará para elementos que estão no modo de tela cheia. Considere esse elemento de cabeçalho 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 períodos 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%);
}
}
Parte da série Newly interoperável (em inglês)