Question 1

What is a CSS container query?

Accepted Answer

A CSS container query (@container) lets you style elements based on the size of their parent container rather than the viewport. This is useful for creating truly reusable components that adapt to their container.

Question 2

How is it different from media queries?

Accepted Answer

Media queries respond to the viewport size, while container queries respond to the size of a parent element. This makes container queries better for component-based design where the same component might appear in different layout contexts.

Question 3

What browsers support container queries?

Accepted Answer

Container queries are supported in all modern browsers: Chrome 105+, Firefox 110+, Safari 16+, and Edge 105+.

Question 4

What is container-type?

Accepted Answer

The container-type CSS property defines the container. Use 'inline-size' to query the inline (width) axis, 'size' to query both axes, or 'normal' (default) to disable containment.