Page 191 - CSS

Chapter 31: Internet Explorer Hacks

Remarks

These “hacks” may be used to target a specific browser/client. This may be used to work around
browser rendering differences by applying styles in one of those wrappers listed above.

Examples

High Contrast Mode in Internet Explorer 10 and greater

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

Internet Explorer 6 & Internet Explorer 7 only

https://riptutorial.com/ 169