KandZ – Tuts

We like to help…!

CSS 42 prefers-reduced-data and prefers- reduced-motion media features

a -  prefers-reduced-data media feature
prefers-reduced data detects if the user has requested a lightweight alternative
Limited availability because is an experimental technology
values: no-preference → the user has not made any preference
reduce → the user made a preference for alternative lightweight content
@media (prefers-reduced-motion: reduce) { } → applies styles for those with reduced traffic
@media (prefers-reduced-motion: no-preference) { } → applies styles for those with no specified preference

b - prefers-reduced-motion media feature
prefers-reduced-motion detects if the user has requested reduced motion
This is useful for users that are sensitive to screen flicker or animations
values: no-preference → the user has not made any preference
reduce → the user enabled reduced motion
@media (prefers-reduced-motion: reduce) { } → applies styles for users who prefer reduced motion
@media (prefers-reduced-motion: no-preference) { } → applies styles for users who do not prefer reduced motion

Leave a Reply