Verificação HTML: CSS: Regra at-rule "@container" não reconhecida

Sobre este problema de CSS

A regra at-rule @container permite container queries, possibilitando aplicar estilos a elementos baseados no tamanho ou inline-size de um contentor pai em vez do viewport. Foi introduzida como parte da especificação CSS Containment Module Level 3 e tem sido suportada em todos os principais navegadores (Chrome, Edge, Firefox, Safari) desde o início de 2023.

O validador CSS do W3C usa o seu próprio motor de análise CSS, que às vezes fica atrás das especificações CSS mais recentes. Como @container é relativamente novo comparado com regras at-rule estabelecidas há muito tempo como @media ou @keyframes, o validador pode sinalizá-lo como não reconhecido. Isto não significa que o seu CSS é inválido ou está quebrado — significa simplesmente que o validador ainda não se atualizou com a especificação.

Por que este aviso aparece

O validador do W3C verifica o seu CSS contra regras gramaticais conhecidas. Quando encontra uma regra at-rule que não tem no seu dicionário interno, reporta-a como não reconhecida. Outras funcionalidades CSS modernas como @layer e @property historicamente desencadearam o mesmo tipo de falso positivo antes de serem adicionadas ao analisador do validador.

Como isto é uma limitação do validador e não um problema real no código, não há “correção” necessária. No entanto, deve ainda certificar-se de que a sua utilização de @container é sintaticamente correta e que configurou adequadamente a contenção no elemento pai.

Como funcionam as container queries

Para que @container funcione, um elemento pai deve ser designado como um contexto de contenção usando a propriedade container-type (ou a abreviação container). Sem isso, o navegador não saberá contra que ancestral fazer a consulta.

Exemplos

Utilização correta de `@container`

O elemento pai precisa de ter container-type definido como inline-size ou size para que os seus descendentes possam fazer consultas contra ele:

<div class="card-wrapper">
  <div class="card">
    <h2>Title</h2>
    <p>Some content here.</p>
  </div>
</div>

.card-wrapper {
  container-type: inline-size;
  container-name: card-container;
}

@container card-container (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

Neste exemplo, .card-wrapper é estabelecido como um contexto de contenção. Quando o seu inline size é pelo menos 400px, o .card interior muda para um layout flex. O validador pode sinalizar o bloco @container, mas este CSS é perfeitamente válido e funciona em todos os navegadores modernos.

Usar `@container` sem um contentor nomeado

Pode omitir o nome do contentor, e a consulta irá corresponder ao ancestral mais próximo com um container-type definido:

.sidebar {
  container-type: inline-size;
}

@container (max-width: 300px) {
  .sidebar-nav {
    flex-direction: column;
  }
}

Erro comum: esquecer `container-type`

Se usar @container sem declarar um contexto de contenção num pai, a consulta nunca irá corresponder e os seus estilos não serão aplicados. Isto não causará um erro do validador, mas é um erro lógico:

/* Falta container-type — a consulta @container não tem nada contra o qual consultar */
.wrapper {
  max-width: 600px;
}

@container (min-width: 400px) {
  .content {
    font-size: 1.25rem;
  }
}

A correção é adicionar container-type ao pai pretendido:

.wrapper {
  max-width: 600px;
  container-type: inline-size;
}

@container (min-width: 400px) {
  .content {
    font-size: 1.25rem;
  }
}

O que deve fazer

Verifique a sua sintaxe — certifique-se de que está a usar container-type num elemento pai e que a sua consulta @container segue a gramática correta.
Ignore o aviso do validador — esta é uma limitação conhecida do validador CSS do W3C. O seu CSS é válido de acordo com a especificação.
Verifique o suporte dos navegadores — @container é suportado no Chrome 105+, Edge 105+, Firefox 110+, e Safari 16+. Se precisar de suportar navegadores mais antigos, considere usar @container como um melhoramento progressivo ao lado de um layout de fallback.