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)
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.
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.
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.
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 (5)
Enabling 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%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%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%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%