\n Mathias H\u00fclsbusch <\/a>\n <\/div>\n\n<\/article>\n <\/div>\n \n","protected":false},"excerpt":{"rendered":"Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec being championed by Miriam Suzanne of Oddbird, and a group of engineers across the web platform. @container brings us the ability to style elements based on the size of their parent container.<\/p>\n","protected":false},"author":250503,"featured_media":340395,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"\"Container queries will be the single biggest change in web styling since CSS3, altering our perspective of what \u201cresponsive design\u201d means.\" \u2014@una","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[510],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-11-at-7.38.01-AM.png?fit=3002%2C1376&ssl=1","jetpack-related-posts":[{"id":340967,"url":"https:\/\/css-tricks.com\/a-cornucopia-of-container-queries\/","url_meta":{"origin":339138,"position":0},"title":"A Cornucopia of Container Queries","date":"June 9, 2021","format":false,"excerpt":"I don't know about y'all, but my feeds have been flooded with articles about CSS Container Queries these past few weeks. The buzz about container queries actually started back in December after Miriam Suzanne posted a proposal (picking up on David Baron's proposal) but it was news in a late-March\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":340715,"url":"https:\/\/css-tricks.com\/can-we-create-a-resize-hack-with-container-queries\/","url_meta":{"origin":339138,"position":1},"title":"Can We Create a “Resize Hack” With Container Queries?","date":"May 20, 2021","format":false,"excerpt":"If you follow new developments in CSS, you\u2019ve likely heard of the impending arrival of container queries. We\u2019re going to look at the basics here, but if you\u2019d like another look, check out Una\u2019s \u201cNext Gen CSS: @container\u201d article. After we have a poke at the basics ourselves, we\u2019re going\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/peter-griffin-container-query.gif?fit=554%2C277&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374330,"url":"https:\/\/css-tricks.com\/early-days-of-container-style-queries\/","url_meta":{"origin":339138,"position":2},"title":"Early Days of Container Style Queries","date":"October 12, 2022","format":false,"excerpt":"We're still in suuuuuper early days with container queries. Too early for broad browser support, but Chromium already supports it, Safari started supporting it in version 16, and Firefox is presumably not far behind. Most early days conversations revolving around container queries usually compare the syntax to media queries. \/*\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/container-style-queries.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":338521,"url":"https:\/\/css-tricks.com\/say-hello-to-css-container-queries\/","url_meta":{"origin":339138,"position":3},"title":"Say Hello to CSS Container Queries","date":"April 20, 2021","format":false,"excerpt":"Container queries are finally here! Now available behind a flag in the latest version of Chrome Canary, you can go ahead and experiment to your heart\u2019s content. Oh, and if you\u2019re not familiar with container queries then check out this post by Ethan Marcotte about why they're so dang important.\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/container-queries.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":373087,"url":"https:\/\/css-tricks.com\/ishadeeds-container-queries-lab\/","url_meta":{"origin":339138,"position":4},"title":"iShadeed’s Container Queries Lab","date":"September 1, 2022","format":false,"excerpt":"Ahmad Shadeed got an early jump on container queries and has a growing collection of examples based on everyday patterns. And, if you missed it, his latest post on container queries does a wonderful job covering how they work since landing in Chrome 105 this month (we'll see them in\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/ishadeed-container-query-example-thumbs.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":360320,"url":"https:\/\/css-tricks.com\/a-new-container-query-polyfill-that-just-works\/","url_meta":{"origin":339138,"position":5},"title":"A New Container Query Polyfill That Just Works","date":"January 6, 2022","format":false,"excerpt":"There is an easy-to-use CSS container query polyfill now. You essentially conditionally load it and forget about it. Then write spec-compliant container queries code.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-01-at-7.02.53-AM.png?fit=759%2C480&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-11-at-7.38.01-AM.png?fit=1024%2C469&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/339138"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/250503"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=339138"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/339138\/revisions"}],"predecessor-version":[{"id":372985,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/339138\/revisions\/372985"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/340395"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=339138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=339138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=339138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}