Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
IE10 hack
/*
#ie10 will only be red in MSIE 10,
both in high contrast (display setting) and default mode
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#ie10 { color: red; }
}
@atk

This comment has been minimized.

Show comment
Hide comment
@atk

atk Nov 6, 2012

With the removal of conditional comments in MSIE 10, the requirement for a way to throw CSS code only at this browser version appeared. The newly introduced -ms-high-contrast media query came to the rescue, but it had to work even in high contrast mode. I tested it in IE7-10, Chrome, Firefox, Opera and Safari.

Owner

atk commented Nov 6, 2012

With the removal of conditional comments in MSIE 10, the requirement for a way to throw CSS code only at this browser version appeared. The newly introduced -ms-high-contrast media query came to the rescue, but it had to work even in high contrast mode. I tested it in IE7-10, Chrome, Firefox, Opera and Safari.

@atk

This comment has been minimized.

Show comment
Hide comment
@atk

atk Nov 6, 2012

WARNING: will probably also work in MSIE11 once that comes around the corner.

Owner

atk commented Nov 6, 2012

WARNING: will probably also work in MSIE11 once that comes around the corner.

@atk

This comment has been minimized.

Show comment
Hide comment
@atk

atk Dec 12, 2012

Update: This does not work in IE10 on Windows 7

Owner

atk commented Dec 12, 2012

Update: This does not work in IE10 on Windows 7

@bugpluss

This comment has been minimized.

Show comment
Hide comment
@bugpluss

bugpluss Jan 22, 2013

Its work for me.
Thanks for share

Its work for me.
Thanks for share

@atk

This comment has been minimized.

Show comment
Hide comment
@atk

atk Mar 5, 2013

It was an early test version of IE10 on Win7. The final version should work.

Owner

atk commented Mar 5, 2013

It was an early test version of IE10 on Win7. The final version should work.

@reyhappen

This comment has been minimized.

Show comment
Hide comment
@reyhappen

reyhappen Nov 29, 2013

It also works on IE11.

It also works on IE11.

@crisgrim

This comment has been minimized.

Show comment
Hide comment
@crisgrim

crisgrim Jun 5, 2014

Ok, IE works, but in Mozilla i try with:

@media only screen and (min--moz-device-pixel-ratio: 1.5) {
style go here
}
@media only screen and (-o-min-device-pixel-ratio: 3/2) {
style go here
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
style go here
}

and doesnt work.. any idea?

crisgrim commented Jun 5, 2014

Ok, IE works, but in Mozilla i try with:

@media only screen and (min--moz-device-pixel-ratio: 1.5) {
style go here
}
@media only screen and (-o-min-device-pixel-ratio: 3/2) {
style go here
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
style go here
}

and doesnt work.. any idea?

@nt1m

This comment has been minimized.

Show comment
Hide comment
@nt1m

nt1m Jun 23, 2014

Another hack :

  • IE 10/11

element, x::-ms-clear {

style here
}

@crisgrim :

  • FFX :

element, x::-moz-placeholder {

style here
}

  • Webkit/blink :

element, x::-webkit-color-swatch {

style here
}

nt1m commented Jun 23, 2014

Another hack :

  • IE 10/11

element, x::-ms-clear {

style here
}

@crisgrim :

  • FFX :

element, x::-moz-placeholder {

style here
}

  • Webkit/blink :

element, x::-webkit-color-swatch {

style here
}

@gopinathsm

This comment has been minimized.

Show comment
Hide comment
@gopinathsm

gopinathsm Aug 11, 2014

Hi Guys,

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)

In this style does not validate in http://www.css-validator.org/validator. How to validate this style in css.
Please give any solution

Thanks

Hi Guys,

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)

In this style does not validate in http://www.css-validator.org/validator. How to validate this style in css.
Please give any solution

Thanks

@atk

This comment has been minimized.

Show comment
Hide comment
@atk

atk Jun 30, 2015

Since vendor extensions are part of the standards and are not supported by this validator, the validator is broken, not the style, which is valid in CSS3. Unfortunately, even the W3C's validator doesn't support vendor extensions for media queries.

Owner

atk commented Jun 30, 2015

Since vendor extensions are part of the standards and are not supported by this validator, the validator is broken, not the style, which is valid in CSS3. Unfortunately, even the W3C's validator doesn't support vendor extensions for media queries.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment