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
Antes (várias bases de código) | Depois (base de código única) | |
---|---|---|
Infraestrutura | Infraestrutura separada (alto custo). | Mesma infraestrutura (custo reduzido). |
Design | IU separada, mas com consistência ruim. | Difícil de resolver, mas possível. |
Desempenho | Fácil de lidar, pois o sistema é separado, mas duplica o esforço de melhorar o desempenho. | Esta é uma página e recurso específicos, mas a pontuação PageSpeedInsights do redBus está acima de 80. |
Desenvolvimento | Equipes de desenvolvedores separadas. | 30% a 40% de redução do tempo. |
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()
.