Skip to content

Add 'prefers-reduced-motion' media feature #586

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Add 'prefers-reduced-motion' media feature #586

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
92de527
Add 'prefers-reduced-motion' media feature
grorg Oct 10, 2016
c2aa564
Remove 'none' from prefers-reduced-motion.
grorg Oct 11, 2016
f9c94b4
Change 'default' to 'no-preference'
grorg Jan 11, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 47 additions & 1 deletion mediaqueries/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,7 +491,7 @@ Evaluating Media Features in a Boolean Context</h4>
If the feature would be true for any value
<em>other than</em> the number ''0'',
a <<dimension>> with the value ''0'',
or the keyword ''none'',
or the keywords ''none'' and ''no-preference'',
the <a>media feature</a> evaluates to true.
Otherwise, it evaluates to false.

Expand Down Expand Up @@ -1783,6 +1783,52 @@ Rare Interaction Capabilities: the 'any-pointer' and 'any-hover' features</h3>
or to hide them altogether to reduce visual clutter if ''(any-pointer: fine)'' is false.
</div>



<!--
██ ██ ██████ ████████ ████████ ████████ ████████ ████████ ████████ ██████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██████ ██████ ████████ ████████ ████████ ██████ ██████ ██████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
███████ ██████ ████████ ██ ██ ██ ██ ██ ████████ ██ ██████
-->

<h2 id='mf-user-preferences'>
User Preference Media Features</h2>

<h3 id="prefers-reduced-motion">
Detecting the desire for less motion on the page: the 'prefers-reduced-motion' feature</h3>

<pre class='descdef mq'>
Name: prefers-reduced-motion
Value: no-preference | reduce
For: @media
Type: discrete
</pre>

The 'prefers-reduced-motion' media feature is used to detect if the user
has requested the system minimize the amount of animation or motion it
uses.

<dl dfn-type=value dfn-for="@media/prefers-reduced-motion">
<dt><dfn>no-preference</dfn>
<dd>
Indicates that the user has made no preference known
to the system. This keyword value evaluates as false
in the <a>boolean context</a>.

<dt><dfn>reduce</dfn>
<dd>
Indicates that user has notified the system that they
prefer an interface that minimizes the amount of movement
or animation, preferably to the point where all non-essential
movement is removed.

</dl>


Copy link
Contributor

@cookiecrook cookiecrook Dec 13, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe add a editorial note to the discussion in #442?

Copy link
Collaborator

@frivoal frivoal Dec 14, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd rather not do that, at least not without a summary of what you want people to go look for in that giant rambling of ours.

<!--
██████ ██████ ████████ ████ ████████ ████████ ████ ██ ██ ██████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██
Expand Down