Practical Uses for Container Queries

Supporting demos for Stephanie Eckles' presentation at Web Directions: Hover 2022.

Demos

These demos use the container queries polyfill from Google ChromeLabs and will likely work in your selected browser.

Known upcoming syntax changs that may affect demo functionality:

• The spec has removed size as a requirement. However, the size designation is currently required for demos to work in Chrome Canary, which is presently the best supported browser without the polyfill.
• The spec intends for container relative units to have a prefix of "c" but that is not supported in Canary, so the fluid typography demo uses qi which may break when support is updated to cqi.

• Cards
• Fluid Typography
• Navigation
• Pagination
• Subscription form

Additional Resources

Some resources may include outdated syntax using the contain property to create containers.

• The spec for "CSS Containment Module Level 3" which defines container queries
• Polyfill from Google ChromeLabs
• My in-depth guide on Smashing Magazine
• My condensed guide
• Ahmad Shadeed offers more practical examples