Ten poręczny pseudoselektor CSS umożliwia wybieranie elementów modalnych.
Ten poręczny pseudoselektor umożliwia wybieranie elementów „modalnych” i pozwala uniknąć zarządzania klasami w języku JavaScript, ponieważ umożliwia wykrywanie elementów modalnych.
Dwa typy elementów są obecnie klasyfikowane jako :modal:
- elementów okien dialogowych z użyciem metody
showModal, - elementów w trybie pełnoekranowym.
Jak z tego korzystać? Ten przykład określa skalę wszystkich elementów <dialog>, które są :modal.
dialog:modal {
scale: 2;
}
Przyjrzyj się tej prezentacji, w której możesz wyświetlić <dialog> w stylach modalnych lub niemodalnych.
Gdy wyświetlasz wersję „modalną”, używana jest w niej właściwość ::backdrop dostarczana przez górną warstwę.
dialog::backdrop {
background: hsl(0 0% 10% / 0.5);
}
Jednak wersja niemodalna, która nie ma elementu ::backdrop, jest tworzona za pomocą pseudoelementu ::before. Jest jaśniejszy i nie zamazuje za nim treści. Możesz połączyć z funkcją :not, aby wykryć niemodalny element <dialog>.
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);
}
Dotyczy to też elementów, które są w trybie pełnoekranowym. Spójrzmy na ten element nagłówka wykonany z rozpiętości.
<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>
Gdy element jest w trybie pełnoekranowym, rozpiętości są animowane.
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%);
}
}