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:
- Abra o DevTools.
- 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
:
- No painel Elementos, defina a largura do contêiner como
500px
. O elementop
será exibido. Selecione o elemento
p
. No painel Estilos, é possível conferir a declaração@container
com um link para o contêiner paiarticle.card
.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.
- Selecione o elemento
p
. No painel Estilos. Veja a declaração@container (inline-size > 400px)
. - Mude a
inline-size
de400px
para520px
. - O elemento de parágrafo (
p
) desaparece da página porque não atendeu aos critérios de consulta.