CSS Tricks for HTML Dialog Elements
2025-01-14
This post shares two CSS tricks for enhancing the HTML `` element. First, it demonstrates how to subtly blur the background behind the dialog using `backdrop-filter: blur(2px);` applied to the `::backdrop` pseudo-element. Second, it shows how to prevent page scrolling while the dialog is open by using the selector `body:has(dialog[open]) { overflow: hidden; }`. This prevents the underlying page from shifting while interacting with the dialog. These simple CSS additions improve the user experience.
Read more
Development