Experiment with CSS container queries by resizing containers and seeing responsive style changes.
This playground exposes CSS size container-query behavior by letting you resize a query container and watch descendant styles cross declared breakpoints. It helps test a component independently of the page viewport. The common surprise is that @container does not inspect the browser window: a size query needs an eligible ancestor, usually established with container-type: inline-size, and evaluates that container's dimensions.
A concrete input and expected output from the current implementation.
Input
Container width: 420px
HTML:
<div class="panel"><p class="message">Ready</p></div>
CSS:
.panel { container-type: inline-size; }
.message { color: black; }
@container (min-width: 400px) {
.message { color: blue; }
} Expected output
The preview shows "Ready" in blue. If the same container is resized to 399px, the text appears in black.
The 420px inline size satisfies min-width: 400px, so the conditional declaration overrides black with blue. At 399px the condition is false, leaving the baseline declaration in force.
Mark the component wrapper as a size query container with container-type. Rules inside @container are considered only for descendants of a matching eligible ancestor. As the playground changes the wrapper's inline size, the browser reevaluates conditions such as (min-width: 400px); declarations in matching blocks then participate in the cascade like other conditional CSS.
container-type: inline-size makes the element eligible for width-like queries in its logical inline axis. container-type: size permits both inline- and block-axis size queries, but its sizing effects can change layout. A container name can direct a query to a particular ancestor; without one, selection uses the nearest ancestor eligible for every feature in the condition.
The query responds to the selected container, not automatically to the viewport. Confirm that an ancestor of the styled element has container-type and that its inline size changes as the preview is resized. If that ancestor remains fixed, the query result remains fixed. Use @media when the condition genuinely belongs to the viewport.
Yes, but not with an inline-size container for block-axis features. Use a size query container when the component truly needs both dimensions, and give it a layout context in which its size can be resolved. Height-based component breakpoints are often harder to reason about because content and containment can affect sizing.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.