Regras e pontos de interrupção @container

@container é a regra at que aplica estilos quando um contêiner atende a determinadas condições de tamanho. Sua sintaxe é semelhante à das consultas de mídia:

Direcione um contêiner nomeado específico:

Use max-width para aplicar estilos a contêineres menores:

A sintaxe moderna de consultas de contêiner oferece suporte a intervalos:

Um componente de cartão que se adapta com base na largura do contêiner:

As consultas de contêiner podem ser aninhadas. Por padrão, a consulta interna faz referência ao ancestral contêiner mais próximo.

Ao contrário dos pontos de quebra da janela de visualização, os pontos de quebra do contêiner devem ser escolhidos com base no momento em que o layout do componente precisa mudar, e não em tamanhos arbitrários de dispositivos. Comece pelas larguras mínima e máxima de conteúdo do componente.

Ajuste a tipografia para contêineres pequenos:

Altere a grade interna de um componente nos pontos de quebra do contêiner:

As consultas de contêiner também oferecem suporte a consultas de estilo que verificam valores calculados de propriedades personalizadas. Isso permite criar variantes de componentes controladas por variáveis CSS, sem classes adicionais:

A que @container (min-width: 500px) se aplica?

As regras @container aplicam estilos a elementos dentro de um contêiner quando o contêiner atende às condições de tamanho. Use contêineres nomeados para direcionar ancestrais específicos. Os pontos de quebra do contêiner devem se basear nas necessidades do conteúdo, e não nos tamanhos dos dispositivos. As consultas de estilo ampliam as consultas de contêiner para verificar valores de variáveis CSS, permitindo criar variantes de componentes declarativas e poderosas.