This content originally appeared on web.dev and was authored by Jhey Tompkins
CSS :modal is available from Chrome 105. This handy pseudo-selector gives you a way to select elements that are "modal", and to avoid managing classes in JavaScript by providing a way to detect modal elements.
Two types of elements are currently classed as :modal:
- Dialog elements using the
showModalmethod. - Elements that are in full-screen mode.
How can you use it? This example sets the scale of all <dialog> elements that are :modal.
dialog:modal {
scale: 2;
}Consider this demo where you can show a <dialog> in either "modal" or "non-modal" styles.
When you show the "modal" version, it uses the ::backdrop provided by the top layer.
dialog::backdrop {
background: hsl(0 0% 10% / 0.5);
}But, for the non-modal version which doesn't have a ::backdrop, a fake one gets created with the ::before pseudo-element. It's lighter and doesn't blur the content behind it. You could combine with :not to detect a non-modal <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);
}This will also work for elements that are in full-screen mode too. Consider this heading element made of 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>When the element is in full-screen mode, the spans will animate.
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%);
}
}Photo by Volodymyr Hryshchenko on Unsplash
This content originally appeared on web.dev and was authored by Jhey Tompkins
Jhey Tompkins | Sciencx (2022-09-02T00:00:00+00:00) Is it :modal?. Retrieved from https://www.scien.cx/2022/09/02/is-it-modal/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.