Trucos CSS para elementos HTML Dialog

Esta publicación comparte dos trucos de CSS para mejorar el elemento HTML ``. Primero, muestra cómo desenfocar sutilmente el fondo detrás del cuadro de diálogo usando `backdrop-filter: blur(2px);` aplicado al pseudo-elemento `::backdrop`. Segundo, muestra cómo evitar el desplazamiento de la página mientras el cuadro de diálogo está abierto usando el selector `body:has(dialog[open]) { overflow: hidden; }`. Esto evita que la página subyacente se mueva mientras interactúa con el cuadro de diálogo. Estas simples adiciones de CSS mejoran la experiencia del usuario.