{"id":296609,"date":"2019-10-09T06:56:13","date_gmt":"2019-10-09T13:56:13","guid":{"rendered":"https:\/\/css-tricks.com\/?p=296609"},"modified":"2019-10-09T06:56:13","modified_gmt":"2019-10-09T13:56:13","slug":"lets-not-forget-about-container-queries","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/lets-not-forget-about-container-queries\/","title":{"rendered":"Let’s Not Forget About Container Queries"},"content":{"rendered":"
Container queries are always on the top of the list of requested improvements to CSS. The general sentiment is that if we had container queries, we wouldn’t write as many global media queries based on page size. That’s because we’re actually<\/em> trying to control a more scoped container, and the only reason we use media queries for that now is because it’s the best tool we have in CSS. I absolutely believe that. <\/p>\n <\/p>\n There is another sentiment that goes around once in a while that goes something like: “you developers think you need container queries but you really don’t.” I am not a fan of that. It seems terribly obvious that we would do good things with them if they were available, not the least of which is writing cleaner, portable, understandable code. Everyone seems to agree that building UIs from components is the way to go these days which makes the need for container queries all the more obvious.<\/p>\n It’s wonderful that there are modern JavaScript ideas that help us do use them today — but that doesn’t mean the technology needs to stay there. It makes way more sense in CSS.<\/p>\n Here’s my late 2019 thought dump on the subject:<\/p>\n Container queries are always on the top of the list of requested improvements to CSS. The general sentiment is that […]<\/p>\n","protected":false},"author":3,"featured_media":296824,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[510,685],"class_list":["post-296609","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-container-queries","tag-media-queries"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/matryoshka-dolls.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":267579,"url":"https:\/\/css-tricks.com\/responsive-components-solution-container-queries-problem\/","url_meta":{"origin":296609,"position":0},"title":"Responsive Components: a Solution to the Container Queries Problem","author":"Chris Coyier","date":"February 28, 2018","format":false,"excerpt":"Container Queries, as in, the ability to style elements based on values from a particular element, like its width and height. We have media queries, but those are based on the viewport not individual elements. There are plenty of use cases for them. It's been said before, but I'll say\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":253471,"url":"https:\/\/css-tricks.com\/container-query-discussion\/","url_meta":{"origin":296609,"position":1},"title":"Container Query Discussion","author":"Chris Coyier","date":"April 6, 2017","format":false,"excerpt":"Right now, we have the power to write CSS that only applies when the browser window itself is at certain widths or heights. Breakpoints, as it were. Super useful. What we don't have (natively) is the ability to write conditional CSS based on any particular elements (or \"containers\") properties. It's\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":204448,"url":"https:\/\/css-tricks.com\/container-queries-once-more-unto-the-breach\/","url_meta":{"origin":296609,"position":2},"title":"Container Queries: Once More Unto the Breach","author":"Chris Coyier","date":"July 1, 2015","format":false,"excerpt":"I guess the plan is to stop with the \"element queries\" and start thinking and referring to them as \"container queries\". We've been following this saga for a while. Element queries have a serious pitfall: infinite loops. .our-element:media(min-width: 500px) { width: 499px; } As Responsive Issues Community Group member Mat\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":340967,"url":"https:\/\/css-tricks.com\/a-cornucopia-of-container-queries\/","url_meta":{"origin":296609,"position":3},"title":"A Cornucopia of Container Queries","author":"Geoff Graham","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 "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"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,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":252155,"url":"https:\/\/css-tricks.com\/some-thursday-reads\/","url_meta":{"origin":296609,"position":4},"title":"Some Thursday Reads","author":"Chris Coyier","date":"March 2, 2017","format":false,"excerpt":"Bel\u00e9n Albeza, \"You might not need a CSS framework\": Regardless of the reasons for using a framework, frameworks might introduce technical debt in your project. Jen Simmons, \"The benefits of learning how to code layouts with CSS\": The more I use CSS Grid, the more convinced I am that there\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":373087,"url":"https:\/\/css-tricks.com\/ishadeeds-container-queries-lab\/","url_meta":{"origin":296609,"position":5},"title":"iShadeed’s Container Queries Lab","author":"Geoff Graham","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 "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"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,"srcset":"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 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/ishadeed-container-query-example-thumbs.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/ishadeed-container-query-example-thumbs.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/ishadeed-container-query-example-thumbs.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/296609","targetHints":{"allow":["GET"]}}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=296609"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/296609\/revisions"}],"predecessor-version":[{"id":296825,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/296609\/revisions\/296825"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/296824"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=296609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=296609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=296609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
ResizeObserver<\/code> as one way to solve the issue today. It performs great and works anywhere. The demo site<\/a> is the best one out there because it highlights the need for responsive components (although there are other documented use cases<\/a> as well). Philip even says a pure CSS solution would be more ideal. <\/li>\n.container:media(max-width: 400px) { }<\/code>. I like that, too. Single-colon selectors (pseduo selectors) are philosophically “select the element under these conditions” — like :hover<\/code>, :nth-child<\/code>, etc. — so a media scope makes sense.<\/li>\n