CSS Container Queries

Understanding Container Queries

Container queries are a powerful addition to the web development toolkit, providing more granular control over the styling of elements based on the size of their container rather than the viewport.

CSS container queries address the limitations of media queries, enabling more responsive and modular component designs. In this blog post, we’ll delve into what container queries are, how to use them, the differences between container queries and media queries, the length units involved, browser support, and fallbacks for unsupported browsers.

What are CSS Container Queries?

CSS container queries allow you to apply styles to an element based on the size of its container, not the viewport. This development is a significant advancement in responsive web design because it allows for more modular and adaptable components. Container queries empower developers to create components that can adjust their layout and appearance based on the container they are placed in, making building complex, flexible layouts easier.

How to use CSS Container Queries?

The basic syntax of a container query involves defining a container with the container-type property and then using the @container rule to apply styles based on the container’s dimensions within it:

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

@container (min-width: 300px) {
  .item {
    background-color: red;
  }
}

Defining a Container

To use container queries, you must first define a container using the container-type property. This property can take the following values:

• inline-size: Specifies that the container should be considered for its inline size (width).
• block-size: Specifies that the container should be considered for its block size (height).
• size: Considers both inline and block size.

Applying Styles Based on Container Size

Once a container is defined, you can use the @container rule to apply styles based on its size. Here’s an example that changes the background colour of an item based on the container’s width:

@container (min-width: 300px) {
  .item {
    background-color: red;
  }
}

@container (min-width: 500px) {
  .item {
    background-color: blue;
  }
}

Multiple Container Types

You can also define multiple container types within a single container. This is useful when you want to apply different styles based on both width and height:

.container {
  container-type: size;
}

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

@container (min-height: 200px) {
  .item {
    border: 2px solid lightcoral;
  }
}

Nested Containers

Container queries can be nested, allowing for complex, responsive designs. Each container will respond to its dimensions independently:

.outer-container {
  container-type: inline-size;
}

.inner-container {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .inner-container .item {
    background-color: lightgreen;
  }
}

@container (min-width: 500px) {
  .inner-container .item {
    background-color: lightcoral;
  }
}

Differences Between Container Queries and Media Queries

While both container queries and media queries are used to apply styles based on size, they differ in a few key ways:

Scope

• Media Queries: Apply styles based on the viewport size or other media features. They affect the entire document.
• Container Queries: Apply styles based on the size of a specific container element. They only affect the elements within that container.

Modularity

• Media Queries: Less modular because they depend on the viewport size, which affects the entire page layout.
• Container Queries: More modular as they depend on the container size, allowing for a more flexible and component-based design.

Use Cases

• Media Queries: Best suited for overall page layout adjustments (e.g., switching from a mobile to a desktop layout).
• Container Queries: Ideal for component-level adjustments (e.g., changing the layout of a card component based on its container).

Length Units in Container Queries

Container queries support various length units similar to those in media queries:

• px: pixel length units
• em: relative to the font-size of the element
• rem: relative to the font-size of the root element
• vw: viewport width
• vh: viewport height

In addition to these, container queries introduce container-relative units:

• cqw: container query width units (1% of the container’s width)
• cqh: container query height units (1% of the container’s height)

Example using container-relative units:

.container {
  container-type: size;
}

@container (min-width: 30cqw) {
  .item {
    background-color: lightblue;
  }
}

@container (min-height: 20cqh) {
  .item {
    border: 2px solid lightcoral;
  }
}

Browser Support and Fallbacks

As of the latest updates, container queries are supported in the following browsers:

• Chrome (from version 105)
• Firefox (under development, can be enabled in Firefox Nightly)
• Safari (from version 15.4)
• Edge (from version 105)

For browsers not supporting container queries, you can use feature detection and fallbacks to ensure your design remains functional.

You can use the @supports rule to detect if container queries are supported and provide fallbacks for unsupported browsers.

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

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

@supports not (container-type: inline-size) {
  .item {
    background-color: lightgray;
  }
}

Summary

CSS container queries are a significant step forward in responsive web design, allowing developers to create more modular and adaptive components. They provide fine-grained control over styles based on container size rather than the viewport, offering a new level of flexibility for building responsive layouts.

‘Till next time!