Chrome is experimenting with The Bugs:<\/strong> Chrome<\/a> | Firefox<\/a> | Safari<\/a><\/p>\n<\/div><\/div>\n\n\n\n You can think of these like a media query ( No longer will the viewport and user agent be the only targets we have to create responsive layout and UI styles. With container queries, elements will be able to target their own parents and apply their own styles accordingly. This means that the same element that lives in the sidebar, body, or hero could look completely different based on its available size and dynamics.<\/p>\n\n\n@container<\/code>, a property within the CSS Working Group Containment Level 3 spec<\/a> being championed by Miriam Suzanne<\/a> of Oddbird<\/a>, and a group of engineers across the web platform. @container<\/code> brings us the ability to style elements based on the size of their parent container<\/strong>.<\/p>\n\n\n\n\n\n\n\n@container<\/code> API is not stable, and is subject to syntax changes. If you try it out on your own, you may encounter a few bugs. Please report those bugs to the appropriate browser engine!<\/p>\n\n\n\n@media<\/code>), but instead of relying on the viewport<\/strong> to adjust styles, the parent container of the element you\u2019re targeting can adjust those styles.<\/p>\n\n\nContainer queries will be the single biggest change in web styling since CSS3, altering our perspective of what \u201cresponsive design\u201d means.<\/h3>\n\n\n
@container<\/code> in action<\/h3>\n\n\n