BACK_TO_FEEDAICRIER_2
WebKit adds name-only @container scoping
OPEN_SOURCE ↗
YT · YOUTUBE// 2h agoPRODUCT UPDATE

WebKit adds name-only @container scoping

WebKit shipped name-only `@container` queries in Safari 26.4, letting authors write `@container sidebar` without a size condition. The result is cleaner component scoping in CSS, with less classname noise and no extra specificity.

// ANALYSIS

This is a small syntax change with outsized ergonomics: container queries stop looking like breakpoint math and start behaving like a native scoping primitive.

  • It removes the awkward “always-true” size check pattern, so named containers read more like intent than workaround
  • Compared with BEM, nesting, or CSS modules, this keeps component boundaries explicit without inflating specificity
  • The feature is still Safari-only, so teams will need progressive enhancement or fallback rules for Chrome and Firefox
  • For design systems, this is especially useful when the file name or component name should map directly to style scope
  • MDN still frames named containers around size queries, so this update is a meaningful simplification on top of an existing concept
// TAGS
apidevtoolcsswebkitsafariname-only-container-queries

DISCOVERED

2h ago

2026-04-29

PUBLISHED

2h ago

2026-04-29

RELEVANCE

5/ 10

AUTHOR

Syntax