add Media Queries Level 5: prefers-reduced-motion, prefers-contrast, …

[tantek]

…prefers-color-scheme as important

Add a cluster of related Media Queries Level 5 features: prefers-reduced-motion, prefers-contrast, prefers-color-scheme as important

[martinthomson]

cc @jcsteh for a second opinion. But this looks good to me.

[jcsteh]

Looks good to me also. Thanks.

[annevk]

This would close #393.

One thing I've been wondering with respect to exposing this kind of information to pages is privacy and to some extent abuse. And https://www.w3.org/TR/mediaqueries-5/#mq-prefers-security is awfully empty both with regards to risks and mitigation options.

What prevents a site upon seeing a request for reducing motion from increasing it?

And these signals coupled with others would also allow for targeted advertising and other kinds of manipulation.

[CanadaHonk]

As an update/bump: prefers-reduced-motion has been shipped since Firefox 63¹, prefers-color-scheme since Firefox 67² and prefers-contrast since Firefox 101³.

This PR (and the issue) is missing some more media queries though, not sure if intentional or just added later. Specifically:

• prefers-reduced-transparency - No browser supports yet (no MDN page)
• forced-colors - Firefox has shipped since 79, Chrome since 89⁴
• prefers-reduced-data - Not in Firefox, Chrome has behind experimental WPF since 85⁵

Footnotes

1. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#browser_compatibility ↩

2. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#browser_compatibility ↩

3. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast#browser_compatibility ↩

4. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors#browser_compatibility ↩

5. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-data#browser_compatibility ↩

[lukewarlow]

• prefers-reduced-transparency - No browser supports yet (no MDN page)

Fyi I've raised a separate issue to get a position on this #851

Also similarly I've raised an issue regarding inverted-colors #853