A couple CSS tricks for HTML Dialog elements

Lately I have been experimenting with the HTML <dialog> element. It's very convenient for native dialogs without a lot of JavaScript.

If you want to quickly see how it works, you can visit My Games Jumblie and click the Settings gear button at the top.

Okay! Here are a few tips you might find useful when implementing your own <dialog> on your website!

Blurred<dialog>Background

::backdrop CSS pseudo-element is not limited to <dialog>. You can style it however you want, but if you want to keep it simple, you can add a blur filter like this to slightly blur the background:

<code>dialog::backdrop {
  backdrop-filter: blur(2px);
}</code>

Of course, you can also add other attributes, such as background-color. If you want to dive deeper into this, I've also written an article about styling pseudo-elements with JavaScript!

<dialog>Disable page scrolling when opening

This is a cool special selector. When <dialog> is turned on, it adds a open attribute to the tag.

<code>body:has(dialog[open]) {
  overflow: hidden;
}</code>

This selector checks whether body contains a open with the <dialog> attribute. If yes, disable page scrolling! Of course, the odd thing is that if your dialog is tall, you may need to enable scrolling in it separately, but this will prevent the page behind the dialog from moving around when scrolling.

That’s it! Hope this helps!

The above is the detailed content of A couple CSS tricks for HTML Dialog elements. For more information, please follow other related articles on the PHP Chinese website!