The CSS container queries are said to be the future of responsive design. Container queries are in discussion for a while among some passionate web developers. These discussions seems to have got some traction recently after Google Chrome canary started testing those basic concepts.
According to the MDN Web Doc, “the container queries specification is to become part of
css containment, and add new values to the
contain property. The
contain property was initially designed to allow for performance optimizations. It provides a way for web developers to isolate parts of the DOM and declare to the browser these are independent from the rest of the document.”
Personally, I believe this is the biggest improvement to CSS since Grid. It opens up all sorts of elegant solutions to problems we work around on a daily basis. Chris Coyier in CSS-Tricks
There are great tutorials, deep-dive guide (see resources below) already to try out but I will planned to wait until these futures are more stable and become available in other browsers. During that time, I thought these resources book mark links come handy, hopefully!
The following is list of references link that I gathered during my brief research. While preparing this post, I have also referred some of the following references extensively. Please to refer original posts for more detailed information.
- A Primer On CSS Container Queries | Smashing magazine
- Container Queries: a Quick Start Guide | OddBird
- Component-level art direction with CSS Container Queries | Sara Soueidan
- Container Queries are actually coming by Andy Bell | Piccalil.li
- Say Hello To CSS Container Queries | Ahmad Shadeed
- Container Queries are actually coming | Piccali.li