Senior LevelCSS & Modern Layouts
How do CSS container style queries work for value-based conditional styling?
❓ Interview Prompt: Explain @container style() queries that respond to custom property values instead of dimensions.
Container Style Queries extend Container Queries to respond to a container's custom property values instead of its size:
Syntax:
@container style(--theme: dark) { /* dark theme styles */ }
How It Differs from Size Queries:
•
Size queries:
@container (min-width: 400px) — respond to container dimensions.•
Style queries:
@container style(--variant: compact) — respond to custom property values.Use Case:
A single component can display differently based on a custom property set on its container, without changing classes or using JavaScript.
Code Implementation Example
css
/* Container sets a custom property */
.card-wrapper {
container-name: card;
--card-variant: default;
}
.card-wrapper.compact {
--card-variant: compact;
}
/* Children respond to the property value */
@container card style(--card-variant: compact) {
.card {
padding: 8px;
font-size: 0.875rem;
}
.card-image { display: none; }
}💡Container style queries responding to custom property values.
🎯 Interview Key Takeaway
Container style queries enable value-based conditional styling, making components configurable via CSS custom properties.
#Container Queries#Style Queries#Custom Properties#Senior
Back to all CSS & Modern Layouts Questions→