Open Bug 957988 Opened 11 years ago Updated 2 years ago

Support the high-contrast-adjust media feature in Windows High Contrast mode

Categories

(Core :: CSS Parsing and Computation, enhancement)

x86_64
Windows 8.1
enhancement

Tracking

()

People

(Reporter: alex, Unassigned)

References

(Blocks 1 open bug, )

Details

Attachments

(1 file)

Attached file high-contrast-adjust.html (deleted) β€”
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.
David, can you help move this along?
Flags: needinfo?(dbolter)
Interesting. I'll try moving this to CSS for now and ping some people. This property hasn't come up in my circles...
Status: UNCONFIRMED → NEW
Component: Untriaged → DOM: CSS Object Model
Ever confirmed: true
Flags: needinfo?(dbolter)
Product: Firefox → Core
Steve, Isaac, what is the word on the street WRT ms-high-contrast-adjust?
Component: DOM: CSS Object Model → CSS Parsing and Computation
Summary: Support the high-contrast-adjust CSS property in Windows High Contrast mode → Support the high-contrast-adjust media feature in Windows High Contrast mode
Severity: normal → enhancement
(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?
Flags: needinfo?(faulkner.steve)
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
Flags: needinfo?(faulkner.steve)
although as implemnted in IE/EDGE it looks like it is a useful feature for overriding MS high contrast mode
@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.

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.

@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/

(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?)

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?

(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?

Flags: needinfo?(svoisen)

(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.

Flags: needinfo?(svoisen) → needinfo?(mreschenberg)

(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, 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.

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

Flags: needinfo?(mreschenberg)

(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.

(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!

Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: