javascripthtmlcssinternet-explorerhigh-contrast

-ms-high-contrast-adjust equivalent in IE9

One of our CSS files uses -ms-high-contrast-adjust: none to make sure some background features show up even under high contrast mode. It works fine on IE10 and IE11. Now we're trying to port the same CSS to IE9, and obviously it's not supported.

What's the equivalent of the -ms-high-contrast-*** property under IE9? Is there some other way to trick the browser to not change features with the "high contrast mode" setting?

Solution

  • There ain't an equivalent.

    Remarks
    The -ms-high-contrast media feature was introduced in Windows 8.

    It's for ie10.

    You can test it with media-queries like:

    @media screen and (-ms-high-contrast: active) {/* ... */}
@media screen and (-ms-high-contrast: black-on-white) { /* */ }
@media screen and (-ms-high-contrast: white-on-black) { /* */ }

    http://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx

    Some developers use it to target IE10 with media queries :

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /* i-love-ie */
}

    PS, this is kind of freaky, you want a browser to force an OS to display in a specific way, or display in a specific way over the OS.

    [HOLD ON]

    i JUST found this article from Steve Faulkner : http://blog.paciellogroup.com/2010/01/high-contrast-proof-css-sprites/

    CSS sprites using the before: pseudo element

    An alternative to implementing CSS sprites using the traditonal background-image method is available and it resolves the issue of images not being displayed in high contrast mode. This alternative method makes use of the CSS before: pseudo element (note: the after: pseudo element could also be used). Example:

    Link with a home icon and text with default display colors. Link with a home icon and text with windows high contrast colors.

    CSS

    span.test1:before {
margin-right: -10px;
content: url(icons.png);
position:relative;
left:-2px;
top:-109px;
}

span.test1 {width:17px;
height:18px;
display:inline-block;
overflow:hidden;}

    HTML

    <a href="#"><span class="test1"></span>Home</a>

    I have no time to test it. Give it a try and come back to us so i can 'correct' this answer if needed.