Specific CSS Hacks and Avoiding Hacks

Hi friends i like to share this with you all……..
Specific CSS Hacks
/* IE6 and below */
* html #uno  { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez  { color: red  }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red  }
}
/* Safari 2 – 3.1 */
html[xmlns*=""]:root #trece  { color: red  }
/* Safari 2 – 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }
/* Everything but IE6-8 */
:root *> #quince { color: red  }
/* IE7 */
*+html #dieciocho {  color: red }
/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }
/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }
/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8, but also IE9 in some cases */

#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 — acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8, IE9 */
#anotherone  {color: blue/;} /* must go at the END of all rules */



Reference: http://paulirish.com/2009/browser-specific-css-hacks/
But we have avoid hacks sometimes so
Hacks should be avoided when we have other ways to solve these cross-browser issues.
1. Have one reset css which will take off all the browser specific settings 2. Add skin to pages which will have all common rules 3. Have rules specific to browser using class name for that (Here we need to have one JS or something else which will add the browser/version identifier to parent/main element)
Eg.
if skin is “ci-skin”, then we could add class names to body like this
“ci-skin ie ie6″/”ci-skin gecko”/”ci-skin web-kit”
then in css use like this
.ci-skin.ie.ie6 {}
.ci-skin.gecko {}
So this is somewhat good thing to have on pages rather than those hacks.