HTML Guides for at-rule

The @container at-rule enables container queries, allowing you to apply styles to elements based on the size or inline-size of a parent container rather than the viewport. It was introduced as part of the CSS Containment Module Level 3 specification and has been supported in all major browsers (Chrome, Edge, Firefox, Safari) since early 2023.

The W3C CSS validator uses its own CSS parsing engine, which sometimes lags behind the latest CSS specifications. Because @container is relatively new compared to long-established at-rules like @media or @keyframes, the validator may flag it as unrecognized. This does not mean your CSS is invalid or broken — it simply means the validator hasn’t caught up with the spec yet.

Why This Warning Appears

The W3C validator checks your CSS against known grammar rules. When it encounters an at-rule it doesn’t have in its internal dictionary, it reports it as unrecognized. Other modern CSS features like @layer and @property have historically triggered the same kind of false positive before being added to the validator’s parser.

Since this is a validator limitation and not an actual code issue, there’s no required “fix.” However, you should still make sure your @container usage is syntactically correct and that you’ve properly set up containment on the parent element.

How Container Queries Work

For @container to function, a parent element must be designated as a containment context using the container-type property (or the container shorthand). Without this, the browser won’t know which ancestor to query against.

Examples

Correct usage of @container

The parent element needs container-type set to inline-size or size so its descendants can query against it:

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

In this example, .card-wrapper is established as a containment context. When its inline size is at least 400px, the .card inside switches to a flex layout. The validator may flag the @container block, but this CSS is perfectly valid and works in all modern browsers.

Using @container without a named container

You can omit the container name, and the query will match the nearest ancestor with a container-type set:

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

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

Common mistake: forgetting container-type

If you use @container without declaring a containment context on a parent, the query will never match and your styles won’t apply. This won’t cause a validator error, but it’s a logical bug:

/* Missing container-type — the @container query has nothing to query against */
.wrapper {
  max-width: 600px;
}

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

The fix is to add container-type to the intended parent:

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

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

What You Should Do

1. Verify your syntax — make sure you’re using container-type on a parent element and that your @container query follows the correct grammar.
2. Ignore the validator warning — this is a known limitation of the W3C CSS validator. Your CSS is valid per the specification.
3. Check browser support — @container is supported in Chrome 105+, Edge 105+, Firefox 110+, and Safari 16+. If you need to support older browsers, consider using @container as a progressive enhancement alongside a fallback layout.