How to Inspect and Debug CSS prefers-reduced-motion Media Queries in Safari Web Inspector

Modern web accessibility standards mandate that users prone to vestibular disorders, motion sickness, or cognitive distractions should have the option to minimise non-essential screen movement. The CSS media query @media (prefers-reduced-motion) enables responsive styling that suppresses or simplifies transitions, transforms, parallax scrolling, and autoplaying animations when a user enables motion reduction in their operating system. Testing these responsive styles in Safari has historically required switching back and forth into macOS System Settings. Fortunately, Safari Web Inspector provides integrated media query emulation tools that allow developers to simulate and debug reduced-motion behaviour directly in real time.

Understanding the prefers-reduced-motion Media Feature

The prefers-reduced-motion media feature queries the user agent to determine whether the user has requested that the system minimise the amount of animation or motion it uses. It evaluates to two distinct states:

• no-preference: The user has not indicated a preference, permitting standard interface transitions, complex physics simulations, and keyframe animations.
• reduce: The user has enabled an operating system-level accessibility setting indicating that motion should be avoided or drastically curtailed.

A typical progressive enhancement CSS block looks like the following:

/* Default animation for standard navigation drawer */
.drawer {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Accessibility override when motion reduction is requested */
@media (prefers-reduced-motion: reduce) {
    .drawer {
        transition: opacity 0.15s ease-out;
        transform: none !important;
    }
}

Enabling the Develop Menu and Web Inspector in Safari

Before debugging accessibility media features, ensure the developer toolset is active in Safari:

1. Launch Safari and open Settings (or press Cmd + ,).
2. Navigate to the Advanced tab.
3. Check the box labelled Show features for web developers (in macOS Sonoma and newer) or Show Develop menu in menu bar.
4. Close Settings. The Develop menu will now appear in the macOS top menu bar.
5. Right-click anywhere on the webpage and select Inspect Element, or press Cmd + Option + I.

Simulating prefers-reduced-motion in Safari Web Inspector

Safari Web Inspector includes a dedicated Device Settings and Media Emulation toolbar designed specifically for rapid testing of accessibility and display modes.

Method 1: Using the Element Tab Media Overrides

1. Within Safari Web Inspector, select the Elements tab.
2. In the upper navigation bar of the Elements pane, locate the media query toggle icons next to the element breadcrumbs.
3. Look for the icon resembling a bouncing circle or motion path (labeled Prefers Reduced Motion).
4. Click the toggle button to cycle between:
   • Default: Follows the macOS system preference.
   • Reduce: Forces the evaluation of @media (prefers-reduced-motion: reduce).
   • No Preference: Forces the evaluation of @media (prefers-reduced-motion: no-preference).

Method 2: Using the Develop Menu Media Emulation

Alternatively, you can simulate motion preferences globally for the active tab via the top application menu:

1. Click Develop in the macOS menu bar.
2. Select Media Features from the dropdown menu.
3. Hover over Prefers Reduced Motion and choose Reduce.

Inspecting Computed Styles and CSS Rule Matching

Once reduced motion emulation is active, inspect target DOM elements in the Styles sidebar to verify stylesheet precedence:

1. Select the animated DOM node in the DOM tree.
2. In the right-hand Styles panel, examine the matched rules. When emulation is working, the selector nested inside @media (prefers-reduced-motion: reduce) will appear active, while previous transition and animation rules will be struck through.
3. Switch to the Computed tab to verify that properties such as animation-duration, transition-duration, and transform reflect the reduced values.

Auditing Animations with the Timelines Tab

To confirm that continuous or infinite JavaScript/CSS animations cease firing when reduced motion is requested:

1. Select the Timelines tab in Web Inspector.
2. Check the Rendering & Frames and Layout & Styles recording options.
3. Click the Record button (red circle) and interact with the interface.
4. Ensure that frame budgets are not being consumed by unnecessary layout recalculations or RAF (RequestAnimationFrame) loops during the reduced-motion state.

By leveraging Safari Web Inspector’s built-in media query emulation, web developers and quality engineers can rigorously validate accessibility compliance, ensuring that users with vestibular sensitivities experience smooth, inclusive, and motion-safe digital interactions.