net - UK (2020-05)

suffer a condition known as motion-

triggered vestibular spectrum disorder,

meaning the frenetic animations we

referenced earlier might just induce

nausea (or in some cases potential

seizures). These users absolutely deserve

your consideration and an on-site

experience that accommodates this

condition, yet we don’t want to remove

the surprise and delight afforded by

thoughtful animations. Fortunately,

there’s prefers-reduced-motion, a

Feature Query reliant on your user’s

device accessibility preferences.

@media (prefers-reduced-motion: reduce) {

*{ animation:none !important;

transition:none !important;

}

}

By bringing this Feature Query into

play, we’re now able to eliminate all

animations and transitions from our

pages. Yes, you’ll note we’re using the

otherwise ugly !important condition, but

it’s difficult to think of a more literally

important priority than our users’

physical wellbeing.

There is another critical consideration

that needs to be made before we are able

to call this query complete: are we using

animations to reveal or change positions

of any elements on our site? If this is the

case, it will also be necessary to be sure

that all of our animations or transitions

are set to their final state, again using

the prefers-reduced-motion query

to properly set their post-animation

states in order to offer as complete an

experience as possible.

In many ways, when we consider CSS

and what it fundamentally means, we

need to consider the cascade and the

fact that when browsers are unable

to understand a property, they’ll

simply ignore it. And Feature Queries

do a fantastic job of illustrating the

strengths of this format. First, we

begin writing styles as we would like

them to be consumed, in their optimal

state. The browser will then handle as

many of these as possible, falling back

on compliant styles within our Feature

Queries wherever it is necessary.

To p

Since backdrop-filter is unavailable,

let’s increase the background opacity

to maintain distinction

Above

Detecting grid support – and serving

up CSS accordingly – with more widely

adopted Flex fallbacks

Top right

Conditionally removing animations

based on user preference keeps our

content accessible

FEATURESFEATURES
How CSS feature queries work