CSS Hacks Mix and Match

Still remember the old days CSS hacks?  No problem if you don't remember, here is a super short syntax for you to review.

Different browsers will respond to the following css differently.

#content p { color:blue; }  // older browser
html>body #content p { color:red; } // modern browser
* html #content p{color:green;}  // IE6   ( star hacks )
*+html #content p { color:#bada55; } // IE7 (star+ hacks )
*:first-child + html #content p { color:pink; }  // IE7 ( star+ hacks variation )
html>body #content p { *color:black; }  // IE7 ( star attribute hacks ) 
#content p { color:blue\0/; } // IE8


Since developer nowadays are talking more about conditional statement, and those hacks are pretty much long gone.  However, is it possible to do a mix and match with old hacks and new methods, and is there any benefit of doing so??

If you use a conditional statement ( I'm not talking about the separate css files method ), you will have something like the followings,

.ielt9 .myClass {
   ...
}

.ie8 .myClass {
  ...
}

.ie7 .myClass {
  ...
}

Do you see that when using the conditional statement, you may end up having bunch of lines that look likes the above.  And through mix and match old css hacks with this modern method, you could take advantage of the benefits of conditional statement, but it could also save you more than several lines.  For example,

.ielt9 .myClass {
    color:orange;
    *color:green;
     color:red\0/;
}

The above one will target browser less than ie9, and it is also taking care of ie8, ie7 and ie6 just in one shot. So in this way, you will save at least 2 definitions by using this mix and match hacks.