Já pensou em utilizar um elemento HTML Dialog para adicionar uma caixa de diálogo sem javascript? Em outras palavras um pop-up totalmente acessível sem nenhum javascript.
A tag <dialog> ela ganhou a atenção quando Firefox e Chrome tiveram suporte e agora o safari já deu suporte na sua versão 134. Essa “nova” tag além do seu valor semântico também tem uma API CSS para os seus estados e elementos relacionados.
Suporte
Quando ainda morava na Irlanda em 2019 testei, essa nova tag HTML dialog, que tinha um funcionamento parecido como um pop-up, primeira coisa que olhei foi o suporte para esse componente e naquela época somente, Chrome e Firefox dava suporte.
Agora no final de outubro de 2021, webkit o motor do navegador safari anunciou o suporte ao elemento dialog nas próximas versões do safari e a partir da versão 15.4 do safari passamos a ter suporte a tag HTML dialog. Hoje junho de 2022 mais de 90% dos browsers suportam tag dialog.
Como funciona?
Ok? Agora que já falamos sobre a tag chegou a hora de trabalhar um pouco. O uso é bem simples primeiramente a tag possui uma propriedade open para definir se o elemento está visível ou não, por exemplo:
<h2>tag dialog</h2>
<dialog open>
<meta charset="utf-8">Busquem o conhecimento!
</dialog>
<meta charset="utf-8"><dialog>
Quenhê vc?
</dialog>
Code language: HTML, XML (xml)E o resultado desse código será o seguinte:
Como podemos ver apenas o primeiro dialog é exibido, por que ele possui uma propriedade open, mas caso queiramos através de um outro elemento invocar um dialog, fazemos da seguinte forma:
<dialog id="dialog">
<form method="dialog">
<p>Busquem o conhecimento!</p>
<button>Obrigado</button>
</form>
</dialog>
<button onclick="dialog.showModal()">Mensagens especiais</button>
Code language: HTML, XML (xml) Com o novo código quando clicamos no botão, o nosso dialog será exibido graças ao método showModal(). O pop-up será exibido e quando o usuário clicar no botão obrigado ele irá fechar isso irá gerar uma confirmação no formulário no pop-up assim fechando o elemento.
Mas caso queiramos fechar o nosso elemento HTML dialog sem realizar uma ação num formulário realizamos da seguinte forma:
<dialog id="dialogv2">
<header>
<button
class="close-dialog-btn"
onclick="this.closest('dialog').close('close')"
>
X
</button>
</header>
<p>As arvores somos nozes</p>
</dialog>
<button onclick="dialogv2.showModal()">Mais conhecimento</button>
Code language: HTML, XML (xml)Agora vamos estilizar o nosso elemento HTML dialog com um pouco de CSS:
dialog {
font-size: 1rem;
margin: auto;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
width: 100%;
background: #f4f4f4;
border-radius: 3px;
position: relative;
width: 300px;
max-width: 100%;
border: none;
padding: 0;
}
dialog header {
background: #cccccc;
padding: 0.5em;
text-align: right;
border-radius: 3px 0 0 3px;
}
dialog p {
padding: 1em;
}
.close-dialog-btn {
border-radius: 100%;
border: none;
padding: 0.5em;
width: 30px;
height: 30px;
}
dialog::backdrop {
backdrop-filter: blur(15px);
}Code language: CSS (css)Além da estilização tradicional, também podemos estilizar o backdrop do nosso elemento dialog através do pseudo seletor ::backdrop no meu caso eu adicionei um blur ao meu elemento assim os itens atrás do backdrop não ficam visíveis.
mais conteúdo relacionado
Se você gostou do conteúdo confira mais conteúdo releacionado, e também confira o artigo do web.dev sobre dialog.
Deixe um comentário