The New Responsive: Web Design in a Component-Driven World
summary
Introduces container queries (CSS @container) to enable component-level responsiveness by letting a component adapt to its parent’s size when the parent uses CSS contain, demonstrated with identical product cards that change layout for sidebar, hero, or grid placements without viewport media queries. Also covers user-preference media queries (prefers-color-scheme, prefers-reduced-motion) for theme and motion adjustments and early folding-screen support via a spanning media query; notes container queries are available to test in Chrome Canary behind chrome://flags.
AI-written summary · about
chapters (14)
- 0:00Responsive design evolution
- 1:27CSS and responsive era
- 2:13Media queries for preferences
- 3:45Accessibility with reduced motion
- 4:30Dark theme customization
- 6:28Container queries
- 8:21Demo: container queries
- 9:51Calendar layout
- 10:55Testing in Chrome Canary
- 11:37Scoped styles
- 12:41New form factors
- 13:26Dual display queries
- 14:27Macro and micro layouts
- 15:11Next steps
related talks
17mContainer queries, the next step towards a truly modular CSS
40mFuture-Proofing Responsive Web Design in 2023
15mResponsive Design vs. Adaptive Design
01h 01mThe Evolution of Responsive Web Design: What's Next?
28mResponsive Components: Present & Future
22mThe next step towards a truly modular CSS
52mResponsive Web Applications with Container Queries
26mResponsive Components: Present & Future