Intermediate LevelCSS & Modern Layouts
How does CSS interact with ResizeObserver for responsive component sizing?
❓ Interview Prompt: Explain when to use Container Queries vs JavaScript ResizeObserver for component responsiveness.
CSS Container Queries (Preferred):
Pure CSS solution for styling components based on their parent's size. No JavaScript needed. Best for layout and typography adjustments.
JavaScript ResizeObserver:
Needed when you must execute JavaScript logic based on element size changes (e.g., switching between canvas rendering modes, loading different data sets, toggling component library variants).
Decision Guide:
•
Use Container Queries when: Changing CSS properties (layout, font-size, padding) based on container size.
•
Use ResizeObserver when: Executing JavaScript logic, changing React state, or performing imperative DOM manipulation based on size changes.
Code Implementation Example
css
/* CSS Container Query (no JS needed) */
.chart-wrapper { container-type: inline-size; }
@container (min-width: 600px) {
.chart-legend { display: flex; flex-direction: row; }
}
@container (max-width: 599px) {
.chart-legend { display: flex; flex-direction: column; }
}💡Container query for responsive chart legend layout.
🎯 Interview Key Takeaway
Prefer CSS Container Queries for layout changes. Use ResizeObserver only when JavaScript logic must run on resize.
#ResizeObserver#Container Queries#Responsive#Intermediate
Back to all CSS & Modern Layouts Questions→