Reduced motion support in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply Bootstrap's reduced motion utility class to disable animations.

Bootsrap

<div class="[1]">Content with reduced motion</div>

Drag options to blanks, or click blank then click option'

Aanimate__animated

Bmotion-reduce

Cfade

Dno-animation

Attempts:

3 left

💡 Hint

Common Mistakes

Using animation classes like 'animate__animated' instead of motion reduction classes.

Using non-existent classes like 'no-animation'.

The motion-reduce class in Bootstrap applies styles to reduce motion for users who prefer less animation.

2fill in blank

medium

Complete the CSS media query to detect if the user prefers reduced motion.

Bootsrap

@media (prefers-[1]: reduce) {
  .animated-element {
    animation: none !important;
  }
}

Drag options to blanks, or click blank then click option'

Areduce-motion

Banimation

Cmotion-reduce

Dmotion

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'animation' instead of 'motion' in the media query.

Using incorrect feature names like 'motion-reduce'.

The CSS media feature prefers-motion detects if the user prefers reduced motion.

3fill in blank

hard

Fix the error in the Bootstrap class to properly disable animations for reduced motion users.

Bootsrap

<div class="[1]">No animation here</div>

Drag options to blanks, or click blank then click option'

Amotion-reduce

Bmotion-safe

Cno-motion

Danimation-none

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'motion-safe' which enables animations instead of disabling them.

Using non-existent classes like 'no-motion' or 'animation-none'.

The correct Bootstrap class to disable animations respecting reduced motion is motion-reduce.

4fill in blank

hard

Fill both blanks to create a CSS rule that disables transitions when the user prefers reduced motion.

Bootsrap

@media (prefers-[1]: reduce) {
  .btn [2] {
    transition: none !important;
  }
}

Drag options to blanks, or click blank then click option'

Amotion

B:hover

C:focus

D:active

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect media feature names like 'animation'.

Choosing pseudo-classes that are less common for hover effects like ':focus' or ':active'.

The media query uses prefers-motion to detect reduced motion preference, and the :hover pseudo-class targets button hover states to disable transitions.

5fill in blank

hard

Fill all three blanks to create a Bootstrap utility class that disables animations on elements when reduced motion is preferred.

Bootsrap

.[1] {
  @media (prefers-[2]: reduce) {
    animation-[3]: none !important;
  }
}

Drag options to blanks, or click blank then click option'

Ano-animation

Bmotion

Cduration

Dmotion-reduce

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'motion-reduce' as a class name instead of a media feature.

Using 'animation' instead of 'animation-duration' property.

The class no-animation is a custom utility name, the media feature is motion, and the CSS property to disable animation time is animation-duration.

Practice

1. What is the main purpose of using @media (prefers-reduced-motion: reduce) in Bootstrap?

easy

A. To increase the speed of all animations on the page

B. To detect if the user prefers fewer animations for accessibility

C. To add more animations for visual appeal

D. To change the color scheme based on user preference

Solution

1. Step 1: Understand the media query purpose

   The media query @media (prefers-reduced-motion: reduce) checks if the user has requested reduced motion in their system settings.

2. Step 2: Connect to accessibility goals

   This helps improve accessibility by reducing or disabling animations that might cause discomfort or distraction.

3. Final Answer:

   To detect if the user prefers fewer animations for accessibility -> Option B

4. Quick Check:

   Reduced motion media query = detect user preference [OK]

Hint: Look for user preference detection in media queries [OK]

Common Mistakes:

• Thinking it speeds up animations
• Assuming it adds more animations
• Confusing it with color scheme changes

2. Which of the following is the correct syntax to start a CSS block that applies styles only when the user prefers reduced motion?

easy

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

B. @media (motion-preference: reduce) { }

C. @media (prefers-reduced-motion: reduce) { }

D. @media (prefers-motion: reduce) { }

Solution

1. Step 1: Recall the exact media query syntax

   The correct media query to detect reduced motion preference is @media (prefers-reduced-motion: reduce).

2. Step 2: Compare options

   @media (prefers-reduced-motion: reduce) { } matches the exact syntax. Other options have incorrect property names or values.

3. Final Answer:

   @media (prefers-reduced-motion: reduce) { } -> Option C

4. Quick Check:

   Correct media query syntax = @media (prefers-reduced-motion: reduce) { } [OK]

Hint: Remember exact media feature name: prefers-reduced-motion [OK]

Common Mistakes:

• Using wrong media feature names
• Swapping 'reduce' with 'no-preference'
• Missing parentheses or braces

3. Given the CSS below, what will happen when a user has 'prefers-reduced-motion: reduce' enabled?

div {
  animation: slide 2s infinite;
}
@media (prefers-reduced-motion: reduce) {
  div {
    animation: none;
  }
}

medium

A. The div will have no animation and stay still

B. The div will keep sliding with animation

C. The div will slide faster than normal

D. The div will disappear from the page

Solution

1. Step 1: Understand the base animation

   The div normally has a sliding animation that repeats infinitely.

2. Step 2: Analyze the media query effect

   When the user prefers reduced motion, the media query sets animation: none; on the div, stopping the animation.

3. Final Answer:

   The div will have no animation and stay still -> Option A

4. Quick Check:

   Reduced motion disables animations = The div will have no animation and stay still [OK]

Hint: Check if animation is set to none inside reduced motion query [OK]

Common Mistakes:

• Assuming animation speeds up
• Thinking animation continues unchanged
• Believing element disappears

4. You wrote this CSS but animations still run for users who prefer reduced motion:

@media prefers-reduced-motion: reduce {
  .btn {
    animation: none;
  }
}

What is the error?

medium

A. Missing parentheses around the media feature

B. Wrong selector used for buttons

C. Animation property cannot be set to none

D. Media query should be inside a CSS class

Solution

1. Step 1: Check media query syntax

   The media query must have parentheses around the feature: @media (prefers-reduced-motion: reduce).

2. Step 2: Identify the missing parentheses

   The given code misses parentheses, so the media query is invalid and ignored by browsers.

3. Final Answer:

   Missing parentheses around the media feature -> Option A

4. Quick Check:

   Media queries require parentheses [OK]

Hint: Always wrap media features in parentheses [OK]

Common Mistakes:

• Forgetting parentheses in media queries
• Using wrong CSS selectors
• Thinking animation:none is invalid

5. You want to improve accessibility by disabling Bootstrap's fade animations for users who prefer reduced motion. Which CSS snippet correctly achieves this?

hard

A. .fade { animation: none; }

B. .fade { animation-duration: 0s; }

C. @media (prefers-reduced-motion: no-preference) { .fade { animation: none; } }

D. @media (prefers-reduced-motion: reduce) { .fade { transition: none !important; animation: none !important; } }

Solution

1. Step 1: Use the correct media query for reduced motion

   Only styles inside @media (prefers-reduced-motion: reduce) apply when user requests reduced motion.

2. Step 2: Disable animations and transitions on .fade

   Setting animation: none !important; and transition: none !important; ensures Bootstrap's fade animations are turned off.

3. Step 3: Check other options

   .fade { animation-duration: 0s; } disables animation always, ignoring user preference. @media (prefers-reduced-motion: no-preference) { .fade { animation: none; } } uses wrong media query value. .fade { animation: none; } disables animation always, not respecting user choice.

4. Final Answer:

   @media (prefers-reduced-motion: reduce) { .fade { transition: none !important; animation: none !important; } } -> Option D

5. Quick Check:

   Disable animations inside reduced motion media query [OK]

Hint: Disable animations only inside reduced motion media query [OK]

Common Mistakes:

• Disabling animations globally ignoring user preference
• Using wrong media query values
• Not disabling both animation and transition