Estudos de caso de consultas de contêiner

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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.

Compatibilidade com navegadores

  • Chrome: 105
  • Borda: 105.
  • Firefox: 110
  • Safari: 16.

Origem

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.

Imagem mostrando como diferentes tipos de estilo funcionam juntos.
web.dev: o novo 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

Antes (base de vários códigos) Depois (uma única base de código)
Infraestrutura Infraestrutura separada (alto custo). Mesma infraestrutura (custo reduzido).
Design interface separada, mas pouca consistência. Difícil de resolver, mas possível.
Desempenho Fácil de lidar porque o sistema é separado, mas duplica o esforço para melhorar o desempenho. Esta é uma página e um recurso específicos, mas a pontuação PageSpeedInsights do redBus está acima de 80.
Desenvolvimento Equipes de desenvolvedores separadas. Redução de 30% a 40% no tempo.

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

Antes de implementar consultas de contêiner, as palavras "ISKU 10 em 1 Obeng satu..." no canto superior esquerdo são cortados para telas menores.

Depois

A implementação de consultas de contêiner ajusta o layout, mantendo o texto dentro da janela de visualização.

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:

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().