{"id":327,"date":"2025-03-21T15:21:10","date_gmt":"2025-03-21T15:21:10","guid":{"rendered":"https:\/\/devikanair2805.uk\/journal\/?p=327"},"modified":"2025-03-21T17:00:34","modified_gmt":"2025-03-21T17:00:34","slug":"what-are-container-queries","status":"publish","type":"post","link":"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/","title":{"rendered":"What are Container Queries?"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong>Introduction<\/strong><\/h3>\n\n\n\n<p>Responsive web design has been a cornerstone of modern web development since Ethan Marcotte introduced the concept in 2010. For over a decade, we&#8217;ve relied on viewport-based media queries as the standard approach, often implementing a mobile-first methodology. However, as web applications have grown increasingly complex with component-based architectures, the limitations of traditional media queries have become more apparent.<\/p>\n\n\n\n<p>This article explores container queries &#8211; a new feature in CSS that&#8217;s transforming how we approach responsive design.<\/p>\n\n\n\n<div style=\"height:4px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>The Evolution of Responsive Design<\/strong><\/h3>\n\n\n\n<p>Responsive web design has evolved significantly since its inception. Traditionally, web design has relied on:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A viewport-based approach using media queries<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list is-style-default\">\n<li>Mobile-first methodology<\/li>\n<\/ul>\n\n\n\n<p>This methodology has served us well for over a decade, allowing websites to adapt to different screen sizes and devices. However, as web applications have grown more complex, with increasingly modular designs and component-based architectures, the limitations of media queries have become increasingly apparent.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/28627350_7475498-1024x683.jpg\" alt=\"\" class=\"wp-image-330\" style=\"width:543px;height:auto\" srcset=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/28627350_7475498-1024x683.jpg 1024w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/28627350_7475498-300x200.jpg 300w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/28627350_7475498-768x512.jpg 768w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/28627350_7475498-1536x1024.jpg 1536w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/28627350_7475498-2048x1365.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:4px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>The Limitations of Traditional Media Queries<\/strong><\/h3>\n\n\n\n<p>Many aspects of media queries are composed using global breakpoints that target the viewport, abstracting how a component is used in context by applying the same styling rules regardless of location. Although this works effectively for layout changes across a whole page, it isn&#8217;t ideal when you have specific requirements for individual components.<\/p>\n\n\n\n<p>Media queries operate at the viewport level, meaning they respond to the size of the browser window rather than the context in which a component is placed. This creates several challenges:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&#8211; Global Breakpoints vs. Local Components<\/h4>\n\n\n\n<p>Media queries enforce global breakpoints across the entire page. This means that when a breakpoint is triggered, it affects all components on the page, regardless of their individual context or requirements. The rigidity of global breakpoints can impede the creation of entirely reusable and modular components (Marcotte, 2010).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&#8211; Inflexibility in Complex Layouts<\/h4>\n\n\n\n<p>In modern web applications, components often need to adapt based on their immediate container, not just the viewport. For example, a card component might appear in the main content area, a sidebar, or a modal window\u2014each with different available space.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&#8211; Consistency Across Container Sizes<\/h4>\n\n\n\n<p>Maintaining consistent component behavior across different container sizes becomes challenging when relying solely on viewport-based media queries. A component that works well in a full-width layout might break or appear awkward when placed in a narrower container.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/modern-responsive-design-viewport-1024x576.png\" alt=\"\" class=\"wp-image-331\" style=\"width:560px;height:auto\" srcset=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/modern-responsive-design-viewport-1024x576.png 1024w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/modern-responsive-design-viewport-300x169.png 300w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/modern-responsive-design-viewport-768x432.png 768w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/modern-responsive-design-viewport-1536x864.png 1536w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/modern-responsive-design-viewport.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image Source: <a href=\"https:\/\/ishadeed.com\/article\/responsive-design\/\">https:\/\/ishadeed.com\/article\/responsive-design\/<\/a><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:4px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What are Container Queries?<\/strong><\/h3>\n\n\n\n<p>With container queries, you change the paradigm from the viewport to the immediate parent container size. In practical terms, this means a component can modify its styles (including font size, padding, or layout) depending on how large or small the container in which it lives.<\/p>\n\n\n\n<p>Container queries provide the advantage of managing design more granularly because each component becomes reactive to its context rather than following a global one-size-fits-all rule. They are essentially like media queries, but scoped to occur for specific components. This technique makes component reuse more intuitive because a component&#8217;s design can adapt differently, irrespective of where it is placed on the page (CSS-Tricks, 2023), enhancing modularity.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&#8211; Definition<\/h4>\n\n\n\n<p>Container queries allow you to apply styles to elements based on the size of their containing element, not just the viewport size. This means components can adapt to their immediate context, regardless of where they&#8217;re placed in the layout.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&#8211; Concept<\/h4>\n\n\n\n<p>The core idea behind container queries is that content styles should be able to adapt to their container&#8217;s dimensions. This creates a more modular and reusable approach to responsive design, where components can be truly self-contained.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&#8211; Analogy<\/h4>\n\n\n\n<p>The closest analogy is to media queries, but with a scope limited to a specific component rather than the entire viewport. This allows for more granular control over how components respond to their environment.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"923\" src=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/modern-responsive-design-container-1024x923.png\" alt=\"\" class=\"wp-image-332\" style=\"width:565px;height:auto\" srcset=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/modern-responsive-design-container-1024x923.png 1024w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/modern-responsive-design-container-300x270.png 300w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/modern-responsive-design-container-768x692.png 768w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/modern-responsive-design-container-1536x1384.png 1536w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/modern-responsive-design-container.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image Source: <a href=\"https:\/\/ishadeed.com\/article\/responsive-design\/\">https:\/\/ishadeed.com\/article\/responsive-design\/<\/a><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:4px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Comparing Container Queries and Media Queries<\/strong><\/h3>\n\n\n\n<p>The main difference between both types of queries is their influence&#8217;s scope.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Feature<\/strong><\/td><td><strong>Media Queries<\/strong><\/td><td><strong>Container Queries<\/strong><\/td><\/tr><tr><td>1) Scope<\/td><td>Entire viewport<\/td><td>Individual container<\/td><\/tr><tr><td>2) Flexibility<\/td><td>Static breakpoints<\/td><td>Dynamic adaptation<\/td><\/tr><tr><td>3) Use Case<\/td><td>Layout-wide adjustments<\/td><td>Component-level adjustments<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>The style changes triggered by the media queries are based on the size of the whole viewport, so they change the entire page&#8217;s layout. This solution might be useful for global changes but cannot support unique demands in isolated parts. Secondly, container queries evaluate the dimensions of a given parent container and enable writers to fit styles to a component. This localised method provides significant benefits in design flexibility and component reusability. Other than that, media queries establish wide rules that are authentic on a site, but container queries allow the developers to compose parts that reform according to their immediate surroundings, resulting in a more delicate and aware design solution (W3C, 2022).<\/p>\n\n\n\n<div style=\"height:4px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Code Comparison<\/strong> <\/h3>\n\n\n\n<p>Container queries use a similar syntax to media queries, with <code><strong>@media<\/strong><\/code> for media queries and <code><strong>@container<\/strong><\/code> for container queries. However, the way container queries are implemented and the scope of the effect is fundamentally different.<\/p>\n\n\n\n<div style=\"height:4px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How it works?<\/strong><\/h3>\n\n\n\n<p>Here is the HTML code<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"939\" height=\"565\" src=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/html.png\" alt=\"\" class=\"wp-image-336\" style=\"width:440px;height:auto\" srcset=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/html.png 939w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/html-300x181.png 300w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/html-768x462.png 768w\" sizes=\"auto, (max-width: 939px) 100vw, 939px\" \/><figcaption class=\"wp-element-caption\"><em>Image Source: Self-created<\/em><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">1. Define a Container<\/h4>\n\n\n\n<p>First, you need to define a container by using the <code><strong>container-type<\/strong><\/code> property on the parent element. <\/p>\n\n\n\n<p><strong>.container {<br>container-type: value;<br>}<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"719\" height=\"224\" src=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css1.png\" alt=\"\" class=\"wp-image-338\" style=\"width:446px;height:auto\" srcset=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css1.png 719w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css1-300x93.png 300w\" sizes=\"auto, (max-width: 719px) 100vw, 719px\" \/><figcaption class=\"wp-element-caption\"><em>Image Source: Self-created<\/em><\/figcaption><\/figure>\n\n\n\n<p>In CSS code the value is inline-size.<\/p>\n\n\n\n<p>And the <code><strong>container-type<\/strong><\/code> property can have different values:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"542\" height=\"501\" src=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css2.png\" alt=\"\" class=\"wp-image-339\" style=\"width:455px;height:auto\" srcset=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css2.png 542w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css2-300x277.png 300w\" sizes=\"auto, (max-width: 542px) 100vw, 542px\" \/><figcaption class=\"wp-element-caption\"><em>Image Source: <\/em><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/container-type\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/container-type<\/a><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">2. Write Your Query<\/h4>\n\n\n\n<p>Next, you write your query using the <code><strong>@container<\/strong><\/code> rule with size conditions like <code><strong>min-width<\/strong><\/code> or <code><strong>max-width<\/strong><\/code>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"797\" height=\"165\" src=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css3-1.png\" alt=\"\" class=\"wp-image-342\" style=\"width:459px;height:auto\" srcset=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css3-1.png 797w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css3-1-300x62.png 300w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css3-1-768x159.png 768w\" sizes=\"auto, (max-width: 797px) 100vw, 797px\" \/><figcaption class=\"wp-element-caption\"><em>Image Source: Self-created<\/em><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">3. Style Elements Within the Container<\/h4>\n\n\n\n<p>Finally, you can style elements within the container based on its size.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"977\" height=\"587\" src=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css4.png\" alt=\"\" class=\"wp-image-341\" style=\"width:471px;height:auto\" srcset=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css4.png 977w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css4-300x180.png 300w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css4-768x461.png 768w\" sizes=\"auto, (max-width: 977px) 100vw, 977px\" \/><figcaption class=\"wp-element-caption\"><em>Image Source: Self-created<\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Naming Containers<\/strong><\/h3>\n\n\n\n<p>If you have multiple containers and need to target a specific one, the <code><strong>container-name<\/strong><\/code> property can be used.<\/p>\n\n\n\n<p><strong>.container {<br>container-name: <strong><em>give a name to the container;<\/em><\/strong><br>}<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"819\" height=\"611\" src=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css5.png\" alt=\"\" class=\"wp-image-343\" style=\"width:474px;height:auto\" srcset=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css5.png 819w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css5-300x224.png 300w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css5-768x573.png 768w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/><figcaption class=\"wp-element-caption\"><em>Image Source: Self-created<\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:4px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Shorthand Syntax<\/strong><\/h3>\n\n\n\n<p>There&#8217;s also a shorthand container syntax where you combine <code><strong>container-name<\/strong><\/code> and <code><strong>container-type<\/strong><\/code> in one line using the <code><strong>container<\/strong><\/code> property<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"769\" height=\"586\" src=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css6.png\" alt=\"\" class=\"wp-image-344\" style=\"width:473px;height:auto\" srcset=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css6.png 769w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/css6-300x229.png 300w\" sizes=\"auto, (max-width: 769px) 100vw, 769px\" \/><figcaption class=\"wp-element-caption\"><em>Image Source: Self-created<\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:4px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Practical Use Cases<\/strong> <\/h3>\n\n\n\n<p>Credit: @shadeed on Codepen<\/p>\n\n\n\n<p><strong>Newsletter &#8211; CQ<\/strong>: <a href=\"https:\/\/codepen.io\/shadeed\/pen\/poRLxvO?editors=0100\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#2966e7\" class=\"has-inline-color\">https:\/\/codepen.io\/shadeed\/pen\/poRLxvO?editors=0100<\/mark><\/a><\/p>\n\n\n\n<p><strong>Pagination &#8211; CQ<\/strong>: <a href=\"https:\/\/codepen.io\/shadeed\/pen\/VwPQORy?editors=0100\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#2966e7\" class=\"has-inline-color\">https:\/\/codepen.io\/shadeed\/pen\/VwPQORy?editors=0100<\/mark><\/a><\/p>\n\n\n\n<p><strong>Profile Card &#8211; CQ<\/strong>: <a href=\"https:\/\/codepen.io\/shadeed\/pen\/NWdYaGY?editors=0100\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#2966e7\" class=\"has-inline-color\">https:\/\/codepen.io\/shadeed\/pen\/NWdYaGY?editors=0100<\/mark><\/a><\/p>\n\n\n\n<p>Few more great examples <a href=\"https:\/\/lab.ishadeed.com\/container-queries\/\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#2966e7\" class=\"has-inline-color\">here<\/mark><\/a> by Ahmad Shadeed, which showcase how container queries enhance component responsiveness. <\/p>\n\n\n\n<div style=\"height:4px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Container Query Length Units<\/strong><\/h3>\n\n\n\n<p>Container queries also have a new set of units called container query length units. These work similarly to viewport units like <code><strong>vw<\/strong><\/code> and <strong><code>vh<\/code><\/strong>, but they&#8217;re relative to the container dimensions instead of the viewport. And there are six units and these units are used for creating a fluid typography and other size-relative styles within containers.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Units<\/strong><\/td><td><strong>Meaning<\/strong><\/td><td><strong>Example<\/strong><\/td><\/tr><tr><td>cqw<\/td><td>1% of the container&#8217;s width<\/td><td><code><strong>width: 50cqw<\/strong>;<\/code> (50% of the container&#8217;s width)<\/td><\/tr><tr><td>cqh<\/td><td>1% of the container&#8217;s height<\/td><td><code><strong>height: 20cqh<\/strong>;<\/code> (20% of the container&#8217;s height)<\/td><\/tr><tr><td>cqi<\/td><td>1% of the container&#8217;s inline-size<\/td><td><code><strong>font-size: 5cqi<\/strong>;<\/code> (Font size scales with container width)<\/td><\/tr><tr><td>cqb<\/td><td>1% of the container&#8217;s block size<\/td><td><code><strong>padding: 3cqb<\/strong>;<\/code> (Padding scales with container height)<\/td><\/tr><tr><td>cqmin<\/td><td>The smaller of cqi or cqb<\/td><td><code><strong>border-radius: 10cqmin<\/strong>;<\/code> (Scales with the smaller dimension)<\/td><\/tr><tr><td>cqmax<\/td><td>The larger of cqi or cqb<\/td><td><code><strong>border-radius: 10cqmax<\/strong>;<\/code> (Scales with the larger dimension)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:4px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Benefits of Container Queries<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">&#8211; Enhanced Modularity:<\/h4>\n\n\n\n<p>Elements implementing container queries will adapt to the size of their container. This implies that a single component can be iterated for various situations without extra style overrides or new media query rules. Modular improvement simplifies upkeep and makes development operation workflows more conservative.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&#8211; Improved Control:<\/h4>\n\n\n\n<p>With container queries, the designer is given more control over individual elements. Developers don\u2019t have to depend on broad breakpoints that result in all components responding in the same way to bigger containers; they can program behaviour that happens with particular container dimensions. However, it leads to more predictable and consistent component behaviour across different contexts and improved control.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&#8211; Cleaner Code:<\/h4>\n\n\n\n<p>That is one reason why container queries are cleaner and more maintainable CSS. This reduces using several global media queries for a more organized code base. Less overlapping styles? Well, that makes the job of debugging and future modifications easier. Hence, the design systems become more scalable (CSS Tricks, 2023).<\/p>\n\n\n\n<div style=\"height:4px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Practical Implementation Tips<\/strong><\/h3>\n\n\n\n<p>I didn\u2019t cover these points during the presentation, but here are some practical implementation tips.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&#8211; Test in Controlled Environments:<\/h4>\n\n\n\n<p>Start with isolated or non-critical sections of your project and implement container queries there. With this, you can assess their behaviour without harming the users&#8217; overall experience.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&#8211; Use Polyfills:<\/h4>\n\n\n\n<p>Container queries, however, can have a polyfill available for browsers that do not yet support them. This lets you guarantee that your work will break down gently and keep operating in all user surroundings.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&#8211; Integrate with Existing CSS Methodologies:<\/h4>\n\n\n\n<p>Consider how container queries mix with your present CSS structure, such as BEM (Block Component Modifier) and CSS-in-JS. This integration is a better habit as it improves consistency in your current codebase.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&#8211; Monitor Browser Updates:<\/h4>\n\n\n\n<p>Pay attention to what browser support has been evolving into and how the community thinks an application should be built. Keeping an eye out for updates in MDN Web Docs and W3C will ensure you can regularly assess your implementation strategy based on the technology\u2019s maturity.<\/p>\n\n\n\n<div style=\"height:4px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Browser Support<\/strong> <\/h3>\n\n\n\n<p>According to the CanIUse.com website, most of the modern browsers support CSS container queries. For more details you can check <a href=\"https:\/\/caniuse.com\/css-container-queries\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#2966e7\" class=\"has-inline-color\">here<\/mark><\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/browser_support-1024x538.png\" alt=\"\" class=\"wp-image-353\" style=\"width:494px;height:auto\" srcset=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/browser_support-1024x538.png 1024w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/browser_support-300x158.png 300w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/browser_support-768x403.png 768w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/browser_support-1536x806.png 1536w, https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/browser_support.png 1636w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image Source: <a href=\"https:\/\/caniuse.com\/css-container-queries\">https:\/\/caniuse.com\/css-container-queries<\/a><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:4px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>The Future of Responsive Design<\/strong><\/h3>\n\n\n\n<p>Container queries will open the door for many component-based approaches to become more prevalent. I suspect container queries will eventually become standard in the responsive design toolbox as the support grows in browsers and the standards fully mature. This evolution of the web is a promise of the web that is, by default, more adaptable, more intuitive, and more scalable. As each component adjusts to its own context, container queries encourage a more organic and efficient design and certainly align with the growing complexity of today\u2019s web applications (Marcotte, 2010).<\/p>\n\n\n\n<div style=\"height:4px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h3>\n\n\n\n<p>Container queries represent a significant evolution in responsive web design, shifting our focus from viewport-based to component-based responsiveness. With container queries, individual components can adapt their layout based on the size of their container, enabling truly modular components that can function beautifully in any context.<\/p>\n\n\n\n<p>Although there are still some challenges related to browser support and potential performance considerations, the benefits are substantial: increased modularity, enhanced control over design elements, and cleaner, more maintainable code. As technology advances, container queries will likely become an integral part of designing flexible, component-based web interfaces.<\/p>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary><strong>Slides Presentation<\/strong><\/summary>\n<p><a href=\"https:\/\/www.canva.com\/design\/DAGhyz1sP-U\/DWYYvDloWDP09tzwBW9vQQ\/edit\">Seminar on what are container queries.<\/a><\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary><strong>References<\/strong><\/summary>\n<p>CSS-Tricks, 2023. <em>An Introduction to Container Queries<\/em>. [online] Available at: <a href=\"https:\/\/css-tricks.com\/an-introduction-to-container-queries\/\">https:\/\/css-tricks.com\/an-introduction-to-container-queries\/<\/a> [Accessed 20 March 2025].<\/p>\n\n\n\n<p>Marcotte, E., 2010. <em>Responsive Web Design<\/em>. [online] A List Apart. Available at: <a href=\"https:\/\/alistapart.com\/article\/responsive-web-design\/\">https:\/\/alistapart.com\/article\/responsive-web-design\/<\/a> [Accessed 20 March 2025].<\/p>\n\n\n\n<p>MDN Web Docs, 2023. <em>Using Media Queries<\/em>. [online] Mozilla Developer Network. Available at: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries<\/a> [Accessed 20 March 2025].<\/p>\n\n\n\n<p>W3C, 2022. <em>CSS Containment Module Level 3<\/em>. [online] World Wide Web Consortium. Available at: <a href=\"https:\/\/www.w3.org\/TR\/css-contain-3\/\">https:\/\/www.w3.org\/TR\/css-contain-3\/<\/a> [Accessed 20 March 2025].<\/p>\n<\/details>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Responsive web design has been a cornerstone of modern web development since Ethan Marcotte introduced the concept in 2010. For over a decade, we&#8217;ve relied on viewport-based media queries as the standard approach, often implementing a mobile-first methodology. However, as web applications have grown increasingly complex with component-based architectures, the limitations of traditional media [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,27],"tags":[40,42,31,41],"class_list":["post-327","post","type-post","status-publish","format-standard","hentry","category-content-management","category-coursework","tag-containerqueries","tag-mediaqueries","tag-responsivedesign","tag-webdevelopment"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What are Container Queries? - Devu&#039;s Journal<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What are Container Queries? - Devu&#039;s Journal\" \/>\n<meta property=\"og:description\" content=\"Introduction Responsive web design has been a cornerstone of modern web development since Ethan Marcotte introduced the concept in 2010. For over a decade, we&#8217;ve relied on viewport-based media queries as the standard approach, often implementing a mobile-first methodology. However, as web applications have grown increasingly complex with component-based architectures, the limitations of traditional media [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/\" \/>\n<meta property=\"og:site_name\" content=\"Devu&#039;s Journal\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-21T15:21:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-21T17:00:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/28627350_7475498-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Devika Nair\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Devika Nair\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/\",\"url\":\"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/\",\"name\":\"What are Container Queries? - Devu&#039;s Journal\",\"isPartOf\":{\"@id\":\"https:\/\/devikanair2805.uk\/journal\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/28627350_7475498-1024x683.jpg\",\"datePublished\":\"2025-03-21T15:21:10+00:00\",\"dateModified\":\"2025-03-21T17:00:34+00:00\",\"author\":{\"@id\":\"https:\/\/devikanair2805.uk\/journal\/#\/schema\/person\/c100060edd5b4f7c70c77d6fd774d5ed\"},\"breadcrumb\":{\"@id\":\"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/#primaryimage\",\"url\":\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/28627350_7475498-scaled.jpg\",\"contentUrl\":\"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/28627350_7475498-scaled.jpg\",\"width\":2560,\"height\":1707},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devikanair2805.uk\/journal\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What are Container Queries?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devikanair2805.uk\/journal\/#website\",\"url\":\"https:\/\/devikanair2805.uk\/journal\/\",\"name\":\"Devu&#039;s Journal\",\"description\":\"Creative Web Development\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devikanair2805.uk\/journal\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/devikanair2805.uk\/journal\/#\/schema\/person\/c100060edd5b4f7c70c77d6fd774d5ed\",\"name\":\"Devika Nair\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devikanair2805.uk\/journal\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9bb2599720fe9b92b75acb24ea6baf4e5264c6772cab60b706e4603fc3e7fa55?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9bb2599720fe9b92b75acb24ea6baf4e5264c6772cab60b706e4603fc3e7fa55?s=96&d=mm&r=g\",\"caption\":\"Devika Nair\"},\"sameAs\":[\"https:\/\/devikanair2805.uk\/journal\"],\"url\":\"https:\/\/devikanair2805.uk\/journal\/author\/devika-nair\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What are Container Queries? - Devu&#039;s Journal","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/","og_locale":"en_US","og_type":"article","og_title":"What are Container Queries? - Devu&#039;s Journal","og_description":"Introduction Responsive web design has been a cornerstone of modern web development since Ethan Marcotte introduced the concept in 2010. For over a decade, we&#8217;ve relied on viewport-based media queries as the standard approach, often implementing a mobile-first methodology. However, as web applications have grown increasingly complex with component-based architectures, the limitations of traditional media [&hellip;]","og_url":"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/","og_site_name":"Devu&#039;s Journal","article_published_time":"2025-03-21T15:21:10+00:00","article_modified_time":"2025-03-21T17:00:34+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/28627350_7475498-scaled.jpg","type":"image\/jpeg"}],"author":"Devika Nair","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Devika Nair","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/","url":"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/","name":"What are Container Queries? - Devu&#039;s Journal","isPartOf":{"@id":"https:\/\/devikanair2805.uk\/journal\/#website"},"primaryImageOfPage":{"@id":"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/#primaryimage"},"image":{"@id":"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/#primaryimage"},"thumbnailUrl":"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/28627350_7475498-1024x683.jpg","datePublished":"2025-03-21T15:21:10+00:00","dateModified":"2025-03-21T17:00:34+00:00","author":{"@id":"https:\/\/devikanair2805.uk\/journal\/#\/schema\/person\/c100060edd5b4f7c70c77d6fd774d5ed"},"breadcrumb":{"@id":"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/#primaryimage","url":"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/28627350_7475498-scaled.jpg","contentUrl":"https:\/\/devikanair2805.uk\/journal\/wp-content\/uploads\/2025\/03\/28627350_7475498-scaled.jpg","width":2560,"height":1707},{"@type":"BreadcrumbList","@id":"https:\/\/devikanair2805.uk\/journal\/2025\/03\/21\/what-are-container-queries\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devikanair2805.uk\/journal\/"},{"@type":"ListItem","position":2,"name":"What are Container Queries?"}]},{"@type":"WebSite","@id":"https:\/\/devikanair2805.uk\/journal\/#website","url":"https:\/\/devikanair2805.uk\/journal\/","name":"Devu&#039;s Journal","description":"Creative Web Development","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devikanair2805.uk\/journal\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/devikanair2805.uk\/journal\/#\/schema\/person\/c100060edd5b4f7c70c77d6fd774d5ed","name":"Devika Nair","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devikanair2805.uk\/journal\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9bb2599720fe9b92b75acb24ea6baf4e5264c6772cab60b706e4603fc3e7fa55?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9bb2599720fe9b92b75acb24ea6baf4e5264c6772cab60b706e4603fc3e7fa55?s=96&d=mm&r=g","caption":"Devika Nair"},"sameAs":["https:\/\/devikanair2805.uk\/journal"],"url":"https:\/\/devikanair2805.uk\/journal\/author\/devika-nair\/"}]}},"_links":{"self":[{"href":"https:\/\/devikanair2805.uk\/journal\/wp-json\/wp\/v2\/posts\/327","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devikanair2805.uk\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devikanair2805.uk\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devikanair2805.uk\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devikanair2805.uk\/journal\/wp-json\/wp\/v2\/comments?post=327"}],"version-history":[{"count":19,"href":"https:\/\/devikanair2805.uk\/journal\/wp-json\/wp\/v2\/posts\/327\/revisions"}],"predecessor-version":[{"id":359,"href":"https:\/\/devikanair2805.uk\/journal\/wp-json\/wp\/v2\/posts\/327\/revisions\/359"}],"wp:attachment":[{"href":"https:\/\/devikanair2805.uk\/journal\/wp-json\/wp\/v2\/media?parent=327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devikanair2805.uk\/journal\/wp-json\/wp\/v2\/categories?post=327"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devikanair2805.uk\/journal\/wp-json\/wp\/v2\/tags?post=327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}