Estudos de caso de consultas de contêiner

Swetha Gopalakrishnan

Saurabh Rajpal

As consultas de contêiner oferecem uma abordagem altamente dinâmica e flexível para design responsivo. As consultas de contêiner usam a regra de regra @container. Isso funciona de maneira parecida com uma consulta de mídia com @media. No entanto, @container consulta um contêiner pai para informações de estilo, e não a janela de visualização e o user agent.

As consultas de contêiner fazem parte da referência recém-disponível.

Ao responder ao tamanho do contêiner, as consultas dele permitem que os componentes se adaptem ao local em que estão em uma interface. Por exemplo, um componente do card pode adaptar o tamanho e os estilos de acordo com o contêiner em que está posicionado, seja uma barra lateral, uma seção principal ou uma grade no corpo principal de uma página.

Conforme mostrado na ilustração abaixo, é possível combinar consultas de mídia para layouts de macro, consultas de contêiner para microlayouts com consultas de mídia baseadas em preferências do usuário para criar um sistema de design responsivo eficiente. Leia mais sobre consultas de contêiner e o novo design responsivo.

Este artigo faz parte de uma série que discute como empresas de e-commerce aprimoraram os sites usando novos recursos de CSS e IU. Desta vez, vamos analisar como algumas empresas usaram e se beneficiaram das consultas de contêiner.

redBus

O redBus mantém e veicula códigos diferentes para suas versões para dispositivos móveis e para computador. Depois de implementar as consultas de contêiner nas páginas Coisas legais para fazer e cargo, a empresa conseguiu unificar esse código em uma única base de código para esses sites. Isso os tornou responsivos e economizou tempo de desenvolvimento. O exemplo a seguir demonstra isso usando a página de carga:

Programar

No exemplo a seguir, .bpdpCardWrapper é o contêiner pai, chamado de bpdpSection.

Se o contêiner bpdpSection tiver uma largura mínima de 744 px, font-size e line-height dos componentes selecionados por .bpdpCardContainer e .subTxt, .bpdpAddress serão atualizados.

//Code for Container Queries
.bpdpCardWrapper {
   container-type: inline-size;
   container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
   .bpdpCardContainer{
      font-size: 1rem;
      line-height: 1.5rem;
   }

   .subTxt, .bpdpAddress{
       font-size: 0.875rem;
       line-height: 1.25rem;
   }
}

Impacto

Tokopedia

As páginas de detalhes do produto (PDP) da Tokopedia contêm várias guias para as informações da loja e do produto. Antes, o layout dessa página era dividido em três colunas, e, às vezes, o nome do produto à esquerda era cortado para telas menores. Assista ao vídeo "Antes" abaixo.

Para resolver esse problema de layout, eles adotaram de forma fácil e rápida consultas de contêiner. Após essa implementação, foi possível ter um layout flexível em que o nome do produto sempre ficava totalmente visível. Confira o vídeo "Depois" a seguir.

Antes

Depois

Programar

O código a seguir consulta o tamanho do contêiner pai chamado infowrapper. Se a largura máxima da infowrapper for 360 px, a width, margin, e padding dos componentes filhos serão ajustadas.

Definir o container-type como inline-size consulta o tamanho da direção in-line do pai. Em idiomas latinos, como o inglês, essa seria a largura do contêiner pai, já que o texto flui in-line da esquerda para a direita.

export const styCredibilityContainer = css`
  container-name: infowrapper;
  container-type: inline-size;
`;

export const styBtnShopFollow = css`
  margin-left: auto;
  width: 98px;
  @container infowrapper (max-width: 360px) {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 8px;
    padding-left: 60px;
  }
`;

export const styBottomRow = css`
  margin-top: 4px;
  padding-left: 60px;
  display: flex;
  align-items: center;

  @container infowrapper (max-width: 360px) {
    padding-left: 0px;
  }

  > div {
    text-align: left;
    margin-top: 0 !important;
  }
`;

Aspectos a serem considerados ao usar consultas de contêiner

A Tokopedia encontrou esse caso de uso procurando reticências de texto no próprio site. Isso indicava contêineres que podem ser muito pequenos, fazendo com que o conteúdo seja cortado para o usuário.

Outro bom caso de uso para consultas de contêiner para sites de e-commerce é procurar componentes reutilizados. Por exemplo, o botão Adicionar ao carrinho pode aparecer de forma diferente com base no contêiner pai (por exemplo, apenas o ícone se estiver no card do produto e o ícone com texto se for uma CTA principal na página). O botão pode ser um bom candidato para consultas de contêiner.

Você pode fazer melhorias incrementais no site. Por exemplo, é possível começar com casos de uso menores, como o exemplo de elipse da Tokopedia, e implementar consultas de contêiner neles. Depois, encontre progressivamente mais casos e melhore o CSS.

Recursos:

• As consultas do contêiner são armazenadas em navegadores estáveis
• Consultas de contêiner: como criar no navegador
• Demonstrações de consultas de contêiner
• Demonstração: cards de consulta de contêiner
• Vídeo: Novidades da interface da Web – I/O 2023
• 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().

• Por que os recursos da interface da Web são importantes para seu site de e-commerce?
• Estudos de caso de animações com rolagem
• Conferir estudos de caso das transições
• Estudos de caso da Popover
• Estudos de caso do seletor:has()