Apresentação da API popover

Una Kravets

Pop-ups estão em todo lugar na Web. Eles aparecem em menus, dicas de ferramentas e caixas de diálogo, que podem se manifestar como configurações de conta, widgets de divulgação e visualizações de cards de produtos. Apesar de esses componentes serem muito usados, criá-los em navegadores ainda é surpreendentemente complicado. É necessário 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 mesmo de começar a criar a funcionalidade útil, exclusiva e principal do seu pop-up.

Para resolver esse problema, um novo conjunto de APIs HTML declarativas para criar pop-ups está chegando aos navegadores, começando com a API popover no Chromium 114.

O atributo popover

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Source

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 popovers HTML:

  • Promoção para a camada superior. Os pop-ups vão aparecer em uma camada separada acima do restante da página, para que você não precise mexer no z-index.
  • Funcionalidade de dispensa leve. Clicar fora da área do pop-up fecha o pop-up e retorna o foco.
  • Gerenciamento de foco padrão. Abrir o pop-up faz com que a próxima guia pare dentro dele.
  • Vinculação de teclado acessível. Pressionar a tecla esc fecha o pop-up e retorna o foco.
  • Vinculação de componentes acessível. Conexão semântica de um elemento pop-up a um gatilho.

Agora é possível criar pop-ups com todos esses recursos sem usar JavaScript. Um pop-up básico requer três coisas:

  • Um atributo popover no elemento que contém o popover.
  • Uma id no elemento que contém o pop-up.
  • Um atributo popovertarget em um <button> (ou tipo de botão como <input type="button" />). O atributo tem um valor que corresponde ao id no elemento que contém o pop-up a ser aberto por esse botão.
<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-up pode ser usado para transmitir informações adicionais ou como um widget de divulgaçã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 que abre o pop-up vai alternar entre aberto e fechado. No entanto, também é possível criar pop-ups explícitos usando popovertargetaction. Isso substitui a ação padrão alternar. As opções de popovertargetaction incluem:

popovertargetaction="show": mostra o popover. popovertargetaction="hide": oculta o popover.

Usando popovertargetaction="hide", é possível criar um botão "Fechar" em um popover, como no snippet abaixo:

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

Popovers automáticos x manuais

O uso do atributo popover sozinho é um atalho para popover="auto". Quando aberto, o popover padrão força o fechamento de outros pop-ups automáticos, exceto os ancestrais. Ele pode ser dispensado por meio de dispensa leve ou um botão de fechamento.

Por outro lado, definir popover=manual cria outro tipo de pop-up: um pop-up manual. Elas não forçam o fechamento de nenhum outro tipo de elemento e não fecham por meio de dispensa leve. É necessário fechar usando 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 pop-up.

Se você conferir a demonstração acima, vai perceber que clicar fora da área do pop-up não o dispensa. Além disso, se outros popovers estivessem abertos, eles não seriam fechados.

Para analisar as diferenças:

Pop-ups com popover=auto:

  • Quando aberto, feche outros pop-up à força.
  • Pode ser dispensado.

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 ativação ou fechamento.

Estilos de pop-up

Até agora, você aprendeu sobre pop-ups básicos em HTML. Mas também há alguns recursos de estilo legais que vêm com o popover. Uma delas é a capacidade de estilizar ::backdrop.

Nos pop-ups auto, essa é uma camada diretamente abaixo da camada superior (onde o pop-up fica), que fica acima do restante da página. No exemplo abaixo, a ::backdrop recebe uma cor semitransparente:

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

A diferença entre um popover e um dialog

É importante observar que o atributo popover não fornece semântica por conta própria. Embora agora seja possível criar experiências semelhantes a caixas de diálogo com 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 exige interação explícita do usuário para fechar a caixa modal. Um popover oferece suporte à dispensa leve. Um dialog modal não tem. Uma caixa de diálogo modal inativa o restante da página. Um popover não faz isso.

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 é inerte e que o pop-up de diálogo recebe o comportamento de dispensa leve. É possível 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 e para a camada superior, ainda não está disponível nos navegadores. No entanto, eles estão planejados 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, você poderá configurar estilos antes e depois da mudança para permitir transições suaves ao abrir e fechar pop-ups. Considere o exemplo anterior. A animação de entrada e saída fica muito mais suave e oferece uma experiência do usuário mais fluida:

Posicionamento de âncora

Os pop-ups são ótimos quando você quer 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 de ferramentas e outros elementos que precisam ser posicionados em relação a outros elementos. É aqui que entra a ancoragem do CSS.

A demonstração de menu radial a seguir usa a API de popover com o posicionamento de âncora do CSS para garantir que o #menu-items do popover seja sempre ancorado 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 estilizar o popover. Um menu flutuante centralizado que é ancorado à linha de base do botão de ativação pode ter o seguinte estilo:

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

Agora você tem um menu pop-up totalmente funcional ancorado ao botão de ativação e com todos os recursos integrados do pop-up, sem a necessidade de JavaScript.

Conclusão

A API popover é a primeira etapa de uma série de novos recursos para facilitar o gerenciamento e tornar a criação de aplicativos da Web mais acessível por padrão. Mal posso esperar para ver como você usa os pop-ups.

Informações adicionais