Pop-ups estão por toda parte na Web. Eles aparecem em menus, dicas de alternância e caixas de diálogo, usados para recursos 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. Para resolver isso, um novo conjunto de APIs HTML declarativas para a criação de pop-ups será lançado nos navegadores. O primeiro deles é a API Popover.
O pop-up faz parte da Baseline recém-disponível.
É comum confundir um pop-up com uma caixa de diálogo. No entanto, há algumas diferenças
importantes no comportamento deles. 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 modal dialog
não faz isso.
Uma caixa de diálogo modal torna o restante da página inerte. Um popover
não faz isso.
Leia mais sobre as diferenças.
Este artigo faz parte de uma série que discute como as empresas de e-commerce melhoraram os sites usando novos recursos de CSS e interface. Neste artigo, descubra como a Tokopedia implementou e se beneficiou da API Popover.
Tokopedia
O uso de atributos de popover reduziu até 70% das linhas de código no React. O modal pode ser controlado de forma nativa pelo HTML, em vez de exigir o processamento de eventos em JavaScript e usar
React.createPortal
para mover o DOM modal para o final dedocument.body
. Também podemos usar@starting-style
para animar a abertura e o fechamento do pop-up: Andy Wihalim, engenheiro de software sênior, Tokopedia.
As páginas de detalhes do produto (PDP) da Tokopedia contêm várias imagens de cada produto. Quando a miniatura do produto é clicada, um modal é aberto para mostrar a imagem ampliada. Esse é um padrão comum usado em sites de e-commerce.
Código
A Tokopedia usa o React para o desenvolvimento de front-end. Antes de implementar a
API popover para esse modal, eles usaram um modal DOM e um botão. O botão
mudou o estado do React para abrir o modal. Com a API de pop-up, eles especificam um
atributo popovertarget
no elemento que abre o pop-up com um valor
igual ao ID do elemento.
Com essa implementação básica, o pop-up funciona, mas aparece e desaparece
sem nenhuma animação. Para criar uma animação de entrada e saída suave para o
popover, use :popover-open
e @starting-style
e permita a animação de
propriedades discretas.
No exemplo de código abaixo, o pop-up é dimensionado usando a
propriedade transform: 'scale()'
.
Este exemplo de código mostra como implementar animações de entrada e saída para a API popover.
<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />
export const cssModalWrapper = css({
background: NN0,
border: 'none',
borderRadius: '.625rem',
width: 1024,
padding: 24,
'&::backdrop': {
opacity: 0,
transitionProperty: 'opacity, display',
transition: '.25s ease-out',
transitionBehavior: 'allow-discrete',
},
transitionProperty: 'transform, opacity, display',
transition: '.25s ease-out',
transitionBehavior: 'allow-discrete',
transform: 'scale(0.8)',
opacity: 0,
'@starting-style': {
transform: 'scale(1)',
opacity: 1,
},
'&:popover-open': {
transform: 'scale(1)',
opacity: 1,
'@starting-style': {
transform: 'scale(0.8)',
opacity: 0,
},
},
});
Para atender a navegadores que não são compatíveis com a API popover, a Tokopedia implementou o popover-polyfill da Oddbird, que tem apenas 3,2 KB com compactação gzip. Eles ficaram satisfeitos com o polyfill porque ele funcionou bem e não causou regressões de desempenho. No geral, eles conseguiram reduzir até 70% das linhas de código no React com a API de popover.
Considerações ao usar a API Popover
A Tokopedia usa o React, e a equipe fez a divisão do código desmontando o componente pop-over para páginas que não o utilizam e dividindo de código para o conteúdo do pop-up. Dessa forma, eles reduziram o tamanho da solicitação inicial.
Considere combinar pop-ups com o posicionamento de âncora CSS (em breve no Chrome) para posicioná-los em relação a outros elementos. Isso é útil para menus e dicas, por exemplo.
Recursos
- Apresentação da API popover
- A diferença entre um pop-up e uma caixa de diálogo
- Quer informar um bug ou solicitar um novo recurso? Queremos saber sua opinião.
Confira os outros artigos desta série que falam sobre como as empresas de comércio
eletrônico se beneficiaram do uso de novos recursos de CSS e interface, como animações
de rolagem, pop-up, consultas de contêiner e o seletor has()
.