Stuck at Prefers-Reduced-Motion (Accessibility html/css step 66)

HTML-CSS
1

Tell us what’s happening:
The assignment is: 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.

I have never heard of this before. I have no idea what it is and how to use it.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

@media {
  prefers-reduced-motion: no-preference;
}

* {
  scroll-behavior: smooth;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:101.0) Gecko/20100101 Firefox/101.0

Challenge: Step 66

Link to the challenge:

2

I just solved it by going to the next step. The right code was in there. Normally I don’t like doing that but when I saw the required code let’s just say I wouldn’t be able to solve it myself.

3

I agree, it isn’t explained well, if at all.

  1. You need to know that a “media rule” is @media

  2. You need to know the @media rule, likely only known from media queries, also can take other rules.

  3. You somehow need to know the syntax of the condition prefers-reduced-motion: no-preference with no explanation. Or just fail it and get it printed for you in the hints instead of having it explained in the challenge text.

There is an issue with it as well.

4

Era più facile del previsto

@media (prefers-reduced-motion: no-preference) {

  • {
    scroll-behavior: smooth;
    }
    }
2 Likes
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.