Container Style Queries Playground

@container style() is a CSS container query feature that allows you to conditionally apply styles based on the computed style values of a container element — most commonly CSS custom properties (variables). Unlike @container size() which responds to dimensions, style queries check things like --theme: dark or --variant: primary, enabling truly context-aware components.

Size queries (@container (min-width: 400px)) respond to the container's dimensions. Style queries (@container style(--theme: dark)) respond to CSS property values on the container. This means a single component can adapt to its context without knowing about viewport sizes — perfect for design systems where the same card component needs to look different inside a dark sidebar vs a light main content area.

As of 2024, Chrome 111+, Edge 111+, and Opera 97+ support @container style(). Firefox and Safari are actively working on implementation. You can use @supports (container-type: inline-size) as a progressive enhancement fallback. For non-supporting browsers, provide base styles that work without the query.

1. Theming: Components adapt to --theme: dark|light on any ancestor.
2. Design variants: Buttons/cards respond to --variant: primary|secondary|danger.
3. Layout density: Lists adjust spacing based on --density: compact|comfortable|spacious.
4. Multi-tenant UIs: Same component renders differently per client branding via custom properties.
5. Dark mode sections: A light-themed page can have a dark sidebar with properly styled children.

No — container-name is optional. Without it, @container style(--x: 1) matches the nearest ancestor with a container-type. Using a named container like @container my-container style(--x: 1) lets you target a specific ancestor, which is useful when multiple containers are nested.

Yes! Use and / or logic:
@container style(--theme: dark) and style(--variant: primary) { ... }
@container style(--density: compact) or style(--density: comfortable) { ... }
You can also use not: @container not style(--theme: dark) { ... }