How to write a CSS hack for IE 11? [duplicate]
Use a combination of Microsoft specific CSS rules to filter IE11:
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>
Filters such as this work because of the following:
When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>References
- How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?
- Microsoft Extensions to CSS
- CSS 2.1:Rule sets, declaration blocks, and selectors
In the light of the evolving thread, I have updated the below:
IE 11 (and above..)
_:-ms-fullscreen, :root .foo { property:value; }
IE 10 and above
_:-ms-lang(x), .foo { property:value; }
or
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.foo{property:value;}
}
IE 10 only
_:-ms-lang(x), .foo { property:value\9; }
IE 9 and above
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
//.foo CSS
.foo{property:value;}
}
IE 9 and 10
@media screen and (min-width:0\0) {
.foo /* backslash-9 removes.foo & old Safari 4 */
}
IE 9 only
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
//.foo CSS
.foo{property:value;}
}
IE 8,9 and 10
@media screen\0 {
.foo {property:value;}
}
IE 8 Standards Mode Only
.foo { property /*\**/: value\9 }
IE 8
html>/**/body .foo {property:value;}
or
@media \0screen {
.foo {property:value;}
}
IE 7
*+html .foo {property:value;}
or
*:first-child+html .foo {property:value;}
IE 6, 7 and 8
@media \0screen\,screen\9 {
.foo {property:value;}
}
IE 6 and 7
@media screen\9 {
.foo {property:value;}
}
or
.foo { *property:value;}
or
.foo { #property:value;}
IE 6, 7 and 8
@media \0screen\,screen\9 {
.foo {property:value;}
}
IE 6
* html .foo {property:value;}
or
.foo { _property:value;}
Javascript alternatives
Modernizr
Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element
User agent selection
Javascript:
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
Adds (e.g) the below to html element:
data-useragent='Mozilla/5.0 (compatible; M.foo 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'
Allowing very targetted CSS selectors, e.g.:
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
Footnote
If possible, identify and fix any issue(s) without hacks. Support progressive enhancement and graceful degradation. However, this is an 'ideal world' scenario not always obtainable, as such- the above should help provide some good options.
Attribution / Essential Reading
- Jeff Clayton | Browserhacks.com
- Keith Clarke
- Paul Irish
- Web Devout
- The Spanner
Here is a two steps solution here is a hack to IE10 and 11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
because IE10 and IE11 Supports -ms-high-cotrast you can take the advantage of this to target this two browsers
and if you want to exclude the IE10 from this you must create a IE10 specific code as follow it's using the user agent trick you must add this Javascript
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
and this HTML tag
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
and now you can write your CSS code like this
html[data-useragent*='MSIE 10.0'] h1 {
color: blue;
}
for more information please refer to this websites,wil tutorail, Chris Tutorial
And if you want to target IE11 and later,here is what I've found:
_:-ms-fullscreen, :root .selector {}
Here is a great resource for getting more information: browserhacks.com
I have been writing these and contributing them to BrowserHacks.com since the fall of 2013 -- this one I wrote is very simple and only supported by IE 11.
<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>
and of course the div...
<div class="msie11">
This is an Internet Explorer 11 CSS Hack
<div>
So the text shows up in blue with internet explorer 11. Have fun with it.
-
More IE and other browser CSS hacks on my live test site here:
UPDATED: http://browserstrangeness.bitbucket.io/css_hacks.html
MIRROR: http://browserstrangeness.github.io/css_hacks.html
(If you are also looking for MS Edge CSS Hacks, that is where to go.)