Inspecionar e depurar consultas de contêiner CSS

Sofia Emelianova

GitHub

Jecelyn Yeen

Twitter GitHub Página inicial

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

As consultas de contêiner CSS permitem manipular os estilos do elemento com base nas propriedades do contêiner pai. Esse recurso muda o conceito de Web design responsivo de páginas para contêineres.

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

Descobrir contêineres e os descendentes deles

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

Para alternar a sobreposição:

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

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

Inspecionar consultas de contêiner

O painel Elementos mostra 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 as 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. Ele 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 Elementos, defina a largura do contêiner como 500px. O elemento p será 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 mais de 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 Elementos, e o painel Estilos exibe a propriedade consultada e o valor atual dela.

Modificar consultas de contêiner

Para depurar uma consulta, modifique-a como qualquer outra declaração 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. Veja a declaração @container (inline-size > 400px).
2. Mude a inline-size de 400px para 520px.
3. O elemento de parágrafo (p) desaparece da página porque não atendeu aos critérios de consulta.