Container Queries
A CSS feature that allows components to adjust their styles based on the dimensions of their containing element rather than the viewport width. This enables components to adapt automatically across different layout contexts, reinforcing the principle of content–style separation.
Timeline (last 90 days)
Native CSS alternatives include features already supported by modern CSS such as nesting, container queries, and :has(), so many scenarios that previously required framework assistance can now be implemented in pure CSS.
When no container is defined, the cqi unit falls back to the viewport size, so the same piece of code using cqi works in both the viewport and container scenarios.
container-type: inline-size makes an element a queryable container in the inline direction, allowing child elements to use units such as cqw and cqi; container-type: size establishes both inline and block-size containment, supporting block-level units such as cqh and cqb.
Container Queries became fully available in major browsers in 2023, centered on the @container rule together with the container-type property.
Container queries allow components to adjust internal styles based on the size of the parent container rather than the viewport size, improving the context-independent reusability of components.
Enabling container queries requires declaring container-type: inline-size (or simultaneously specifying container-name) on the parent element.
The container query inline unit cqi equals 1% of the container's inline dimension, referencing the nearest declared container when one is found, and falling back to the viewport otherwise.
When multiple elements are each declared as containers, the same font-size declaration will render different font sizes because each references its own container's dimensions.
If no container is explicitly declared, container query units fall back to referencing the viewport, producing exactly the same stretching-zone problem as using viewport units.
Re-declaring the registered length-type property --step-2 on direct children of the wrapper fixes the font-size calculation baseline to the wrapper's container dimensions, thereby ensuring consistent font sizes across containers.
All Facts (10)
Native CSS alternatives include features already supported by modern CSS such as nesting, container queries, and :has(), so many scenarios that previously required framework assistance can now be implemented in pure CSS.
50%UnverifiedWhen no container is defined, the cqi unit falls back to the viewport size, so the same piece of code using cqi works in both the viewport and container scenarios.
50%Unverifiedcontainer-type: inline-size makes an element a queryable container in the inline direction, allowing child elements to use units such as cqw and cqi; container-type: size establishes both inline and block-size containment, supporting block-level units such as cqh and cqb.
50%UnverifiedContainer Queries became fully available in major browsers in 2023, centered on the @container rule together with the container-type property.
50%UnverifiedContainer queries allow components to adjust internal styles based on the size of the parent container rather than the viewport size, improving the context-independent reusability of components.
50%UnverifiedEnabling container queries requires declaring container-type: inline-size (or simultaneously specifying container-name) on the parent element.
50%UnverifiedThe container query inline unit cqi equals 1% of the container's inline dimension, referencing the nearest declared container when one is found, and falling back to the viewport otherwise.
50%UnverifiedWhen multiple elements are each declared as containers, the same font-size declaration will render different font sizes because each references its own container's dimensions.
50%UnverifiedIf no container is explicitly declared, container query units fall back to referencing the viewport, producing exactly the same stretching-zone problem as using viewport units.
50%UnverifiedRe-declaring the registered length-type property --step-2 on direct children of the wrapper fixes the font-size calculation baseline to the wrapper's container dimensions, thereby ensuring consistent font sizes across containers.
50%