Learn Accessibility by Building a Quiz - Step 67

HTML-CSS
1

Tell us what’s happening:

i am not getting how to use @ motion property …

Your code so far

<!-- file: index.html -->


/* file: styles.css */
/* User Editable Region */

@media (feature: value) {
  
    * {
  scroll-behavior: smooth;
  prefers-reduced-motion:no-preference; 
}
  }


/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 Edg/127.0.0.0

Challenge Information:

Learn Accessibility by Building a Quiz - Step 67

2

Hi there,

This is the syntax of a media query:

@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.

What the instruction meant is:

  • feature here is prefers-reduced-motion
  • value here is no-preference

And

  selector {
    styles
  }

is what provided in the default given code:

* {
  scroll-behavior: smooth;
}
1 Like
3

Hi there!

You need to use the above property and value within media query condition ()