prefers-reduced-motion Adjustment Pattern
Generate preference query without disabling necessary information or imposing a zero-duration policy. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
Reduced-motion media features expose a user's declared motion preference.
Reduced-motion media features expose a user's declared motion preference.1
A query pattern does not itself change an animation or diagnose sensitivity. Use prefers-reduced-motion Adjustment Pattern to look up a supported term.
When to use prefers-reduced-motion Adjustment Pattern
Use prefers-reduced-motion Adjustment Pattern to look up a supported term. Choose the exact supported token from the table; preserve its punctuation and capitalization.
How to use prefers-reduced-motion Adjustment Pattern and understand its results
- Choose the exact supported token from the table; preserve its punctuation and capitalization.
- Enter Motion preference using the field table and validation rules below, then run the tool.
- Read Meaning and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| motionPreference | Motion preference | string | Required; constraints below |
Enter one of the exact supported motionPreference tokens in the table below. The implementation performs a case-sensitive lookup and returns the stored meaning without interpreting a stylesheet, audio recording or performance. Unsupported tokens, added whitespace and alternate capitalization are input errors. The entries describe a bounded vocabulary rather than every valid value in the wider topic.
meaning = storedTable[exactSupportedToken] Field order, units and branch conditions follow the implementation explanation above.
| Exact supported token | Stored meaning |
|---|---|
| reduce | @media (prefers-reduced-motion: reduce) |
| no-preference | @media (prefers-reduced-motion: no-preference) |
| Output field | Meaning | Value type |
|---|---|---|
| meaning | Stored explanation for the exact supported token. | string |
{
"input": {
"motionPreference": "reduce"
},
"output": {
"meaning": "@media (prefers-reduced-motion: reduce)"
}
}Limitations and assumptions
A query pattern does not itself change an animation or diagnose sensitivity. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use scroll-behavior Smooth Duration Heuristic for a related task: A distance-based scrolling duration is an author-selected heuristic.
Use Animation Loop Total Runtime for a related task: Finite animation runtime depends on duration, iterations and delay.
References
Similar or alternative tools
- scroll-behavior Smooth Duration Heuristic
A distance-based scrolling duration is an author-selected heuristic.
- Animation Loop Total Runtime
Finite animation runtime depends on duration, iterations and delay.