CSS Container Queries is a new responsive design mechanism that allows restyling based on the size of component containers rather than viewport size. The steps to use are: 1. Define the container type through container-type, such as inline-size or size; 2. Optionally use container-name to name the container; 3. Use @container query to write corresponding style rules. Applicable scenarios include cards, toolbars, advertising modules, and other components that need to be adaptively displayed in different contexts. Notes include explicit declaration of container type, performance impact and compatibility issues. Currently, mainstream browsers have supported it but need to combine downgrade processing or progressive enhancement strategies.

In web development, responsive design has always been one of the core issues. With the advent of CSS Container Queries, we can finally adjust the style based on the container size of the component, instead of relying solely on the size of the entire viewport. This is a huge step forward for modern modular development.

What are CSS Container Queries?

CSS Container Queries is a new responsive mechanism that allows you to style an internal element based on the size of a container (rather than the entire browser window). You can mark a component as a "query container" and define different layout rules based on the size of the container.

The usage method is very simple: first use container-type to define a container type, such as inline-size or size , and then write the corresponding style rules through @container query. For example:

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

@container (max-width: 300px) {
  .widget {
    font-size: 12px;
  }
}

In this way, when the width of the .widget container is less than or equal to 300px, the text inside will become smaller, achieving more flexible adaptive performance.

How to set up a container and use a query?

To use Container Queries, you must first clarify which elements are what you want to be a "container". It is usually some component-level blocks, such as cards, sidebars, or ad slots.

The setup method is as follows:

• Add container-type attribute to the target element, it is recommended to start with inline-size because it only focuses on width.
• If you need to control the width and height at the same time, you can use size type, but pay attention to performance issues.
• Use container-name to name the container, making it easier to distinguish different containers in multiple queries.

Example:

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

@container card-container (max-width: 400px) {
  .card-content {
    flex-direction: column;
  }
}

In this way, even if multiple components use similar structures, their respective response behaviors can be controlled separately.

Which scenarios are suitable for using Container Queries?

Container Queries is especially suitable for components that require a consistent appearance in different contexts. For example:

• Card Component: Shows the compact version in the sidebar and the full version in the main content area.
• Toolbar or button group: Automatically switch horizontal/vertical arrangement according to available space.
• Advertising module: Hide some elements in small containers to avoid crowding.

This ability allows components to truly achieve "self-perception" and make reasonable displays without the intervention of external logic.

Notes and compatibility

Currently, mainstream browsers already support Container Queries, but the following points should still be noted in actual projects:

• Not all containers can be query objects, container-type must be explicitly declared.
• Complex nesting can affect performance, especially when size type is used.
• Currently, it cannot be mixed in other places other than media queries, such as not nesting inside @media .

If you are worried about compatibility, you can add downgrade processing logic to the code, or combine traditional media queries to make progressive enhancements.

Basically that's it. Container Queries allows components to truly have "environmental awareness" capabilities. Although it is still in the stage of popularity, it has begun to change the way we build UIs.

The above is the detailed content of Understanding and using CSS Container Queries (emerging topic). For more information, please follow other related articles on the PHP Chinese website!