Os pop-ups estão em toda a Web. Eles podem ser mostrados em menus, dicas e caixas de diálogo, que podem aparecer como configurações da conta, widgets de divulgação e visualizações de cards de produtos. Apesar da prevalência desses componentes, criá-los nos navegadores ainda é surpreendentemente complicado. Você precisa adicionar scripts para gerenciar o foco, os estados de abertura e fechamento, ganchos acessíveis nos componentes, vinculações de teclado para entrar e sair da experiência, tudo isso antes de você começar a criar a funcionalidade principal, útil e exclusiva do seu pop-over.
Para resolver isso, um novo conjunto de APIs HTML declarativas para criar pop-ups está chegando aos navegadores, começando com a API popover no Chromium 114.
Atributo popover
Em vez de gerenciar toda a complexidade por conta própria, você pode deixar que o navegador faça isso com o atributo popover e o conjunto de recursos subsequente. Suporte a pop-ups HTML:
- Promoção para a camada superior. Os popovers aparecerão em uma camada separada acima do resto da página, para que você não precise mexer no Z-index.
- Funcionalidade de dispensar a luz. Clicar fora da área de pop-up fecha o pop-up e retorna o foco.
- Gerenciamento de foco padrão. Abrir o pop-up faz a próxima guia parar dentro do pop-up.
- Vinculações de teclado acessíveis. Pressionar a tecla
escvai fechar o pop-up e retornar o foco. - Vinculações de componentes acessíveis. Conectar um elemento de pop-up a um acionador de pop-up semanticamente.
Agora você pode criar popovers com todos esses recursos sem usar JavaScript. Um pop-up básico requer três coisas:
- Um atributo
popoverno elemento que contém o pop-up. - Uma
idno elemento que contém o pop-up. - Um
popovertargetcom o valor doiddo pop-up no elemento que o abre.
<button popovertarget="my-popover"> Open Popover </button>
<div id="my-popover" popover>
<p>I am a popover with more information.</p>
</div>
Agora você tem um pop-up básico totalmente funcional.
Esse pop-over pode ser usado para transmitir informações adicionais ou como um widget de declaração.
Padrões e substituições
Por padrão, como no snippet de código anterior, configurar um pop-up com um popovertarget significa que o botão ou elemento que o abre vai abrir e fechar o pop-up. No entanto, também é possível criar pop-ups explícitos usando popovertargetaction. Isso substitui a ação toggle padrão. As opções de popovertargetaction incluem:
popovertargetaction="show": mostra o pop-up.
popovertargetaction="hide": oculta o pop-up.
Com popovertargetaction="hide", é possível criar um botão "Fechar" em um pop-up, como no snippet a seguir:
<button popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Close</span>
</button>
Pop-ups automáticos e manuais
Usar o atributo popover sozinho é um atalho para popover="auto". Quando aberto, o padrão popover forçará o fechamento de outros pop-ups automáticos, exceto os ancestrais. Ele pode ser dispensado com a dispensa ou com um botão "Fechar".
Por outro lado, definir popover=manual cria outro tipo de pop-up: um manual. Eles não forçam o fechamento de nenhum outro tipo de elemento nem são fechados com a dispensa de luzes. É necessário fechá-los com um timer ou uma ação de fechamento explícita. Os tipos de pop-up adequados para popover=manual são elementos que aparecem e desaparecem, mas não afetam o restante da página, como uma notificação de aviso.
Se você acessar a demonstração acima, vai perceber que clicar fora da área de pop-up não faz com que a janela seja dispensada. Além disso, se houvesse outros pop-ups abertos, eles não fechariam.
Para analisar as diferenças:
Pop-ups com popover=auto:
- Quando aberto, force o fechamento de outros pop-ups.
- Pode dispensar a luz.
Pop-ups com popover=manual:
- Não force o fechamento de nenhum outro tipo de elemento.
- Não dispensar a luz. Feche-as usando uma ação de alternar ou fechar.
Estilizar pop-ups
Até agora, você aprendeu sobre pop-ups básicos em HTML. Mas também há alguns recursos de estilo interessantes que acompanham o popover. Uma delas é a capacidade de definir o estilo de ::backdrop.
Nos pop-ups do auto, essa é uma camada diretamente abaixo da camada superior (onde fica o pop-up), que fica acima do restante da página. No exemplo a seguir, a ::backdrop recebe uma cor semitransparente:
#size-guide::backdrop {
background: rgb(190 190 190 / 50%);
}
A diferença entre um popover e um dialog.
O atributo popover não fornece semântica por si só. E embora agora você possa criar experiências semelhantes a caixas de diálogo modais usando popover="auto", há algumas diferenças importantes entre os dois:
Um elemento dialog aberto com dialog.showModal (uma caixa de diálogo modal) é uma experiência que requer interação explícita do usuário para fechar o modal.
Uma popover permite dispensar a luz. Um dialog modal não.
Uma caixa de diálogo modal torna o restante da página inerte. Uma popover não.
A demonstração acima é uma caixa de diálogo semântica com comportamento de pop-up. Isso significa que o restante da página não está inerte e que o pop-up da caixa de diálogo tem um comportamento de dispensar claro. Você pode criar essa caixa de diálogo com o comportamento de pop-up usando o seguinte código:
<button popovertarget="candle-01">
Quick Shop
</button>
<dialog popover id="candle-01">
<button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
<div class="product-preview-container">
...
</div>
</dialog>
Em breve
Entrada e saída interativas
A capacidade de animar propriedades discretas, incluindo a animação de e para display: none e a animação de entrada e saída na camada superior, ainda não está disponível em navegadores. No entanto, há planos para uma versão futura do Chromium, logo após este lançamento.
Com a capacidade de animar propriedades discretas e usando :popover-open e @starting-style, é possível configurar estilos antes e depois da mudança para permitir transições suaves ao abrir e fechar pop-ups. Vejamos o exemplo anterior. A animação de entrada e saída é muito mais suave e oferece uma experiência do usuário mais fluida:
Posicionamento de âncoras
Os pop-ups são ótimos para posicionar um alerta, modal ou notificação com base na janela de visualização. Mas os pop-ups também são úteis para menus, dicas e outros elementos que precisam ser posicionados em relação a outros elementos. É aqui que entra a ancoragem de CSS.
A demonstração do menu radial a seguir usa a API de pop-up com o posicionamento de âncora do CSS para garantir que o pop-up #menu-items esteja sempre fixado ao acionador de alternância, o botão #menu-toggle.
A configuração de âncoras é semelhante à configuração de pop-ups:
<button id="menu-toggle" popovertarget="menu-items">
Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
<li class="item">...</li>
<li class="item">...</li>
</ul>
Para configurar uma âncora, atribua a ela um id (neste exemplo, #menu-toggle) e use anchor="menu-toggle" para conectar os dois elementos. Agora, você pode usar anchor() para definir o estilo do pop-up. Um menu pop-over centralizado ancorado à linha de base do botão de alternância da âncora pode ter o seguinte estilo:
#menu-items {
bottom: anchor(bottom);
left: anchor(center);
translate: -50% 0;
}
Agora você tem um menu pop-over totalmente funcional ancorado ao botão de ativação e com todos os recursos integrados, sem a necessidade de JavaScript.
Conclusão
A API popover é a primeira etapa de uma série de novos recursos para tornar a criação de aplicativos da web mais fácil de gerenciar e mais acessível por padrão. Quero muito saber como você vai usar os pop-ups.