Prefix @media (prefers-contrast) with -ms-prefers-contrast

[felixfbecker]

The new @media (prefers-contrast) media query allows devs to detect whether the user has high contrast active. It's supported in Firefox nightly, but no other browsers.

IE and Edge on Windows however have supported -ms-prefers-contrast for a long time. It would be great if autoprefixer could autoprefix prefers-contrast with -ms- so that visually impaired IE/Edge users on Windows at least get the benefits (which has a lot of users).

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast
https://caniuse.com/#feat=mdn-css_at-rules_media_prefers-contrast
https://docs.microsoft.com/en-us/previous-versions/hh771830(v=vs.85)
https://hacks.mozilla.org/2020/07/adding-prefers-contrast-to-firefox/

[ai]

I like the idea. Do we have Can I Use page for it?

[felixfbecker]

Yep, added above: https://caniuse.com/#feat=mdn-css_at-rules_media_prefers-contrast
It doesn't include Firefox nightly yet though, that is only since last month

[ai]

Great. Autoprefixer now in migration to PostCSS 8 process.

When I finish it, I will try to add this feature.

[coliff]

hey - IE and Edge Legacy support -ms-high-contrast - this is very different to the prefers-contrast media query. In fact. Microsoft have stated recently that the replacement for the high-contrast media query will be a new forced-colors media query.

https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
https://sarahmhigley.com/writing/whcm-quick-tips/

I don't think it'd be a good idea for Autoprefixer to automatically add styles from @media (prefers-contrast) to Microsoft's Legacy -ms-high-contrast media media query.

[ai]

Good point. Do we have contrarguments or should we close the issue?

[ai]

We can use postcss-preset-env or a separate PostCSS plugin for non-ideal polyfills.

[felixfbecker]

@coliff that's not what I got from reading that article you linked. As I understand it, semantically forced-colors matches a superset of prefers-contrast. I.e. if Windows has high contrast mode on, it will always match (forced-colors: active), but it unless the user customized the colors with low-contrast colors, it will also match (prefers-contrast: more). There may be other forced-colors themes though, that are not "high contrast", that would still match (forced-colors: active) but not (prefers-contrast: more). So I would disagree with the statement that -ms-high-contrast is "very different" from prefers-contrast.

The forced-colors media query, for detecting an active forced color mode. At time of writing, this is essentially a match for the high contrast feature on Windows, but there could potentially be other similar forced color modes in other operating systems in the future.

Modern implementations will also match prefers-color-scheme and prefers-contrast media queries based on the background color (light or dark) and contrast level of the user’s forced color scheme.

At least it would seem correct though to transform forced-colors to -ms-high-contrast since their behavior is identical on Windows as I understand it. Just needs logic to contract combined queries with prefers-color-scheme to black-on-white/white-on-black too.

[ai]

@felixfbecker what do you think about this section?