Comparison
Media queryvsprefers-reduced-motion
Media query
the sidebar collapses below 768 pixels because you picked that number once and never revisited it.
A conditional block applied on properties of the viewport or device — width, orientation, pointer type, colour scheme, motion preference. Width breakpoints are the familiar use and the weakest one, because they describe the window rather than the space a component actually has. The non-width queries are the more valuable half and the more forgotten one: `prefers-color-scheme` and `prefers-reduced-motion` are both accessibility features.
Full entry →prefers-reduced-motion
you wrapped the parallax animation in a media query and it stops for anyone who asked their system to calm down.
A media query exposing an operating-system preference for less motion, set by people for whom animation causes nausea or migraine. Honouring it means removing large movement, parallax and auto-playing transitions, not removing every transition — a short fade is usually fine and better than an abrupt change. Treating it as an accessibility requirement rather than a nicety is the correct reading.
Full entry →