🗓️ Jan 9, 2025
✍️ Author: Cassidy Williams
https://cassidoo.co/post/css-for-dialogs/
I recently was messing around with the HTML <dialog> element. It’s really handy for native dialogs without a ton of JavaScript.
If you want to see a decent quick example of them in action, you can check out my game Jumblie and click the ⚙️ Settings gear button at the top.
Anyway! Here are a couple tricks that you might find handy when you’re implementing your own <dialog>s on your websites!
The ::backdrop CSS pseudo-element isn’t limited to <dialog>s. You can style it however you want, but if you want to keep it simple, you can add a blur filter like so to blur the background slightly:
dialog::backdrop {
backdrop-filter: blur(2px);
}You can add other properties, of course, like background-color, for example. I also wrote about styling pseudo-elements with JavaScript if you want to do more with this in general!
This is a funky selector, but it’s pretty cool. When a <dialog> is open, it adds an open attribute to the tag.
body:has(dialog[open]) {
overflow: hidden;
}This selector checks to see if the <body> has a <dialog> with the open attribute. If so, it disables scrolling on the page!
⚠️ If your dialogs are tall, you may need to enable scrolling inside them separately. But this keeps the page behind your dialog from moving around when you scroll.
That’s all, folks! I hope this was helpful for you! 🚀