When no reduced motion is requested, make #text teal.
Acceptance criteria
- 1.When no reduced motion is requested, make #text teal.
CSS Tutorial · CSS Responsive Design
These 10 tasks go with the Preference Media Queries chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “Respect motion, contrast, color-scheme, transparency, and input preferences exposed by the user agent. The examples respond to reduced motion, increased contrast, color schemes, transparency, hover capability, and coarse or fine pointers.” .
1.Animate only when welcomeexercise · easy · 10 min
When no reduced motion is requested, make #text teal.
Passes when: When no reduced motion is requested, make #text teal.
2.Respond to the colour schemeexercise · easy · 10 min · practice plan
In a light scheme, make #text navy.
Passes when: In a light scheme, make #text navy.
3.Respond to contrastexercise · easy · 10 min · practice plan
When no special contrast is requested, make #text olive.
Passes when: When no special contrast is requested, make #text olive.
4.Keep the motion guardedexercise · easy · 10 min · practice plan
#box animates for 0.3s; only remove that under reduced motion.
Passes when: #box animates for 0.3s; only remove that under reduced motion.
5.Combine two preferencesexercise · medium · 10 min · practice plan
Light scheme navy text, and a 0.3s animation kept outside the reduce branch.
Passes when: Light scheme navy text, and a 0.3s animation kept outside the reduce branch.
6.Fix the wrong motion branchbug fix · easy · 8 min
This styling is for people who have not asked for reduced motion.
Passes when: This styling is for people who have not asked for reduced motion.
7.Fix the wrong colour schemebug fix · easy · 8 min · practice plan
This rule is meant for the light scheme.
Passes when: This rule is meant for the light scheme.
8.Fix the missing prefixbug fix · easy · 8 min · practice plan
The feature is prefers-contrast.
Passes when: The feature is prefers-contrast.
9.Fix the motion removed for everyonebug fix · easy · 8 min · practice plan
Stripping the animation unconditionally ignores people who want it.
Passes when: Stripping the animation unconditionally ignores people who want it.
10.Fix the misspelled valuebug fix · easy · 8 min · practice plan
The value is no-preference.
Passes when: The value is no-preference.
Between them these tasks cover prefers-reduced-motion, prefers-color-scheme and prefers-contrast.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.