CSS Internet Explorer Hacks High Contrast Mode in Internet Explorer 10 and greater
Example
In Internet Explorer 10+ and Edge, Microsoft provides the -ms-high-contrast media selector to expose the "High Contrast" setting from the browser, which allows the programmer to adjust their site's styles accordingly.
The -ms-high-contrast selector has 3 states: active, black-on-white, and white-on-black. In IE10+ it also had a none state, but that is no longer supported in Edge going forward.
Examples
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
.header{
background: #fff;
color: #000;
}
}
This will change the header background to white and the text color to black when high contrast mode is active and it is in black-on-white mode.
@media screen and (-ms-high-contrast: white-on-black) {
.header{
background: #000;
color: #fff;
}
}
Similar to the first example, but this specifically selects the white-on-black state only, and inverts the header colors to a black background with white text.
More Information:
Microsoft Documentation on -ms-high-contrast
