Tag Archives: Media Query

An Introduction to the Reduced Motion Media Query | CSS-Tricks

A brief history of Reduced Motion

When it was released in 2013, iOS 7 featured a dramatic reworking of the operating system’s visuals. Changes included translucency and blurring, a more simplified “flat” user interface, and dramatic motion effects such as full-screen zooming and panning.

While the new look was largely accepted, some people using the updated operating system reported experiencing motion sickness and vertigo. User interface movement didn’t correspond with users’ feeling of movement or spatial orientation, triggering the reported effects.

Although technology unintentionally inflicting adverse effects has existed before this, the popularity of iOS gave the issue prominence. Apple has great support for accessibility, so an option in the operating system preferences to disable motion effects for those with vestibular disorders was added in response.

#Enter a new media query

Safari 10.1 introduced the Reduced Motion Media Query. It is a non-vendor-prefixed declaration that allows developers to “create styles that avoid large areas of motion for users that specify a preference for reduced motion in System Preferences.”

The syntax is pretty straightforward:

/* Applies styles when Reduced Motion is enabled */
@media screen and (prefers-reduced-motion: reduce) { }

@media screen and (prefers-reduced-motion) { }

Safari will parse this code and apply it to your site, letting you provide an alternative experience for users who have the Reduced Motion option enabled.

Curated by (Lifekludger)
Read full article at Source: An Introduction to the Reduced Motion Media Query | CSS-Tricks