Container Queries

Container Queries are a relatively new feature in CSS, and their support across browsers has been evolving. Here's a brief overview of their development and support timeline:

Development and Proposal

• 2019: The initial proposal for Container Queries was discussed in the CSS Working Group. The idea was to enable responsive designs based on the size of a container rather than the viewport.
• 2020-2021: The feature underwent specification and experimental implementations. The CSS Containment Module Level 3, which includes Container Queries, was being actively developed and refined.

Browser Support

• 2021: Experimental implementations began appearing in browsers.
  • Chrome 93 (August 2021): Introduced support for Container Queries behind a flag.
  • Safari Technology Preview (2021): Apple’s experimental browser included early support for Container Queries.
• 2022: Wider adoption and more stable implementations.
  • Chrome 105 (August 2022): Container Queries support became more stable and available by default.
  • Safari 15.4 (March 2022): Released with Container Queries support.
  • Firefox 109 (January 2023): Firefox began supporting Container Queries.

Current Status

As of late 2023 and into 2024, Container Queries are well-supported in the latest versions of major browsers, including:

• Google Chrome
• Mozilla Firefox
• Apple Safari
• Microsoft Edge

How to Check for Support

To ensure your project can use Container Queries, you can check the current browser compatibility on sites like Can I use.

Example of Checking Browser Support

You can use a feature query in CSS to check if the browser supports Container Queries:

@supports (container-type: inline-size) {
  .container {
    container-type: inline-size;
    container-name: example-container;
  }

  @container example-container (min-width: 300px) {
    .child {
      background-color: lightblue;
    }
  }
}

This ensures that your styles will only apply if the browser supports the container-type property.

---

Container Queries are a powerful feature in CSS that allow for more responsive and adaptable designs by enabling styles to be applied based on the size of a container, rather than the viewport. This is particularly useful for component-based designs where elements need to adapt based on their parent container's size. The feature introduces new properties and at-rules that make it easier to build flexible and maintainable layouts.

Key Concepts

1. Container Units: Similar to viewport units, but relative to the dimensions of a container.

2. Container Query: A conditional statement that applies styles based on the size of a container.

3. Container Types: Define what aspects of a container (inline size, block size, etc.) can be queried.

Properties and At-Rules

container-type

The container-type property specifies that an element is a query container and defines what dimensions of the container can be used in queries. It can take the following values:

• inline-size: The element’s inline size can be queried.
• block-size: The element’s block size can be queried.
• size: Both inline and block sizes can be queried.
• none: The element is not a container.

container-name

The container-name property assigns a name to the container, which can then be referenced in container queries.

Example Usage

/* Define a container */
.container {
  container-type: inline-size;
  container-name: main-container;
}

/* Apply styles based on the container's size */
@container main-container (min-width: 600px) {
  .child {
    background-color: lightblue;
    font-size: 1.5em;
  }
}

@container main-container (max-width: 599px) {
  .child {
    background-color: lightcoral;
    font-size: 1em;
  }
}

Explanation

1. Defining a Container: The .container class is set as a container with an inline-size container type and is named main-container.

2. Using Container Queries: Two container queries are defined using the @container at-rule. Styles are applied to elements with the .child class based on the main-container's inline size.

   • When main-container's inline size is at least 600px, .child elements will have a light blue background and a larger font size.
   • When main-container's inline size is less than 600px, .child elements will have a light coral background and a smaller font size.

Benefits

• Modularity: Styles are scoped to components, making it easier to manage and maintain.
• Responsiveness: Components can adapt to their container size, providing a more flexible design approach.
• Reusability: Components can be reused in different contexts without additional media queries.

Container Queries enable a more granular level of control over responsive design, making it easier to create adaptable, maintainable, and reusable components in modern web development.

---

Example Usage of Container Style Queries

Here's a step-by-step guide to using Container Style Queries in your CSS:

1. Define the Container: Specify the element that will serve as the query container by using the container-type property. Optionally, give it a container-name.

2. Apply Container Queries: Use the @container at-rule to define styles based on the container's size.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container Queries Example</title>
  <style>
    .container {
      container-type: inline-size;
      container-name: main-container;
      border: 2px solid #333;
      padding: 20px;
      max-width: 100%;
    }

    .child {
      background-color: lightcoral;
      padding: 10px;
      transition: all 0.3s ease;
    }

    @container main-container (min-width: 600px) {
      .child {
        background-color: lightblue;
        font-size: 1.5em;
      }
    }

    @container main-container (max-width: 599px) {
      .child {
        background-color: lightgreen;
        font-size: 1em;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="child">
      Resize the container to see the effect.
    </div>
  </div>
</body>
</html>

Explanation

1. Define the Container:

   .container {
     container-type: inline-size;
     container-name: main-container;
     border: 2px solid #333;
     padding: 20px;
     max-width: 100%;
   }
   • The .container class is defined as a query container with inline-size and named main-container.

2. Apply Container Queries:

   @container main-container (min-width: 600px) {
     .child {
       background-color: lightblue;
       font-size: 1.5em;
     }
   }
   
   @container main-container (max-width: 599px) {
     .child {
       background-color: lightgreen;
       font-size: 1em;
     }
   }
   • The first query applies styles to .child when main-container's inline size is at least 600px.
   • The second query applies styles to .child when main-container's inline size is less than 600px.

Container Queries vs Media Queries

Media Queries

Media Queries are a fundamental part of responsive web design, allowing you to apply styles based on the viewport's dimensions, resolution, orientation, and other media features.

Example

/* Media Query for viewport width */
@media (min-width: 600px) {
  .element {
    background-color: lightblue;
    font-size: 1.5em;
  }
}

@media (max-width: 599px) {
  .element {
    background-color: lightgreen;
    font-size: 1em;
  }
}

Container Queries

Container Queries allow you to apply styles based on the size of a containing element rather than the viewport. This is particularly useful for component-based designs where elements need to adapt to the size of their parent container.

Example

/* Define a container */
.container {
  container-type: inline-size;
  container-name: main-container;
}

/* Container Query for container width */
@container main-container (min-width: 600px) {
  .child {
    background-color: lightblue;
    font-size: 1.5em;
  }
}

@container main-container (max-width: 599px) {
  .child {
    background-color: lightgreen;
    font-size: 1em;
  }
}

Key Differences

Scope of Responsiveness

• Media Queries: Apply styles based on the entire viewport's dimensions.
• Container Queries: Apply styles based on the dimensions of a specific container element.

Use Cases

• Media Queries: Ideal for changing the layout and styles of an entire page or large sections of a page based on viewport size.
• Container Queries: Ideal for creating reusable and adaptable components that can respond to the size of their parent containers.

Modularity

• Media Queries: Less modular as they are typically applied globally, affecting large sections of the page.
• Container Queries: More modular, allowing components to be self-contained and responsive within different contexts.

Example Scenario

Consider a component that needs to adapt its layout based on its container's size:

Using Media Queries:

.card {
  width: 100%;
}

@media (min-width: 600px) {
  .card {
    display: flex;
  }
}

• This approach works if the .card element needs to adapt based on the viewport. However, if the .card is used in different contexts with varying parent sizes, media queries might not be sufficient.

Using Container Queries:

.container {
  container-type: inline-size;
  container-name: card-container;
}

@container card-container (min-width: 600px) {
  .card {
    display: flex;
  }
}

• This approach allows the .card to adapt based on the size of its container, making it more versatile and reusable in different layouts.

When to Use Each

• Media Queries: Use when you need to adapt the design based on the entire viewport or screen size. This is common for layout changes that affect large parts of a page.
• Container Queries: Use when you need components to adapt based on their container's size. This is useful for building flexible, modular components that can be reused in different contexts.

Conclusion

Both Media Queries and Container Queries are essential tools in modern CSS for building responsive designs. Media Queries are best for overall page layout adjustments based on viewport size, while Container Queries are perfect for making individual components more adaptive and modular based on their parent container's size. Combining both techniques can lead to highly responsive and maintainable web designs.