gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): improve explanation of prefers-reduced-motion (#46543)

Browse Source
This commit is contained in:
Lasse Jørgensen
2022-06-19 01:46:27 +02:00
committed by GitHub
parent 258e9d0130
commit cd9a7334a0
1 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
+15 -5
View File
@@ -7,14 +7,24 @@ dashedName: step-66
# --description--
Setting the `scroll-behavior` to `smooth` is preferred by most users. However, some users find this to be too slow, and prefer to have the scrolling happen instantaneously.
Certain types of motion-based animations can cause discomfort for some users. In particular, people with <dfn>vestibular</dfn> disorders have sensitivity to certain motion triggers.
There exists a media rule to set CSS based on the user's browser settings. This media rule is called `prefers-reduced-motion`, and expects one of the following values:
The `@media` at-rule has a media feature called `prefers-reduced-motion` to set CSS based on the user's preferences. It can take one of the following values:
- `reduce`
- `no-preference`
- `reduce`
- `no-preference`
Wrap the appropriate rule within a `prefers-reduced-motion` media rule such that a `scroll-behavior` of `smooth` is only set if the user's browser setting is `no-preference`.
```CSS
@media (feature: value) {
selector {
styles
}
}
```
---
Wrap the style rule that sets `scroll-behavior: smooth` within an `@media` at-rule with the media feature `prefers-reduced-motion` having `no-preference` set as the value.
# --hints--