Browser hacks using css selectors and queries

browser-hacks.css

/***** Selector though hack ******/

/* Only for IE6 and below */
* html div { color: gray }


/* Only for IE7 */
*:first-child+html div { color: gray }


/* Only for IE7, FF, Saf, Opera  */
html>body div { color: gray }


/* Only for IE8, FF, Saf, Opera (Everything but not IE 6,7) */
html>/**/body div  { color: gray }


/* Only for Opera 9.27 and below, safari 2 */
html:first-child div { color: gray }


/* Only for Safari 2-3 */
html[xmlns*=""] body:last-child div { color: gray }


/* Only for safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) div { color: gray }


/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type div {  color: gray }


/* Only for saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 div  { color: gray }
}

/* Only for iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 div { color: gray }
}


/* Only for Safari 2 - 3.1 */
html[xmlns*=""]:root div  { color: gray }


/* Only for Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] div { color: gray }


/* Everything but not IE6, IE7, IE8 */
:root *> div { color: gray }


/* Only for IE7 */
*+html div {  color: gray }


/* Only for Firefox only. 1+ */
div,  x:-moz-any-link  { color: gray }


/* Only for Firefox 3.0+ */
div,  x:-moz-any-link, x:default  { color: gray }




/***** Attribute though hack ******/


/* Only for IE6 */
div { _color: blue }


/* Only for IE6, IE7 */
div { *color: blue; /* or #color: blue */ }


/* Everything but not for IE6 */
div { color/**/: blue }


/* Only for IE6, IE7, IE8 */
div { color: blue\9; }


/* Only for IE7, IE8 */
div { color/*\**/: blue\9; }


/* Onl y forIE6, IE7  */
div { color: blue !ie; }