Support the prefers-reduced-data media query [🟥 awaiting any support]

[chrisblakley]

Browsers are beginning to implement an option that lets users "prefer" less data usage. Nebula can check this in a few places, but the first that comes to mind is predictive loading and font files.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-data https://caniuse.com/mdn-css_at-rules_media_prefers-reduced-data

Ex for loading font files:

<link rel="preload" href="fonts/montserrat-regular.woff2" as="font" media="(prefers-reduced-data: no-preference)" crossorigin>

Looks like there is no browser support yet, so it'll be a while before this gets implemented in Nebula.

[chrisblakley]

This is similar to the Save Data header, so I want to do a little more research on this. Does the prefers-reduced-data media query simply pull from the Save Data preference in browser? If so we can just implement the save data check for JavaScript and wait for this media query for things like fonts...

1537

And as a further note, the predictive fetch functionality already checks for the Save Data preference.

//If Save Data is supported and Save Data is requested don't prefetch
if ( nebula.has(navigator, 'connection.saveData') ){ //@todo "Nebula" 0: Replace with optional chaining
    if ( navigator.connection.saveData ){ //@todo "Nebula" 0: Use optional chaining
        return false;
    }
}

[chrisblakley]

As of July 2023 no browser support at all yet.

https://caniuse.com/mdn-css_at-rules_media_prefers-reduced-data