How to Inspect CSS @media (prefers-reduced-data) in Safari Web Inspector

Mobile users roaming internationally, traveling on commuter trains with spotty coverage, or operating under metered cellular bandwidth frequently enable "Low Data Mode" on their devices. When Low Data Mode is active, operating systems signal applications to minimize cellular consumption by deferring non-essential background synchronization and disabling high-bandwidth media. The CSS prefers-reduced-data media feature enables web developers to detect this user preference declaratively inside stylesheets. Safari Web Inspector provides specialized media feature simulation controls to audit low-bandwidth asset substitution live.

Understanding prefers-reduced-data Values

The prefers-reduced-data media feature detects bandwidth conservation modes:

• no-preference: The user has not enabled data-saving modes. The browser downloads standard high-resolution graphics, custom web fonts, and animated banners.
• reduce: The user has activated "Low Data Mode" in iOS or macOS network settings. Stylesheets should suppress autoplay videos, replace high-DPI raster backgrounds with lightweight vector patterns or solid colors, and disable custom font preloading.

Configuring Bandwidth-Optimised Responsive Styles

Author clean styles that adapt payload weight based on data preferences:

/* Standard high-fidelity hero banner */
.hero-banner {
    background-image: url("/images/hero-4k.webp");
    background-size: cover;
    background-position: center;
    min-height: 480px;
}

/* Bandwidth-saving adaptation for Low Data Mode */
@media (prefers-reduced-data: reduce) {
    .hero-banner {
        /* Substitute multi-megabyte image with an elegant, zero-byte CSS gradient */
        background-image: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
        min-height: 320px;
    }

    /* Suppress decorative background animations and videos */
    .decorative-video, .particle-canvas {
        display: none !important;
    }
}

Inspecting Low Data Adaptations in Safari Web Inspector

To inspect and audit prefers-reduced-data live using Safari Web Inspector on macOS:

1. Open Safari and load your web page.
2. Right-click the hero banner or background container and select Inspect Element.
3. In the Elements panel, inspect the Styles sidebar. Safari highlights the active media query rules.
4. Locate the Emulate Media Features toolbar icon (the paintbrush icon) in Web Inspector.
5. Find the Prefers Reduced Data dropdown and select reduce.
6. Observe how Safari instantly updates the rendered canvas: the heavy background graphic is suppressed, and the lightweight CSS gradient takes its place.
7. Switch to the Network tab, clear the log, and refresh the page to verify that high-resolution images are omitted from the network waterfall.

Testing Low Data Mode on iOS Devices

To verify end-to-end integration on physical Apple hardware:

• On an iPhone, open Settings > Cellular > Cellular Data Options > Data Mode, and select Low Data Mode.
• Connect the iPhone to your Mac via USB and inspect the live Safari tab under the Develop menu.
• Confirm that Safari on iOS natively triggers the prefers-reduced-data: reduce media block without requiring manual inspector emulation.