Astuces CSS pour les éléments HTML Dialog

Cet article partage deux astuces CSS pour améliorer l'élément HTML ``. Premièrement, il montre comment flouter subtilement l'arrière-plan derrière la boîte de dialogue en utilisant `backdrop-filter: blur(2px);` appliqué au pseudo-élément `::backdrop`. Deuxièmement, il montre comment empêcher le défilement de la page lorsque la boîte de dialogue est ouverte en utilisant le sélecteur `body:has(dialog[open]) { overflow: hidden; }`. Cela empêche la page sous-jacente de bouger lors de l'interaction avec la boîte de dialogue. Ces simples ajouts CSS améliorent l'expérience utilisateur.