A couple CSS tricks for HTML Dialog elements

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! There’s a couple tricks that you might find handy when you’re implementing your own <dialog>s on your websites!

Blur the `<dialog>` backdrop

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 be able to blur the background ever so 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!

Disable page scrolling when a `<dialog>` is open

This is a funky selector here, 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!

Granted, the weirdness is that if your dialogs are tall, you might need to enable scrolling in them separately, but it keeps the page behind your dialog from moving around when you scroll.

That’s all, folks! I hope this was helpful for you!

Cassidy Williams @cassidoo