Como criar notificações de aviso

As notificações de aviso são mensagens de status temporárias. Ao contrário dos menus, eles não devem ser fechados quando um usuário interage com outras partes da página. O estado popover="manual" é ideal porque não tem o comportamento de "dispensa leve" e permite que várias notificações coexistam.

Diretrizes de implementação

• OBRIGATÓRIO: use popover="manual" para que a notificação permaneça visível até ser explicitamente fechada ou expirar por um script.
• RECOMENDAMOS usar um contêiner para gerenciar o empilhamento de várias notificações. Como os popovers na camada superior ignoram o z-index pai, é necessário posicioná-los individualmente ou em um grupo de layout comum.
• RECOMENDADO: use sibling-index() para adicionar margem entre as notificações de aviso, de modo que os itens mais abaixo na pilha fiquem visíveis.
• É RECOMENDÁVEL fornecer um botão "Fechar" explícito no aviso usando popovertargetaction="hide".
• USE JavaScript para timers de dispensa automática (por exemplo, chamar hidePopover() após 3.000 ms).
• USE transition-behavior: allow-discrete para animar a entrada e a saída da camada superior.

Estratégias de fallback

Alternativas e suporte do navegador para Popover

A API Popover é, em grande parte, um aprimoramento progressivo, mas os comportamentos que a definem (promoção de camada superior, fechamento leve e invocação de popovertarget) não têm equivalente somente em CSS. Os navegadores mais antigos precisam de um polyfill ou de um substituto manual, se você preferir não enviar um.

Polyfill: para oferecer suporte ao atributo popover em navegadores mais antigos, carregue condicionalmente @oddbird/popover-polyfill. OBRIGATÓRIO: detecte o recurso verificando a propriedade popover em HTMLElement.prototype e carregue o polyfill somente quando não houver suporte nativo. NÃO o carregue incondicionalmente.

Com um bundler ou mapa de importação:

// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
  import("@oddbird/popover-polyfill");
}

Sem um bundler, importe de uma CDN dentro de um <script type="module">:

<script type="module">
  if (!("popover" in HTMLElement.prototype)) {
    import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
  }
</script>

Observação sobre o estilo: o polyfill não pode definir a pseudoclasse :popover-open real. Por isso, ele aplica uma classe .\:popover-open. OBRIGATÓRIO: combine os dois com :is() ou :where(). Caso contrário, os navegadores que não têm :popover-open vão descartar toda a regra:

[popover]:is(:popover-open, .\:popover-open) {
  display: block;
}

Como alternativa, para um substituto legado sem um polyfill, use position: fixed e calcule manualmente as coordenadas usando getBoundingClientRect() ou use o posicionamento padrão com inset: auto, se isso for aceitável para o caso de uso.

sibling-index()

• Orientação: se sibling-index() não for compatível, use o operador + para adicionar margem manualmente. Por exemplo, popover + popover { margin-top: 1rem }

anchor-positioning

• Orientação: use o polyfill de posicionamento de âncora CSS. Para um substituto que não seja um polyfill, defina a dica como uma posição fixa na parte de baixo da janela de visualização usando @supports not (anchor-name: --foo).

transition-behavior

• Orientação: se transition-behavior não for compatível, use o JavaScript para adicionar animação usando classes conforme o elemento de aviso é exibido e ocultado.