Media queries respond to the viewport. Container queries respond to the parent container. This changes everything for component-based design.
The Problem with Media Queries
A card component in a sidebar should look different from the same card in a main content area. Media queries can't distinguish — they only know the viewport width.
Container Queries Syntax
Container Query Units
Practical Example: Responsive Card
Style Queries (Experimental)
Browser Support and Fallbacks
Container queries are supported in all modern browsers (Chrome 105+, Firefox 110+, Safari 16+). Use @supports (container-type: inline-size) for progressive enhancement.