container-type e container-name

As consultas de contêiner permitem que o CSS aplique estilos com base no tamanho de um contêiner pai, em vez da área de visualização. Isso possibilita um design responsivo realmente baseado em componentes, no qual um componente se adapta ao local onde é inserido.

Com consultas de mídia, um componente de cartão em uma barra lateral de 300px não consegue saber que é pequeno — ele só sabe que a área de visualização é ampla. As consultas de contêiner permitem que o componente reaja ao tamanho do próprio contêiner, não ao da área de visualização global.

Para consultar um contêiner, primeiro declare-o como contêiner de consulta usando container-type:

Valores disponíveis:

• inline-size — habilita consultas na dimensão em linha do contêiner, que corresponde à largura na escrita horizontal
• size — habilita consultas nas dimensões em linha e em bloco, ou seja, largura e altura
• normal — padrão; não habilita consultas de tamanho, mas as consultas de estilo continuam possíveis

Dê um nome ao contêiner para referenciá-lo nas consultas. Isso é necessário quando existem contêineres aninhados e você deseja consultar um ancestral específico:

O atalho container define o nome e o tipo:

Um contêiner sem nome ainda pode ser consultado — a regra @container terá como alvo, por padrão, o ancestral contêiner mais próximo. Os nomes só são necessários quando você deseja ignorar ancestrais até chegar a um específico.

Todo elemento com container-type recebe sua própria contenção de layout. Isso significa que alterações de tamanho dentro do contêiner não afetam os ancestrais, o que traz um benefício de desempenho. O navegador não precisa recalcular a página inteira quando o contêiner muda.

Definir container-type: inline-size implicitamente define contain: inline-size layout style no elemento. Isso impede que o tamanho do contêiner afete o próprio layout, algo necessário para que as consultas de tamanho funcionem.

Uma configuração completa de consulta de contêiner:

Use contêineres para: adaptação no nível do componente, componentes reutilizáveis em diferentes contextos de layout e cartões ou widgets em locais desconhecidos. Use consultas de mídia para: alterações no layout global, dimensionamento da tipografia e exibição ou ocultação de seções grandes.

Qual valor de propriedade torna um elemento consultável pela largura usando regras @container?

container-type: inline-size define um elemento como contêiner de consulta para sua largura. Use container-name para nomear contêineres e direcioná-los seletivamente. O atalho container define ambos. As consultas de contêiner resolvem o problema de componentes inseridos em contextos desconhecidos, que as consultas de mídia da área de visualização não conseguem resolver.