How to define specific CSS rules for IE9 alone?

Question

Friends, please help me in defining specific css rule for IE9? For example like this

/* IE 6 fix */
* html .twit-post .delete_note a { background-position-y: 2px; }
* html .twit-post .delete_note a:hover { background-position-y: -14px; }

Answer 1

Note the accepted answer also targets IE10. As such, for a more complete list:

IE 6

* html .ie6 {property:value;} 

or

.ie6 { _property:value;} 

IE 7

*+html .ie7 {property:value;} 

or

*:first-child+html .ie7 {property:value;} 

IE 6 and 7

@media screen\9 {     .ie67 {property:value;} } 

or

.ie67 { *property:value;} 

or

.ie67 { #property:value;} 

IE 6, 7 and 8

@media \0screen\,screen\9 {     .ie678 {property:value;} } 

IE 8

html>/**/body .ie8 {property:value;} 

or

@media \0screen {     .ie8 {property:value;} } 

IE 8 Standards Mode Only

.ie8 { property /*\**/: value\9 } 

IE 8,9 and 10

@media screen\0 {     .ie8910 {property:value;} } 

IE 9 only

@media screen and (min-width:0) and (min-resolution: .001dpcm) {   // IE9 CSS  .ie9{property:value;} } 

IE 9 and above

@media screen and (min-width:0) and (min-resolution: +72dpi) {   // IE9+ CSS   .ie9up{property:value;} } 

IE 9 and 10

@media screen and (min-width:0) {     .ie910{property:value;} } 

IE 10 only

_:-ms-lang(x), .ie10 { property:value\9; } 

IE 10 and above

_:-ms-lang(x), .ie10up { property:value; } 

or

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {    .ie10up{property:value;} } 

IE 11 (and above..)

_:-ms-fullscreen, :root .ie11up { 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

The 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 the html element:

data-useragent='Mozilla/5.0 (compatible; MSIE 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, avoid browser targeting. Identify and fix any issue(s) you identify. Support progressive enhancement and graceful degradation. With that in mind, this is an 'ideal world' scenario not always obtainable in a production environment, as such- the above should help provide some good options.

---

Attribution / Essential Reading

• Keith Clarke
• Paul Irish
• Web Devout
• The Spanner

Answer 2

You can prepend the CSS style with

:root 

to make it IE9-specific, like this:

:root #element { color:pink \0/IE9; }  /* IE9 */ 

Answer 3

Use IE conditional comments:

<!--[if ie 9]>
    your stuff here
<![endif]-->