What Else Could Container Queries... Query?

What Else Could Container Queries… Query?

Container Queries, initially shipped in 2022, have evolved from simply querying container size to encompassing scroll state and anchored positions, raising the question of their ultimate potential. While initially seen as an alternative to media queries, they offer unique capabilities for dynamic styling based on container characteristics.

Why This Matters

Current web development often relies on JavaScript to detect changes within containers and adjust styling, leading to performance overhead and potential jank. Container Queries aim to offload this logic to the browser’s rendering engine, reducing reliance on JavaScript and improving performance, but current implementations are limited in scope and can require verbose syntax for even basic use cases. The cost of not leveraging these native capabilities is increased JavaScript bundle sizes and decreased rendering performance.

Key Insights

• Container Queries shipped in 2022: Initial support focused on size queries, offering a new approach to responsive design.
• compute() function proposal: A proposed CSS function could allow access to computed values of any property, eliminating the need for container queries solely for unit access.
• Anchored container queries detect fallbacks: These queries enable detection of changes in element positioning, such as tooltips flipping due to space constraints.

Working Example

<parent> {
/* Gimme container query units! */
container-type: inline-size;
<child> {
width: 100cqi;
}
}

Practical Applications

• Tooltips: Dynamically adjust tooltip positioning based on available container space using anchored container queries.
• Complex Layouts: Detect flexbox wrapping or grid auto-wrapping to apply specific styles, avoiding brittle JavaScript workarounds.

References:

• https://css-tricks.com/what-else-could-container-queries-query/
• https://ishadeed.com/article/flex-wrap-detect/
• https://cssence.com/2020/prevent-orphan-in-flexbox/
• https://caniuse.com/container-queries