CSS Hacks for… Everyone

Today I want to talk about CSS hacks. There is no reason to explain why, because even with the release of Internet Explorer 8 we still need to use them. It seems that we will use them forever… especially with those clients who still prefer that damned IE6.

To remember all the CSS hacks seem to be impossible so I decide to create such a list that can be of use for you too.

So, let’s start.

CSS for Internet Explorer:

/* for all versions */
.class { *color: #8abdce; }

/* for Internet Explorer 6 */
.class { _color: #8abdce; }
or
.class { -color: #8abdce; }

/* /* for Internet Explorer 7 */
*+html .class { color: #8abdce; }

/* for Internet Explorer 7 */
*:first-child+html .class { color: #8abdce; }

/* for Internet Explorer 7 */
html>body .class {
*background: #F00;
}

/* for Internet Explorer 8 */
.ie8only { color /*\**/: #fff\9 }

CSS Hacks for Opera:

@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
.style {background: #F00;}
}

html:first-child .class { color: #8abdce; }

*|html[xmlns*=””] .style {
background: #F00;
}

CSS Hacks for Firefox:

html:root .class { color: #8abdce; } /* this also works for Safari */

.class, x:-moz-any-link { color: #368EF1; }

@-moz-document url-prefix() {
.style {color: #F00;}
}

/* for FireFox 1-2 */
@-moz-document url-prefix() {
color: #F00;
}

CSS Hacks for Safari:

html[xmlns*=””] body:last-child .class { color: #368EF1; }

CSS Hacks for Safari and Google Chrome:

body:last-child:not(:root:root) .style {
color: #F00;
}

body:nth-of-type(1) p {
color: #333333;
}

Of course, hacks are evil, but sometimes they help to solve the problems.