Question 1

What are CSS container queries?

Accepted Answer

CSS container queries let you style elements based on the size of their parent container rather than the viewport. This enables truly responsive components that adapt to wherever they are placed.

Question 2

How do container queries differ from media queries?

Accepted Answer

Media queries respond to the viewport size, while container queries respond to the size of a parent container. This makes container queries ideal for reusable components that may appear in different layout contexts.

Question 3

What is container-type?

Accepted Answer

The container-type CSS property defines a containment context. Use inline-size for width-based queries, size for both width and height, or normal for no containment.

Question 4

Is browser support available for container queries?

Accepted Answer

Yes. CSS container queries are supported in all modern browsers including Chrome 105+, Firefox 110+, Safari 16+, and Edge 105+.