As consultas de contêiner
oferecem uma abordagem altamente dinâmica e flexível para o design responsivo. Elas usam a regra @container. Isso funciona de maneira semelhante a uma consulta de mídia com @media, mas, em vez disso, @container consulta um contêiner pai para informações de estilo, em vez da janela de visualização e do user agent.
Ao responder ao tamanho do contêiner, as consultas de contêiner permitem que os componentes se adaptem à localização deles em uma interface. Por exemplo, um componente de card pode adaptar o tamanho e os estilos de acordo com o contêiner em que está inserido, seja uma barra lateral, uma seção de destaque 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 layouts macro, consultas de contêiner para layouts micro e consultas de mídia baseadas na preferência do usuário para criar um sistema de design responsivo avançado. Leia mais sobre consultas de contêiner e o novo design responsivo.
Este artigo faz parte de uma série que discute como as empresas de e-commerce aprimoraram os sites usando novos recursos de CSS e de interface. Desta vez, vamos mostrar como algumas empresas usaram e se beneficiaram das consultas de contêiner.
redBus
A redBus mantém e veicula códigos diferentes para as versões para dispositivos móveis e computadores. Depois de implementar consultas de contêiner nas páginas de atividades e de carga, foi possível 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:
Código
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, o font-size e o 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
| Antes (várias bases de código) | Depois (base de código única) | |
|---|---|---|
| Infraestrutura | Infraestrutura separada (custo alto). | Mesma infraestrutura (custo reduzido). |
| Design | Interface separada, mas consistência ruim. | Desafiador de resolver, mas possível. |
| Desempenho | Fácil de processar, já que o sistema é separado, mas duplica o esforço de melhorar o desempenho. | Isso é específico da página e do recurso, mas a pontuação do PageSpeedInsights da 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 (PDPs, na sigla em inglês) da Tokopedia contêm várias guias para a loja e informações do produto. Anteriormente, o layout dessa página era dividido em três colunas e, às vezes, o nome do produto à esquerda era cortado para telas menores (consulte o vídeo "Antes" a seguir).
Para resolver esse problema de layout, eles adotaram consultas de contêiner de maneira fácil e rápida. Após essa implementação, foi possível ter um layout flexível em que o nome do produto estava sempre totalmente visível (consulte 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 de 360 px, a
width, o margin, e o padding dos componentes filhos serão ajustados.
A configuração do container-type como inline-size consulta o tamanho da direção inline do pai. Em idiomas latinos, como o inglês, essa seria a largura do 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;
}
`;
O que considerar ao usar consultas de contêiner
A Tokopedia encontrou o caso de uso ao procurar elipses de texto no site. Isso indicava contêineres que poderiam ser muito pequenos, fazendo com que o conteúdo fosse cortado para o usuário.
Outro bom caso de uso para consultas de contêiner em sites de e-commerce é procurar componentes reutilizados. Por exemplo, o botão Adicionar ao carrinho pode ser mostrado de maneira 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 chamada para ação principal na página). O botão pode ser um bom candidato para consultas de contêiner.
É possível fazer melhorias incrementais no seu site. Por exemplo, você pode começar com casos de uso menores, como o exemplo de elipse da Tokopedia, e implementar consultas de contêiner. Em seguida, encontre progressivamente mais casos e melhore o CSS.
Recursos:
- Consultas de contêiner 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 na interface da Web: I/O 2023
- 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 e-commerce se beneficiaram do uso de novos recursos de CSS e de interface, como animações controladas por rolagem, pop-up, consultas de contêiner e o seletor has().