Question 1

What are CSS Container Queries?

Accepted Answer

CSS Container Queries (@container) allow you to style elements based on their parent container's size, rather than the viewport. This enables truly reusable, responsive components. Supported in Chrome 105+, Firefox 110+, and Safari 16+.

Question 2

What values does container-type accept?

Accepted Answer

container-type has three values: 'size' (tracks both inline and block dimensions, requires explicit sizing), 'inline-size' (tracks inline/width dimension only), and 'normal' (for style queries only, not size queries). 'inline-size' is recommended for most use cases.

Question 3

How are container queries different from media queries?

Accepted Answer

Media queries (@media) respond to the viewport size, suitable for global layout. Container queries (@container) respond to the parent container's size, ideal for reusable components that need to adapt regardless of where they're placed in the layout.

Question 4

What's the difference between size queries and style queries?

Accepted Answer

Size queries (@container (min-width: 400px)) trigger based on container dimensions. Style queries (@container style(--theme: dark)) trigger based on CSS custom property values. Style queries have limited browser support; size queries are the standard approach.

📦 CSS Container Query Generator

⚙️ Container Settings

📏 Breakpoints

🎨 Breakpoint Styles

👁️ Live Preview

📄 CSS Code