Which CSS pattern correctly respects user motion preferences by reducing motion?

Which CSS pattern correctly respects user motion preferences by reducing motion?

• A. @media (prefers-reduced-motion: reduce) { ... }
• B. motion: reduce
• C. prefers-reduced-motion: reduce
• D. animation: reduce

Answer: (A)

This pattern is about honoring the user’s motion preference by using a dedicated media query that detects reduced motion and applying motion-reducing styles only when needed. The correct form is to wrap the styles in a media query that checks the prefers-reduced-motion feature for the value reduce. Inside that block you can disable or simplify animations and transitions (for example, animation: none; transition: none; or removing transforms). Why this is best: it relies on the browser and the user’s system setting to decide when to reduce motion, ensuring accessibility without guessing. If a user has requested less motion, the page will automatically adjust; if the browser doesn’t support it, the block is ignored and normal motion remains. The other patterns aren’t valid ways to express this behavior: one is not valid CSS syntax, another uses the feature name outside a media query, and another uses a non-existent property value. This approach is the standard, robust way to respect motion preferences.

This pattern is about honoring the user’s motion preference by using a dedicated media query that detects reduced motion and applying motion-reducing styles only when needed. The correct form is to wrap the styles in a media query that checks the prefers-reduced-motion feature for the value reduce. Inside that block you can disable or simplify animations and transitions (for example, animation: none; transition: none; or removing transforms).

Why this is best: it relies on the browser and the user’s system setting to decide when to reduce motion, ensuring accessibility without guessing. If a user has requested less motion, the page will automatically adjust; if the browser doesn’t support it, the block is ignored and normal motion remains. The other patterns aren’t valid ways to express this behavior: one is not valid CSS syntax, another uses the feature name outside a media query, and another uses a non-existent property value. This approach is the standard, robust way to respect motion preferences.