CSS hacks - quick code, without unnecessary explanation

Why i preffer hacks over separate css files for IE:

there are hacks for every browser not only IE. And even newest browsers are rendering some things differently, eg. input fields, checkboxes or table captions;
everything in one file is easier to maitenance;
smaller number of requests to server;
not every hack is "hack". Very often hack is just smart use selectors (not) supported only by specific browser;

Disadvantages:

hacks often cause css files to not valiadate;
css files are harder to compress. Hacks are often considered as invalid or repeated code and removed.

List of hacks

Below is list of CSS hacks. I don't have time to explain how it works. Just use it.

Please notice that newest hack are on top of the page and some older hack may be invalid now. Some hack are really old (for netscape 4 or opera 7) so use it wisely.

*+html hack working only in IE7

This is variant of * html hack for IE6 but this one works only in IE7.

Text will be green in IE7 and blue in other browsers.

.test { color: blue; }
*+html .test { color: green; }

TESTSUITE

(27) hack to target IE7 and below

This is modification of hack 5. Ie 7 supports child selectors but not when there is an empty comment after it.

Text will be blue in IE7 and below and green in other browsers.

.test { color: blue; }
html >/**/body .test { color: green; }

TESTSUITE

(26) hack to target IE9 only

Text will be green in Internet Explorer 9. Red in other browsers. It will not work for background or font-*.

.test{color:red;}
:root .test{color:green \ ;}

TESTSUITE

(25) hack to target IE8 and IE9 only

Text will be green in Internet Explorer 8 and 9. Red in other browsers. It will not work for background or font-*.

.test{color:red;}
.test{color:green \ ;}

TESTSUITE

(24) IE9 hack

On the web you can find hack for Internet Explorer 9 :root .test {color: green\0;}. But be careful. This declaration will work not only in IE9 but also in Opera (tested in 10.63).

You can replace \0 with other chars (see hack 17) but then it will not work for background.

Text green in Internet Explorer 9 and Opera.

.test{color:red;}
:root .test {color: green\0;}

TESTSUITE

And here is version for IE9 only:

.test{color:red;}
:root .test {color: green \0;}

TESTSUITE

(23) :-moz-any() for Firefox 4-6

in firefox 4 you can use :-moz-any() grouping selector. Inside :-moz-any() you can use simple selectors. :any() grouping element cannot contains combinators.

In firefox 4 text will be green. Red in other browsers.

p.test{color:red;}
:-moz-any(p.test}{color:green;}

TESTSUITE

(22) @media all and ... hack for IE

Text will be red in Opera7+, Firefox 3.5+, Chrome4+, IE9. Green in other browsers (also in Internet Explorer 8 but not in Internet Explorer 9).
This is old hack but few years ago it was used only for Opera 7+. Now it is used to filter IE.

.test{color:green;}
@media all and (min-width: 0px){
  .test{color:red;}
}

TESTSUITE

(21) @-moz-document hack for firefox

Text will be green in firefox>1.5 and red in other browsers.

.h21{color:red;}
@-moz-document url-prefix(){
  .h21{color:green;}
}

TESTSUITE

(20) body* (missing space) hack for IE7

In Internet Explorer 7 and below text will be red. Text will be green in other browsers.

.h20{color:green;}
body*.h20{color:red;}

TESTSUITE

(19) !important or not hack for IE7

In Internet Explorer 7 and below text will be green and red in other browsers.

.h19a{color:red; color: green !important!;}

TESTSUITE

.h19b{color:red; color:green !inIE;}

TESTSUITE

(18) \{space} hack

Text red underlined in IE < 8 and green, bold, without underline in other browsers.

div {color:green; font-weight:bold;}
div\ {color:red; text-decoration:underline;}

TESTSUITE

(17) \9 hack - Advanced

This is modification of \9 hack (No 15). I noticed that \9 can be replaced by any other not printable sign. But be carefull with \0. It differs from others.

In Internet Explorer <9 text will be pink, undelined, bold and with yellow background.

In Internet Explorer 9 text will be pink, undelined, bold without background.

In other browsers text will be blue, without underline, no bold without background.

This cannot be considered as IE9 hack because this hack doesn't work only when used for background. Also sometimes you may need to add space between value and \, eg font-size:20px \d;.

\0 works with background in IE9 but it also works in Opera (10.5) so it unsafe. \0 not works in ie6.

Attention! Using this hack with font-family can be dangerous. See second example.

p{
    color:blue;
    color: pink\9;
    text-decoration:underline\a;
    font-weight:bold\b;
    background:yellow\d;

    border:1px solid\0; /*This works in IE7, IE8, IE9, Opera 10.63).*/
}

TESTSUITE

Dangerous use with font-family:

p{font-family:"courier new"\d;} /* "Courier New" also in Chrome and Opera but not in Firefox */
p{font-family:courier new\d;} /* "Courier New" also in Firefoksie but not in  Chrome and Opera */
p{font-family:courier new, \d;} /* "Courier New" also w Firefox, Chrome i Opera */

/* bonus */
p{font-family:courier\ new;} /* "Courier New" in Firefoksie, Chrome and Opera but not in IE*/

(16) Double ID hack for IE8

Text red only in Internet Explorer 8, green in other browsers (also in IE7 or IE9).

p{color:red;}
p,#ie8#bug{color:green;}

TESTSUITE

(15) \9 hack

Text green in Internet Explorer 7 and above, red in other browsers. Remove comment to make text green also in IE6.

p{color:red; color /*\**/: green\9;}

TESTSUITE

(14) Bracket-property hacks

Hacks for goole Chrome and one for Opera. Text will be red in Google Chrome, green in other browsers.

/* will be red only in opera<10 and google chrome */
#test2{
    color:green;
    -bracket-:hack(;
        color:red;
    );
}

TESTSUITE

/* will be red only in google chrome */
#test3{
    color:green;
    (-bracket-:hack;
        color:red;
    );
}

TESTSUITE

/* will be red only in google chrome */
#test4{
    color:green;
    -bracket-:hack[;
        color:red;
    ];
}

TESTSUITE

(13) -webkit-min-device- hack for Chrome

Hack for Google Chrome. In Google Chrome text will be green and red in other browsers.

#item .element{color:green;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #item .element{color:red;}
}

TESTSUITE

(12) Invalid character in property: long list of hacks for IE7

Long list of hacks for Internet Explorer 7. All will work in this browser.

Original list was publised by Anne van Kesteren on his blog.

.ie7_hacks{
  `background:red;
  ~background:red;
  !background:red;
  @background:red;
  #background:red;
  $background:red;
  %background:red;
  ^background:red;
  &background:red;
  *background:red;
  (background:red;
  )background:red;
  =background:red;
  +background:red;
  [background:red;
  ]background:red;
  {background:red;
  |background:red;
  ,background:red;
  <background:red;
  .background:red;
  >background:red;
  /background:red;
  ?background:red;
}

(11) Asterisk hack

In IE5, IE6, IE7(!) text will be blue, green in other browsers.

body{
  color: green;
  * color: blue;
}

TESTSUITE

(10) value comment hack for IE5

In IE5.x/WIN (don't know if works for Mac) text will be red, blue in other browsers:

.menu{
  width: red;
  width: /**/blue;
}

(9) Comments mess for IE5-Mac

Text will be green in Internet Explorer 5 for Mac. Red in other browsers.

p{color: green;}
/*hack for ie5\*/
p{color: red;}
/* end */

(8) * html hack for IE6

Text will be red in Internet Explorer 6, green in other browsers.

IE6 thinks that html element has parent. For other browsers html is root element so * html is invalid.

p{color: green;}
* html p{color: red;}

TESTSUITE

(7) underscore hack

Will work only in IE5.5, IE6:

Text will be red in Internet Explorer 5.5 and Internet Explorer 6, blue in other browsers.

.example{
  color: blue;
  _color: red;
}

(6) backslash in property hack for IE5.x

Those style wouldn't work in IE 5.x (Attention: those will work if backslash is first sign, eg: \width: 300px; will work):

.example{
  back\ground: red;
}
.example{
  font\t: bold 15px arial;
}
.example{
  bord\er: 1px solid red;
}

(5) html>body hack for IE6

IE6 doesn't support child selectors (">"), so text will be red in IE6 and green in other browsers.

p{color: red;}
div#mydiv{color: red;}
html>body p {background-color: green;}
html>body div#myDiv{background-color: green;}

TESTSUITE

(4) @media min-width

This hack worked in Opera7+ but now it is supported by all browsers except for IE, so i moved this hack up. See hack 22.

(3) Tanhack. for older browsers and Operas < 8

Will not work in older browsers (Netscape 4) and Opera below version 8.

body{
  background-color: green;
  voice-family: "\"}\"";
  voice-family: inherit;
  background-color: red;
}

(2) !important support hack

In IE 5, 6, 7.0beta2(earlier versions) text will be green, red in other browsers.

.example{
  color: red !important;
  color: green;
}

(1) Multihack

Multihack sets red color for ie, blue for gecko (Firefox), pink for Opera > 8.5:

/*ie*/
#example{
  color: red;
}
/*firefox(gecko)*/
body:not([foobar]) #example{
  color: blue;
}
/*opera > v8.5*/
@media all and (min-height:0px;){
  body #example{
  color: pink;
  }
}

Conditional Comments in Internet Explorer

I don't know if this can be considered as "hacks" but I here is code:

<!--[if IE]>
Here goes code for IE only
<![endif]-->

Possible syntax (you can change version number):

[if IE 6]   - kod tylko dla IE6
[if IE 5.5]   - kod tylko dla IE5.5
[if gte IE 5]   - kod dla IE5 i wyższych
[if gt IE 5]   - kod dla wyższych niż IE5
[if lte IE 5]   - kod dla IE5 lub niższych
[if lt IE5]   - kod dla niższych niż IE5
[!IE 7]   - kod dla każdej wersji oprócz IE7

Code for all browsers except for IE:

<!--[if !IE]>< -->
kod nie dla IE
<!-- ><![endif]-->

[[http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp|Microsoft o komatarzach warunkowych].