Skip to content

Instantly share code, notes, and snippets.

@atk
Created November 6, 2012 14:43
Show Gist options
  • Save atk/4025104 to your computer and use it in GitHub Desktop.
Save atk/4025104 to your computer and use it in GitHub Desktop.
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
Copy link
Author

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
Copy link
Author

atk commented Nov 6, 2012

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

@atk
Copy link
Author

atk commented Dec 12, 2012

Update: This does not work in IE10 on Windows 7

@bugpluss
Copy link

Its work for me.
Thanks for share

@atk
Copy link
Author

atk commented Mar 5, 2013

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

@reyhappen
Copy link

It also works on IE11.

@crisgrim
Copy link

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
Copy link

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
Copy link

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
Copy link
Author

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