
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 id
para identificar o elemento de conteúdo:
That is the contents of the popover
Ao clicar no button
o 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.
API de visibilidade da página
Um evento que sempre faltou no documento é um sinal para quando o usuário está olhando para uma determinada aba, ou outra aba. Quando o usuário sai do nosso website para olhar para outra coisa? Quando ele volta?
o tamanho do plano de fundo importa
É algo que faz todos os homens viverem com medo, e muitas vezes são incertos. Nunca é falado, mas a curiosidade está sempre lá. Nove em cada dez mulheres concordam afirmativamente. Os anunciantes fazem o melhor que podem para nos fazer sentir inadequados, mas…
Filtros CSS
O suporte a filtros CSS chegou recentemente aos nightlies do WebKit. Filtros CSS fornece um método para modificar a renderização de um elemento DOM básico, imagem ou vídeo. Os filtros CSS permitem desfocar, distorcer e modificar a intensidade da cor dos elementos. Vamos ter…