The End of Media Queries
summary
Demonstrates alternatives to CSS media queries using Flexbox and CSS Grid techniques (auto-flow: dense, overflow:hidden, reverse ordering) plus a "quantity-query" trick to make components reflow and hide content based on available space. Argues against relying on element/container query polyfills because they add heavy JavaScript and hurt performance, and presents a working video-player widget that adapts from 320px to 1400px without media queries, highlighting the tradeoffs of container/element-query polyfills.
AI-written summary · about
chapters (11)
- 0:00CSS as a tool
- 2:09Web components evolution
- 4:59Cascade vs media queries
- 5:20Flexbox Grid reflow
- 11:38Hiding content without MQ
- 14:52Quantity queries for layout
- 16:40Card responsive without MQ
- 17:46Video player example
- 19:12CSS beyond media queries
- 20:22Responsive web before MQ
- 21:29Closing
related talks
40mFuture-Proofing Responsive Web Design in 2023
35mModern CSS Replacements for Better Responsive Code
28mResponsive Components: Present & Future
45mSolving container queries today
01h 01mThe Evolution of Responsive Web Design: What's Next?
43mMediaqueryless Responsiveness
13mBreaking Out of Media Queries
35mScaling CSS Layout Beyond Pixels