Estudos de caso de consultas de contêiner

Swetha Gopalakrishnan

Saurabh Rajpal

Consultas de contêiner uma abordagem altamente dinâmica e flexível para do projeto. As consultas de contêiner usam a configuração @container na regra. Isso funciona de maneira semelhante para uma consulta de mídia com @media, mas, em vez disso, @container consulta uma instância pai contêiner para informações de estilo em vez da janela de visualização e do user agent.

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

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

Como mostrado na ilustração a seguir, é possível combinar consultas de mídia para macros layouts, consultas de contêiner para microlayouts, com mídia baseada em preferências do usuário consultas para criar um poderoso sistema de design responsivo. Lida mais sobre consultas de contêiner e a novo design responsivo.

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

redBus

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

Código

No exemplo a seguir, .bpdpCardWrapper é o contêiner pai. nomeado como bpdpSection.

Se o contêiner bpdpSection tiver uma largura mínima de 744 px, o font-size e line-height para os componentes selecionados por .bpdpCardContainer e .subTxt, .bpdpAddress foi atualizado.

//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 a loja e informações 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 diminuir tamanhos de tela (veja o vídeo "Antes" a seguir).

Para resolver esse problema de layout, eles adotaram as consultas de contêiner com facilidade e rapidez. Após essa implementação, eles puderam ter um layout flexível em que os O nome do produto sempre esteve totalmente visível (confira o vídeo "Depois" a seguir).

Antes

Depois

Código

O código a seguir consulta o tamanho do contêiner pai chamado infowrapper. Se a largura máxima do infowrapper for 360 px, o width, margin, e padding foram ajustados.

Definir 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 da contêiner pai, já que o texto flui inline 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;
  }
`;

Considerações ao usar consultas de contêiner

A Tokopedia encontrou o caso de uso procurando no site reticências de texto. Isso indicou que os contêineres eram muito pequenos, fazendo com que o conteúdo fosse cortado para o usuário.

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

Você pode fazer outras melhorias no site. Por exemplo, podemos começar com casos de uso menores, como o exemplo de elipse da Tokopedia, e implementar consultas de contêiner lá. Em seguida, encontre progressivamente mais casos e melhorar o CSS.

Recursos:

• As consultas de contêiner chegam em navegadores estáveis
• Consultas de contêiner: como criar no navegador
• Demonstrações de consultas de contêineres
• Demonstração: cards de consulta de contêiner
• Vídeo: Novidades na interface da Web: I/O 2023 (em inglês)
• Quer informar um bug ou solicitar um novo recurso? Queremos saber sua opinião.

Confira os outros artigos desta série que abordam como o comércio eletrônico empresas que se beneficiaram do uso de novos recursos de CSS e interface do usuário, como os recursos de rolagem animações, pop-over, consultas de contêiner e o seletor has().

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