This is an experimental at-rule spec I learned about during this year’s Google I/O event. It boils down to a rule that is similar to the
@media at-rule - but instead of querying the viewport, it queries the elements parent container.
Una Kravets went over the new spec in “The new responsive: Web design in a component-driven world” talk. I find this rule very exciting and a potential game-changer for component-based UI going forward.
In the article and video that followed along with the talk, Una goes over some use-cases for the
@container at-rule, in the “Responsive to the container” section it has three use-cases for the new at-rule. The second one really blew my mind. I recommend watching the talk on YouTube and reading the article to get a better understanding of the experimental at-rule.
I strongly hope that this experimental at-rule gets approved and accepted as a browser standard. The possibilities this new at-rule gives to responsive design are tremendous. It has the potential to drastically change how we look at UI components going forward.
What are your thoughts on the new experimental at-rule? Let me know by starting a conversation down below.