Truques CSS para elementos HTML Dialog
2025-01-14
Esta postagem compartilha duas dicas de CSS para melhorar o elemento HTML ``. Primeiro, mostra como desfocar sutilmente o plano de fundo atrás da caixa de diálogo usando `backdrop-filter: blur(2px);` aplicado ao pseudo-elemento `::backdrop`. Segundo, mostra como evitar a rolagem da página enquanto a caixa de diálogo está aberta usando o seletor `body:has(dialog[open]) { overflow: hidden; }`. Isso evita que a página subjacente se mova enquanto interage com a caixa de diálogo. Essas adições simples de CSS melhoram a experiência do usuário.
Leia mais
Desenvolvimento