Atributo popover HTML

Os modais têm sido uma parte importante dos websites por duas décadas. Empilhar conteúdos e usar fetch para realizar tarefas é uma ótima maneira de melhorar a UX tanto no desktop quanto no celular. Infelizmente, a maioria dos desenvolvedores não sabe que as especificações HTML e JavaScript implementaram um sistema modal nativo por meio do popover atributo — vamos dar uma olhada!

O HTML

A criação de um modal HTML nativo consiste em usar o popovertarget atributo como gatilho e o popover atributo, emparelhado com um idpara identificar o elemento de conteúdo:

Open popover
That is the contents of the popover

Ao clicar no buttono popover será aberto. O popover, no entanto, não terá uma cor de camada de fundo tradicional, então precisaremos implementar isso por conta própria com alguma mágica CSS.

O CSS

O estilo do conteúdo do popover é bem padrão, mas podemos usar o pseudosseletor do seletor de folha de estilo do navegador para estilizar o “plano de fundo” do modal:

/* contents of the popover */
(popover) {
  background: lightblue;
  padding: 20px;
}

/* the dialog's "modal" background */
(popover):-internal-popover-in-top-layer::backdrop {
  background: rgba(0, 0, 0, .5);  
}

:-internal-popover-in-top-layer::backdrop representa o “fundo” do modal. Tradicionalmente, essa UI tem sido um elemento com opacidade para mostrar o relacionamento de empilhamento.