Future-Proofing Responsive Web Design in 2023
summary
Argues that modern CSS — container queries plus auto-fit minmax grid patterns and flexbox with flex-basis — replaces many media queries for responsive components; demonstrates a form that changes layout without JS and a card/music-player component that flips from vertical to side-by-side based on container width, fixing a surprising 492px flex-basis breakpoint example. Shows container-type + @container in action, notes Firefox enabled it Feb 14 and recommends ~95% browser support or a polyfill for production.
AI-written summary · about
chapters (12)
- 0:00Responsive design history
- 3:18Responsive design principles
- 8:43Design for content lengths
- 11:32Flexbox fluid forms
- 14:42CSS Grid viewport sizes
- 18:40CSS Grid auto-fit/auto-fill
- 20:26Container queries
- 26:11Media range queries
- 29:47Container query demo
- 33:20Container query support
- 34:45User preferences CSS
- 37:52Web design trends
related talks
01h 01mThe Evolution of Responsive Web Design: What's Next?
35mModern CSS Replacements for Better Responsive Code
17mThe New Responsive: Web Design in a Component-Driven World
26mResponsive Components: Present & Future
28mResponsive Components: Present & Future
15mResponsive Design vs. Adaptive Design
45mHow Responsive Are You in CSS? 2026 Edition
23mThe End of Media Queries