Apresentação da API popover

Una Kravets

Os popovers estão por toda parte na web. Eles aparecem em menus, dicas de alternância 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 em navegadores ainda é surpreendentemente complicado. Você precisa adicionar scripts para gerenciar os estados de foco, abertura e fechamento, ganchos acessíveis para os componentes, vinculações de teclado para entrar e sair da experiência, e isso é tudo antes de começar a criar a funcionalidade central, útil e exclusiva do pop-over.

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

Atributo pop-over

Em vez de gerenciar toda a complexidade por conta própria, você pode deixar que o navegador cuide disso com o atributo popover e o conjunto subsequente de recursos. Os pop-ups HTML são compatíveis com:

• Promoção para a camada superior. Os pop-ups aparecerão em uma camada separada acima do resto da página. Assim, você não precisa se contentar com o Z-index.
• Funcionalidade de dispensa simples. Clicar fora da área do pop-up vai fechá-lo e retornar o foco.
• Gerenciamento de foco padrão. Abrir o pop-over faz a próxima guia parar dentro dele.
• Vinculações de teclado acessíveis. Pressionar a tecla esc fecha o pop-over e retorna o foco.
• Vinculações de componentes acessíveis. Conectar um elemento pop-over a um acionador pop-over semanticamente.

Agora você pode criar pop-ups com todos esses recursos sem usar o JavaScript. Um pop-over básico requer três coisas:

• Um atributo popover no elemento que contém o pop-up.
• Uma id no elemento que contém o pop-over.
• Uma popovertarget com o valor da id do pop-up no elemento que abre o pop-up.

<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-over básico totalmente funcional.

Esse pop-over pode ser usado para transmitir outras informações 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 ou elemento que abre o pop-up abre e fecha o pop-up. No entanto, você também pode criar popovers 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-over.

Usando popovertargetaction="hide", é possível criar um botão "Fechar" em um pop-over, 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 x manuais

Usar o 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 com a dispensa de luz ou um botão de fechamento.

Por outro lado, definir popover=manual cria outro tipo de pop-over: manual. Eles não forçam o fechamento de nenhum outro tipo de elemento e não são fechados com a dispensa de iluminação. Você precisa fechá-los por meio de um timer ou uma ação de fechamento explícita. Os tipos de pop-over 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.

Na demonstração acima, você vai notar que, ao clicar fora da área pop-up, ele não é dispensado. Além disso, se houver outros pop-ups abertos, eles não fecharão.

Para analisar as diferenças:

Pop-ups com popover=auto:

• Quando abertos, force o fechamento de outros popovers.
• 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.

Como definir o estilo dos pop-ups

Até agora, você aprendeu sobre popovers básicos em HTML. No entanto, o popover também tem alguns recursos de estilo legais. Uma delas é a capacidade de definir o estilo de ::backdrop.

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

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

A diferença entre uma popover e uma dialog.

É importante observar que o atributo popover não fornece semântica por si só. Embora agora você possa criar experiências semelhantes a caixas de diálogo modais usando popover="auto", existem algumas diferenças principais 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. Um popover oferece suporte à dispensa de luz. Um modal dialog não faz isso. Uma caixa de diálogo modal torna o restante da página inerte. Um popover não.

A demonstração acima é uma caixa de diálogo semântica com comportamento de pop-over. Isso significa que o restante da página não fica inerte e que o pop-up da caixa de diálogo recebe um comportamento de dispensa de luz. Crie essa caixa de diálogo com o comportamento de pop-over 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 animação de e para display: none e animação de e para a camada superior, ainda não está disponível em navegadores. No entanto, eles estão planejados para uma próxima versão do Chromium, logo após esse lançamento.

Com a capacidade de animar propriedades discretas e o uso de :popover-open e @starting-style, você poderá configurar estilos antes e depois da mudança para permitir transições suaves ao abrir e fechar popovers. Veja o exemplo anterior. Animá-los para dentro e para fora parece muito mais suave e oferece uma experiência mais fluida para o usuário:

Posicionamento da âncora

As popovers são ótimas quando você quer posicionar um alerta, modal ou notificação com base na janela de visualização. No entanto, os pop-overs também são úteis para menus, dicas de ferramenta e outros elementos que precisam ser posicionados em relação a outros elementos. É aí que entra a ancoragem CSS.

A demonstração de menu radial a seguir usa a API popover com o posicionamento de âncora de CSS para garantir que o #menu-items do pop-up esteja sempre ancorado no gatilho 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-up centralizado que está ancorado à linha de base do botão de alternância de âncora pode ser estilizado da seguinte maneira:

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

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

Conclusão

A API popover é o primeiro passo 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. Mal posso esperar para ver como vocês vão usar os pop-ups!

Informações adicionais

• As caixas de diálogo e os pop-ups são semelhantes. Qual é o diferencial deles?
• Semântica e o atributo pop-over
• Documentação do MDN sobre pop-over
• Explicações sobre pop-up do OpenUI