Os pop-ups estão em toda a Web. Eles podem ser vistos em menus, dicas de ativação 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 esse problema, um novo conjunto de APIs HTML declarativas para criar pop-ups está chegando aos navegadores. A primeira é a API Popover.
O pop-up faz parte de Valor de referência recém-disponível.
Um pop-up é comumente confundido com um diálogo. No entanto, existem algumas diferenças
importantes nos comportamentos deles. 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. Uma popover
permite dispensar a luz. Um dialog
modal não.
Uma caixa de diálogo modal deixa o restante da página inerte. Uma popover
não.
Leia mais sobre as diferenças.
Este artigo faz parte de uma série que discute como as empresas de e-commerce aprimoraram os sites usando os novos recursos de CSS e IU. 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 por 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, na sigla em inglês) da Tokopedia contêm várias imagens para cada produto. Quando a miniatura do produto recebe um clique, um modal é aberto para mostrar a imagem ampliada. Esse é um padrão comum usado em sites de e-commerce.
Programar
A Tokopedia usa o React para o desenvolvimento de front-end. Antes de implementar a
API popover para esse modal, ele usou 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',
'@starting-style': {
transform: 'scale(1)',
opacity: 1,
},
transform: 'scale(0.8)',
opacity: 0,
'&:popover-open': {
'@starting-style': {
transform: 'scale(0.8)',
opacity: 0,
},
transform: 'scale(1)',
opacity: 1,
},
});
Para atender a navegadores que não oferecem suporte à API de 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 funcionava 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 popover.
Considerações importantes ao usar a API Popover
A Tokopedia usa o React, e a equipe dividiu o código desmontando o componente de pop-up das páginas que não o usam e dividindo o código do conteúdo. Dessa forma, ela reduziu o tamanho da solicitação inicial.
Considere combinar os pop-ups com o posicionamento de âncora de 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.
Explore os outros artigos desta série que falam sobre como as empresas de e-commerce se beneficiaram do uso dos novos recursos de CSS e interface, como animações de rolagem, pop-up, consultas de contêiner e o seletor has()
.