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 |
User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.72 Safari/537.36 Steps to reproduce: 1. Switch Windows to a High Contrast mode. 2. Open a page that has a background-color and high-contrast-adjust: none properties set on an element (http://jsbin.com/ewOXAQIle/1/edit or attachment) This CSS property is available prefixed in Internet Explorer, -ms-high-contrast-adjust. It is useful when creating high-contrast compatible sites that contain mandatory color information (e.g. a color picker widget). Actual results: The background color is not visible. Expected results: The background color should be visible.
Comment 2•11 years ago
|
||
Interesting. I'll try moving this to CSS for now and ping some people. This property hasn't come up in my circles...
![]() |
||
Updated•11 years ago
|
Updated•11 years ago
|
Updated•10 years ago
|
Updated•10 years ago
|
Comment 4•9 years ago
|
||
(In reply to David Bolter [:davidb] from comment #3) > Steve, Isaac, what is the word on the street WRT ms-high-contrast-adjust? Steve, can you comment on this?
Comment 5•9 years ago
|
||
Gijs, word on the street looks like it is still under discussion and may be rolled into other CSS level 4 media query. refer to https://drafts.csswg.org/mediaqueries-4/#issue-4d2e4020
Comment 6•9 years ago
|
||
although as implemnted in IE/EDGE it looks like it is a useful feature for overriding MS high contrast mode
Updated•7 years ago
|
Updated•7 years ago
|
@Gingerbread Man, @steve faulkner, It's been 5 years and still this bug is not fixed. Please reply with current status of this bug :) Thanks.
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
•