Support the high-contrast-adjust media feature in Windows High Contrast mode
Categories
(Core :: CSS Parsing and Computation, enhancement)
Tracking
()
People
(Reporter: alex, Unassigned)
References
(Blocks 1 open bug, )
Details
Attachments
(1 file)
(deleted),
text/html
|
Details |
Comment 2•11 years ago
|
||
Comment 3•11 years ago
|
||
Updated•11 years ago
|
Updated•11 years ago
|
Updated•10 years ago
|
Updated•10 years ago
|
Comment 4•9 years ago
|
||
Comment 5•9 years ago
|
||
Comment 6•9 years ago
|
||
Updated•7 years ago
|
Updated•7 years ago
|
Comment 9•4 years ago
|
||
This has been superseded by the forced-colors media query (see bug 1591204) and/or prefers-contrast media query (see bug 1506364). The latter of these two has been implemented, but as of the time of this comment remains behind a preference.
Comment 10•4 years ago
|
||
@svoisen if what you said is right, the example below should work on Win10 (with high contrast set in the system) and Firefox 81.0 (64 bit)? Because I can't make it work (is it only me?)...
<div class="show-if-high-contrast">weird color box</div>
/*
refs:
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast
>>> documentaion is not clear: syntax uses 'more' and example uses 'high'
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
*/
.show-if-high-contrast{
display: none;
background-color: green;
}
/*I don't know if the or was a good idea in case of conflicts... any thought on that?*/
@media (prefers-contrast: more) or (prefers-contrast: high) or (forced-colors: active) or (-ms-high-contrast: active) {
.show-if-high-contrast {
-ms-high-contrast-adjust: none;
forced-color-adjust: none;
display: block !important;
}
}
here is a testable example:
https://jsfiddle.net/nosferatu79/e2bnyhx7/6/
Comment 11•4 years ago
|
||
(In reply to stefano.nepa from comment #10)
@media (prefers-contrast: more) or (prefers-contrast: high) or (forced-colors: active) or (-ms-high-contrast: active) {
Not svoisen, but not all of these media queries are supported, and if not supported they don't parse, which means the contents of the media query are never used.
If you replace the or
bits with commas, that would help (it won't care if some queries are not supported) but it still doesn't work, because as MDN says and Sean's comment also pointed out, you need to flip the layout.css.prefers-contrast.enabled
pref to enable support for the prefers-contrast
media query. If you flip the pref, your sample works (though not the force-color-adjust
stuff, which AFAICT is not supported anywhere, and not on MDN?)
Comment 12•4 years ago
|
||
Thank you for your quick response @Gijs,
Then if I try to summarize, there is no way to detect (from a default installation of Firefox) that the user has changed the High contrast settings of Windows.
Am I right?
Comment 13•4 years ago
|
||
(In reply to stefano.nepa from comment #12)
Then if I try to summarize, there is no way to detect (from a default installation of Firefox) that the user has changed the High contrast settings of Windows.
Not using the media query, until we ship support for that by default; I suspect it might be possible with some JS.
Sean, is there a tracker bug for shipping the media query support by default? And if so, what blocks doing so?
Comment 14•4 years ago
|
||
(In reply to :Gijs (he/him) from comment #13)
Sean, is there a tracker bug for shipping the media query support by default? And if so, what blocks doing so?
Bug 1656363 tracks enabling prefers-contrast
by default. No other browser, as of yet, supports prefers-contrast
. If we ship now, we'd be the first browser to support it. There were some outstanding spec issues blocking us from shipping, but I believe those are mostly resolved, or very close to resolution. (This is all very fresh, as in the last few weeks.) Morgan will know best.
Comment 15•4 years ago
|
||
(In reply to Sean Voisen (:svoisen) from comment #14)
(In reply to :Gijs (he/him) from comment #13)
Sean, is there a tracker bug for shipping the media query support by default? And if so, what blocks doing so?
Bug 1656363 tracks enabling
prefers-contrast
by default. No other browser, as of yet, supportsprefers-contrast
. If we ship now, we'd be the first browser to support it. There were some outstanding spec issues blocking us from shipping, but I believe those are mostly resolved, or very close to resolution. (This is all very fresh, as in the last few weeks.) Morgan will know best.
Hello! Yeah I talked with Cameron a few weeks ago and we made sure all the outstanding issues were in-discussion and prioritized. Microsoft is pushing for this too, since they're shipping (shipped?) HCM in chromium. AFAIK we're waiting on these github issues before un-pref'ing prefers-contrast completely.
[1] https://github.com/w3c/csswg-drafts/issues/5433
[2] https://github.com/w3c/csswg-drafts/issues/4178
Comment 16•4 years ago
|
||
(In reply to stefano.nepa from comment #12)
Thank you for your quick response @Gijs,
Then if I try to summarize, there is no way to detect (from a default installation of Firefox) that the user has changed the High contrast settings of Windows.
Am I right?
While there's no way for a web developer to do this, firefox as a user-agent is able to detect whether the Windows system-level HCM preference is enabled. We store this value here (https://searchfox.org/mozilla-central/rev/3d53187b90605ccef321c9cadbba762ad06a6381/widget/LookAndFeel.h#58) and read from it when we're choosing which text/background/etc colours to render with.
Comment 17•4 years ago
|
||
(In reply to Morgan Reschenberg [:morgan] from comment #16)
(In reply to stefano.nepa from comment #12)
Thank you for your quick response @Gijs,
Then if I try to summarize, there is no way to detect (from a default installation of Firefox) that the user has changed the High contrast settings of Windows.
Am I right?
While there's no way for a web developer to do this, firefox as a user-agent is able to detect whether the Windows system-level HCM preference is enabled. We store this value here (https://searchfox.org/mozilla-central/rev/3d53187b90605ccef321c9cadbba762ad06a6381/widget/LookAndFeel.h#58) and read from it when we're choosing which text/background/etc colours to render with.
Thank you Morgan for your help,
But to be honest it is a bit obscure to me how to access the LookAndFeel properties. Can you explain to me how to do that?
Thank you in advance for your help!
Updated•2 years ago
|
Description
•