27

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; }
TylerH
  • 20,799
  • 66
  • 75
  • 101
user632347
  • 835
  • 2
  • 9
  • 21
  • 3
    I don't have an answer for you, but you really shouldn't need ie9 specific CSS hacks. It's a compliant browser and should be written for as you would any other. – Gregg B Sep 09 '11 at 16:50
  • 2
    @Grillz :it may be a complaint browser. But we cant tell users to drop IE for this site and download and use another one for this site. – user632347 Oct 30 '11 at 05:54
  • Compliant. Adjective: Inclined to agree with others or obey rules, esp. to an excessive degree; acquiescent. What I was saying is that IE9 is the same as safari and firefox as development goes. Shouldn't need to target styles at it. The guys below have your answer though, so you should mark one accepted. – Gregg B Nov 02 '11 at 12:20
  • 4
    min-height is not supported in this compliant browser. – user1197150 Feb 08 '12 at 12:22
  • A bit late here, but @Gregg stating that IE9 is a compliant browser is a really bold statement. I'd rather fully support the TOs typo ;-) – ErnestV Aug 28 '18 at 22:21
  • Thanks @ErnestV - Once I finish my time machine I'll let 7 years-ago-Gregg know that IE9 is no longer compliant :). Despite my unnecessary snark back then I wish I hadn't had to look at the subsequent rude comments on this question. IE is truly not fun to develop for, but it was a [standards compliant browser](https://blogs.technet.microsoft.com/uktechnet/2010/11/02/internet-explorer-9-the-most-standards-compliant-browser-on-the-block-a-post-by-simon-may/). All browsers have bugs, but adding browser hacks continues to be a bad practice to this day. – Gregg B Sep 01 '18 at 15:09

7 Answers7

24

You can prepend the CSS style with

:root

to make it IE9-specific, like this:

:root #element { color:pink \0/IE9; }  /* IE9 */
Shishir Morshed
  • 797
  • 8
  • 21
simon
  • 12,666
  • 26
  • 78
  • 113
  • 4
    Just a note that while this is valid CSS it doesn't work with less.css. – mikemaccana Sep 25 '12 at 14:45
  • 1
    Also should note that the most important part is the '\0/IE9' bit. Just adding ':root' at the beginning does not make it IE9-only. Chrome, at least, still picks up ':root'-prefixed selectors. Possibly other browsers also. – Spencer Ruskin Feb 15 '13 at 17:31
  • This is not only IE9. It is also IE10 compatible. (which wasn't available when the question was asked) – Michiel Feb 28 '13 at 15:33
19

Use IE conditional comments:

<!--[if ie 9]>
    your stuff here
<![endif]-->
Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
8

\9 is a "CSS hack" specific to Internet Explorer.

This simply means that the one specific line of CSS ending with a \9;

In your example, If your CSS looked like this...

html .twit-post .delete_note a 
{ 
background-position-y: 2px\9; 

}
html .twit-post .delete_note a:hover 
{ 
 background-position-y: -14px\9;
 }

The result would be background-position-y: -14px; in IE 9

Harsh
  • 2,893
  • 29
  • 16
2

I think you can do the same as if you want to write specific code for IE6 but say IE9 instead :)

<!--[if IE 9]>
Special instructions for IE 9 here
<![endif]-->
Ahmad Hajjar
  • 1,796
  • 3
  • 18
  • 33
1

use conditional CSS: (place the code above the <head> on your html, and IE9 will read that extra CSS file)

<!--[if (gte IE 9)|!(IE)]><!-->
place the link to the CSS file here
<![endif]-->

This means the approach is with a new CSS file rather than a hack in the classes, this guarantees the CSS are valid.

jackJoe
  • 11,078
  • 8
  • 49
  • 64
0

I found that in some cases using negative values (when using a compiler to compile LESS files) using:

margin-right: -15px\9; /* This fails */
margin-right: ~"-18px\9"; /* This passes */
0xe1λ7r
  • 1,957
  • 22
  • 31
  • is it relevant to OP ask? specific css rule for IE9? – Ori Marko Jan 08 '18 at 13:08
  • @user7294900, im not sure what you mean. Could you clarify your question please :) – 0xe1λ7r Jan 08 '18 at 13:11
  • The original question is how to specify css rule for IE9, your answer is irrelevant here – Ori Marko Jan 08 '18 at 13:12
  • I found that this technique worked for me, I was trying to write styles specifically for IE9 and the project that im busy with has a is compiling LESS files. So i thought this could help someone looking to try and achieve what I was doing. – 0xe1λ7r Jan 08 '18 at 13:14
-6

You shouldn't need to target IE9. It is capable of handling modern css and shouldn't be hacked. This is an outdated method of developing.

rufus2021
  • 54
  • 6