v145 · CSS · Name-Only Container Queries

Identity Inspector

Compare the old approach (forced container-type) with Chrome 148's name-only query. The new syntax applies styles based on a container's identity without any size containment side-effects.

Before Chrome 148 (old approach)

article

Container-typed card

Styled red because @container card matched (required a size condition).

/* Required to enable @container queries */
.card-wrapper {
  container-name: card;
  container-type: inline-size; /* ← mandatory */
}

@container card (min-width: 1px) {
  /* Had to add bogus condition just
     to make the query valid */
  .component h4 { color: red; }
}
⚠ container-type creates an independent formatting context. Floats don't escape, percentage heights behave differently, and positioned children are now relative to this box.

Chrome 148 (name-only)

article

Name-only card

Styled green because @container card-new matched — no type, no size condition.

/* Just a name — no container-type */
.card-wrapper {
  container-name: card-new;
  /* ← no container-type needed */
}

@container card-new {
  /* Clean: target the identity,
     apply any style */
  .component h4 { color: green; }
}
✓ No independent formatting context created. Layout behavior of the container element is unchanged.

The side-effect problem, visualised

Setting container-type: inline-size makes the element an independent formatting context. A floated child inside it cannot escape the container — which is often a layout surprise. Name-only containers don't create this context.

Old — with container-type: inline-size
The blue square floats left. Inside a container-type: inline-size wrapper, floats are confined — they cannot clear into the next sibling outside this box.
New — name-only, no type
Same markup, but the wrapper only has container-name. The float behaves exactly as if the container wrapper wasn't there. No layout surprises.

When to use each

Use name-only when you want to apply styles based on where a component lives — "if I'm inside a sidebar, shrink my font". No layout query, just identity.

Use container-type: inline-size (or block-size) when you need to query the container's dimensions — "if my container is narrower than 400px, stack vertically".

see also

scenario focus

Select a scenario to focus its rendered example and summary.