Beyond responsive design - New CSS media queries
summary
Responsive design now extends beyond breakpoints to explicit user and environment signals: demos show prefers-color-scheme with a “cheap dark mode” using CSS filter: invert + hue-rotate and fixes for images, prefers-reduced-motion implemented by forcing animations to 0s (-1ms trick) to preserve event timing, and Windows forced-colors requiring SVG/icon fixes or outline fallbacks. Notes: prefers-reduced-data isn’t widely supported yet (use navigator.connection.effectiveType) and Polypane is used to preview features.
AI-written summary · about
chapters (4)
- 0:00Start
- 4:33User preferences: prefers-color-scheme
- 18:38Device: Screen inset
- 19:43Device: Interaction
related talks
33mResponsive Design in 2020
45mBuilding user-adaptive interfaces with preference media queries
54mInclusively Responsive UIs with CSS and SVG
29mMedia Queries Next Level
43mResponsive Design, Past, Present and Future
01h 01mThe Evolution of Responsive Web Design: What's Next?
17mThe New Responsive: Web Design in a Component-Driven World
35mModern CSS Replacements for Better Responsive Code