Media Queries

on YouTube ↗48m

" summary

Demo shows complex WebGL pages working in browser and claims media queries are widely implemented and usable now after a long standards process and test suite completion. Details include window.matchMedia listeners for JS, support for calc() in media queries, device vs viewport features (width height device-width resolution orientation) and heuristics for legacy browsers. Missing bits: paged media, JS-availability, language targeting and a proposal to allow extensible JS-defined media features. Tools shown: Adobe Edge Reflow and BlueGriffon.

AI-written summary · about

" chapters (27)

1. 0:00WebGL
2. 1:30CSS Working Group
3. 2:20Media Queries
4. 3:10History
5. 4:40Media Types
6. 6:00HTML Form 1
7. 7:20Media Query
8. 7:52Conditions
9. 10:39Calc
10. 12:15User Agent
11. 12:40Invalid Media Queries
12. 13:35Media Features
13. 18:20Media API
14. 20:38Whats missing
15. 24:52Whats needed
16. 26:08Whats next
17. 27:45CSS Global Object
18. 29:15JavaScript Declaration
19. 31:21Maintenance
20. 32:16The Future
21. 33:37Editing Media Queries
22. 36:18Print Output
23. 38:30Touch vs Stylus
24. 40:45Performance
25. 43:17Nested Queries
26. 44:59Media Queries Pitfalls
27. 46:13Windows Phone Media Queries

" related talks

• 30mMedia Queries: Size Doesn't MatterAndres Galante · QCon São Paulo 2019
• 18mMedia Queries 4Florian Rivoal · dotCSS 2017
• 29mMedia Queries Next LevelCarmine Alfano · CSSDay 2018
• 57mMeta Layout: a closer look at media queriesStephen Hay · Mobilism 2011
• 43mResponsive Design, Past, Present and FutureAndrew Smyk · FITC Spotlight: Responsive Design 2016
• 23mThe End of Media QueriesGiacomo Zinetti · CSS Day 2019
• 43mMediaqueryless ResponsivenessVasilis Van Gemert · CSS Day + HTML Special 2016
• 29mAre Our Media Accessible?Massimo Artizzu · cssday 2025