Inspecionar e depurar consultas de contêiner CSS

Sofia Emelianova

Jecelyn Yeen

Este guia mostra como inspecionar e depurar consultas de contêineres CSS no painel Elements do Chrome DevTools.

As consultas de contêiner CSS permitem que você manipule os estilos do elemento com base nas propriedades do contêiner principal. Esse recurso muda o conceito de Web design responsivo de página para baseado em contêiner.

As capturas de tela deste guia foram retiradas desta página de demonstração.

Conhecer os contêineres e os descendentes deles

Cada elemento definido como um contêiner de consulta tem um selo container ao lado, no painel Elements. O selo alterna uma sobreposição de linha pontilhada do contêiner e seus descendentes.

Para alternar a sobreposição:

1. Abra o DevTools.
2. No painel Elements, clique no selo container ao lado do elemento definido como um contêiner.

Neste exemplo, a propriedade container-type: inline-size define o elemento do contêiner. Os descendentes podem consultar a dimensão inline (eixo horizontal) e alterar os estilos com base na largura do contêiner.

Inspecionar consultas de contêiner

O painel Elements mostra as declarações de consulta @container quando elas são aplicadas a um elemento descendente, ou seja, quando o contêiner atende à condição da consulta.

Para entender quando é possível inspecionar declarações @container nesta página de demonstração, analise o seguinte exemplo de código:

@container (inline-size > 400px) {
  .coffee p {
    display: block;
  }
}

@container (inline-size > 600px) {
  .coffee {
    display: grid;
    grid-template-columns: 280px auto;
  }

  .coffee h1 {
    grid-column: 1/3;
  }

  .coffee img {
    grid-row: 2/4;
  }

Neste exemplo, se a largura do contêiner exceder o seguinte número de pixels, os estilos correspondentes serão aplicados:

• Mais de 400px: o elemento de parágrafo (p) aparece na página como um bloco, começa em uma nova linha e ocupa toda a largura.
• Mais de 600px: os descendentes adotam um layout de grade horizontal com o título (h1) na parte de cima e a imagem (img) à esquerda.

Para inspecionar a primeira declaração @container:

1. No painel Elements, defina a largura do contêiner como 500px. O elemento p é exibido.

2. Selecione o elemento p. No painel Estilos, é possível conferir a declaração @container com um link para o contêiner pai article.card.

   

3. Defina a largura como maior que 600px e selecione qualquer um dos elementos afetados. Observe as declarações @container que implementam um layout horizontal.

   

Encontrar elementos de contêiner

Para encontrar e selecionar um elemento de contêiner que fez a consulta entrar em vigor, passe o cursor e clique no nome do elemento acima da declaração @container.

Ao passar o cursor, o nome se transforma em um link para o elemento no painel Elements, e o painel Elements mostra a propriedade consultada e o valor atual dela.

Modificar consultas de contêiner

Para depurar uma consulta, modifique-a como qualquer outra declaração de CSS no painel Estilos, conforme descrito em Visualizar e alterar CSS.

Neste exemplo, a largura do contêiner é 500px. O elemento de parágrafo (p) aparece na página.

1. Selecione o elemento p. No painel Estilos. É possível ver a declaração @container (inline-size > 400px).
2. Mude inline-size de 400px para 520px.
3. O elemento de parágrafo (p) desaparece da página por não atender aos critérios da consulta.