Validación HTML: CSS: At-rule "@container" no reconocida

Acerca de este problema de CSS

La at-rule @container habilita las consultas de contenedor, permitiendo aplicar estilos a elementos basándote en el tamaño o inline-size de un contenedor padre en lugar del viewport. Fue introducida como parte de la especificación del CSS Containment Module Level 3 y ha sido soportada en todos los navegadores principales (Chrome, Edge, Firefox, Safari) desde principios de 2023.

El validador CSS del W3C usa su propio motor de análisis CSS, que a veces va por detrás de las especificaciones CSS más recientes. Debido a que @container es relativamente nueva comparada con at-rules establecidas hace mucho tiempo como @media o @keyframes, el validador puede marcarla como no reconocida. Esto no significa que tu CSS sea inválido o esté roto — simplemente significa que el validador aún no se ha puesto al día con la especificación.

Por qué aparece esta advertencia

El validador del W3C verifica tu CSS contra reglas de gramática conocidas. Cuando encuentra una at-rule que no tiene en su diccionario interno, la reporta como no reconocida. Otras características CSS modernas como @layer y @property históricamente han disparado el mismo tipo de falso positivo antes de ser añadidas al analizador del validador.

Como esto es una limitación del validador y no un problema real del código, no hay una “corrección” requerida. Sin embargo, aún deberías asegurar que tu uso de @container sea sintácticamente correcto y que hayas configurado adecuadamente la contención en el elemento padre.

Cómo funcionan las consultas de contenedor

Para que @container funcione, un elemento padre debe ser designado como un contexto de contención usando la propiedad container-type (o el shorthand container). Sin esto, el navegador no sabrá contra qué ancestro consultar.

Ejemplos

Uso correcto de `@container`

El elemento padre necesita container-type establecido en inline-size o size para que sus descendientes puedan consultar contra él:

<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;
  }
}

En este ejemplo, .card-wrapper se establece como un contexto de contención. Cuando su inline size es de al menos 400px, el .card interior cambia a un layout flex. El validador puede marcar el bloque @container, pero este CSS es perfectamente válido y funciona en todos los navegadores modernos.

Usar `@container` sin un contenedor nombrado

Puedes omitir el nombre del contenedor, y la consulta coincidirá con el ancestro más cercano que tenga container-type establecido:

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

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

Error común: olvidar `container-type`

Si usas @container sin declarar un contexto de contención en un padre, la consulta nunca coincidirá y tus estilos no se aplicarán. Esto no causará un error del validador, pero es un bug lógico:

/* Falta container-type — la consulta @container no tiene nada contra lo que consultar */
.wrapper {
  max-width: 600px;
}

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

La corrección es añadir container-type al padre previsto:

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

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

Qué deberías hacer

Verifica tu sintaxis — asegúrate de estar usando container-type en un elemento padre y que tu consulta @container siga la gramática correcta.
Ignora la advertencia del validador — esta es una limitación conocida del validador CSS del W3C. Tu CSS es válido según la especificación.
Verifica el soporte de navegadores — @container es soportado en Chrome 105+, Edge 105+, Firefox 110+, y Safari 16+. Si necesitas soportar navegadores más antiguos, considera usar @container como una mejora progresiva junto con un layout de respaldo.